/* Scroll-controlled product concept. Static reading order is the default. */
.reading-story {
  position:relative;
  padding-block:100px;
  --story-gold:#f3a635;
}
.story-layout { display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr); align-items:center; gap:30px; }
.story-copy { min-width:0; }
.story-copy h2 { font-size:48px; line-height:1.13; margin-top:20px; letter-spacing:-.055em; }
.story-copy h2 span { color:var(--gold-ink); }
.story-intro { max-width:410px; font-size:14px; line-height:1.8; margin-top:20px; }
.story-steps { margin-top:25px; max-width:435px; }
.story-step { display:flex; gap:15px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line); }
.story-step-number { display:grid; place-items:center; width:31px; height:31px; flex:0 0 31px; border:1px solid #d9c8a9; border-radius:50%; color:var(--gold-ink); font-size:11px; font-weight:600; }
.story-step h3 { font-size:16px; line-height:1.3; letter-spacing:-.025em; font-weight:600; }
.story-step p { margin-top:5px; font-size:12px; line-height:1.6; }
.story-scroll-hint { display:none; align-items:center; gap:9px; font-size:11px; margin-top:18px; color:var(--muted); }
.story-scroll-hint span { font-size:20px; color:var(--gold-ink); }
.story-visual {
  min-width:0; width:100%; max-width:640px; margin:0;
  --story-progress:1; --approach:1; --retreat:1; --contact:0;
  --activation:1; --ring:1; --book-reveal:1;
}
.story-stage { position:relative; width:100%; aspect-ratio:1; isolation:isolate; overflow:clip; }
.story-halo { position:absolute; inset:6% -2% 0 -3%; z-index:-2; background:radial-gradient(ellipse at 57% 47%,#f3a63522,transparent 65%); border-radius:50%; }
.story-orbit { position:absolute; width:71%; aspect-ratio:1; border:1px solid #d8bc8533; border-radius:50%; left:15%; top:14%; transform:rotate(-15deg) scaleY(.86); z-index:-1; }
.story-orbit-two { width:89%; left:6%; top:5%; border-style:dashed; border-color:#d8bc852b; }
.story-phone { position:absolute; width:65%; right:0; top:1%; transform:rotate(calc(var(--contact) * -1.3deg)) scale(calc(1 + var(--contact) * .018)); transform-origin:55% 50%; }
.story-phone img { width:100%; height:auto; }
.story-phone-active { position:absolute; inset:0; opacity:var(--activation); }
.story-puck {
  position:absolute; width:43%; height:auto; left:0; bottom:9%; z-index:3;
  transform:translate(calc(var(--approach) * 85% - var(--retreat) * 80%),calc(var(--approach) * -115% + var(--retreat) * 170%)) rotate(calc(-12deg + var(--approach) * 22deg - var(--retreat) * 18deg)) scale(calc(1 - var(--approach) * .12));
  opacity:calc(1 - var(--retreat) * .68);
  transform-origin:47% 46%;
}
.story-touch { position:absolute; width:16%; aspect-ratio:1; left:52%; top:18%; opacity:var(--contact); z-index:4; pointer-events:none; }
.story-touch span { position:absolute; inset:27%; border:2px solid var(--story-gold); border-radius:50%; background:#f3a63513; box-shadow:0 0 25px #f3a6352b; }
.story-touch span:nth-child(1) { transform:scale(calc(.8 + var(--contact) * .55)); }
.story-touch span:nth-child(2) { transform:scale(calc(1.2 + var(--contact) * 1.2)); opacity:.6; }
.story-touch span:nth-child(3) { transform:scale(calc(1.7 + var(--contact) * 1.7)); opacity:.3; }
.story-activation {
  display:flex; align-items:center; gap:9px; position:absolute; left:18%; top:14%; z-index:5;
  background:#fffcf4; color:var(--ink); border:1px solid #e6c384; padding:11px 16px;
  border-radius:99px; box-shadow:0 8px 30px #4e3e2210; font-size:12px; font-weight:550;
  opacity:calc(var(--activation) * (1 - var(--retreat)));
  transform:translateY(calc((1 - var(--activation)) * 12px));
}
.story-activation>span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:var(--story-gold); }
.story-activation svg { width:14px; height:14px; }
.story-book { position:absolute; width:66%; height:auto; left:14%; bottom:1%; z-index:4; opacity:var(--book-reveal); transform:translateY(calc((1 - var(--book-reveal)) * 65px)) rotate(calc(-14deg + var(--book-reveal) * 7deg)) scale(calc(.9 + var(--book-reveal) * .1)); }
.story-visual figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 10px 0; }
.story-state { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:550; color:var(--ink); }
.story-state::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--story-gold); }
.story-concept { font-size:10px; color:var(--muted); }
.story-progress { display:none; height:2px; background:#dfd1b855; margin:15px 10px 0; overflow:hidden; }
.story-progress>span { display:block; width:calc(var(--story-progress) * 100%); height:100%; background:var(--story-gold); }

/* Enhancement adds a sticky stage, never wheel capture or scroll hijacking. */
.reading-story.is-enhanced { height:270svh; min-height:1700px; padding:0; margin-block:80px; }
.is-enhanced .story-rail { position:sticky; top:6svh; height:88svh; min-height:620px; }
.is-enhanced .story-layout { height:100%; }
.is-enhanced .story-scroll-hint,.is-enhanced .story-progress { display:flex; }
.is-enhanced .story-step { opacity:1; transition:color .25s ease; }
.is-enhanced .story-step:not(.is-active) h3 { color:var(--muted); font-weight:500; }
.is-enhanced .story-step.is-active { opacity:1; }
.is-enhanced .story-step.is-active .story-step-number { background:var(--story-gold); border-color:var(--story-gold); color:var(--ink); }
.is-enhanced .story-puck,.is-enhanced .story-book,.is-enhanced .story-phone { will-change:transform; }

@media(min-width:1650px) {
  .story-copy h2 { font-size:53px; }
  .story-layout { gap:60px; }
  .story-steps { margin-top:30px; }
  .story-step { padding:18px 0; }
  .story-visual { max-width:680px; }
}
@media(max-width:1200px) {
  .story-layout { grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:10px; }
  .story-copy h2 { font-size:40px; }
  .story-copy>.eyebrow { font-size:10px; }
  .story-intro { font-size:12px; max-width:340px; }
  .story-step { padding:12px 0; gap:12px; }
  .story-step h3 { font-size:14px; }
  .story-step p { font-size:11px; }
  .story-step-number { width:28px; height:28px; flex-basis:28px; }
  .story-activation { font-size:10px; padding:9px 12px; left:10%; }
}
@media(max-width:800px) {
  .story-copy h2 { font-size:35px; }
  .story-layout { grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
  .story-intro { font-size:12px; }
  .story-step h3 { font-size:13px; }
  .story-step p { font-size:10px; }
  .story-step { gap:10px; }
  .story-state { font-size:10px; }
  .story-concept { font-size:8px; }
}
@media(max-width:700px) {
  .reading-story { padding-block:65px; }
  .story-layout { grid-template-columns:1fr; gap:25px; }
  .story-copy h2 { font-size:37px; }
  .story-intro { font-size:13px; max-width:100%; }
  .story-steps { max-width:none; }
  .story-step h3 { font-size:15px; }
  .story-step p { font-size:12px; }
  .story-visual { width:min(100%,440px); margin-inline:auto; }
  .story-stage { width:100%; }
  .story-activation { font-size:9px; left:10%; top:12%; padding:7px 9px; gap:6px; }
  .story-activation>span { width:19px; height:19px; }
  .story-activation svg { width:12px; height:12px; }
  .story-state { font-size:11px; }
  .story-concept { font-size:9px; }
  .reading-story.is-enhanced { height:240svh; min-height:1400px; margin-block:65px; }
  .is-enhanced .story-rail { top:2svh; height:96svh; min-height:0; }
  .is-enhanced .story-layout { display:flex; flex-direction:column; justify-content:center; gap:5px; }
  .is-enhanced .story-copy { width:100%; }
  .is-enhanced .story-copy h2 { font-size:30px; line-height:1.12; margin-top:10px; }
  .is-enhanced .story-copy .eyebrow { font-size:9px; letter-spacing:.18em; }
  .is-enhanced .story-intro,.is-enhanced .story-scroll-hint { display:none; }
  .is-enhanced .story-steps { position:relative; height:76px; margin-top:16px; }
  .is-enhanced .story-step { position:absolute; inset:0; padding:12px 0; opacity:0; pointer-events:none; }
  .is-enhanced .story-step.is-active { opacity:1; }
  .is-enhanced .story-step h3 { font-size:14px; }
  .is-enhanced .story-step p { font-size:11px; }
  .is-enhanced .story-visual { width:min(100%,41svh); }
  .is-enhanced .story-visual figcaption { padding-top:6px; }
  .is-enhanced .story-progress { margin-top:10px; }
}
@media(max-height:740px) and (min-width:701px) {
  .is-enhanced .story-rail { top:2svh; height:96svh; min-height:0; }
  .story-copy h2 { font-size:35px; margin-top:12px; }
  .story-intro { display:none; }
  .story-step { padding:11px 0; }
  .story-visual { max-width:75svh; }
}
@media(prefers-reduced-motion:reduce) {
  .reading-story { height:auto!important; min-height:0!important; padding-block:65px!important; }
  .story-step { opacity:1!important; transition:none!important; }
  .story-puck,.story-book,.story-phone { will-change:auto!important; }
  .story-scroll-hint { display:none!important; }
}