:root {
  --deep-0: #02060a;
  --accent: #6ac6d9;
  --foam: #c7ecef;
  --ink: #eaf6fa;
  --ink-dim: rgba(234,246,250,.72);
  --ink-faint: rgba(234,246,250,.42);
  --rule: rgba(234,246,250,.16);
  --caustic-opacity: .2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--deep-0);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 90% 80% at 50% 40%, #0b2035 0%, #060f1e 40%, #030810 75%, #010508 100%);
  transition: opacity .9s ease, visibility .9s ease;
}
#loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 50% at 50% 50%, rgba(20,65,95,.22) 0%, rgba(4,12,24,0) 65%),
    radial-gradient(100% 80% at 50% 100%, rgba(4,18,34,.55) 0%, rgba(2,6,10,0) 55%);
}
#loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.loader-logo-stack {
  position: relative;
  display: grid;
  place-items: center;
  filter:
          drop-shadow(0 0 10px rgba(199,236,239,.65))
          drop-shadow(0 0 28px rgba(106,198,217,.45))
          drop-shadow(0 0 70px rgba(20,120,180,.35))
          drop-shadow(0 18px 60px rgba(0,0,0,.55));
  background: none;
}
.loader-logo-draw {
  position: relative;
  z-index: 1;
  width: clamp(180px, 28vw, 280px);
  aspect-ratio: 150 / 116;
  will-change: transform, opacity;
}
.logo-img {
  width: 100%;
  height: 100%;
  display: block;
}
.loader-logo-svg { overflow: visible; }
#loader-logo-svg { opacity: 0; }

.loader-bar {
  width: 160px;
  height: 1px;
  background: rgba(234,246,250,.12);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 1s 2.05s forwards ease-out;
}
.loader-bar::after {
  content: '';
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--foam), transparent);
  animation: scan 1.4s 2.15s ease-in-out infinite;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes scan { from { transform: translateX(-120%); } to { transform: translateX(380%); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.01); } }

.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.scene-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.scene > *:not(.scene-bg-video) { z-index: 2; }
.scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(18,52,82,.42) 0%, rgba(8,28,48,.48) 30%, rgba(2,6,10,.72) 75%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 100%);
}

#caustics-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--caustic-opacity);
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 40%, transparent 80%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 40%, transparent 80%);
}
.rays {
  position: absolute;
  inset: -10% 0 40% 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 10%, rgba(180,220,235,.05) 24%, transparent 38%, rgba(180,220,235,.07) 52%, transparent 66%, rgba(180,220,235,.04) 80%, transparent 100%);
  filter: blur(18px);
  animation: rays 26s ease-in-out infinite alternate;
}
@keyframes rays { from { transform: translateX(-2%) skewX(-6deg); } to { transform: translateX(2%) skewX(-4deg); } }

.bubbles, .motes { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute;
  bottom: -8vh;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0%, rgba(200,235,245,.55) 25%, rgba(130,190,210,.18) 55%, transparent 70%);
  box-shadow: inset 0 0 6px rgba(255,255,255,.25), 0 0 8px rgba(150,210,230,.25);
  opacity: 0;
  animation: rise linear infinite;
  will-change: transform, opacity;
}
.bubble::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 22%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  filter: blur(.5px);
}
@keyframes rise {
  0% { transform: translate(0,0) scale(.6); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(calc(var(--dx) * .5), -55vh) scale(.9); }
  92% { opacity: .7; }
  100% { transform: translate(var(--dx), -115vh) scale(1); opacity: 0; }
}
.mote {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: rgba(200,230,240,.7);
  box-shadow: 0 0 4px rgba(170,215,230,.4);
  opacity: 0;
  animation: driftMote linear infinite;
}
@keyframes driftMote {
  0% { opacity: 0; transform: translate(0,0); }
  15% { opacity: .8; }
  85% { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--mx,20px), var(--my,-80vh)); }
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.92) 100%);
  pointer-events: none;
}
.grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.frame {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 3vh, 34px) clamp(20px, 4vw, 52px);
  z-index: 5;
}
.top { display: flex; justify-content: center; align-items: center; }
.header-logo {
  position: fixed;
  left: 50%;
  top: clamp(22px, 4vh, 42px);
  transform: translateX(-50%);
  width: clamp(104px, 13vw, 168px);
  height: auto;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(170,235,255,.20)) drop-shadow(0 0 56px rgba(120,210,235,.18)) drop-shadow(0 10px 30px rgba(90,160,200,.24));
}

.ticks { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
.tick { position: absolute; width: 14px; height: 14px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.tick.tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.tick.tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
.tick.bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
.tick.br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }

main { display: grid; place-items: center; text-align: center; min-width: 0; position: relative; }
.center { width: 100%; padding: 0 clamp(8px, 2vw, 24px); }
.eyebrow {
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before, .eyebrow::after { content: ''; width: clamp(20px, 4vw, 40px); height: 1px; background: var(--rule); }
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { animation: fadeUp 1s forwards ease-out; }
.headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(64px, 15.5vw, 260px);
  line-height: .9;
  letter-spacing: .06em;
  margin: clamp(10px, 2vh, 22px) 0 clamp(4px, 1vh, 10px);
  white-space: nowrap;
  color: var(--ink);
}
.headline .ch { display: inline-block; opacity: 0; transform: translateY(24px); }
.headline.in .ch { animation: revealChar 1.4s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes revealChar { to { opacity: 1; transform: none; } }
.year {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  font-size: clamp(16px, 2.2vw, 30px);
  letter-spacing: clamp(.35em, .9vw, .85em);
  color: var(--ink-dim);
  padding-left: clamp(.35em, .9vw, .85em);
}
.year::before, .year::after { content: ''; width: clamp(22px, 4vw, 54px); height: 1px; background: var(--rule); }

.cta-wrap { display: grid; place-items: center; padding-bottom: clamp(10px, 2vh, 20px); }
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .5s ease, letter-spacing .5s ease, transform .5s ease;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 160% at var(--mx,50%) var(--my,50%), rgba(180,230,240,.5) 0%, rgba(106,198,217,.22) 35%, transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
  z-index: -1;
}
.cta:hover { border-color: rgba(234,246,250,.55); letter-spacing: .4em; }
.cta:hover::before { opacity: 1; }
.cta .ig { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 4px; position: relative; opacity: .9; }
.cta .ig::before { content: ''; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transform: translate(-50%,-50%); }
.cta .ig::after { content: ''; position: absolute; top: 2px; right: 2px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.cta .arrow { width: 12px; height: 1px; background: currentColor; position: relative; transition: width .4s ease; }
.cta .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }
.cta:hover .arrow { width: 22px; }

@media (prefers-reduced-motion: reduce) {
  .headline.in .ch, .reveal.in, .bubble, .mote, .rays { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .scene-bg-video { display: none; }
  .loader-logo-draw { animation: none !important; }
}