:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #020504; }
body { color: #fff; }
.page { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: #020504; }
.cinematic { position: absolute; inset: -2%; transform: scale(1.035); }
.cinematic img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.08) brightness(.72); transform-origin: 58% 46%; animation: drift 22s cubic-bezier(.45,0,.55,1) infinite alternate; will-change: transform; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(1,5,4,.55),rgba(1,5,4,.42) 42%,rgba(1,5,4,.72)),radial-gradient(circle at 50% 47%,rgba(1,5,4,.05),rgba(1,5,4,.72) 78%),linear-gradient(90deg,rgba(1,5,4,.62),transparent 38%,transparent 62%,rgba(1,5,4,.55)); }
.light { position: absolute; inset: -30%; opacity: .24; background: linear-gradient(112deg,transparent 39%,rgba(167,243,208,.11) 47%,rgba(255,255,255,.14) 50%,transparent 57%); animation: sweep 11s ease-in-out infinite; mix-blend-mode: screen; will-change: transform,opacity; }
.grain { position: absolute; inset: 0; opacity: .16; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); animation: grain .32s steps(2) infinite; mix-blend-mode: soft-light; }
.layout { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100svh; padding: clamp(24px,3vw,44px) clamp(24px,4vw,60px); }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
header > p, footer { font-size: 9px; letter-spacing: .3em; color: rgba(255,255,255,.42); }
.brand { display: flex; align-items: center; gap: 12px; }
.monogram { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(0,0,0,.1); backdrop-filter: blur(12px); font-size: 9px; letter-spacing: .16em; color: rgba(255,255,255,.85); }
.wordmark { display: flex; flex-direction: column; gap: 3px; }
.wordmark small { font-size: 9px; letter-spacing: .42em; color: rgba(255,255,255,.52); }
.wordmark strong { font-size: 12px; letter-spacing: .23em; }
section { display: flex; flex: 1; align-items: center; justify-content: center; padding: 60px 0; text-align: center; }
.content { width: min(100%,1100px); }
.status { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 28px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(0,0,0,.15); backdrop-filter: blur(18px); font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.68); }
.status i { width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 16px rgba(110,231,183,.8); animation: pulse 2.8s ease-in-out infinite; }
h1 { margin: 0; text-wrap: balance; font-size: clamp(3.2rem,8vw,8.5rem); font-weight: 300; line-height: .92; letter-spacing: -.065em; }
.lead { max-width: 680px; margin: 28px auto 0; font-size: clamp(14px,1.4vw,18px); line-height: 1.75; color: rgba(255,255,255,.62); }
.opening { display: flex; align-items: center; gap: 16px; width: min(100%,320px); margin: 36px auto 0; }
.opening > span { position: relative; flex: 1; height: 1px; overflow: hidden; background: rgba(255,255,255,.18); }
.opening > span i { position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(167,243,208,.95),transparent); animation: progress 3.8s ease-in-out infinite; transform: translateX(-100%); }
.opening b { flex: none; font-size: 9px; font-weight: 500; letter-spacing: .3em; color: rgba(255,255,255,.72); }
footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.reveal { opacity: 0; animation: reveal 1.1s cubic-bezier(.22,1,.36,1) forwards; }
.delay-1 { animation-delay: .08s; }.delay-2 { animation-delay: .22s; }.delay-3 { animation-delay: .34s; }.delay-4 { animation-delay: .48s; }.delay-5 { animation-delay: .62s; }.delay-6 { animation-delay: .78s; }
@keyframes drift { from { transform: scale(1.08) translate3d(-.7%,-.4%,0); } to { transform: scale(1.16) translate3d(.8%,.5%,0); } }
@keyframes driftMobile { from { transform: scale(1.08) translate3d(0,-.4%,0); } to { transform: scale(1.16) translate3d(0,.5%,0); } }
@keyframes sweep { 0%,18% { opacity:0;transform:translate3d(-36%,0,0) } 42% { opacity:.24 } 68%,100% { opacity:0;transform:translate3d(36%,0,0) } }
@keyframes grain { 0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-.35%,.25%,0)}50%{transform:translate3d(.2%,-.3%,0)}75%{transform:translate3d(.35%,.15%,0)}100%{transform:translate3d(-.2%,-.2%,0)} }
@keyframes pulse { 0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(110,231,183,0)}50%{opacity:1;box-shadow:0 0 0 6px rgba(110,231,183,.08)} }
@keyframes progress { 0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)} }
@keyframes reveal { from{opacity:0;transform:translate3d(0,18px,0);filter:blur(5px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)} }
@media (max-width: 640px) {
  header > p { display:none; }
  /* Keep the hero stone optically centered on narrow screens. The desktop
     drift uses a horizontal translation, which makes the subject wander on
     portrait phones; mobile drift is vertical-only and scales from center. */
  .cinematic img { object-position:50.5% center; transform-origin:50% 50%; animation-name:driftMobile; }
  footer { font-size:7px;letter-spacing:.22em; }
  section { padding:48px 0; }
}
@media (prefers-reduced-motion: reduce) { .cinematic img,.light,.grain,.status i,.opening > span i,.reveal { animation:none; } .reveal { opacity:1; } }