/* Homepage: "Choose your way in" — four glass objects that float, tilt and react.
   Everything is prefixed wy- so it can't clash with the rest of the site. */
.wy{--room:#E1D1F7;--room-hi:#EDE3FA;--ink:#17121F;--muted:#3A3346;--lav:#B98AF0;
  --green:#5BD22F;--pink:#FF5CC4;--purple:#A15CFF;--blue:#39A8FF;
  background:radial-gradient(ellipse 75% 55% at 50% 45%,var(--room-hi),var(--room) 72%);color:var(--ink);overflow:hidden}
.wy-in{max-width:1240px;margin:0 auto;padding:96px 24px 104px}
.wy-head{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.wy-head h2{margin:0;font-family:'Inter Tight','DM Sans',sans-serif;font-weight:800;letter-spacing:-.035em;font-size:clamp(40px,5.5vw,76px);line-height:1;text-wrap:balance}
.wy-ring{position:relative;display:inline-block;padding:0 .12em}
.wy-ring::after{content:"";position:absolute;inset:-.06em -.08em -.02em;border:3px solid var(--lav);border-radius:50%;transform:rotate(-3deg)}
.wy-lede{margin:0;font-size:18px;line-height:1.55;color:var(--muted);max-width:34em}

.wy-row{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.wy-door{display:flex;flex-direction:column;gap:14px;min-width:0;--rx:0deg;--ry:0deg}
.wy-stage{position:relative;display:block;width:100%;aspect-ratio:1/1.12;border:0;padding:0;background:none;cursor:pointer;border-radius:24px;perspective:900px}
.wy-stage:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.wy-stage>span{display:block}

.wy-float{position:absolute;inset:0;animation:wy-float 6s ease-in-out infinite}
@keyframes wy-float{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-10px) rotate(.8deg)}}
.wy-play .wy-float{animation:wy-sway 5.5s ease-in-out infinite}
@keyframes wy-sway{0%,100%{transform:translateY(0) rotateY(-14deg) rotate(-1.5deg)}50%{transform:translateY(-14px) rotateY(14deg) rotate(1.5deg)}}
.wy-brain .wy-float{animation:wy-breathe 4.2s ease-in-out infinite;animation-delay:-1s}
@keyframes wy-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.045)}}
.wy-mirror .wy-float{animation:wy-swing 5s ease-in-out infinite;animation-delay:-2s;transform-origin:50% 8%}
@keyframes wy-swing{0%,100%{transform:rotate(-3.5deg) translateY(0)}50%{transform:rotate(3.5deg) translateY(-9px)}}
.wy-mic .wy-float{animation:wy-groove 3.6s ease-in-out infinite;animation-delay:-.6s}
@keyframes wy-groove{0%,100%{transform:translateY(0) rotateY(-10deg)}25%{transform:translateY(-13px) rotateY(0) rotate(1deg)}50%{transform:translateY(-3px) rotateY(10deg)}75%{transform:translateY(-13px) rotateY(0) rotate(-1deg)}}

.wy-tilt{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out,filter .35s;transform-style:preserve-3d}
.wy-stage:hover .wy-tilt{filter:saturate(1.15) brightness(1.04)}
.wy-act{position:absolute;inset:2% 4% 13%;transform-origin:50% 92%}
.wy-obj,.wy-shine{position:absolute;inset:0;background:var(--img) center/contain no-repeat}
.wy-shine{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,rgba(255,255,255,.2) 54%,transparent 62%) 0 0/300% 100% no-repeat;
  -webkit-mask:var(--img) center/contain no-repeat;mask:var(--img) center/contain no-repeat;mix-blend-mode:soft-light;
  background-position:120% 0;animation:wy-sweep 7s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*1.6s)}
@keyframes wy-sweep{0%,72%{background-position:120% 0}100%{background-position:-20% 0}}
.wy-stage:hover .wy-shine{animation:wy-sweep-now 1.1s ease-out}
@keyframes wy-sweep-now{from{background-position:120% 0}to{background-position:-20% 0}}

.wy-shadow{position:absolute;left:26%;right:26%;bottom:6%;height:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,30,110,.28),transparent);animation:wy-shade 6s ease-in-out infinite}
@keyframes wy-shade{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.75}}
.wy-caustic{position:absolute;left:10%;right:10%;bottom:2%;height:16%;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.45;mix-blend-mode:screen;filter:blur(6px);animation:wy-flicker 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
@keyframes wy-flicker{0%,100%{opacity:.35;transform:scale(1)}40%{opacity:.6;transform:scale(1.07)}70%{opacity:.42;transform:scale(.96)}}
.wy-spark{position:absolute;width:var(--s,18px);aspect-ratio:1;opacity:0;animation:wy-twinkle 3.2s ease-in-out infinite}
.wy-spark svg{width:100%;height:100%;display:block}
@keyframes wy-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}60%{opacity:.9}}

/* a gentle lift when the pointer arrives */
.wy-door.wy-boing .wy-act{animation:wy-boing .6s ease-out}
@keyframes wy-boing{0%{transform:translateY(0)}35%{transform:translateY(-8px) scale(1.012)}70%{transform:translateY(1px)}100%{transform:none}}
/* click reactions */
.wy-play.wy-go .wy-act{animation:wy-spin 1s cubic-bezier(.45,.05,.2,1)}
@keyframes wy-spin{0%{transform:rotateY(0) translateY(0)}45%{transform:rotateY(200deg) translateY(-18px)}100%{transform:rotateY(360deg) translateY(0)}}
.wy-brain.wy-go .wy-act{animation:wy-jelly .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes wy-jelly{0%{transform:scale(1,1)}20%{transform:scale(1.1,.9)}40%{transform:scale(.94,1.07)}60%{transform:scale(1.04,.97)}80%{transform:scale(.99,1.01)}100%{transform:scale(1,1)}}
.wy-mirror.wy-go .wy-act{animation:wy-lean .8s ease-out}
@keyframes wy-lean{0%{transform:rotateY(0)}35%{transform:rotateY(-24deg) scale(1.04)}100%{transform:rotateY(0)}}
.wy-mic.wy-go .wy-act{animation:wy-hop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes wy-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) scale(1.03)}}

