/* ============================================================================
   ANIMATIONS — banking-style: clean slide/fade reveals, soft glows, the chrome
   logo as the hero centrepiece. No heavy effects.
   ============================================================================ */

/* ---- scroll reveal: slide up + fade (banking slideUp) --------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }

/* one-time ice sheen as a panel reveals */
.slash { position: relative; overflow: hidden; }
.slash::after {
  content: ''; position: absolute; top: 0; left: -40%; width: 36%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(126,200,240,.18), transparent);
  transform: skewX(-16deg); opacity: 0;
}
.slash.in-view::after { animation: sheen 1.1s ease-out .15s forwards; }
@keyframes sheen { 0% { left: -40%; opacity: 0; } 30% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* ---- hero ----------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero .container { position: relative; z-index: 3; }
.hero-title {
  font-family: var(--sans); font-weight: 900;
  font-size: clamp(46px, 9vw, 128px); line-height: .92; letter-spacing: -0.02em;
}
.hero-title .ink {
  background: linear-gradient(180deg, #ffffff 0%, #c5e4f5 40%, #7ec8f0 60%, #2f7fc4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(47,127,196,.35));
}
.hero-title .stroke { color: transparent; -webkit-text-stroke: 1.6px rgba(126,200,240,.7); }
.hero-sub { margin-top: 22px; font-size: clamp(15px, 2vw, 19px); color: var(--muted); max-width: 540px; }
.hero-cta { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; }

/* two-column hero: the chrome CC logo on the LEFT, text on the RIGHT */
.hero-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 40px; }
.hero-content { position: relative; z-index: 3; }
.hero-logo {
  order: -1;                       /* logo to the left column (text stays first in source) */
  position: relative; justify-self: center; width: min(38vw, 440px); aspect-ratio: 1;
  z-index: 1; pointer-events: none; display: grid; place-items: center;
  animation: logoFloat 7s ease-in-out infinite;
}
.hero-logo::before {
  content: ''; position: absolute; inset: 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47,127,196,.30), rgba(47,127,196,.05) 65%, transparent 72%);
  filter: blur(34px); z-index: -1;
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 50px rgba(47,127,196,.45)); }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-logo { order: 0; width: 52vw; max-width: 280px; justify-self: flex-start; }
}

/* ---- fullscreen video hero ----------------------------------------------- */
.hero-video {
  position: relative;
  /* 16:9 panel — sized by height (capped at 80vh), but never wider than the viewport
     gutters, so the video fills it edge-to-edge with no bars and no cropping. */
  height: min(80vh, calc((100vw - 64px) * 9 / 16));
  width:  min(calc(80vh * 16 / 9), calc(100vw - 64px));
  margin: 88px auto 12px;          /* top clears the fixed navbar; auto-centers the panel */
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--glow-soft);
  background: #060a10;
}
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-vid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,16,.5) 0%, rgba(6,10,16,0) 24%, rgba(6,10,16,0) 68%, rgba(6,10,16,.94) 100%);
}
.hero-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-video .scroll-cue { z-index: 2; }

