/* ---------- Intro ---------- */
#intro{position:fixed;inset:0;z-index:50;overflow:hidden;outline:none}
.door{position:absolute;top:0;height:100%;width:50%;overflow:hidden;will-change:transform}
.door-left{left:0}
.door-right{right:0}
.door-art{position:absolute;inset:0;transform:scale(1.03)}
.door-left .door-art{transform-origin:100% 50%}
.door-right .door-art{transform-origin:0 50%}
.door-art svg{display:block;width:100%;height:100%}
.door-edge{position:absolute;top:0;bottom:0;width:16px;pointer-events:none}
.door-left .door-edge{right:0;background:linear-gradient(90deg,rgba(40,18,60,0),rgba(40,18,60,.22) 55%,rgba(255,222,232,.55) 82%,rgba(96,44,78,.6))}
.door-right .door-edge{left:0;background:linear-gradient(270deg,rgba(40,18,60,0),rgba(40,18,60,.22) 55%,rgba(255,222,232,.55) 82%,rgba(96,44,78,.6))}
.title-word{position:absolute;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(40px,7vw,124px);line-height:1;white-space:nowrap;color:var(--mauve);letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(90,30,70,.22),0 8px 26px rgba(90,30,80,.28);transform:translateY(-50%);pointer-events:none;user-select:none}
.door-left .title-word{top:46%;right:calc(var(--lock-w)*.62 + 1.6vw)}
.door-right .title-word{top:56%;left:calc(var(--lock-w)*.62 + 1.6vw)}

#lockBtn{position:absolute;left:50%;top:50%;width:var(--lock-w);height:calc(var(--lock-w)*1.3);transform:translate(-50%,-55%);
  background:none;border:0;cursor:pointer;z-index:5;-webkit-tap-highlight-color:transparent;border-radius:28px}
#lockBtn:focus-visible{outline:2px solid #fff;outline-offset:10px}
.lock-bob{position:absolute;inset:0;animation:bob 3.2s ease-in-out infinite}
.lock-halo{position:absolute;left:50%;top:62%;width:280%;height:230%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,240,248,.8),rgba(255,196,228,.38) 45%,rgba(255,196,228,0));animation:halo 3.2s ease-in-out infinite}
#lockBtn:hover .lock-halo{filter:brightness(1.25)}
#lockSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 18px rgba(60,20,60,.45))}
.key-wrap{position:absolute;left:calc(var(--lock-w)*.275);top:calc(var(--lock-w)*-.32);width:calc(var(--lock-w)*.45);height:calc(var(--lock-w)*1.25);
  transform-origin:50% 96%;opacity:0;pointer-events:none}
#keySvg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 10px rgba(40,20,50,.45))}
.hint{position:absolute;left:50%;top:calc(50% + var(--lock-w)*.78);transform:translateX(-50%);z-index:4;white-space:nowrap;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(18px,1.7vw,24px);letter-spacing:.05em;color:#4f2152;
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 0 18px rgba(255,235,245,.9);animation:hint 2.6s ease-in-out infinite;pointer-events:none}
.age{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,560px);z-index:4;
  text-align:center;font-size:13px;line-height:1.45;color:#fff;background:rgba(27,28,70,.62);padding:8px 14px;border-radius:12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);pointer-events:none}
.age p{margin:0}
.age-legal{display:inline-block;margin-top:2px;padding:3px 8px;min-height:24px;border-radius:8px;pointer-events:auto;
  font-size:12px;font-weight:700;color:#f6cfe1;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(246,207,225,.55)}
.age-legal:hover{color:#fff;text-decoration-color:#fff}
.age-legal:focus-visible{outline:2px solid #fff;outline-offset:2px}
.corner{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;gap:8px;z-index:7}
.corner button{background:rgba(30,18,55,.55);border:1px solid rgba(255,220,240,.4);border-radius:999px;padding:11px 16px;min-height:44px;font-size:13px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.corner button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.seam-light{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);opacity:0;z-index:3;pointer-events:none;
  background:linear-gradient(transparent,#fff 18%,#ffe0f2 50%,#fff 82%,transparent);
  box-shadow:0 0 10px 3px #fff,0 0 26px 9px rgba(255,120,200,.9),0 0 120px 40px rgba(240,110,200,.5)}
.beam{position:absolute;left:50%;top:0;bottom:0;width:0;transform:translateX(-50%);opacity:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,170,215,0),rgba(255,190,225,.28) 30%,rgba(255,236,246,.55) 50%,rgba(255,190,225,.28) 70%,rgba(255,170,215,0))}
.flash{position:absolute;inset:0;opacity:0;z-index:6;pointer-events:none;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,255,255,.95),rgba(255,214,240,.55) 18%,rgba(255,200,235,0) 55%)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* SVG art animation */
.tw{animation:twinkle 3.4s ease-in-out infinite}
.wing-l{transform-box:fill-box;transform-origin:100% 55%;animation:flap 3s ease-in-out infinite}
.wing-r{transform-box:fill-box;transform-origin:0% 55%;animation:flap 3s ease-in-out infinite}
.fly .wing-l,.fly .wing-r{animation:flapFast .42s ease-in-out infinite}
.drift{animation:drift 7s ease-in-out infinite}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes halo{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes hint{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes flap{0%,62%,100%{transform:scaleX(1)}70%{transform:scaleX(.4)}78%{transform:scaleX(1)}86%{transform:scaleX(.55)}94%{transform:scaleX(1)}}
@keyframes flapFast{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(14px,-18px)}66%{transform:translate(-10px,-6px)}}

@media (max-aspect-ratio:4/5){
  :root{--lock-w:clamp(104px,30vw,170px)}
  .title-word{font-size:clamp(34px,11vw,72px)}
  .title-word{color:#f8d9e8;text-shadow:0 2px 14px rgba(30,15,60,.85),0 0 2px rgba(60,20,70,.6)}
  .door-left .title-word{top:24%;right:2.5vw}
  .door-right .title-word{top:30%;left:2.5vw}
}
@media (prefers-reduced-motion:reduce){
  .lock-bob,.lock-halo,.hint,.tw,.wing-l,.wing-r,.fly .wing-l,.fly .wing-r,.drift{animation:none}
}