/* =====================================================================
   da Vinci Scroll Story  ·  drirshad.ca About page  ·  v1.0
   Self-contained component. Every selector is scoped to .dvs so it
   cannot leak into the rest of the site. Uses the site tokens
   (--navy, --teal, --gold, --font-serif, --font-sans) when present,
   with identical fallbacks so it also works on its own.

   States
   .dvs              → STATIC layout (no JS, reduced motion): a still hero
   .dvs.is-live      → SCROLL layout: sticky stage, progress-driven motion
   .dvs--frames-ready / .dvs--glb-ready → real asset has replaced the
                       placeholder image (added by the JS)
   ===================================================================== */

.dvs{
  --dvs-ink:#07121F;
  --dvs-navy:var(--navy,#0C1F33);
  --dvs-teal:var(--teal,#0E8FC7);
  --dvs-teal-l:var(--teal-light,#35B4E4);
  --dvs-gold:var(--gold,#D97A22);
  --dvs-serif:var(--font-serif,'Playfair Display',Georgia,serif);
  --dvs-sans:var(--font-sans,'Plus Jakarta Sans',system-ui,-apple-system,sans-serif);
  --dvs-gutter:clamp(20px,6vw,88px);
  /* live values written by the JS (0 → 1) */
  --dvs-p:0; --dvs-field:.6; --dvs-sweep:.55; --dvs-warm:.6;
  --dvs-distance:550px;
  position:relative;
  background:var(--dvs-ink);
  color:#fff;
  font-family:var(--dvs-sans);
  isolation:isolate;
}
.dvs *,.dvs *::before,.dvs *::after{box-sizing:border-box}
.dvs :where(h1,h2,p,ol,li){margin:0;padding:0}
.dvs :where(ol){list-style:none}

/* ---------- Track + stage ---------- */
.dvs-track{position:relative}
.dvs-stage{
  position:relative;
  min-height:100vh; min-height:100svh;
  overflow:hidden;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse 62% 78% at 64% 42%, #10283F 0%, #0B1D31 42%, #07121F 78%, #050D18 100%);
}
.dvs.is-live .dvs-track{height:calc(100vh + var(--dvs-distance)); height:calc(100svh + var(--dvs-distance))}
.dvs.is-live .dvs-stage{position:sticky; top:0; height:100vh; height:100svh; min-height:0}

/* Environment: overhead clinical light + floor falloff */
.dvs-env{position:absolute; inset:0; z-index:0; pointer-events:none}
.dvs-env::before{
  content:""; position:absolute; left:40%; top:-30%; width:48%; height:100%;
  background:radial-gradient(ellipse 50% 58% at 50% 0%, rgba(190,225,245,.11), transparent 72%);
}
.dvs-env::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30%;
  background:linear-gradient(180deg, transparent, rgba(3,8,15,.55));
}

/* ---------- Visual (the robot) ---------- */
.dvs-visual{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  perspective:1800px; perspective-origin:62% 52%;
}
/* Virtual camera. The static transform below is the reduced-motion pose;
   in live mode the JS overwrites it every frame. */
.dvs-cam{
  position:absolute; inset:0;
  transform-origin:62% 60%;
  transform:translate3d(0,-1%,0) rotateX(1.5deg) rotateY(1.5deg) scale(1);
  will-change:transform;
}
/* The plate holds the placeholder photo at its native 3:2 ratio. */
.dvs-plate{
  position:absolute; left:64%; top:54%;
  width:min(84vw,138vh); aspect-ratio:3/2;
  transform:translate(-60%,-50%);
}
.dvs-plate img,
.dvs-sweep,
.dvs-warm{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 36%,#000 87%,transparent 97%),linear-gradient(180deg,transparent 0%,#000 6%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 24%,#000 36%,#000 87%,transparent 97%),linear-gradient(180deg,transparent 0%,#000 6%);
          mask-composite:intersect;
}
.dvs-plate img{display:block; object-fit:cover}

/* Implied operating field: a soft pool of teal light where the instruments converge */
.dvs-field{
  position:absolute; left:60%; top:67%; width:36%; aspect-ratio:2.6/1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(14,143,199,.55), rgba(14,143,199,.16) 48%, transparent 100%);
  filter:blur(6px); mix-blend-mode:screen;
  opacity:var(--dvs-field);
}
.dvs-ring{
  position:absolute; left:60.2%; top:63.5%; width:8.5%; aspect-ratio:1;
  border:1px solid rgba(53,180,228,.5); border-radius:50%;
  transform:translate(-50%,-50%) scale(calc(.8 + var(--dvs-field) * .2));
  opacity:calc(var(--dvs-field) * .5);
}
/* Specular sweep that travels across the robot with scroll */
.dvs-sweep{overflow:hidden; mix-blend-mode:overlay}
.dvs-sweep::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:38%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform:translateX(calc(66% + var(--dvs-sweep) * 158%)) skewX(-8deg);
}
/* Warm metallic edge light from the right */
.dvs-warm{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 26% 38% at 86% 30%, rgba(217,122,34,.6), transparent 70%);
  mix-blend-mode:soft-light; opacity:calc(var(--dvs-warm) * .85);
}

