/* ============================================================
   FERIDUNONCEL.COM — cinematic.css  (additive enhancement layer)
   Loaded AFTER styles.css. Keeps the original palette/typography
   and layers on: cinematic chapter intros, a horizontal Work
   gallery, an animated stat band, section curtain transitions,
   and a quieter, more architectural decorative pass.
   Nothing here changes the brand colours — it only re-stages them.
   ============================================================ */

/* ---------------- 1 · DECLUTTER (more architectural) ---------------- */
/* Quieter film grain, and remove the two competing constellation SVGs
   so the hero WebGL scene reads as the single signature moment. */
body::after{opacity:.035;}
.about-side::before{display:none !important;}
.contact .section-head::before{display:none !important;}

/* A single hairline accent replaces the removed mesh behind the portrait */
.about-side{position:relative;}

/* ---------------- 2 · CINEMATIC CHAPTER INTROS ---------------- */
/* A large ghosted chapter numeral injected by cinematic.js sits behind
   each section title, giving every section a film-chapter rhythm. */
.section-head{position:relative;}
.section-head > .kicker,
.section-head > .section-title,
.section-head > .section-lede{position:relative;z-index:1;}
.chapter-mark{
  position:absolute;
  top:-.34em;left:-.06em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(120px, 19vw, 300px);
  line-height:.8;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(237,233,225,.06);
  pointer-events:none;
  z-index:0;
  user-select:none;
  white-space:nowrap;
}
.section-head.center .chapter-mark{left:50%;transform:translateX(-50%);}

/* Section titles breathe more — tighter tracking, a touch larger */
.section-title{letter-spacing:-.028em;}
.kicker{letter-spacing:.18em;}

/* ---------------- 3 · SECTION CURTAIN TRANSITIONS ---------------- */
/* Each curtained section starts under a near-black panel that lifts
   away (wipe-up) as the section scrolls into frame — driven by JS. */
.has-curtain{position:relative;overflow:clip;}
.sec-curtain{
  position:absolute;inset:0;z-index:6;
  background:linear-gradient(180deg, #060504 0%, #060504 62%, rgba(6,5,4,.86) 100%);
  transform-origin:top center;
  pointer-events:none;
  will-change:transform,opacity;
}
.no-intro .sec-curtain,html:not(.js) .sec-curtain{display:none;}

/* A thin ember scan-line rides the bottom edge of the lifting curtain */
.sec-curtain::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent, var(--ember) 30%, var(--copper) 70%, transparent);
  opacity:.5;
}

/* ---------------- 4 · STAT BAND (animated, cinematic) ---------------- */
.statband{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(209,75,47,.05), transparent 70%),
    var(--bg-2);
  position:relative;
  overflow:hidden;
}
.statband-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.stat{
  position:relative;
  padding:clamp(40px,6vh,74px) clamp(20px,3vw,40px);
  display:flex;flex-direction:column;gap:14px;
}
.stat + .stat{border-left:1px dashed var(--line);}
.stat-num{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(52px, 7vw, 104px);
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:flex-start;gap:.06em;
}
.stat-num .unit{
  color:var(--ember);
  font-size:.42em;
  line-height:1;
  margin-top:.18em;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
  max-width:22ch;
}
.stat-rule{height:1px;width:34px;background:var(--ember);opacity:.6;}

@media (max-width:820px){
  .statband-inner{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .statband-inner{grid-template-columns:1fr;}
  .stat + .stat{border-left:0;border-top:1px dashed var(--line);}
}

/* ---------------- 5 · HORIZONTAL WORK GALLERY ---------------- */
/* The centrepiece. On desktop the Work section pins and the panel
   track translates horizontally as you scroll. On small screens it
   degrades to a clean vertical stack (see media query at the end). */
#work.work-cine{border-top:1px solid var(--line);overflow:clip;}
.work-head{margin-bottom:46px;}

.work-progress{
  display:flex;align-items:center;gap:16px;
  margin-top:30px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--faint);text-transform:uppercase;
}
.work-progress .wp-track{
  position:relative;flex:1;height:1px;background:var(--line-strong);max-width:420px;
}
.work-progress .wp-fill{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--ember),var(--copper));
}
.work-progress .wp-count{color:var(--text);}
.work-progress .wp-count b{color:var(--ember);font-weight:500;}

