:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#effff7;background:#003c35;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
html{overflow:hidden}
body{margin:0;min-width:280px;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow-x:hidden;background:#003c35;isolation:isolate}
.world{position:fixed;inset:-10px;z-index:-3;background:url('/emerald-world-clouds.png') center 43%/cover no-repeat;transform:translate3d(var(--world-x,0px),var(--world-y,0px),0);transition:transform 1.8s cubic-bezier(.2,.7,.2,1);will-change:transform}
.atmosphere{position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(0,25,23,.14),transparent 30%,transparent 52%,rgba(0,24,21,.14) 78%,rgba(0,21,18,.24) 100%)}
.atmosphere::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(105,255,211,.17),transparent 44%);animation:breathe 7s ease-in-out infinite}
main{display:grid;place-items:end center;min-height:0;padding:160px 24px 34px}
.arrival{display:contents}
.mark-space{width:112px;height:88px;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);perspective:900px;mix-blend-mode:screen}
.mark{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline-offset:10px}
.mark:focus-visible{outline:1px solid #d7ffee}
.mark-float,.mark-tilt,.mark-crop{display:block;width:100%;height:100%}
.mark-float{animation:float 6s ease-in-out infinite;transform-style:preserve-3d}
.mark-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--x,0px),var(--y,0px),0);transition:transform .65s cubic-bezier(.16,1,.3,1);will-change:transform}
.mark-crop{position:relative;overflow:hidden;transform:scale(1);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.mark-crop img{position:absolute;left:50%;top:50%;width:210%;height:auto;max-width:none;transform:translate(-50%,-50%);filter:grayscale(1) invert(1) contrast(1.2);user-select:none;pointer-events:none}
.mark:hover .mark-crop{transform:scale(1.06)}
.mark.is-playing .mark-crop{animation:turn .85s cubic-bezier(.16,1,.3,1)}
h1{margin:0;font-weight:400;font-size:clamp(48px,6vw,84px);line-height:1.08;letter-spacing:-.055em;text-align:center;text-shadow:0 2px 20px rgba(0,20,17,.65),0 1px 3px rgba(0,20,17,.35);user-select:none;animation:reveal 1.2s ease-out both;will-change:opacity}
footer{display:flex;justify-content:center;padding:18px 20px max(38px,env(safe-area-inset-bottom));animation:reveal 1.2s .12s ease-out both;will-change:opacity}
.social{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(209,255,233,.4);border-radius:50%;color:#effff7;text-decoration:none;background:rgba(0,36,29,.22);transition:color .25s,background .25s,border-color .25s,box-shadow .35s,transform .4s cubic-bezier(.16,1,.3,1);outline-offset:6px;-webkit-tap-highlight-color:transparent}
.social svg{width:19px;height:19px}
.social:hover{background:#d7ffee;color:#004a3d;border-color:#d7ffee;box-shadow:0 0 28px #63ffd73d;transform:translateY(-3px)}
.social:active{transform:translateY(-1px) scale(.95)}
.social:focus-visible{outline:2px solid #d7ffee}
.ripple{position:fixed;width:20px;height:20px;border:1px solid #c3ffe9;box-shadow:0 0 15px #84ffdf77;border-radius:50%;pointer-events:none;z-index:2;animation:ripple 1s cubic-bezier(.12,.6,.25,1) forwards}
/* Fade on a stable composited layer: no text movement or end-of-animation snap. */
@keyframes reveal{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes turn{0%,100%{transform:scale(1)}30%{transform:scale(.94) rotate(-5deg)}65%{transform:scale(1.08) rotate(2deg)}}
@keyframes ripple{from{transform:translate(-50%,-50%) scale(.4);opacity:.6}to{transform:translate(-50%,-50%) scale(10);opacity:0}}
@media(max-width:600px){.world{background-position:50% 50%}.mark-space{width:88px;height:69px}main{padding:140px 20px 25px}h1{font-size:clamp(46px,12vw,68px)}footer{padding-top:12px;padding-bottom:max(34px,env(safe-area-inset-bottom))}}
@media(max-height:530px) and (min-width:601px){main{padding:100px 24px 15px}.mark-space{width:62px;height:49px}h1{font-size:56px}footer{padding:8px 20px 20px}.social{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mark-tilt,.world{transform:none!important}.ripple{display:none}}