/* Raivu Works interaction: viewport pin, horizontal travel, parabolic lift.
   Existing scenario illustrations, task actions and colors remain project-owned. */
.scenes-intro { display: none; }
.scenario-surface { display: contents; }
.entry-marketing .scenario-surface > .scenario-art { position: absolute; inset: 0; display: block; overflow: hidden; }
.marketing-scenarios.has-scenes-scroll { --scenes-nav-height: 96px; --scenes-card-size: min(56vw, 900px, calc((100svh - var(--scenes-nav-height) - 80px) * 1.333333)); padding: 0; }
.has-scenes-scroll .scenes-viewport { position: sticky; top: 0; height: 100svh; overflow: clip; background: #fff; }
.entry-marketing .has-scenes-scroll .marketing-carousel { position: relative; display: flex; align-items: center; gap: 300px; width: max-content; top: var(--scenes-nav-height); height: calc(100% - var(--scenes-nav-height)); padding: 0 max(calc(50vw - 500px), 20vw); overflow: visible; scroll-snap-type: none; will-change: transform; }
.entry-marketing .has-scenes-scroll .marketing-scenario,
.has-scenes-scroll .scenes-intro { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--scenes-card-size); width: var(--scenes-card-size); max-width: 900px; height: var(--scenes-card-size); aspect-ratio: 1; padding: 0; border: 0; border-radius: 32px; corner-shape:var(--md-corner-shape); background: transparent; transform-origin: center; overflow: visible; will-change: auto; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.entry-marketing .has-scenes-scroll .marketing-scenario:hover { box-shadow: none; }
.has-scenes-scroll .scenes-intro { flex-direction: column; align-items: flex-start; padding: 40px; color: #20232c; }
.scenes-intro small { margin-bottom: 30px; font-size: 16px; font-weight: 600; color: #687386; }
.scenes-intro strong { font-size: clamp(48px, 7.2vw, 103px); line-height: 1.08; font-weight: 800; letter-spacing: -.05em; }
.scenes-intro p { margin-top: 30px; font-size: clamp(16px, 1.2vw, 22px); color: #687386; }
.entry-marketing .has-scenes-scroll .scenario-surface { position: relative; display: block; flex: none; width: 100%; height: 75%; overflow: hidden; border-radius: 24px; corner-shape:var(--md-corner-shape); isolation: isolate; container-type: inline-size; background: var(--scenario-fill, #e8efff); transition: box-shadow .2s; }
.has-scenes-scroll .marketing-scenario:hover .scenario-surface { box-shadow: 0 12px 30px #263f7514; }
.entry-marketing .has-scenes-scroll .scenario-surface > .scenario-art { inset: auto; top: 0; left: 50%; width: 556px; height: 563px; margin-left: -278px; transform: scale(var(--scenario-art-scale, 1)); transform-origin: 50% 0; }
.entry-marketing .has-scenes-scroll .scenario-caption { padding: 40px 36px 30px; }
.entry-marketing .has-scenes-scroll .scenario-caption small { font-size: clamp(12px, .9vw, 16px); }
.entry-marketing .has-scenes-scroll .scenario-caption strong { font-size: clamp(32px, 2.8vw, 56px); font-size: clamp(28px, 6.2cqw, 56px); }
.has-scenes-scroll .marketing-section-header { position: absolute; z-index: 2; bottom: 28px; right: max(5vw, 24px); width: auto; padding: 0; margin: 0; pointer-events: none; }
.has-scenes-scroll .marketing-section-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.has-scenes-scroll .marketing-arrows { pointer-events: auto; }
.has-scenes-scroll .marketing-scenario:focus-visible { outline-offset: 5px; }
@media (max-width: 768px) {
  .entry-marketing .is-scenes-mobile .marketing-carousel { flex-direction: column; align-items: center; overflow: visible; gap: 24px; }
  .entry-marketing .is-scenes-mobile .marketing-scenario { flex: none; width: 100%; max-width: 556px; }
  .is-scenes-mobile .marketing-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-marketing .marketing-carousel { scroll-behavior: auto; }
}