/* Static desktop layout: a little smaller and further right, to sit beside the full chapter list */
.dvs:not(.is-live) .dvs-plate{left:69%; width:min(76vw,118vh)}

/* Future assets. Hidden until the JS confirms they have loaded. */
.dvs-media{position:absolute; inset:0; width:100%; height:100%; display:none}
.dvs-media canvas{display:block; width:100%; height:100%}
.dvs.dvs--frames-ready .dvs-media--frames,
.dvs.dvs--glb-ready .dvs-media--glb{display:block}
.dvs.dvs--frames-ready .dvs-cam,
.dvs.dvs--glb-ready .dvs-cam{display:none}

/* Developer guide showing where the visual slot is (data-show-slot="true") */
.dvs-slot-tag{display:none}
.dvs[data-show-slot="true"] .dvs-slot-tag{
  display:block; position:absolute; z-index:3; top:96px; right:var(--dvs-gutter);
  padding:.45rem .7rem; border:1px dashed rgba(53,180,228,.6); border-radius:6px;
  font:600 .62rem/1.4 var(--dvs-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dvs-teal-l); background:rgba(7,18,31,.7);
}
.dvs[data-show-slot="true"] .dvs-visual::after{
  content:""; position:absolute; top:84px; bottom:24px; left:34%; right:calc(var(--dvs-gutter) - 12px);
  border:1px dashed rgba(53,180,228,.28); border-radius:14px;
}

/* ---------- Copy ---------- */
.dvs-copy{
  position:relative; z-index:2; width:100%; max-width:1320px; margin:0 auto;
  padding:132px var(--dvs-gutter) 96px;
}
.dvs-copy-inner{max-width:31rem}
.dvs.is-live .dvs-copy-inner{transform:translate3d(0, calc(var(--dvs-p) * -18px), 0)}

.dvs-eyebrow{
  display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem;
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--dvs-teal-l);
}
.dvs-eyebrow::before{content:""; width:36px; height:1px; background:linear-gradient(90deg,var(--dvs-gold),rgba(217,122,34,0))}
.dvs-name{
  font-family:var(--dvs-serif); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem,4.6vw,4.3rem); line-height:1.02; letter-spacing:.02em; color:#fff;
}
.dvs-role{
  margin-top:1rem; font-size:.8rem; font-weight:500; letter-spacing:.36em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.dvs-role::after{
  content:""; display:block; width:56px; height:2px; margin-top:1.3rem; border-radius:2px;
  background:linear-gradient(90deg,var(--dvs-gold),var(--dvs-teal));
}
.dvs-cred{margin-top:1.1rem; font-size:.8rem; line-height:1.6; color:rgba(255,255,255,.55)}

.dvs-slides{margin-top:2rem}
.dvs-intro{font-size:1.02rem; line-height:1.85; color:rgba(255,255,255,.76)}
.dvs-chapters{display:grid; gap:1.4rem; margin-top:1.8rem}
.dvs-num{
  display:flex; align-items:center; gap:.7rem;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; color:var(--dvs-teal-l);
}
.dvs-num::after{content:""; width:28px; height:1px; background:rgba(53,180,228,.45)}
.dvs-chapter h2{
  margin-top:.45rem; font-family:var(--dvs-serif); font-weight:400;
  font-size:clamp(1.35rem,2vw,1.75rem); line-height:1.2; color:#fff;
}
.dvs-chapter p{margin-top:.5rem; font-size:.94rem; line-height:1.75; color:rgba(255,255,255,.7)}

/* Live copy: intro and chapters share one slot and cross-fade */
.dvs.is-live .dvs-slides{display:grid; min-height:10.5rem}
.dvs.is-live .dvs-intro,
.dvs.is-live .dvs-chapters,
.dvs.is-live .dvs-chapter{grid-area:1/1; margin:0}
.dvs.is-live .dvs-chapters{display:grid}
.dvs.is-live .dvs-chapter{opacity:0; visibility:hidden; will-change:opacity,transform}

/* Progress rail */
.dvs-rail{display:none}
.dvs.is-live .dvs-rail{display:flex; gap:.45rem; margin-top:2.2rem; max-width:15rem}
.dvs-rail span{position:relative; flex:1; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.14)}
.dvs-rail i{position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,var(--dvs-teal),var(--dvs-teal-l))}

