.brand-image{object-fit:cover;filter:grayscale(1) contrast(1.15);padding:2px;background:#666}.holocron-story{height:300vh;background:var(--bg);position:relative}.holocron-stage{height:100vh;position:sticky;top:0;overflow:hidden;display:grid;align-items:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);align-items:center;gap:clamp(2rem,8vw,9rem)}.story-copy{position:relative;z-index:1}.story-copy h2{font-size:clamp(2.3rem,5.5vw,4.9rem);letter-spacing:-.065em;line-height:1.04;margin:1.7rem 0 3rem;font-weight:600}.story-copy h2 em{font-style:normal;color:var(--accent)}.story-steps{border-top:1px solid var(--border);max-width:470px}.story-step{display:none;color:var(--text-muted);font-size:1.02rem;line-height:1.55;margin:0;padding:1.2rem 0;border-bottom:1px solid var(--border)}.story-step.is-active{display:block;animation:story-in .35s ease both}.story-step strong{display:block;color:var(--accent);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}.holocron-visual{--turn:0deg;--tilt:0deg;--lift:0px;position:relative;width:min(46vw,560px);justify-self:center;aspect-ratio:1;display:grid;place-items:center;perspective:1050px}.holocron-visual img{width:100%;height:auto;display:block;position:relative;z-index:1;transform:translateY(var(--lift)) rotateX(var(--tilt)) rotateY(var(--turn));transition:transform .08s linear;will-change:transform;filter:saturate(.92) contrast(1.04)}.holocron-orbit{width:86%;height:86%;position:absolute;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:50%;transform:rotateX(69deg) rotateZ(var(--turn));transition:transform .08s linear}.holocron-caption{position:absolute;z-index:2;right:-.5rem;bottom:3%;font-size:.7rem;letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;writing-mode:vertical-rl}.holocron-stage:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 69% 53%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 28%);pointer-events:none}@keyframes story-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.holocron-story{height:240vh}.story-grid{grid-template-columns:1fr;gap:1.5rem}.story-copy h2{margin:1rem 0 1.75rem}.holocron-visual{width:min(80vw,390px);order:-1}.holocron-caption{right:0}.holocron-stage:after{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 37%)}}@media(prefers-reduced-motion:reduce){.holocron-story{height:auto}.holocron-stage{height:auto;position:relative;padding:5rem 0}.story-step{display:block}.story-step:not(.is-active){margin-top:-1px}.holocron-visual{--turn:0deg!important;--tilt:0deg!important;--lift:0px!important}.holocron-visual img,.holocron-orbit{transition:none;transform:none}.story-step.is-active{animation:none}}

/* Progress Ring — 3 arc segments that rotate with the Holocron */
.story-progress-ring {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  z-index: 3;
  pointer-events: none;
  transform: rotate(var(--turn, 0deg));
  transition: transform .08s linear;
  will-change: transform;
}

.progress-track {
  stroke: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke-width: 1.5;
  fill: none;
}

.progress-arc {
  stroke: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  transition: stroke 0.4s ease, filter 0.4s ease, stroke-width 0.4s ease;
}

.progress-arc.is-active {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
}

.progress-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: color-mix(in srgb, var(--text-muted) 50%, transparent);
  transition: fill 0.4s ease;
}

.progress-label.is-active {
  fill: var(--accent);
}

@media (max-width: 760px) {
  .story-progress-ring {
    inset: -5%;
    width: 110%;
    height: 110%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-progress-ring {
    transform: none !important;
    transition: none;
  }
}