.steel-story { position:relative; background:#0B0D10; }
.ss-scroll { height:600vh; }
.ss-stage  { position:relative; height:100vh; overflow:hidden; background:#0B0D10; }

/* ==========================================================================
   2 · BACKGROUND (blueprint grid, glows, vignette)
   ========================================================================== */
.ss-bg { position:absolute; inset:0; z-index:1; pointer-events:none; }
.ss-grid {
  position:absolute; inset:-12%;
  background-image:
    linear-gradient(rgba(120,170,255,0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.16) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px; opacity:0.28; will-change:transform;
}
.ss-grid.fine {
  background-image:
    linear-gradient(rgba(120,170,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,0.10) 1px, transparent 1px);
  background-size:24px 24px, 24px 24px; opacity:0.42;
}
.ss-glow {
  position:absolute; left:50%; top:52%; width:120vmax; height:120vmax;
  transform:translate(-50%,-50%); border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,122,24,0.55) 0%, rgba(255,122,24,0.14) 34%, rgba(255,122,24,0) 68%);
  will-change:transform, opacity;
}
.ss-cool {
  position:absolute; left:50%; top:50%; width:130vmax; height:130vmax;
  transform:translate(-50%,-50%); border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(150,190,255,0.30) 0%, rgba(150,190,255,0.07) 40%, rgba(150,190,255,0) 70%);
  will-change:transform, opacity;
}
.ss-vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(118% 82% at 50% 50%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.68) 100%),
    linear-gradient(180deg, rgba(11,13,16,0.84) 0%, rgba(11,13,16,0) 24%, rgba(11,13,16,0) 60%, rgba(11,13,16,0.94) 100%);
}

/* floating dust (built in JS) */
.ss-particles { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.ss-dot { position:absolute; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,0.5); will-change:transform, opacity; }
.ss-dot.hot { background:rgba(255,150,60,0.85); box-shadow:0 0 8px rgba(255,122,24,0.8); }

/* ==========================================================================
   3 · PSEUDO-3D CAMERA
   ========================================================================== */
.ss-viewport {
  position:absolute; inset:0; z-index:3;
  perspective:1500px; perspective-origin:50% 50%;
  display:flex; align-items:center; justify-content:center;
}
.ss-camera { position:relative; width:100%; height:100%; transform-style:preserve-3d; will-change:transform; }
.ss-scene {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; will-change:transform, opacity; opacity:0;
}

/* ---- composition: the 3D space each scene's plates live in ---- */
.ss-comp {
  position:relative; width:clamp(300px, 62vw, 900px); aspect-ratio:16/10;
  transform-style:preserve-3d; will-change:transform;
}

/* ==========================================================================
   4 · PHOTO PLATES
   Grayscale base + per-scene tint = mixed photography reads as one shoot.
   Filters are STATIC (never animated) — only transform/opacity move.
   ========================================================================== */
.ss-plate {
  position:absolute; border-radius:15px; overflow:hidden; background:#12161B;
  box-shadow:0 34px 70px rgba(0,0,0,0.62); will-change:transform, opacity;
}
.ss-plate img {
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(0.84);
}
/* tint layer */
.ss-plate::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* inner vignette + hairline frame */
.ss-plate::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 90px rgba(0,0,0,0.55);
  border-radius:15px;
}
.ss-plate .edge { position:absolute; inset:11px; z-index:3; border:1px solid rgba(255,255,255,0.16); border-radius:8px; pointer-events:none; }

/* --- tints --- */
.ss-plate--cool::after { background:linear-gradient(140deg, rgba(120,170,255,0.30), rgba(60,90,140,0.16) 55%, rgba(11,13,16,0.55)); }
.ss-plate--hot::after  { background:linear-gradient(140deg, rgba(255,138,42,0.62), rgba(214,62,6,0.40) 58%, rgba(20,10,6,0.55)); }
.ss-plate--steel::after{ background:linear-gradient(140deg, rgba(190,205,220,0.22), rgba(70,82,96,0.26) 55%, rgba(11,13,16,0.58)); }
.ss-plate--blue::after { background:linear-gradient(140deg, rgba(70,130,235,0.52), rgba(20,50,110,0.44) 60%, rgba(8,14,26,0.62)); }
.ss-plate--night::after{ background:linear-gradient(180deg, rgba(30,50,90,0.30), rgba(11,13,16,0.72)); }