/* ---- brand intro (the text block, now below the video) ------------------- */
.intro-hero { text-align: center; padding-top: 96px; }
.intro-hero .hero-sub { margin-inline: auto; }
.intro-hero .hero-cta { justify-content: center; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 3;
  color: var(--muted); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .bar { width: 1px; height: 46px; background: linear-gradient(var(--ice), transparent); animation: cuePulse 2s ease-in-out infinite; }
@keyframes cuePulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- ice underline for headings ------------------------------------------- */
.brush-underline { position: relative; display: inline-block; }
.brush-underline::after {
  content: ''; position: absolute; left: 0; bottom: -8px; width: 0; height: 3px;
  background: var(--galaxy-bright); transition: width .9s cubic-bezier(.2,.8,.2,1) .2s;
}
.in-view .brush-underline::after, .brush-underline.in-view::after { width: 100%; }

/* ---- global ice ripple on click (app.js) ---------------------------------- */
.ink-ripple {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 1px solid rgba(126,200,240,.55); animation: inkRipple 1s ease-out forwards;
}
@keyframes inkRipple {
  0% { width: 0; height: 0; opacity: .7; }
  100% { width: 240px; height: 240px; opacity: 0; margin-left: -120px; margin-top: -120px; }
}

/* ---- "Enter the City" gleam ----------------------------------------------- */
.ew-shine {
  position: absolute; top: 0; left: -40%; width: 36%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(126,200,240,.4), transparent);
  transform: skewX(-16deg); pointer-events: none; animation: ewSweep 4.5s ease-in-out infinite;
}
.btn-enter:hover .ew-shine { animation: ewSweep 1s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes ewSweep { 0% { left: -45%; } 55% { left: 130%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero-logo, .scroll-cue .bar, .ew-shine { animation: none; }
}

/* ---- "Enter the City" door transition ------------------------------------- */
.enter-portal {
  position: fixed; inset: 0; z-index: 999; display: none; overflow: hidden;
  pointer-events: none;
}
.enter-portal.active { display: block; pointer-events: all; }

/* the two blade doors — start off-screen (open) */
.ep-door {
  position: absolute; top: 0; bottom: 0; width: 50.6%; z-index: 3;
  background:
    linear-gradient(180deg, #0b1726 0%, #060a10 100%);
  box-shadow: inset 0 0 90px rgba(126,200,240,.06);
  will-change: transform;
}
.ep-left {
  left: 0; transform: translateX(-101%);
  border-right: 1px solid rgba(126,200,240,.30);
  background-image:
    linear-gradient(180deg, #0b1726, #060a10),
    repeating-linear-gradient(118deg, rgba(126,200,240,.045) 0 2px, transparent 2px 24px);
}
.ep-right {
  right: 0; transform: translateX(101%);
  border-left: 1px solid rgba(126,200,240,.30);
  background-image:
    linear-gradient(180deg, #0b1726, #060a10),
    repeating-linear-gradient(62deg, rgba(126,200,240,.045) 0 2px, transparent 2px 24px);
}

/* glowing centre seam where the doors meet */
.ep-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  z-index: 4; opacity: 0; filter: blur(.5px);
  background: linear-gradient(180deg, transparent, var(--ice) 35%, #fff 50%, var(--ice) 65%, transparent);
}

/* light burst revealed as the doors part */
.ep-flash {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: radial-gradient(closest-side at 50% 50%, rgba(190,228,255,.95), rgba(47,127,196,.35) 42%, transparent 72%);
}

/* centre emblem + label */
.ep-core {
  position: absolute; inset: 0; z-index: 5; opacity: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.ep-logo { width: 124px; height: 124px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(126,200,240,.6)); }
.ep-label {
  font-family: var(--sans); letter-spacing: 4px; text-transform: uppercase;
  font-size: 15px; color: var(--ice);
}
.ep-dots { display: flex; gap: 7px; }
.ep-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); opacity: .3; animation: epDot 1s infinite; }
.ep-dots span:nth-child(2) { animation-delay: .15s; }
.ep-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes epDot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* the sequence: doors slide shut → hold → swing open with a light burst */
.enter-portal.active .ep-left  { animation: epDoorL 2s cubic-bezier(.7,0,.2,1) forwards; }
.enter-portal.active .ep-right { animation: epDoorR 2s cubic-bezier(.7,0,.2,1) forwards; }
.enter-portal.active .ep-seam  { animation: epSeam  2s ease forwards; }
.enter-portal.active .ep-core  { animation: epCore  2s ease forwards; }
.enter-portal.active .ep-flash { animation: epFlash 2s ease forwards; }

@keyframes epDoorL {
  0%   { transform: translateX(-101%); }
  32%  { transform: translateX(0); }       /* shut, meeting centre */
  58%  { transform: translateX(0); }       /* hold */
  100% { transform: translateX(-101%); }   /* open */
}
@keyframes epDoorR {
  0%   { transform: translateX(101%); }
  32%  { transform: translateX(0); }
  58%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}
@keyframes epSeam  { 0%,28% { opacity: 0; } 34%,56% { opacity: 1; } 64%,100% { opacity: 0; } }
@keyframes epCore  {
  0%,30%  { opacity: 0; transform: scale(.92); }
  40%,56% { opacity: 1; transform: scale(1); }
  74%,100%{ opacity: 0; transform: scale(1.18); }
}
@keyframes epFlash { 0%,58% { opacity: 0; } 76% { opacity: 1; } 100% { opacity: 0; } }