:root{color-scheme:dark;--ink:#080808;--paper:#f7f5f0;--muted:#bcbab4;--amber:#d8b27b;--edge:clamp(24px,4.4vw,80px);--px:65%;--py:48%;--dx:0px;--dy:0px}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
.sleeve{position:relative;isolation:isolate;min-height:640px;height:100svh;overflow:hidden;background:var(--ink)}
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.photograph{position:absolute;inset:-2% -2% -2% 20%;transform:translate3d(var(--dx),var(--dy),0) scale(1.02);animation:photo-in 1.8s cubic-bezier(.16,1,.3,1) both}
.photograph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(.83);display:block}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.96) 12%,rgba(8,8,8,.7) 30%,rgba(8,8,8,.1) 58%,transparent 80%),linear-gradient(0deg,rgba(8,8,8,.9),transparent 26%,transparent 80%,rgba(8,8,8,.55))}
.light{position:absolute;inset:0;opacity:.5;background:radial-gradient(ellipse 35% 60% at var(--px) var(--py),rgba(245,222,183,.16),transparent 80%);mix-blend-mode:screen;transition:opacity .8s}
.grooves{position:absolute;width:88vw;height:88vw;left:-45vw;top:50%;transform:translateY(-50%);border-radius:50%;opacity:.11;background:repeating-radial-gradient(circle at center,transparent 0 16px,rgba(230,220,203,.42) 17px,transparent 18px 29px);mask-image:linear-gradient(90deg,transparent 30%,#000 85%,transparent)}
.grain{position:absolute;inset:0;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.topline,.bottomline{position:absolute;left:var(--edge);right:var(--edge);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;line-height:1.5;letter-spacing:.025em}
.topline{top:max(30px,env(safe-area-inset-top));color:var(--muted);animation:ink-in 1s .2s both}
.identity{font-size:13px}
.speed{display:flex;align-items:center;gap:5px;color:var(--paper);font-size:20px;letter-spacing:-.04em}
.speed span{font-size:11px;letter-spacing:0;margin:4px 10px 0 2px;color:var(--muted)}
.speed i{width:23px;height:23px;border:1px solid #96938d;border-radius:50%;position:relative}
.speed i:before,.speed i:after{content:"";position:absolute;border:1px solid #96938d;border-radius:50%;inset:4px}
.speed i:after{inset:9px;background:var(--amber);border:0}
.brand{position:absolute;left:var(--edge);top:50%;width:min(43vw,650px);transform:translateY(-45%)}
h1{margin:0;font-size:inherit;font-weight:normal}
.logo{display:block;width:100%;height:auto;animation:logo-in 1.3s .15s cubic-bezier(.16,1,.3,1) both}
.tagline{font-size:clamp(16px,1.3vw,20px);letter-spacing:.01em;margin:30px 0 0 4px;line-height:1.5;color:var(--muted);animation:ink-in 1s .6s both}
.bottomline{bottom:max(30px,env(safe-area-inset-bottom));color:var(--muted);animation:ink-in 1s .8s both}
.soon{display:flex;align-items:center;gap:11px}
.signal{height:6px;width:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px #d8b27b66}
.domain{color:var(--muted)}
@keyframes logo-in{from{opacity:0;transform:translateY(18px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ink-in{from{opacity:0}to{opacity:1}}
@keyframes photo-in{from{opacity:0;scale:1.035}to{opacity:1;scale:1}}
@media(min-width:1600px){.brand{width:40vw;max-width:760px}.photograph{left:25%}}
@media(max-width:700px){
  :root{--edge:24px}
  .sleeve{min-height:660px}
  .topline{top:max(22px,env(safe-area-inset-top));font-size:11px}
  .identity{font-size:11px}
  .speed{font-size:17px}.speed span{font-size:10px;margin-right:5px}.speed i{width:21px;height:21px}.speed i:after{inset:8px}
  .photograph{inset:26% -37% -3%;transform:translate3d(var(--touch-x,0px),var(--touch-y,0px),0) scale(1.02);transition:transform 900ms cubic-bezier(.2,.7,.2,1);animation:photo-in 1.8s both}
  .mobile-touch .photograph{transition:transform 180ms ease-out}
  .photograph img{object-position:49% 50%;filter:brightness(.9)}
  .shade{background:linear-gradient(180deg,#080808 0%,rgba(8,8,8,.95) 12%,rgba(8,8,8,.65) 30%,transparent 45%,transparent 72%,rgba(8,8,8,.9) 100%),linear-gradient(90deg,rgba(8,8,8,.2),transparent 40%,rgba(8,8,8,.15))}
  .brand{left:var(--edge);right:var(--edge);width:auto;top:12%;transform:none;text-align:center}
  .logo{width:min(100%,370px);margin:auto}
  .tagline{display:inline-block;font-size:14px;margin:12px 0 0;padding:4px 10px;letter-spacing:.015em;background:rgba(8,8,8,.85);color:var(--paper)}
  .grooves{height:130vw;width:130vw;left:-80vw;top:20%;opacity:.07}
  .light{inset:-15% -35%;background:radial-gradient(ellipse 45% 35% at 50% 58%,rgba(245,222,183,.2),transparent 85%);opacity:.6;animation:mobile-light 18s ease-in-out infinite alternate}
  .bottomline{bottom:max(23px,env(safe-area-inset-bottom));font-size:11px;gap:10px}
  .soon{gap:8px}.domain{font-size:11px}
}
@keyframes mobile-light{0%{transform:translate3d(-18%,-5%,0);opacity:.4}50%{opacity:.85}100%{transform:translate3d(18%,7%,0);opacity:.55}}
@media(max-width:380px){:root{--edge:20px}.brand{top:13%}.bottomline{font-size:10px}.domain{font-size:10px}}
@media(max-height:640px) and (min-width:701px){.sleeve{min-height:440px}.brand{width:min(36vw,480px)}.tagline{margin-top:18px}.topline{top:20px}.bottomline{bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.photograph{transform:none!important}}