.wy-words{position:absolute;left:50%;top:39%;width:26%;transform:translate(-50%,-50%) scale(.92);text-align:center;font-family:'Abril Fatface',Georgia,serif;color:#FFFFFF;
  font-size:clamp(11px,1.15vw,16px);line-height:1.08;opacity:0;transition:opacity .6s,transform .6s;text-shadow:0 0 14px rgba(120,40,220,.9),0 0 3px rgba(90,20,180,.8)}
.wy-mirror .wy-stage:hover .wy-words,.wy-mirror.wy-lit .wy-words{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wy-ring-out{position:absolute;left:50%;top:29%;width:30%;aspect-ratio:1;border-radius:50%;border:3px solid var(--c);transform:translate(-50%,-50%) scale(.6);opacity:0}
.wy-mic .wy-stage:hover .wy-ring-out{animation:wy-ring 1.6s ease-out infinite}
.wy-mic .wy-stage:hover .wy-ring-out:nth-of-type(2){animation-delay:.53s}.wy-mic .wy-stage:hover .wy-ring-out:nth-of-type(3){animation-delay:1.06s}
.wy-mic.wy-go .wy-ring-out{animation:wy-ring .9s ease-out 2!important}
.wy-mic.wy-go .wy-ring-out:nth-of-type(2){animation-delay:.2s!important}.wy-mic.wy-go .wy-ring-out:nth-of-type(3){animation-delay:.4s!important}
@keyframes wy-ring{0%{opacity:.85;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}

.wy-meta{display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--ink);padding-top:14px}
.wy-tag{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--tc)}
.wy-meta h3{margin:0;font-family:'Inter Tight','DM Sans',sans-serif;font-weight:800;letter-spacing:-.035em;font-size:28px;line-height:1.05}
.wy-meta p.wy-copy{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.wy-meta a{align-self:flex-start;color:var(--ink);font-weight:700;text-decoration:none;border-bottom:3px solid var(--c);padding-bottom:2px}
.wy-meta a:hover{color:var(--ink);border-bottom-width:4px}
.wy-meta a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media (max-width:980px){.wy-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}}
@media (max-width:560px){
  .wy-in{padding:64px 16px 72px}
  .wy-row{gap:34px 14px}
  .wy-meta h3{font-size:21px}.wy-meta p.wy-copy{font-size:14px}.wy-tag{font-size:11px;letter-spacing:.16em}
  .wy-words{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .wy-float,.wy-shine,.wy-caustic,.wy-spark,.wy-act,.wy-ring-out,.wy-shadow{animation:none!important}
  .wy-tilt{transition:none}
}
.wy-play{--img:url(../images/doors/card.webp)}
.wy-brain{--img:url(../images/doors/brain.webp)}
.wy-mirror{--img:url(../images/doors/mirror.webp)}
.wy-mic{--img:url(../images/doors/mic.webp)}
/* moving holographic background behind the glass objects; the wash keeps text easy to read */
.wy{position:relative;isolation:isolate}
.wy-bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1.2s;pointer-events:none}
.wy-bgv.wy-on{opacity:1}
.wy-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 50% 22%,rgba(240,232,252,.72),rgba(240,232,252,.2) 70%),linear-gradient(to bottom,rgba(225,209,247,0) 60%,rgba(225,209,247,.55))}
/* Talk (Conversation Deck) and Meet (Characters) doors */
.wy-talk{--img:url(../images/game/glass-card-back-yellow.webp)}
.wy-talk .wy-float{animation:wy-sway 5.8s ease-in-out infinite;animation-delay:-1.4s}
.wy-talk.wy-go .wy-act{animation:wy-spin 1s cubic-bezier(.45,.05,.2,1)}
.wy-meet .wy-obj{background:none}
.wy-meet .wy-shine{display:none}
.wy-meet .wy-float{animation:wy-breathe 4.6s ease-in-out infinite;animation-delay:-2.2s}
.wy-fan{position:absolute;inset:0;display:block}
.wy-fan img{position:absolute;left:50%;top:50%;width:46%;border-radius:10px;box-shadow:0 18px 30px rgba(23,18,31,.3);transform-origin:50% 120%;transition:transform .5s cubic-bezier(.25,1.3,.4,1)}
.wy-fan img:nth-child(1){transform:translate(-50%,-50%) rotate(-16deg)}
.wy-fan img:nth-child(2){transform:translate(-50%,-54%);z-index:2}
.wy-fan img:nth-child(3){transform:translate(-50%,-50%) rotate(16deg)}
.wy-meet .wy-stage:hover .wy-fan img:nth-child(1),.wy-meet.wy-go .wy-fan img:nth-child(1){transform:translate(-50%,-50%) rotate(-26deg)}
.wy-meet .wy-stage:hover .wy-fan img:nth-child(3),.wy-meet.wy-go .wy-fan img:nth-child(3){transform:translate(-50%,-50%) rotate(26deg)}
@media (prefers-reduced-motion:reduce){.wy-fan img{transition:none}}