/* ================================================================
   SECTION LAYER SYSTEM  v2 — cinematic transitions
   Sections are fixed full-screen layers. The active one is visible;
   all others are hidden.

   Timing split:
     Exit   → 460ms  (old section leaves fast — gets out of the way)
     Enter  → 920ms  (new section arrives slowly — settles like silk)
   They overlap, so the total perceived change feels ~700ms.
================================================================ */

section{
  position:fixed;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  padding:100px 36px 60px;

  /* off by default */
  opacity:0;
  pointer-events:none;
  z-index:1;
  will-change:opacity, transform, filter;

  /* prevent sub-pixel text artifacts during blur transitions */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  text-rendering:optimizeSpeed;
}

/* ── Safety net: prevent any class-level rule from breaking the layer ── */
section.hero, section.about, section.work, section.gallery,
section.culture, section.socials, section.inquiry{
  position:fixed !important;
  inset:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
/* gallery: overflow-x clips for marquee, overflow-y visible for hover lift */
section.gallery{
  overflow-x:hidden !important;
  overflow-y:visible !important;
}
/* socials: needs overflow visible for card hover lift */
section.socials{
  overflow:auto !important;
}

/* ── Active (settled, no animation) ───────────────────────── */
section.s-active{
  opacity:1;
  pointer-events:all;
  z-index:5;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* ── Enter from below — navigating DOWN ───────────────────── */
section.s-enter-up{
  z-index:5;
  pointer-events:all;
  animation: enterUp 920ms cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Enter from above — navigating UP ─────────────────────── */
section.s-enter-down{
  z-index:5;
  pointer-events:all;
  animation: enterDown 920ms cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Exit upward — old section when going DOWN ─────────────── */
section.s-exit-up{
  z-index:4;
  pointer-events:none;
  animation: exitUp 460ms cubic-bezier(0.4,0,1,1) forwards;
}

/* ── Exit downward — old section when going UP ─────────────── */
section.s-exit-down{
  z-index:4;
  pointer-events:none;
  animation: exitDown 460ms cubic-bezier(0.4,0,1,1) forwards;
}

/* ────────────────────────────────────────────────────────────
   KEYFRAMES

   Enter: starts far + blurry + slightly scaled down,
          snaps into place with an expo-out spring curve.
   Exit:  leaves fast with a soft scale-up + blur + fade.
──────────────────────────────────────────────────────────── */
@keyframes enterUp{
  0%  {
    opacity:0;
    transform:translateY(56px) scale(0.97);
    filter:blur(0px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes enterDown{
  0%  {
    opacity:0;
    transform:translateY(-44px) scale(0.97);
    filter:blur(0px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes exitUp{
  0%  {
    opacity:1;
    transform:translateY(0) scale(1);
  }
  100%{
    opacity:0;
    transform:translateY(-44px) scale(1.018);
  }
}

@keyframes exitDown{
  0%  {
    opacity:1;
    transform:translateY(0) scale(1);
  }
  100%{
    opacity:0;
    transform:translateY(36px) scale(1.018);
  }
}

/* ════════════════════════════════════════════════════════════
   REVEAL  — content inside sections
   Three tiers: default, lines (clip), counter bars.
   All use expo-out so they snap in quickly then breathe.
════════════════════════════════════════════════════════════ */

/* ── default reveal: clean lift, no blur ── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity  0.72s cubic-bezier(0.16,1,0.3,1),
    transform 0.72s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

/* stagger delays */
.reveal.d2{transition-delay:0.08s}
.reveal.d3{transition-delay:0.16s}
.reveal.d4{transition-delay:0.24s}
.reveal.d5{transition-delay:0.32s}

/* ── section-head: headline clips up from a line mask ──────── */
.section-head{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:40px;align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:24px;margin-bottom:60px;
  /* own reveal handled below */
}
.section-head .num{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.3em;color:var(--accent);text-transform:uppercase;
}
.section-head h2{
  font-size:clamp(36px,6.5vw,110px);
  font-weight:500;letter-spacing:-.04em;line-height:.95;
  /* headline-specific reveal */
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translateY(16px);
  transition:
    opacity   0.01s  0s,   /* instant opacity toggle */
    clip-path 0.85s  cubic-bezier(0.16,1,0.3,1),
    transform 0.85s  cubic-bezier(0.16,1,0.3,1);
}
.section-head h2 em{
  font-family:'Instrument Serif',serif;
  font-style:italic;color:var(--accent-2);font-weight:400;
}
/* when parent .reveal gets .in, propagate to h2 */
.section-head.reveal.in h2{
  opacity:1;
  clip-path:inset(0 0 0% 0);
  transform:translateY(0);
}
.section-head .meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:#666;letter-spacing:.2em;text-transform:uppercase;
  text-align:right;line-height:1.8;
}

/* ── About ─────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start}
.about-copy p{font-size:clamp(17px,1.7vw,24px);line-height:1.5;color:#dcdcdc;letter-spacing:-.01em;max-width:38ch;margin-bottom:22px;text-wrap:pretty}
.about-copy p em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.about-copy .quote{
  font-family:'Instrument Serif',serif;
  font-size:clamp(22px,2.8vw,40px);font-style:italic;
  color:#fff;line-height:1.2;margin-top:28px;
  border-left:2px solid var(--accent);padding-left:20px;
}

.counters{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.counter{padding:28px 22px;background:#0a0a0c;position:relative;overflow:hidden}
.counter .label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:#777;text-transform:uppercase;margin-bottom:12px;display:flex;justify-content:space-between}
.counter .label .tag{color:var(--accent)}
.counter .num{font-size:clamp(36px,4.4vw,70px);font-weight:500;letter-spacing:-.04em;line-height:1;font-feature-settings:"tnum"}
.counter .num .unit{font-size:.5em;color:var(--mute);margin-left:4px}
.counter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(0.16,1,0.3,1)}
.counter.in::after{transform:scaleX(1)}

.timeline{margin-top:48px;border-top:1px solid var(--line);padding-top:28px}
.timeline-row{
  display:grid;grid-template-columns:120px 220px 1fr auto;
  gap:28px;padding:24px 0;border-bottom:1px solid var(--line);
  align-items:start;
  transition:background .5s,padding .5s;
}
.timeline-row:hover{background:linear-gradient(90deg,rgba(212,255,0,.04),transparent);padding-left:14px}
.timeline-row .yr{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent)}
.timeline-row h4{font-size:clamp(16px,1.5vw,20px);font-weight:500;letter-spacing:-.01em}
.timeline-row p{color:#999;font-size:14px;line-height:1.55;max-width:60ch}
.timeline-row .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:#666;text-transform:uppercase;align-self:center;border:1px solid var(--line);padding:6px 10px}