.work-viewport{position:relative;}
.work-track{
  display:flex;
  gap:clamp(20px,2.4vw,34px);
  align-items:stretch;
  padding:8px var(--pad) 8px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  will-change:transform;
}
.work-panel{
  position:relative;
  flex:0 0 auto;
  width:min(80vw, 560px);
  min-height:clamp(420px, 62vh, 600px);
  display:flex;flex-direction:column;
  background:linear-gradient(152deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(30px,3.4vw,52px);
  overflow:hidden;
}
.work-panel::before{ /* faint engineering grid inside each panel */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 90% 8%, #000 0%, transparent 60%);
          mask-image:radial-gradient(120% 90% at 90% 8%, #000 0%, transparent 60%);
}
.work-panel > *{position:relative;z-index:1;}
.work-panel .wp-ghost{ /* huge ghosted index watermark */
  position:absolute;top:-.18em;right:.04em;z-index:0;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(150px,20vw,230px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(209,75,47,.10);
  pointer-events:none;user-select:none;
}
.wp-top{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);
  margin-bottom:auto;
}
.wp-top .wp-sector{color:var(--faint);}
.wp-top .wp-dot{width:5px;height:5px;border-radius:50%;background:var(--copper);}
.work-panel h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,2.4vw,33px);line-height:1.12;letter-spacing:-.02em;
  margin-top:clamp(40px,7vh,90px);
  max-width:18ch;
  text-wrap:balance;
}
.work-panel .wp-body{
  color:var(--muted);font-size:clamp(14px,1.05vw,15.5px);line-height:1.62;
  margin-top:18px;max-width:46ch;
}
.work-panel .chips{margin-top:22px;}
.wp-foot{
  margin-top:24px;padding-top:18px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
.work-panel:hover{border-color:rgba(209,75,47,.34);}

/* A trailing "end-cap" panel that closes the horizontal run */
.work-endcap{
  flex:0 0 auto;width:min(58vw,360px);min-height:clamp(420px,62vh,600px);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
  padding:clamp(30px,3vw,48px);
}
.work-endcap .ec-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);}
.work-endcap h3{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,2.6vw,38px);letter-spacing:-.02em;line-height:1.08;}
.work-endcap p{color:var(--muted);font-size:15px;max-width:30ch;}
.work-endcap .ec-arrow{font-size:13px;color:var(--copper);letter-spacing:.1em;}

/* scroll hint under the gallery on desktop */
.work-hint{
  display:flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
.work-hint .wh-line{width:40px;height:1px;background:var(--line-strong);position:relative;overflow:hidden;}
.work-hint .wh-line::after{content:"";position:absolute;inset:0;background:var(--ember);transform:translateX(-100%);animation:cue 2.6s ease-in-out infinite;}

/* ---------------- 6 · CINEMATIC CONTACT CLOSE ---------------- */
.contact .section-title{letter-spacing:-.03em;}
.contact-mark{
  display:block;margin:0 auto 6px;width:1px;height:54px;
  background:linear-gradient(180deg,transparent,var(--ember));
  opacity:.7;
}

/* ---------------- 7 · MOBILE / FALLBACK STACK FOR WORK ---------------- */
@media (max-width:900px){
  .work-track{
    flex-direction:column;
    transform:none !important;
    padding:0;
    gap:18px;
  }
  .work-panel{width:100%;min-height:0;}
  .work-panel h3{margin-top:30px;}
  .work-endcap{width:100%;min-height:0;text-align:left;}
  .work-hint{display:none;}
  .work-viewport{overflow:visible;}
}

/* When pinning is inactive (reduced motion / no JS), never clip horizontally */
.no-intro .work-track,html:not(.js) .work-track{transform:none !important;}
@media (prefers-reduced-motion: reduce){
  .work-track{flex-direction:column;transform:none !important;padding:0;gap:18px;}
  .work-panel,.work-endcap{width:100%;min-height:0;}
  .work-hint{display:none;}
  .sec-curtain{display:none;}
}

/* ============================================================
   9 · PERSISTENT TRACEABILITY SPINE (left rail, wide screens)
   ============================================================ */
.spine{
  position:fixed;left:26px;top:0;height:100vh;width:150px;z-index:90;
  pointer-events:none;
}
.spine-line{position:absolute;left:6px;top:19vh;bottom:19vh;width:1px;background:var(--line-strong);}
.spine-fill{position:absolute;left:0;top:0;width:1px;height:0%;background:linear-gradient(180deg,var(--ember),var(--copper));}
.spine-dots{
  position:absolute;left:0;top:19vh;bottom:19vh;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:auto;
}
.spine-dot{
  display:flex;align-items:center;gap:12px;position:relative;
  text-decoration:none;
}
.sd-mark{
  width:9px;height:9px;border-radius:50%;margin-left:2px;flex:0 0 auto;
  border:1px solid var(--line-strong);background:var(--bg);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.spine-dot:hover .sd-mark{border-color:var(--ember);}
.spine-dot.active .sd-mark{
  background:var(--ember);border-color:var(--ember);
  box-shadow:0 0 12px rgba(209,75,47,.6);transform:scale(1.15);
}
.sd-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .3s ease, transform .3s ease;
}
.spine-dot:hover .sd-label{opacity:1;transform:none;}
.spine-dot.active .sd-label{opacity:1;transform:none;color:var(--text);}
@media (max-width:1300px){.spine{display:none;}}
.no-intro .spine .spine-fill{height:100%;}

/* ============================================================
   10 · INTERACTIVE TRACEABILITY DIAGRAM (Expertise signature)
   ============================================================ */
.trace-figure{
  margin:0 0 clamp(48px,7vh,96px);
  padding:clamp(26px,3vw,40px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(209,75,47,.05), transparent 60%),
    linear-gradient(150deg,var(--surface),var(--surface-2));
}
.trace-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vh,36px);
}
.trace-cap{max-width:52ch;}
.trace-cap .tc-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:16px;}
.trace-cap .tc-title{
  font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.3vw,32px);
  letter-spacing:-.02em;line-height:1.12;margin-bottom:14px;
}
.trace-cap .tc-lede{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:48ch;}
.trace-readout{
  flex:0 0 auto;width:262px;max-width:100%;
  padding:15px 18px;border:1px dashed var(--line);border-radius:8px;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;align-items:baseline;
  font-size:12px;letter-spacing:.04em;
}
.trace-readout .tr-id{color:var(--ember);font-size:13px;letter-spacing:.1em;white-space:nowrap;}
.trace-readout .tr-type{color:var(--faint);text-transform:uppercase;font-size:10px;letter-spacing:.18em;justify-self:end;white-space:nowrap;}
.trace-readout .tr-label{grid-column:1/-1;color:var(--text);font-size:14px;font-family:var(--font-sans);letter-spacing:0;}
.trace-readout .tr-links{grid-column:1/-1;color:var(--copper);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;}

