/* Original Hero-B scroller → sticky stage → curved strips → flat thumbnails.
   Isolated to the AI film section; the selected B top hero stays independent. */
.ai-reel { position: relative; background: #dedbd4; border-top: 1px solid var(--line); }
.ai-stage { position: relative; padding: 36px 5vw 64px; }
.ai-section-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 15; }
.ai-section-bar > a { font-size: 11px; display: flex; align-items: center; gap: 20px; }
.ai-section-bar > a span { font-size: 18px; }
.ai-intro { position: relative; margin: 70px 0 40px; z-index: 10; }
.ai-intro > .micro { margin-bottom: 22px; color: #6d675c; }
.ai-intro h2 { font-size: calc(clamp(28px, 3.05vw, 44px) * var(--heading-scale, 1)); line-height: 1.5; font-weight: 500; }
.ai-intro > p:last-child { margin-top: 22px; font-size: 13px; line-height: 2; }
.ai-ring, .ai-ghost, .ai-interlude, .ai-controls, .ai-gallery-heading { display: none; }
.ai-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; }
.ai-thumb { display: block; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
.ai-thumb-frame { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: #191b1a; overflow: hidden; border-radius: 3px; }
.ai-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ai-thumb-action { position: absolute; left: 12px; bottom: 12px; padding: 7px 9px; background: #111b; color: #fff; font: 8px/1.4 monospace; letter-spacing: .07em; }
.ai-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 12px; min-height: 44px; }
.ai-caption > span { color: #6c675f; font: 8px/1.5 monospace; letter-spacing: .07em; }
.ai-caption strong { font-size: 11px; line-height: 1.6; font-weight: 500; text-align: right; }
.ai-thumb:hover .ai-thumb-action, .ai-thumb:focus-visible .ai-thumb-action { background: #fff; color: #111; }
.ai-reel.has-spiral { height: 580svh; }
.has-spiral .ai-stage { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; perspective: 1800px; }
.has-spiral .ai-stage::after { content: ""; position: absolute; z-index: 8; inset: 54% 0 0; background: linear-gradient(transparent, #dedbd4 88%); opacity: var(--intro-opacity, 1); pointer-events: none; }
.has-spiral .ai-section-bar { position: absolute; top: 30px; left: 4vw; right: 4vw; }
.has-spiral .ai-intro { position: absolute; margin: 0; left: 5vw; bottom: 70px; width: min(500px, 85%); }
.has-spiral .ai-ghost { display: block; position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); font-size: min(14vw, 23vh); line-height: .94; letter-spacing: -.055em; font-weight: 400; text-align: center; color: #22221e12; pointer-events: none; }
.has-spiral .ai-ring { display: block; position: absolute; left: 50%; top: 55%; width: 0; height: 0; z-index: 5; transform-style: preserve-3d; }
.ai-film-card { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.ai-strip { position: absolute; top: -375px; height: 750px; background-color: #191b1a; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: var(--card-opacity, 1); }
.ai-strip.is-back { opacity: calc(var(--card-opacity, 1) * .56); }
.ai-flat { position: absolute; left: -500px; top: -375px; width: 1000px; height: 750px; overflow: hidden; border-radius: 6px; background: #191b1a; opacity: 0; }
.ai-flat img { object-fit: contain; }
.has-spiral .ai-interlude { display: block; position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.5; text-align: center; opacity: 0; pointer-events: none; }
.has-spiral .ai-thumbnails { position: absolute; z-index: 12; --tile-width: min(27vw, calc((100svh - 260px) * .666667)); grid-template-columns: repeat(3, var(--tile-width)); width: max-content; top: 53%; left: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; }
.has-spiral .ai-gallery-heading { display: block; position: absolute; z-index: 14; top: 90px; left: 0; right: 0; text-align: center; opacity: 0; pointer-events: none; }
.ai-gallery-heading h3 { font-size: calc(16px * var(--heading-scale, 1)); font-weight: 500; margin-top: 10px; }
.has-spiral .ai-controls { display: flex; position: absolute; z-index: 15; bottom: 28px; left: 4vw; right: 4vw; justify-content: space-between; align-items: center; }
.ai-skip { background: none; border: 0; border-bottom: 1px solid #2225; padding: 9px 0; font-size: 11px; }
.ai-scroll-label { display: flex; align-items: center; gap: 16px; font: 9px monospace; letter-spacing: .1em; }
.ai-scroll-label i { width: 90px; height: 1px; background: #2223; }
.ai-scroll-label b { display: block; height: 1px; width: 0; background: #222; }
.ai-viewer { padding: 0; border: 1px solid #ffffff30; background: #171917; color: #f2f1eb; width: min(1040px, 94vw); max-width: 94vw; max-height: 94svh; }
.ai-viewer::backdrop { background: #111d; backdrop-filter: blur(8px); }
.ai-viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; }
.ai-viewer-bar h2 { font-size: calc(17px * var(--heading-scale, 1)); letter-spacing: 0; }
.ai-viewer-close { border: 0; background: none; font-size: 12px; padding: 10px; white-space: nowrap; }
.ai-viewer-media { background: #090a09; height: min(64svh, 640px); }
.ai-viewer-media img, .ai-viewer-media video { width: 100%; height: 100%; object-fit: contain; }
.ai-viewer-note { padding: 18px 26px; color: #bbbfb8; font-size: 11px; line-height: 1.7; }
@media (max-width: 760px) {
  .ai-stage { padding: 28px 22px 48px; }
  .ai-section-bar > .micro { font-size: 8px; }
  .ai-section-bar > a { font-size: 9px; gap: 6px; }
  .ai-intro { margin-top: 50px; }
  .ai-intro h2 { font-size: calc(28px * var(--heading-scale, 1)); }
  .ai-intro > p:last-child { font-size: 11px; }
  .ai-thumbnails { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .ai-caption { flex-direction: column; gap: 3px; padding-top: 8px; }
  .ai-caption > span { font-size: 7px; }
  .ai-caption strong { font-size: 10px; text-align: left; }
  .ai-thumb-action { font-size: 6px; left: 6px; bottom: 6px; padding: 5px 6px; }
  .ai-reel.has-spiral { height: 500svh; }
  .has-spiral .ai-section-bar { left: 22px; right: 22px; top: 24px; }
  .has-spiral .ai-intro { left: 22px; bottom: 86px; }
  .has-spiral .ai-intro > .micro { margin-bottom: 15px; font-size: 9px; }
  .has-spiral .ai-intro > p:last-child { margin-top: 14px; }
  .has-spiral .ai-thumbnails { --tile-width: min(calc((100vw - 56px) / 2), calc((100svh - 250px) * .444444)); grid-template-columns: repeat(2, var(--tile-width)); top: 55%; }
  .has-spiral .ai-gallery-heading { top: 82px; }
  .ai-gallery-heading h3 { font-size: calc(14px * var(--heading-scale, 1)); }
  .has-spiral .ai-interlude { width: 100%; font-size: 30px; }
  .has-spiral .ai-controls { left: 22px; right: 22px; bottom: 26px; }
  .ai-scroll-label { font-size: 7px; gap: 8px; }
  .ai-scroll-label i { width: 42px; }
  .ai-skip { font-size: 9px; }
  .ai-viewer-bar { padding: 14px; gap: 10px; }
  .ai-viewer-bar h2 { font-size: calc(13px * var(--heading-scale, 1)); }
  .ai-viewer-note { padding: 16px; }
}