/* Scroll inspection (signature hero) + Flashlight reveal */
.hop-si{position:relative;background:#241C1E;color:#fff;margin-top:0!important;margin-bottom:0!important}
.hop-si__sticky{position:relative}
.hop-si__stage{position:relative;overflow:hidden;aspect-ratio:16/9;max-height:92vh}
.hop-si__zoom{position:absolute;inset:0;transform-origin:62% 55%}
.hop-si__zoom picture,.hop-si__zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0}
.hop-si__a{z-index:1}
.hop-si__b{z-index:2}
.hop-si__scan{position:absolute;left:0;right:0;z-index:3;height:2px;top:0;opacity:0;background:linear-gradient(90deg,transparent,#FF5A59 18%,#fff 50%,#FF5A59 82%,transparent);box-shadow:0 0 18px 4px rgba(255,49,48,.65),0 0 60px 18px rgba(212,36,35,.35);pointer-events:none}
.hop-si__scan::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:120px;background:linear-gradient(to top,rgba(110,150,255,.22),transparent)}
.hop-si__veil{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,rgba(36,28,30,.72) 0%,rgba(36,28,30,.38) 34%,rgba(36,28,30,0) 62%),linear-gradient(0deg,rgba(36,28,30,.45),rgba(36,28,30,0) 30%)}
.hop-si__dots{position:absolute;inset:0;z-index:5;pointer-events:none}
.hop-si__dot{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(212,36,35,.9),0 0 24px 6px rgba(255,49,48,.7);opacity:0;transform:scale(.4);transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.hop-si__dot::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(255,90,89,.9);animation:hop-ring 1.8s cubic-bezier(.16,1,.3,1) infinite}
.hop-si__dot.is-on{opacity:1;transform:scale(1)}
.hop-si__dot.is-done{opacity:.85;transform:scale(.7);background:#3ddc97;box-shadow:0 0 0 3px rgba(20,138,91,.9)}
.hop-si__dot.is-done::after{display:none}

.hop-si__intro{position:absolute;z-index:6;left:max(1rem,calc((100vw - 1240px)/2 + 1rem));top:50%;transform:translateY(-46%);width:min(620px,calc(100% - 2rem))}
.hop-si__intro h1{color:#fff;font-size:clamp(2.4rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.035em;margin:.75rem 0 1rem;text-wrap:balance}
.hop-si__intro p.hop-si__sub{color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;margin:0 0 1.75rem}
.hop-si__intro .hop-eyebrow{color:#FFC9C8}
.hop-si__intro .wp-element-button,.hop-si .hop-btn-light{background:#fff;color:var(--hop-ink);border-radius:999px;padding:.9rem 1.4rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:transform .18s cubic-bezier(.16,1,.3,1),background .25s}
.hop-si .hop-btn-light:hover{background:#FBE3E2}
.hop-si .hop-btn-light::after{content:"→";transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hop-si .hop-btn-light:hover::after{transform:translateX(4px)}
.hop-si__cue{position:absolute;z-index:6;left:50%;bottom:1.25rem;transform:translateX(-50%);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);display:none;align-items:center;gap:.6rem}
.hop-si__cue i{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.7);border-radius:12px;position:relative}
.hop-si__cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:hop-cue 1.6s infinite}
@keyframes hop-cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

/* Static (no JS / reduced motion): chapters as a list below the image */
.hop-si__panel{position:relative;z-index:6;padding:clamp(2rem,5vw,4rem) max(1rem,calc((100vw - 1240px)/2 + 1rem))}
.hop-si__chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.hop-si__ch{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:1.4rem}
.hop-si__n{font-family:var(--wp--preset--font-family--serif);font-style:italic;font-size:1.6rem;color:#FF5A59;line-height:1}
.hop-si__ch h2{color:#fff;font-size:1.35rem;letter-spacing:-.02em;margin:.6rem 0 .5rem;line-height:1.15}
.hop-si__ch p{color:rgba(255,255,255,.78);margin:0;font-size:.98rem;line-height:1.55}
.hop-si__progress{display:none}
.hop-si__report{position:relative;z-index:6;padding:0 max(1rem,calc((100vw - 1240px)/2 + 1rem)) clamp(2rem,5vw,4rem);display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.hop-si__report h2{color:#fff;font-size:clamp(2rem,4vw,3.25rem);margin:0 0 .75rem;line-height:1.05}
.hop-si__report p{color:rgba(255,255,255,.8);margin:0 0 1.5rem}

/* Live (JS + motion OK): pinned, scrubbed by scroll */
.hop-si.is-live{height:var(--si-h,560vh)}
.hop-si.is-live .hop-si__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hop-si.is-live .hop-si__stage{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
.hop-si.is-live .hop-si__zoom{transform:scale(calc(1.03 + var(--p,0) * .09));will-change:transform}
.hop-si.is-live .hop-si__b{clip-path:inset(0 0 calc((1 - var(--r,0)) * 100%) 0);will-change:clip-path}
.hop-si.is-live .hop-si__scan{top:calc(var(--r,0) * 100%);opacity:var(--scan,0)}
.hop-si.is-live .hop-si__veil{opacity:calc(.55 + var(--intro,1) * .45)}
.hop-si.is-live .hop-si__intro{opacity:var(--intro,1);transform:translateY(calc(-46% - (1 - var(--intro,1)) * 60px));pointer-events:var(--intro-pe,auto)}
.hop-si.is-live .hop-si__cue{display:flex;opacity:var(--intro,1)}
.hop-si.is-live .hop-si__panel{position:absolute;inset:auto auto 50% max(1rem,calc((100vw - 1240px)/2 + 1rem));transform:translateY(50%);padding:0;width:min(440px,40vw)}
.hop-si.is-live .hop-si__chapters{display:grid;grid-template-columns:1fr}
.hop-si.is-live .hop-si__ch{grid-area:1/1;background:rgba(36,28,30,.66);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-color:rgba(255,90,89,.22);padding:1.75rem;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.hop-si.is-live .hop-si__ch.is-active{opacity:1;transform:none}
.hop-si.is-live .hop-si__ch h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.hop-si.is-live .hop-si__progress{display:block;position:absolute;z-index:6;right:max(1rem,calc((100vw - 1240px)/2 + 1rem));top:50%;transform:translateY(-50%);opacity:calc(1 - var(--intro,1));transition:opacity .3s}
.hop-si__progress ul{list-style:none;margin:0;padding:0 0 0 1.4rem;display:grid;gap:1.1rem;position:relative}
.hop-si__rail{position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.18);border-radius:2px}
.hop-si__rail i{position:absolute;inset:0 0 auto 0;height:calc(var(--r,0) * 100%);background:linear-gradient(#FF5A59,#3ddc97);border-radius:2px}
.hop-si__progress li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.55);transition:color .3s;margin-left:-1.4rem}
.hop-si__progress li svg{width:20px;height:20px;flex:none;border-radius:50%;background:#241C1E;box-shadow:0 0 0 1.5px rgba(255,255,255,.35);transition:background .3s,box-shadow .3s}
.hop-si__progress li svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1)}
.hop-si__progress li.is-active{color:#fff}
.hop-si__progress li.is-active svg{box-shadow:0 0 0 2px #FF5A59}
.hop-si__progress li.is-done{color:rgba(255,255,255,.85)}
.hop-si__progress li.is-done svg{background:var(--hop-clear,#148A5B);box-shadow:0 0 0 2px var(--hop-clear,#148A5B)}
.hop-si__progress li.is-done svg path{stroke-dashoffset:0}
.hop-si__pct{display:block;margin-top:1.25rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.hop-si__pct b{color:#fff;font-variant-numeric:tabular-nums}
.hop-si.is-live .hop-si__report{position:absolute;inset:auto 0 50% 0;transform:translateY(calc(50% + (1 - var(--end,0)) * 40px));opacity:var(--end,0);pointer-events:var(--end-pe,none);padding-block:0}
.hop-si.is-live.is-end .hop-si__panel{opacity:0;transition:opacity .3s}
.hop-si.is-live .hop-si__report .hop-report{transform:rotate(-1.5deg)}

@media (max-width:1100px){
  .hop-si.is-live .hop-si__progress li span{display:none}
}
@media (max-width:781px){
  .hop-si__stage{aspect-ratio:9/14;max-height:none}
  .hop-si__veil{background:linear-gradient(180deg,rgba(36,28,30,.75) 0%,rgba(36,28,30,.35) 38%,rgba(36,28,30,0) 60%),linear-gradient(0deg,rgba(36,28,30,.65),rgba(36,28,30,0) 40%)}
  .hop-si__intro{top:6.5rem;transform:none;left:1rem}
  .hop-si.is-live .hop-si__intro{transform:translateY(calc((1 - var(--intro,1)) * -40px))}
  .hop-si__intro h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .hop-si__dots{display:none}
  .hop-si.is-live .hop-si__panel{inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;transform:none;width:auto}
  .hop-si.is-live .hop-si__ch{padding:1.15rem 1.25rem}
  .hop-si.is-live .hop-si__ch h2{font-size:1.35rem;margin:.35rem 0}
  .hop-si.is-live .hop-si__ch p{font-size:.92rem}
  .hop-si.is-live .hop-si__progress{right:auto;left:12px;top:5.5rem;transform:none}
  .hop-si.is-live .hop-si__progress ul,.hop-si.is-live .hop-si__progress .hop-si__rail{display:none}
  .hop-si.is-live .hop-si__pct{margin:0;background:rgba(36,28,30,.6);backdrop-filter:blur(10px);padding:.45rem .8rem;border-radius:999px}
  .hop-si.is-live .hop-si__report{grid-template-columns:1fr;inset:auto 0 auto 0;top:5.5rem;transform:translateY(calc((1 - var(--end,0)) * 40px))}
  .hop-si.is-live .hop-si__report .hop-report{display:none}
  .hop-si__cue{bottom:5.5rem}
}

/* ---------- Flashlight reveal ---------- */
.hop-fl{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:#120D0E;cursor:crosshair;isolation:isolate;touch-action:pan-y}
.hop-fl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;user-select:none;-webkit-user-drag:none}
.hop-fl__base{filter:brightness(.42) saturate(.8)}
.hop-fl__lit{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle var(--fr,190px) at var(--fx,50%) var(--fy,50%),#000 0,#000 40%,transparent 100%);mask-image:radial-gradient(circle var(--fr,190px) at var(--fx,50%) var(--fy,50%),#000 0,#000 40%,transparent 100%)}
.hop-fl__lit img{filter:brightness(2.2) contrast(1.08) saturate(1.15)}
.hop-fl__beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle calc(var(--fr,190px) * 1.1) at var(--fx,50%) var(--fy,50%),rgba(255,226,170,.22),transparent 70%)}
.hop-fl__tag{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.95);color:#463B3E;font-size:.85rem;font-weight:700;padding:.45rem .75rem;border-radius:999px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hop-fl__tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hop-flag,#C9780F);box-shadow:0 0 0 3px rgba(201,120,15,.25)}
.hop-fl__hint{position:absolute;left:1rem;bottom:1rem;z-index:3;margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);background:rgba(0,0,0,.35);padding:.45rem .8rem;border-radius:999px;backdrop-filter:blur(6px)}
@media (max-width:781px){.hop-fl{aspect-ratio:4/5}.hop-fl__tag{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.hop-fl__lit{-webkit-mask-image:none;mask-image:none}.hop-fl__beam{display:none}}