/* ============================================================
   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;}

/* ---------------- 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-top:clamp(56px,8vh,96px);margin-bottom:46px;}

/* ---------------- 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;
}

/* ============================================================
   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%;}
  /* fit the diagram to the viewport instead of forcing a horizontal scroll */
  .trace-stage{overflow-x:visible;}
  .trace-svg{min-width:0;}
  .trace-svg .tnode-id{font-size:12px;}
  .trace-svg .tnode-tip{font-size:13px;}
}
@media (prefers-reduced-motion: reduce){
  .boot-brand::before{animation:none;}
}

/* ============================================================
   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;}}

/* ============================================================
   MOBILE REFINEMENTS (v4.4.1) — tighter rhythm, calmer scroll
   ============================================================ */
@media (max-width:760px){
  :root{ --section-pad: clamp(52px, 7.5vh, 80px); }   /* less air between sections */
}