.trace-stage{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;}
.trace-svg{display:block;width:100%;height:auto;min-width:600px;overflow:visible;}
.trace-svg .tlink{stroke:var(--line-strong);stroke-width:1.4;fill:none;transition:stroke .3s ease, stroke-width .3s ease, opacity .3s ease;}
.trace-svg .tnode-hit{fill:transparent;cursor:pointer;}
.trace-svg .tnode-box{
  fill:var(--bg-2);stroke:var(--line-strong);stroke-width:1.2;
  transition:stroke .3s ease, fill .3s ease;
}
.trace-svg .tnode-id{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;fill:var(--muted);transition:fill .3s ease;}
.trace-svg .tnode-dot{transition:fill .3s ease, r .2s ease;}
.trace-svg .tnode[data-tier="0"] .tnode-dot{fill:var(--ember);}
.trace-svg .tnode[data-tier="1"] .tnode-dot{fill:var(--copper);}
.trace-svg .tnode[data-tier="2"] .tnode-dot{fill:var(--muted);}
.trace-svg .tnode[data-tier="3"] .tnode-dot{fill:var(--faint);}
.trace-svg.tracing .tlink{opacity:.12;}
.trace-svg.tracing .tnode{opacity:.3;}
.trace-svg.tracing .tlink.on{opacity:1;stroke:var(--ember);stroke-width:2;}
.trace-svg.tracing .tnode.on{opacity:1;}
.trace-svg.tracing .tnode.on .tnode-box{stroke:var(--ember);fill:#1b1310;}
.trace-svg.tracing .tnode.on .tnode-id{fill:var(--text);}
.trace-svg.tracing .tnode.on .tnode-dot{fill:var(--ember);}
.trace-svg .tnode-tip{
  font-family:var(--font-sans);font-size:11px;fill:var(--text);
  opacity:0;transition:opacity .25s ease;pointer-events:none;
}
.trace-svg.tracing .tnode.focus .tnode-tip{opacity:1;}
.trace-hint{
  grid-column:1/-1;margin-top:3px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}

@media (max-width:760px){
  .trace-head{flex-direction:column;align-items:stretch;gap:20px;}
  .trace-readout{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .boot-brand::before{animation:none;}
}

/* ============================================================
   11 · KINETIC MANIFESTO (interstitial breath)
   ============================================================ */
.manifesto{
  position:relative;overflow:clip;
  padding:clamp(120px,22vh,240px) 0;
  border-top:1px solid var(--line);
  background:
    radial-gradient(58% 80% at 50% 50%, rgba(209,75,47,.06), transparent 72%),
    var(--bg-2);
}
.mf-kicker{
  display:flex;align-items:center;gap:12px;
  font-size:11.5px;text-transform:uppercase;color:var(--ember);letter-spacing:.18em;
  margin-bottom:clamp(26px,4vh,40px);
}
.mf-kicker .kdash{width:30px;height:1px;background:var(--ember);opacity:.7;display:inline-block;}
.mf-text{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,5vw,66px);line-height:1.16;letter-spacing:-.022em;
  max-width:20ch;text-wrap:balance;
}
.mf-text .w{
  display:inline-block;color:var(--text);opacity:.12;
  transition:opacity .55s ease, transform .55s ease;
  will-change:opacity;
}
.mf-text .w.lit{opacity:1;}
/* no-JS fallback: render the source sentence as the statement */
html:not(.js) .mf-text{display:none;}
html:not(.js) .mf-src{
  position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal;
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,5vw,66px);line-height:1.16;letter-spacing:-.022em;color:var(--text);max-width:20ch;
}

/* ============================================================
   12 · HERO HUD BAR (fills the space above the title)
   ============================================================ */
.hero-hud{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:18px;margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.hero-hud .hero-kicker{margin-bottom:0;}
.hero-hud-right{
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
@media (max-width:680px){
  .hero-hud{border-bottom:0;padding-bottom:0;margin-bottom:0;display:block;}
  .hero-hud .hero-kicker{margin-bottom:30px;}
  .hero-hud-right{display:none;}
}
@media (max-width:900px){.reticle{display:none;}}