/* ================================================================
   AERION — vintro.css
   1) preload → centered "reactor ring": a hairline progress ring sweeps
                around the slowly-turning mark, with an editorial % count
   2) doors   → black background splits vertically; halves slide apart,
                revealing the full-screen footage
   3) video   → birlesik.mp4 plays full length behind a slogan
   4) reveal  → scroll drags the footage UP over the site; scrolling back
                brings it down again — it only leaves once dragged past
================================================================ */

#aerion-vintro{
  position:fixed; inset:0; z-index:99999; background:#050505; overflow:hidden;
  --vintro-ease:cubic-bezier(.16,1,.3,1);
  --paper:#F4F0E8; --mint:#8BE3A0; --muted:#8E897E;
}
#aerion-vintro.is-hidden{ display:none; }
/* handed off to the site: let clicks/scroll through, but stay in the DOM so
   the viewer can scroll back up to it */
#aerion-vintro.is-passed{ pointer-events:none; }
html.vintro-active, body.vintro-active{ overflow:hidden !important; }

/* ---------- video stage (revealed by the doors, then dragged up) ---------- */
.vintro-stage{
  position:fixed; inset:0; z-index:1; background:#050505; overflow:hidden;
  transform:translateY(0); will-change:transform;
}
.vintro-vid{
  position:absolute; inset:0; width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:cover; overflow:hidden;
  filter:brightness(.82) contrast(1.05) saturate(1.06);   /* tame bright skies, keep it cinematic */
}
/* legibility scrim: a soft focused darkening behind the headline (so the
   footage stays vivid elsewhere) + a gentle top/bottom cinematic gradient */
.vintro-wash{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(82% 64% at 50% 50%, rgba(3,7,5,.58), rgba(3,7,5,0) 68%),
    linear-gradient(180deg, rgba(4,8,6,.36) 0%, rgba(4,8,6,.10) 26%,
                            rgba(4,8,6,.14) 58%, rgba(4,8,6,.60) 100%);
}

/* slogan */
.vintro-slogan{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-40%);
  text-align:center; padding:0 24px; opacity:0;
  transition:opacity 1s ease .3s, transform 1.1s var(--vintro-ease) .3s;
}
#aerion-vintro.is-open .vintro-slogan{ opacity:1; transform:translateY(-50%); }
.vintro-slogan .ey{
  display:block; font-family:var(--font-mono,'JetBrains Mono','SF Mono',Menlo,monospace); font-style:normal;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:#A8F0BD;
  margin-bottom:20px; opacity:.95; text-shadow:0 1px 14px rgba(0,0,0,.7);
}
.vintro-slogan h1{
  font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-style:italic; font-weight:500;
  color:var(--paper); font-size:clamp(2.3rem,6.4vw,5.2rem); line-height:1.02;
  letter-spacing:-.012em;
  text-shadow:0 2px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.vintro-slogan h1 .dot{ color:var(--mint); font-style:normal; }

/* ---------- the two black doors ---------- */
.vintro-door{
  position:fixed; top:0; height:100%; width:min(50.5vw,50%); max-width:50vw;
  background:#050505; z-index:2;
  transform:translateX(0); will-change:transform;
  transition:transform 2000ms cubic-bezier(.76,0,.24,1);   /* slow, deliberate curtain (ease-in-out) */
}
.vintro-left{ left:0; }
.vintro-right{ right:0; }
#aerion-vintro.is-open .vintro-left{ transform:translateX(-100%); }
#aerion-vintro.is-open .vintro-right{ transform:translateX(100%); }

/* ---------- preload: dawn / horizon line ---------- */
.vintro-preload{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(26px,5vh,52px); transition:opacity .55s ease;
}
#aerion-vintro.is-open .vintro-preload{ opacity:0; }

/* a thin horizon that opens from the centre toward both edges, with a
   soft dawn glow rising above it as the % climbs */
.vintro-dawn{ position:relative; width:100vw; height:1px; }
.dawn-line{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:50% 50%;
  background:linear-gradient(90deg, transparent,
    rgba(139,227,160,.30) 16%, var(--mint) 50%, rgba(139,227,160,.30) 84%, transparent);
  box-shadow:0 0 20px rgba(139,227,160,.55);
  transition:transform .12s linear;
}
.dawn-glow{
  position:absolute; left:0; right:0; bottom:-1px; height:clamp(120px,22vh,240px);
  transform:scaleX(0); transform-origin:50% 100%; opacity:0; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 100%,
    rgba(139,227,160,.30), rgba(139,227,160,.05) 55%, transparent 72%);
  filter:blur(2px); transition:transform .12s linear, opacity .3s ease;
}
.dawn-mark{
  position:absolute; left:50%; bottom:calc(100% + clamp(24px,5vh,60px));
  width:clamp(52px,6vw,78px); height:auto; transform:translateX(-50%);
  transform-origin:50% 100%; opacity:0; transition:opacity .8s ease;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));
}
.dawn-mark.is-lit{ opacity:1; }
/* after preload it docks to the bottom-left, inside the video layer, and
   rides the footage when it is dragged away */