/* --- plate placements inside a composition --- */
.p-hero  { left:0;    top:4%;   width:74%; height:92%; }
.p-inset { right:0;   bottom:-6%; width:38%; height:52%; }
.p-tall  { right:2%;  top:-6%;  width:34%; height:62%; }
.p-wide  { left:50%;  top:50%;  width:100%; height:100%; transform:translate(-50%,-50%); }

/* depth-of-field layers (skyline) — static blur, cheap */
.ss-layer { position:absolute; left:50%; top:50%; width:104%; height:74%; transform:translate(-50%,-50%); will-change:transform, opacity; }
.ss-layer--far  { filter:blur(4px); }
.ss-layer--mid  { filter:blur(1.5px); }
.ss-layer--near { filter:none; }
.ss-layer .ss-plate { inset:0; width:100%; height:100%; }

/* ==========================================================================
   5 · ANNOTATION OVERLAYS (the "engineered" layer over the photography)
   ========================================================================== */
.ss-anno { position:absolute; inset:0; z-index:4; overflow:visible; pointer-events:none; }
.ss-anno .draw { fill:none; stroke-linecap:square; }
.ss-anno .bracket { stroke:rgba(255,255,255,0.8); stroke-width:2; }
.ss-anno .dim     { stroke:#FF7A18; stroke-width:1.6; }
.ss-anno .grid    { stroke:rgba(120,170,255,0.5); stroke-width:1; }
.ss-anno .node    { fill:#FF7A18; }

/* small glass spec chip pinned to a composition */
.ss-chip {
  position:absolute; z-index:5; display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px; border-radius:15px; font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:#FFFFFF; white-space:nowrap;
  background:rgba(12,16,22,0.44); border:1px solid rgba(255,255,255,0.20);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); will-change:transform, opacity;
}
.ss-chip b { color:#FF7A18; font-weight:700; }
.chip-a { left:2%;  top:-7%; }
.chip-b { right:1%; top:64%; }

/* blueprint frame (scene 4) sits above its photo plate */
.ss-frame-svg { position:absolute; left:50%; top:50%; width:62%; transform:translate(-50%,-50%); z-index:4; overflow:visible; }

/* tower skeleton (scene 5) */
.ss-tower-svg { position:absolute; left:50%; top:50%; width:38%; transform:translate(-50%,-50%); z-index:4; overflow:visible; }

/* ==========================================================================
   6 · COPY
   ========================================================================== */
.ss-copy { position:absolute; inset:0; z-index:5; pointer-events:none; }
.ss-caption {
  position:absolute; left:0; right:0; bottom:12vh;
  padding:0 clamp(20px,5vw,72px); max-width:1400px; margin:0 auto; opacity:0;
  will-change:transform, opacity;
}
.ss-caption .inner { max-width:540px; }
.ss-tag {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  padding:8px 16px; border-radius:15px; font-size:11px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:#FFFFFF;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.ss-tag b { color:#FF7A18; font-weight:700; }
.ss-caption h2 { font-size:clamp(28px,4.4vw,54px); font-weight:600; color:#FFFFFF; letter-spacing:-0.03em; line-height:1.05; margin-bottom:12px; }
.ss-caption p { color:rgba(255,255,255,0.74); font-size:clamp(15px,1.35vw,18px); max-width:440px; }

/* final statement */
.ss-final {
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px;
  opacity:0; pointer-events:none;
}
.ss-final.live { pointer-events:auto; }
.ss-final h2 { font-size:clamp(34px,7vw,92px); font-weight:600; color:#FFFFFF; letter-spacing:-0.045em; line-height:0.98; }
.ss-final h2 em { font-style:normal; color:#FF7A18; }
.ss-final .line { display:block; overflow:hidden; }
.ss-final .line > span { display:block; will-change:transform; }
.ss-final p { color:rgba(255,255,255,0.68); font-size:clamp(15px,1.5vw,19px); margin:22px 0 34px; max-width:520px; }
.ss-cta {
  display:inline-flex; align-items:center; gap:11px; height:56px; padding:0 32px; border-radius:15px;
  background:#FF7A18; color:#0B0D10; font-size:16px; font-weight:700;
  box-shadow:0 16px 38px rgba(255,122,24,0.34);
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ss-cta:hover { transform:translateY(-3px); background:#ff8a33; box-shadow:0 22px 46px rgba(255,122,24,0.44); }
.ss-cta svg { width:18px; height:18px; transition:transform 0.25s ease; }
.ss-cta:hover svg { transform:translateX(4px); }

/* final backdrop image */
.ss-final-bg { position:absolute; inset:0; z-index:0; overflow:hidden; opacity:0; will-change:opacity, transform; }
.ss-final-bg img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(0.42); }
.ss-final-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,13,16,0.72), rgba(11,13,16,0.90)); }

/* ==========================================================================
   7 · CHAPTER RAIL + CUE
   ========================================================================== */
.ss-rail {
  position:absolute; right:clamp(16px,2.4vw,40px); top:50%; transform:translateY(-50%);
  z-index:7; display:flex; flex-direction:column; gap:14px; pointer-events:none;
}
.ss-rail button {
  display:flex; align-items:center; gap:12px; background:none; border:0; padding:0;
  color:rgba(255,255,255,0.42); font-family:inherit; font-size:10px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; pointer-events:auto;
  transition:color 0.35s ease;
}
.ss-rail button i { display:block; width:26px; height:2px; background:rgba(255,255,255,0.24); border-radius:2px; transition:background 0.35s ease, width 0.35s ease; }
.ss-rail button.active { color:#FFFFFF; }
.ss-rail button.active i { background:#FF7A18; width:44px; }

.ss-cue {
  position:absolute; left:50%; bottom:26px; z-index:7; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.55); pointer-events:none;
}
.ss-cue i { width:22px; height:36px; border:2px solid rgba(255,255,255,0.4); border-radius:13px; position:relative; }
.ss-cue i::after {
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px;
  background:#FF7A18; transform:translateX(-50%); animation:ssDot 1.9s ease-in-out infinite;
}
@keyframes ssDot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,11px)} 100%{opacity:0} }

/* ==========================================================================
   8 · RESPONSIVE
   ========================================================================== */
@media (max-width:1024px) {
  .ss-demo-pad { padding:90px 28px; }
  .ss-scroll { height:520vh; }
  .ss-viewport { perspective:1150px; }
  .ss-comp { width:clamp(300px, 78vw, 720px); }
  .ss-caption { bottom:14vh; }
  .ss-rail .label { display:none; }
  .ss-grid { background-size:72px 72px, 72px 72px; }
  .ss-chip { font-size:10px; padding:7px 12px; }
}
@media (max-width:720px) {
  .ss-demo-pad { padding:64px 20px; }
  .ss-demo-pad p { font-size:16px; }
  .ss-scroll { height:440vh; }
  .ss-viewport { perspective:880px; }
  /* single-plate compositions read better on a phone */
  .ss-comp { width:88vw; aspect-ratio:4/5; }
  .p-hero { left:0; top:0; width:100%; height:100%; }
  .p-inset { right:-4%; bottom:-5%; width:46%; height:34%; }
  .p-tall { display:none; }
  .ss-layer { width:112%; height:56%; }
  .ss-layer--far, .ss-layer--mid { filter:none; }   /* blur is costly on phones */
  .ss-plate { box-shadow:0 20px 40px rgba(0,0,0,0.55); }
  .ss-frame-svg { width:78%; }
  .ss-tower-svg { width:56%; }
  .chip-a { left:0; top:-9%; }
  .chip-b { right:0; top:auto; bottom:-9%; }
  .ss-caption { bottom:12vh; }
  .ss-caption .inner, .ss-caption p { max-width:none; }
  .ss-rail { right:12px; gap:11px; }
  .ss-rail button i { width:18px; }
  .ss-rail button.active i { width:30px; }
  .ss-cue { bottom:16px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }