/* The front determines layout; the transparent phone occupies the same box. */
.home-world .hero-flip{position:relative;width:100%;max-width:420px;margin-inline:auto;perspective:2200px;transform:rotate(1.2deg);margin-bottom:48px}
.home-world .hero-flip-card{position:relative;transform-style:preserve-3d}
.home-world .hero .hero-flip .frame{transform:none;aspect-ratio:.576}
.home-world .hero .hero-flip .inner{height:100%;aspect-ratio:auto;max-height:none}
.home-world .hero-flip .frame,.home-world .hero-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.home-world .hero-back{position:absolute;inset:0;transform:rotateY(180deg);display:block;background:transparent;border:0;padding:0;margin:0;color:var(--ink);text-decoration:none;cursor:pointer}
.home-world .hero-back>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(18,26,54,.30)) drop-shadow(0 6px 10px rgba(18,26,54,.18))}
.home-world .hero-flip-shadow{position:absolute;left:14%;right:14%;bottom:-22px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(18,26,54,.30),transparent)}
/* One uninterrupted rotation; the lift and shadow are separate curves that peak when the card is edge-on (halfway). */
.home-world .hero-flip.is-flipped .hero-flip-card{animation:hero-phone-turn 1.35s cubic-bezier(.65,0,.35,1) forwards,hero-phone-lift 1.35s ease-in-out}
.home-world .hero-flip.is-replaying .hero-flip-card{animation:hero-phone-replay 1.1s cubic-bezier(.65,0,.35,1) forwards,hero-phone-lift 1.1s ease-in-out}
.home-world .hero-flip.is-flipped .hero-flip-shadow{animation:hero-phone-shadow 1.35s ease-in-out}
.home-world .hero-flip.is-replaying .hero-flip-shadow{animation:hero-phone-shadow 1.1s ease-in-out}
.home-world .hero-flip.is-flipped .hero-back>img,.home-world .hero-flip.is-flipped .hero-phone-sheen{animation:hero-phone-settle .6s cubic-bezier(.2,.8,.2,1) 1.1s both}
.home-world .hero-phone-sheen{position:absolute;inset:0;pointer-events:none;mask:var(--phone-mask) center/contain no-repeat;-webkit-mask:var(--phone-mask) center/contain no-repeat;overflow:hidden}
.home-world .hero-phone-sheen::before{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-70%)}
.home-world .hero-flip.is-flipped .hero-phone-sheen::before{animation:hero-phone-sheen 1.1s ease-out 1.3s forwards}
.home-world .hero-phone-hint{position:absolute;left:50%;bottom:-46px;transform:translate(-50%,6px);display:inline-flex;align-items:center;gap:8px;max-width:100%;width:max-content;background:var(--ink);color:#FFFFFF;font:700 14px/1.3 var(--body);padding:9px 15px;border-radius:99px;opacity:0;transition:opacity .2s,transform .2s;text-align:center}
.home-world .hero-phone-hint svg{width:16px;height:16px;flex:none}
.home-world .hero-phone-hint svg[hidden]{display:none}
.home-world [data-flip-device="desktop"] .hero-back:hover .hero-phone-hint,.home-world .hero-back:focus-visible .hero-phone-hint{opacity:1;transform:translate(-50%,0)}
.home-world [data-flip-device="touch"].is-flipped .hero-phone-hint{animation:hero-phone-hint .4s ease-out 1.6s forwards}
.home-world .hero-back:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:44px}
.home-world .hero-flip.is-flipped .motion-toggle{visibility:hidden}
@keyframes hero-phone-turn{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes hero-phone-replay{from{transform:rotateY(180deg)}to{transform:rotateY(0)}}
@keyframes hero-phone-lift{0%,100%{translate:0 0;scale:1}50%{translate:0 -14px;scale:.92}}
@keyframes hero-phone-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.45);opacity:.35}}
@keyframes hero-phone-settle{from{transform:scale(.97)}to{transform:scale(1)}}
@keyframes hero-phone-sheen{to{transform:translateX(70%)}}
@keyframes hero-phone-hint{to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:980px){.home-world .hero-flip{max-width:360px;transform:none}}
@media(prefers-reduced-motion:reduce){.home-world .hero-back{display:none}.home-world .hero-flip-card{animation:none!important;transform:none!important}}