.dawn-mark.vintro-brand{
  position:fixed; left:clamp(20px,3.4vw,40px); bottom:clamp(18px,3.4vw,38px);
  top:auto; width:clamp(40px,4.4vw,58px); transform:none; transform-origin:0 0;
  z-index:6; opacity:1; filter:drop-shadow(0 6px 20px rgba(0,0,0,.5));
}

.vintro-pct{
  font-family:var(--font-display,'Cormorant Garamond',Georgia,serif); font-style:italic; font-weight:500;
  color:var(--paper); line-height:1; letter-spacing:.01em;
  font-size:clamp(1.7rem,3.6vw,2.6rem); font-variant-numeric:tabular-nums;
}
.vintro-pct .sym{ font-size:.5em; color:var(--mint); font-style:normal;
  margin-left:.12em; vertical-align:.7em; }

/* ---------- chrome: scroll cue · skip ---------- */
.vintro-scrollcue{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0;
  font-family:var(--font-mono,'JetBrains Mono','SF Mono',Menlo,monospace); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(244,240,232,.72);
  pointer-events:none; transition:opacity .6s ease .8s;
}
#aerion-vintro.is-open .vintro-scrollcue{ opacity:1; }
.vintro-scrollcue i{
  position:relative; width:1.5px; height:48px; border-radius:2px;
  background:rgba(244,240,232,.18); overflow:visible;
}
/* a bright, glowing segment slides down the faint track — thin but lively */
.vintro-scrollcue i::after{
  content:""; position:absolute; left:50%; top:0; width:1.5px; height:17px;
  border-radius:2px; background:var(--mint); transform:translate(-50%,-2px);
  box-shadow:0 0 9px 1.5px rgba(139,227,160,.9);
  animation:vintro-cue 1.5s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes vintro-cue{
  0%  { transform:translate(-50%,-2px); opacity:0; }
  18% { opacity:1; }
  78% { opacity:1; }
  100%{ transform:translate(-50%,33px); opacity:0; }
}

/* ---------- responsive: keep the same aesthetic on phones/tablets ---------- */
@media (max-width:820px){
  .vintro-slogan h1{ font-size:clamp(2rem,7.6vw,3.6rem); }
  .vintro-pct{ font-size:clamp(1.5rem,6.4vw,2.2rem); }
  .dawn-mark{ width:clamp(46px,11vw,66px); }
  /* portrait footage is busier behind the text → a touch more scrim */
  .vintro-wash{
    background:
      radial-gradient(118% 50% at 50% 50%, rgba(3,7,5,.62), rgba(3,7,5,0) 70%),
      linear-gradient(180deg, rgba(4,8,6,.40) 0%, rgba(4,8,6,.12) 28%,
                              rgba(4,8,6,.16) 60%, rgba(4,8,6,.64) 100%);
  }
}
@media (max-width:560px){
  .vintro-slogan{ padding:0 20px; }
  .vintro-slogan h1{ font-size:clamp(1.85rem,8.6vw,2.8rem); line-height:1.06; }
  .vintro-slogan .ey{ font-size:10px; letter-spacing:.26em; margin-bottom:14px; }
  .vintro-pct{ font-size:clamp(1.4rem,8vw,1.9rem); }
  .dawn-mark.vintro-brand{ width:clamp(36px,9vw,48px); left:16px; bottom:14px; }
  .vintro-scrollcue{ bottom:22px; }
  .vintro-wash{
    background:
      radial-gradient(135% 46% at 50% 50%, rgba(3,7,5,.66), rgba(3,7,5,0) 72%),
      linear-gradient(180deg, rgba(4,8,6,.44) 0%, rgba(4,8,6,.14) 30%,
                              rgba(4,8,6,.18) 60%, rgba(4,8,6,.66) 100%);
  }
}
/* short landscape (phones rotated): keep the headline from crowding */
@media (max-height:520px){
  .vintro-slogan h1{ font-size:clamp(1.6rem,6vh,2.6rem); }
  .dawn-mark{ width:clamp(40px,9vh,60px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .vintro-logo-img{ animation:none; }
  .vintro-door, .vintro-slogan{ transition-duration:.001ms; }
}