/* Opening gate */
#gate{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:20px;overflow:hidden;cursor:pointer;color:#fff9e9;
  background:radial-gradient(circle at 50% 22%,#367c52 0,#1c6245 44%,#123f32 100%);
  transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .9s,visibility .9s}
#gate.open{transform:scale(1.6);opacity:0;pointer-events:none;visibility:hidden}
#gate .confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#gate .confetti i{position:absolute;left:var(--x);top:-24px;width:10px;height:17px;border-radius:3px;background:#ffdb70;transform:rotate(var(--rot));animation:cf 4.2s linear var(--delay) infinite}
#gate .confetti i:nth-child(3n){background:#ff8d76;width:8px;height:13px;border-radius:50%}
#gate .confetti i:nth-child(3n+1){background:#d5ef83}
#gate .confetti i:nth-child(4n){background:#fff5d8;width:7px;height:11px}
.introbox{text-align:center;color:#fff9e9;max-width:380px;position:relative;z-index:2}
.friends{display:flex;justify-content:center;gap:14px;font-size:34px;margin-bottom:8px}
.friends span{display:inline-block;animation:fb 1.7s ease-in-out infinite}
.friends span:nth-child(2){animation-delay:.2s}
.friends span:nth-child(3){animation-delay:.4s}
.friends span:nth-child(4){animation-delay:.6s}
.envelope{font-size:82px;display:block;animation:eb 1.5s ease-in-out infinite;filter:drop-shadow(0 9px 0 #092e2480)}
.introbox h1{font-size:clamp(30px,8vw,44px);line-height:1.05;color:#ffdf86;margin:10px 0 8px;text-shadow:0 3px 0 #6b3a1a}
.introbox p{line-height:1.55;color:#e7f2d8;margin:12px auto 16px;max-width:320px}
.openbtn{background:linear-gradient(135deg,#ffb16e,#ff806f);color:#4b251c;border:0;margin:8px auto 0;padding:16px 24px;border-radius:999px;box-shadow:0 6px 0 #a94e40,0 12px 25px #071e1760;font:inherit;font-size:16px;font-weight:900;animation:bp 2s ease-in-out infinite;min-height:48px}

/* Floating decoration */
.f{position:absolute;bottom:-60px;font-size:24px;opacity:.7;animation:rise linear forwards}

/* Animal interaction */
.hot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:30%;z-index:3;touch-action:manipulation}
.hot:focus-visible{outline:3px dashed #fff;outline-offset:-4px}
.hot[aria-pressed="true"]{cursor:default}
.eye-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.eye-closed{opacity:1;transform-box:fill-box;transform-origin:center;transition:opacity .28s ease,transform .28s ease}
.eye-closed.awake{opacity:0;transform:scaleY(.15)}
.eye-patch{stroke:none}
.eye-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}
.pulse{position:absolute;width:34px;height:34px;border-radius:50%;background:#ffffffcc;display:grid;place-items:center;font-size:18px;pointer-events:none;animation:pu 1.8s infinite;box-shadow:0 0 0 0 #fff}
.pop{position:absolute;z-index:5;pointer-events:none;background:#fff;border:3px solid var(--bark);border-radius:18px;padding:6px 12px;font-weight:800;font-size:17px;white-space:nowrap;transform:translate(-50%,-100%);animation:pp 1.3s forwards}
.card.wig{animation:wig .5s}

/* Poster signs */
.sign{position:absolute;top:87.2%;height:7.6%;display:flex;align-items:center;justify-content:center;gap:1.6cqw;padding:0 1.5cqw;border-radius:5cqw;border:.7cqw solid #a8672f;
  background:linear-gradient(#f8dca4,#e6b574);color:#5b2f12;font:800 13px/1.15 "Trebuchet MS",system-ui,sans-serif;font-size:3.4cqw;text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 .9cqw 0 #8a4f22,0 1.8cqw 2.6cqw #0004;transition:transform .12s,box-shadow .12s,filter .15s}
.sign:hover{filter:brightness(1.06)}
.sign:active{transform:translateY(.7cqw) scale(.98);box-shadow:0 .2cqw 0 #8a4f22}
.sign:focus-visible{outline:4px solid #164e3d;outline-offset:2px}
.sign.r{left:3%;width:46.5%}
.sign.m{left:50.5%;width:46.5%}
.sign .ic{flex:none;width:8cqw;height:8cqw;display:block;border-radius:22%}
.sign .tx{text-wrap:balance}

/* Reveal on scroll */
.has-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.has-js .reveal.in{opacity:1;transform:none}
.has-js .hero.reveal{opacity:1;transform:none}

@keyframes wig{20%{transform:rotate(-1.4deg) scale(1.01)}50%{transform:rotate(1.4deg) scale(1.01)}80%{transform:rotate(-.6deg)}}
@keyframes rise{to{transform:translateY(-115vh) translateX(var(--dx)) rotate(var(--r));opacity:0}}
@keyframes bob{50%{transform:translateY(-14px) rotate(4deg)}}
@keyframes fb{50%{transform:translateY(-8px)}}
@keyframes bp{50%{transform:scale(1.035)}}
@keyframes eb{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-13px) rotate(5deg)}}
@keyframes cf{0%{transform:translateY(-10vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(115vh) rotate(720deg);opacity:.85}}
@keyframes pu{70%{box-shadow:0 0 0 14px #fff0}100%{box-shadow:0 0 0 0 #fff0}}
@keyframes pp{0%{transform:translate(-50%,-60%) scale(0)}20%{transform:translate(-50%,-110%) scale(1.15)}30%{transform:translate(-50%,-100%) scale(1)}85%{opacity:1}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
@keyframes jig{0%,90%,100%{transform:none}93%{transform:rotate(-2deg) scale(1.03)}96%{transform:rotate(2deg) scale(1.03)}}
@keyframes tick{50%{transform:scale(1.25)}}
@keyframes foundPop{from{transform:scale(.65);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dialogIn{from{transform:scale(.92) translateY(10px);opacity:0}}
@keyframes leafSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .has-js .reveal{opacity:1!important;transform:none!important}
  #gate .confetti,#fx{display:none}
  .friends span,.envelope,.openbtn,.pulse{animation:none!important}
}

@media(max-width:620px){
  .sign{top:auto;bottom:3%;height:44px;min-height:44px;font-size:max(12px,4.5cqw)}
}