/* Kinetic ribbons, a word strip, and ascending blocks inspired by the reference. */
body.smk-opening-active { overflow: hidden; }
body.smk-opening-active :is(#ypippi-bot, #ypippi-tour) { display: none !important; }
.smk-opening[hidden] { display: none !important; }
.smk-opening {
    --opening-paper: #f4faef;
    --opening-ink: #203f32;
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--opening-paper);
    color: var(--opening-ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    overscroll-behavior: contain;
    transition: opacity .5s ease, visibility .5s;
}
.smk-opening.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.smk-opening__waves { position: absolute; inset: 0; overflow: hidden; animation: smk-waves-away .3s 1.8s both; }
.smk-opening__ribbon {
    position: absolute;
    inset: -30% -25%;
    display: grid;
    place-items: center;
    padding: 12vw;
    border-radius: 0 0 48% 14%;
    background: var(--panel);
    color: var(--letter);
    font-size: clamp(48px, 10.5vw, 172px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.065em;
    white-space: nowrap;
    transform-origin: 65% 50%;
    animation: smk-ribbon-sweep 1.35s calc(var(--i) * .28s) cubic-bezier(.65, 0, .25, 1) both;
}
.smk-opening__strip {
    position: absolute;
    display: flex;
    align-items: stretch;
    width: min(1120px, 92vw);
    min-height: clamp(52px, 7.5vw, 110px);
    transform-origin: center;
    animation: smk-strip 1.15s 1.75s cubic-bezier(.45, 0, .2, 1) both;
}
.smk-opening__strip span {
    display: grid;
    place-items: center;
    flex: 1;
    padding: .45em .4em;
    background: #203f32;
    color: #f4faef;
    font-size: clamp(12px, 2.5vw, 38px);
    font-weight: 600;
    letter-spacing: -.05em;
    white-space: nowrap;
}
.smk-opening__strip span:first-child { flex: 1.5; }
.smk-opening__strip span:nth-child(2) { flex: .55; background: #d9efb2; color: #203f32; }
.smk-opening__strip span:nth-child(3) { background: #89c766; color: #203f32; }
.smk-opening__strip span:nth-child(4) { background: #b9dba7; color: #203f32; }
.smk-opening__strip span:nth-child(5) { background: #397765; }
.smk-opening__steps {
    position: absolute;
    display: flex;
    align-items: end;
    width: min(640px, 76vw);
    height: clamp(110px, 21vw, 240px);
    animation: smk-steps-away .32s 3.05s both;
}
.smk-opening__steps span {
    flex: 1;
    height: var(--height);
    background: var(--panel);
    transform-origin: bottom;
    animation: smk-step-rise .48s calc(2.55s + var(--i) * .055s) cubic-bezier(.2, .8, .3, 1) both;
}
.smk-opening__identity {
    position: relative;
    width: 100%;
    padding: 32px 24px 48px;
    text-align: center;
    animation: smk-identity .72s 3.15s cubic-bezier(.2, .75, .25, 1) both;
}
.smk-opening__welcome { display: block; margin-bottom: 28px; font-size: clamp(16px, 1.65vw, 24px); font-weight: 700; letter-spacing: .24em; padding-left: .24em; }
.smk-opening__title { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; line-height: 1; letter-spacing: -.065em; }
.smk-opening__title > span { font-size: clamp(34px, 6.6vw, 100px); font-weight: 700; }
.smk-opening__title > strong { display: block; color: #397765; font-size: clamp(72px, 15vw, 226px); font-weight: 800; line-height: .95; }
.smk-opening__motto { margin: 34px 0 0; color: #4e6d42; font-size: clamp(17px, 1.7vw, 24px); font-weight: 500; line-height: 1.6; }
.smk-opening__skip {
    position: absolute;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-height: 48px;
    padding: 10px 20px;
    border: 1px solid #c2d6b9;
    border-radius: 999px;
    background: #f4faef;
    color: #203f32;
    font: 600 16px/1.5 "Plus Jakarta Sans", sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}
.smk-opening__skip span { font-size: 23px; line-height: 1; }
.smk-opening__skip:hover { background: #e4f1d8; }
.smk-opening__skip:focus-visible { outline: 3px solid #397765; outline-offset: 4px; }
.smk-opening__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes smk-ribbon-sweep {
    0% { transform: translate3d(0, 110%, 0) rotate(-18deg) scale(1.1); }
    25% { transform: translate3d(0, 2%, 0) rotate(-9deg) scale(1); }
    62% { transform: translate3d(0, -10%, 0) rotate(3deg) scale(1); }
    100% { transform: translate3d(0, -130%, 0) rotate(14deg) scale(.9); }
}
@keyframes smk-waves-away { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes smk-strip {
    0% { opacity: 0; transform: translateY(50px) rotate(-7deg) scale(1.45); }
    30% { opacity: 1; transform: translateY(0) rotate(2deg) scale(1.02); }
    65% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
    100% { opacity: 0; transform: translateY(-10px) rotate(0) scale(.6, .4); }
}
@keyframes smk-step-rise { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes smk-steps-away { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.75, .1); visibility: hidden; } }
@keyframes smk-identity {
    0% { opacity: 0; transform: translateY(30px) scale(.72); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .smk-opening__ribbon { font-size: clamp(42px, 11vw, 66px); }
    .smk-opening__identity { padding-inline: 18px; }
    .smk-opening__welcome { margin-bottom: 24px; font-size: 16px; }
    .smk-opening__title { gap: 14px; }
    .smk-opening__title > span { font-size: clamp(28px, 7.2vw, 43px); }
    .smk-opening__title > strong { font-size: clamp(64px, 17vw, 102px); }
    .smk-opening__motto { max-width: 300px; margin: 28px auto 0; font-size: 18px; }
    .smk-opening__skip { right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .smk-opening__identity { padding: 16px 24px 52px; }
    .smk-opening__welcome { margin-bottom: 12px; font-size: 14px; }
    .smk-opening__title { gap: 8px; }
    .smk-opening__title > span { font-size: min(7vw, 10vh); }
    .smk-opening__title > strong { font-size: min(14vw, 23vh); }
    .smk-opening__motto { margin-top: 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .smk-opening { display: none; transition: none; }
    .smk-opening * { animation: none !important; }
}
@media print { .smk-opening { display: none; } }