/* Scroll cue (static, fades out as soon as scrolling starts) */
.dvs-cue{display:none}
.dvs.is-live .dvs-cue{
  display:flex; align-items:center; gap:.8rem; position:absolute; z-index:2;
  left:var(--dvs-gutter); bottom:28px;
  font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.5); opacity:calc(1 - var(--dvs-p) * 14);
}
.dvs-cue::before{content:""; width:1px; height:30px; background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}

.dvs-note{
  position:absolute; z-index:2; right:var(--dvs-gutter); bottom:18px;
  font-size:.62rem; line-height:1.4; color:rgba(255,255,255,.5); text-align:right; max-width:22rem;
}

/* ---------- Tablet ---------- */
@media (max-width:1100px) and (min-width:761px){
  .dvs-plate{left:68%; width:min(96vw,140vh)}
  .dvs:not(.is-live) .dvs-plate{left:72%; width:min(86vw,120vh)}
  .dvs-copy-inner{max-width:25rem}
  .dvs-name{font-size:clamp(2.2rem,5vw,3.4rem)}
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .dvs-stage{align-items:flex-start}
  .dvs-copy{padding:104px 20px 0}
  .dvs-copy-inner{max-width:none}
  .dvs-eyebrow{margin-bottom:1rem}
  .dvs-name{font-size:clamp(2rem,9.6vw,2.9rem)}
  .dvs-role{font-size:.7rem; letter-spacing:.28em; margin-top:.7rem}
  .dvs-role::after{margin-top:.9rem}
  .dvs-cred{font-size:.74rem; margin-top:.8rem}
  .dvs-slides{margin-top:1.2rem}
  .dvs-intro,.dvs-chapter p{font-size:.9rem; line-height:1.7}
  .dvs-chapter h2{font-size:1.3rem}
  .dvs.is-live .dvs-slides{min-height:8.6rem}
  .dvs.is-live .dvs-rail{margin-top:1.1rem}
  /* robot sits in the lower part of the screen, never behind the text */
  .dvs-visual{perspective:1200px; perspective-origin:56% 78%}
  .dvs-cam{transform-origin:56% 80%}
  .dvs-plate{left:56%; top:auto; bottom:2%; width:min(124vw,66svh); transform:translate(-60%,0)}
  .dvs.is-live .dvs-stage::before{
    content:""; position:absolute; inset:0 0 auto 0; height:62%; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(7,18,31,.92) 0%, rgba(7,18,31,.75) 62%, rgba(7,18,31,0) 100%);
  }
  .dvs.is-live .dvs-cue{display:none}
  .dvs-note{left:20px; right:20px; bottom:10px; text-align:left; font-size:.58rem}
  .dvs[data-show-slot="true"] .dvs-slot-tag{top:auto; bottom:44%; right:20px}
  .dvs:not(.is-live)[data-show-slot="true"] .dvs-slot-tag{display:none}
  .dvs[data-show-slot="true"] .dvs-visual::after{top:48%; left:12px; right:12px; bottom:28px}

  /* Static mobile: text first, then the robot image in normal flow */
  .dvs:not(.is-live) .dvs-stage{display:flex; flex-direction:column}
  .dvs:not(.is-live) .dvs-copy{order:1; padding-bottom:0}
  .dvs:not(.is-live) .dvs-visual{position:relative; order:2; width:100%; height:86vw; flex:none; margin-top:1rem}
  .dvs:not(.is-live) .dvs-plate{width:118vw; left:56%}
  .dvs:not(.is-live) .dvs-note{position:relative; order:3; left:auto; right:auto; bottom:auto; padding:0 20px 20px}
}

/* Short desktop windows: keep the copy clear of the fixed nav */
@media (min-width:761px) and (max-height:760px){
  .dvs-copy{padding-top:112px; padding-bottom:64px}
  .dvs-name{font-size:clamp(2.2rem,4vw,3.4rem)}
  .dvs-cred{display:none}
}

@media (prefers-reduced-motion:reduce){
  .dvs *{transition:none !important; animation:none !important}
}