/* Light-green canvas with trophy and pen artwork in the opening animation. */
body.foundation-opening-active { overflow: hidden; }
body.foundation-opening-active :is(#ypippi-bot, #ypippi-tour) { display: none !important; }
.foundation-opening[hidden] { display: none !important; }
.foundation-opening {
    position: fixed;
    z-index: 1000000;
    inset: 0;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    background: #f4faef;
    color: #5a963f;
    overscroll-behavior: contain;
    transition: opacity .5s ease, visibility .5s;
}
.foundation-opening.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.foundation-opening__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.foundation-opening__symbol { position: absolute; top: 50%; left: 50%; width: 250px; height: 190px; opacity: 0; will-change: transform, opacity; }
.foundation-opening__symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.foundation-opening__symbol--trophy { animation: foundation-trophy 2.05s cubic-bezier(.45, .05, .35, 1) both; }
.foundation-opening__symbol--pen { width: 210px; height: 170px; animation: foundation-pen 2.05s .08s cubic-bezier(.45, .05, .35, 1) both; }
.foundation-opening__particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 18px;
    border-radius: 65% 35% 60% 40%;
    background: var(--ink);
    opacity: 0;
    animation: foundation-particle 1.5s var(--delay) cubic-bezier(.25, .7, .3, 1) both;
}
.foundation-opening__particle:nth-of-type(even) { width: 8px; height: 10px; }
.foundation-opening__drop { position: absolute; top: 50%; left: 50%; width: 28px; height: 49px; opacity: 0; animation: foundation-drop .8s 1.7s both; }
.foundation-opening__copy { position: relative; padding: 24px; margin-top: -3vh; max-width: 100%; text-align: center; }
.foundation-opening__title { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-family: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-weight: 700; line-height: 1.02; }
.foundation-opening__welcome { display: block; margin-bottom: 12px; color: #3f7135; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(14px, 1.6vw, 20px); font-weight: 800; line-height: 1.7; letter-spacing: .28em; padding-left: .28em; opacity: 0; animation: foundation-welcome .65s 2.05s both; }
.foundation-opening__name,
.foundation-opening__city {
    display: block;
    padding: 4px 12px 10px;
    background: linear-gradient(90deg, #d9efb2 0%, #d9efb2 12%, #a7d882 32%, #89c766 52%, #5a963f 76%, #5a963f 100%);
    background-size: 600% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #5a963f;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.035em;
    opacity: 0;
    transform-origin: 50% 70%;
    animation: foundation-title-pop .95s 2.15s both, foundation-color-settle 1.1s 2.45s both;
}
.foundation-opening__name { font-size: clamp(60px, 10vw, 132px); }
.foundation-opening__city { margin-top: -6px; font-size: clamp(43px, 7.2vw, 94px); letter-spacing: -.025em; animation-delay: 2.3s, 2.55s; }
.foundation-opening__destination { margin: 24px 0 0; color: #58764a; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(14px, 1.3vw, 17px); font-weight: 500; line-height: 1.8; opacity: 0; animation: foundation-welcome .65s 2.85s both; }
.foundation-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: 22px; min-height: 46px; padding: 10px 18px; border: 1px solid #d9e9ce; border-radius: 999px; background: #f4faef; color: #46673b; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.6; cursor: pointer; touch-action: manipulation; }
.foundation-opening__skip span { font-size: 20px; }
.foundation-opening__skip:hover { border-color: #a8cf8e; background: #eaf5df; }
.foundation-opening__skip:focus-visible { outline: 3px solid #5a963f; outline-offset: 4px; }

@keyframes foundation-trophy {
    0% { opacity: 0; transform: translate(-40%, -85%) rotate(-14deg) scale(.05); }
    13% { opacity: 1; transform: translate(-3%, -100%) rotate(-8deg) scale(.66); }
    35% { opacity: 1; transform: translate(-90%, -65%) rotate(9deg) scale(.82); }
    53% { opacity: 1; transform: translate(-110%, -50%) rotate(-6deg) scale(.8); }
    75% { opacity: .9; transform: translate(-30%, -70%) rotate(12deg) scale(.34); }
    94%, 100% { opacity: 0; transform: translate(-50%, -40%) rotate(20deg) scale(.02); }
}
@keyframes foundation-pen {
    0% { opacity: 0; transform: translate(-90%, -35%) rotate(15deg) scale(.1); }
    16% { opacity: 1; transform: translate(-80%, -30%) rotate(-10deg) scale(.5); }
    38% { opacity: 1; transform: translate(4%, -4%) rotate(8deg) scale(.76); }
    58% { opacity: 1; transform: translate(-10%, -26%) rotate(-8deg) scale(.8); }
    78% { opacity: .85; transform: translate(-95%, -70%) rotate(12deg) scale(.24); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(.02); }
}
@keyframes foundation-particle {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
    20% { opacity: 1; }
    48% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--turn)) scale(1); }
    80% { opacity: .9; transform: translate(calc(-50% + var(--x) * .36), calc(-50% + var(--y) * .36)) rotate(var(--turn)) scale(.6); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(.01); }
}
@keyframes foundation-drop {
    0% { opacity: 0; transform: translate(-50%, -175%) scale(.5); }
    25% { opacity: 1; transform: translate(-50%, -140%) scale(.75, 1.2); }
    65% { opacity: 1; transform: translate(-50%, -85%) scale(1.05, .85); }
    100% { opacity: 0; transform: translate(-50%, -30%) scale(.05); }
}
@keyframes foundation-welcome {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes foundation-title-pop {
    0% { opacity: 0; transform: translateY(18px) scale(.15, .3) rotate(-5deg); }
    42% { opacity: 1; transform: translateY(-6px) scale(1.08, .94) rotate(1deg); }
    66% { opacity: 1; transform: translateY(1px) scale(.98, 1.03) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes foundation-color-settle {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@media (max-width: 600px) {
    .foundation-opening__art { transform: scale(.8); }
    .foundation-opening__symbol { width: 200px; height: 150px; }
    .foundation-opening__symbol--pen { width: 175px; height: 140px; }
    .foundation-opening__copy { padding-inline: 20px; }
    .foundation-opening__welcome { font-size: 14px; letter-spacing: .2em; padding-left: .2em; }
    .foundation-opening__name { font-size: clamp(56px, 15.5vw, 88px); }
    .foundation-opening__city { font-size: clamp(40px, 11vw, 64px); }
    .foundation-opening__destination { margin-top: 20px; font-size: 14px; }
    .foundation-opening__skip { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .foundation-opening__copy { padding-bottom: 40px; }
    .foundation-opening__welcome { font-size: 12px; margin-bottom: 2px; }
    .foundation-opening__name { font-size: 64px; }
    .foundation-opening__city { font-size: 44px; }
    .foundation-opening__destination { margin-top: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .foundation-opening { display: none; transition: none; }
    .foundation-opening * { animation: none !important; }
}
@media print { .foundation-opening { display: none; } }