/* Scroll-driven sequences use native scrolling; the base layout is the fallback. */
@layer cinematic {
  .hero-film-title { display: none; }
  .motion-toggle { display: none; }
  .motion-controls-ready .motion-toggle { display: inline-block; background: transparent; border: 1px solid #ffffff80; border-radius: 24px; padding: 7px 13px; color: white; font-size: 9px; }
  .motion-toggle:hover { background: #ffffff18; }
  .motion-toggle:disabled { cursor: default; opacity: .8; }
  .ticker-shell { overflow: hidden; background: var(--lime); padding-block: 17px; }
  .kinetic-ticker { display: block; padding: 10px 0; transform: rotate(-1.5deg) scale(1.03); }
  .ticker-track { display: flex; width: max-content; gap: 0; }
  .ticker-copy { display: flex; align-items: center; flex: 0 0 auto; gap: 35px; padding-right: 35px; font-size: clamp(25px,4.2vw,66px); font-weight: 800; letter-spacing: -.055em; line-height: 1.15; white-space: nowrap; }
  .ticker-copy > span:nth-child(even) { color: var(--violet); font-size: .8em; }
  .motion-ready .ticker-track { transform: translate3d(var(--ticker-shift,0px),0,0); }
  .hero-motion .hero-scroll { height: 185svh; }
  .hero-motion .hero-scroll .home-hero { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; }
  .hero-motion .home-hero .landscape-frame { inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 calc(57% * (1 - var(--hero-progress,0)))); }
  .hero-motion .home-hero .landscape-frame > img { width: calc(43% + var(--hero-progress,0) * 57%); margin-left: calc(57% * (1 - var(--hero-progress,0))); transform: none; object-position: 35% 32%; }
  .hero-motion .landscape-overlay { opacity: calc(1 - var(--hero-progress,0) * .95); }
  .hero-motion .home-title { transform: translate3d(calc(var(--hero-progress,0) * -48vw),calc(var(--hero-progress,0) * -45px),0) rotate(calc(var(--hero-progress,0) * -4deg)); opacity: calc(1 - var(--hero-progress,0) * 1.7); transform-origin: left center; }
  .hero-motion .hero-bottom { transform: translate3d(calc(var(--hero-progress,0) * -80px),0,0); opacity: calc(1 - var(--hero-progress,0) * 2); }
  .hero-motion .hero-topline { opacity: calc(1 - var(--hero-progress,0) * 2); }
  .hero-motion .hero-film-title { display: block; position: absolute; left: var(--gutter); bottom: 65px; font-size: clamp(65px,9.5vw,150px); font-weight: 800; line-height: .85; letter-spacing: -.07em; color: white; opacity: clamp(0,calc((var(--hero-progress,0) - .35) * 2),1); transform: translateY(calc((1 - var(--hero-progress,0)) * 100px)); pointer-events: none; }
  .hero-film-title em { color: var(--lime); font-style: normal; }
  .craft-sequence { margin-inline: 0; border: 0; }
  .craft-pin { padding-inline: var(--gutter); background: var(--paper); transition: background-color .6s; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-pin { background: var(--plum); color: white; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-word { color: #ffffff4d; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-word.is-complete { color: white; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-word.is-active { color: var(--lime); }
  .craft-motion .craft-sequence[data-stage="1"] .eyebrow,
  .craft-motion .craft-sequence[data-stage="1"] .craft-header > span,
  .craft-motion .craft-sequence[data-stage="1"] .craft-panel p,
  .craft-motion .craft-sequence[data-stage="1"] .craft-timeline { color: #f3eaf9; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-timeline { border-color: #ffffff40; }
  .craft-motion .craft-sequence[data-stage="1"] .craft-timeline > .is-active { color: var(--lime); }
  .craft-motion .craft-sequence[data-stage="2"] .craft-pin { background: var(--green-wash); }
  .craft-motion .craft-sequence[data-stage="2"] .craft-word { color: #15171955; }
  .craft-motion .craft-sequence[data-stage="2"] .craft-word.is-complete { color: var(--ink); }
  .craft-motion .craft-sequence[data-stage="2"] .craft-word.is-active { background: var(--green); color: var(--ink); }
  .scroll-work { padding: 0; background: #151719; color: white; }
  .work-pin { padding: 70px 0; }
  .scroll-work .section-heading { margin: 0 var(--gutter) 30px; }
  .scroll-work .section-heading .eyebrow { color: var(--lime); }
  .scroll-work .section-heading > p { color: #d0d3db; }
  .scroll-work .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); position: relative; gap: 0; }
  .scroll-work .project-card:last-child { grid-column: auto; }
  .scroll-work .project-card { min-width: 0; }
  .scroll-work .project-cover { border: 0; }
  .scroll-work .project-meta { padding: 18px var(--gutter) 30px; }
  .scroll-work .project-meta .eyebrow { color: #d4d8e3; }
  .scroll-work .project-meta h3 { color: white; }
  .scroll-work .project-meta h3 span { color: var(--lime); }
  .work-window { min-width: 0; }
  .rail-footer { display: flex; align-items: center; gap: 25px; margin: 28px var(--gutter) 0; }
  .rail-count { display: flex; align-items: center; gap: 9px; flex-shrink: 0; font-size: 11px; }
  .rail-count > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--accent); border-radius: 50%; font-weight: 700; }
  .rail-count > span:last-child { color: #adb4c2; }
  .rail-line { height: 2px; background: #ffffff30; flex: 1; overflow: hidden; }
  .rail-line > span { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(calc(.12 + var(--rail-progress,0) * .88)); }
  .rail-cue { font-size: 8px; letter-spacing: .1em; color: #d4d8e3; }
  .mobile-cue { display: none; }
  .rail-footer .text-link { color: var(--lime); flex-shrink: 0; }
  .rail-motion .scroll-work { height: calc(100svh + var(--rail-distance,0px)); }
  .rail-motion .work-pin { position: sticky; top: 0; height: 100svh; padding: 0; display: block; overflow: hidden; }
  .rail-motion .scroll-work .section-heading { position: absolute; z-index: 3; top: 38px; left: var(--gutter); right: var(--gutter); margin: 0; pointer-events: none; }
  .rail-motion .scroll-work .section-heading h2 { font-size: clamp(38px,4vw,58px); }
  .rail-motion .work-window { overflow: clip; width: 100%; height: 100%; }
  .rail-motion .scroll-work .project-grid { display: flex; gap: 0; width: max-content; height: 100%; transform: translate3d(var(--rail-shift,0px),0,0); }
  .rail-motion .scroll-work .project-card { position: relative; flex: 0 0 auto; width: 100vw; height: 100%; opacity: 1; transform: none; }
  .rail-motion .scroll-work .project-card .project-cover { height: 100%; aspect-ratio: auto; clip-path: none; }
  .rail-motion .scroll-work .project-cover:has(.project-image)::after { background: linear-gradient(180deg,#000b 0%,transparent 35%,transparent 50%,#000d 100%); }
  .rail-motion .scroll-work .cover-index, .rail-motion .scroll-work .cover-status { display: none; }
  .rail-motion .scroll-work .cover-duration { top: auto; right: var(--gutter); bottom: 160px; }
  .rail-motion .scroll-work .project-meta { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 100px; padding: 0; }
  .rail-motion .scroll-work .project-meta h3 { font-size: clamp(30px,4.5vw,68px); line-height: 1.1; }
  .rail-motion .scroll-work .project-meta h3 a { gap: 25px; }
  .rail-motion .scroll-work .project-meta h3 span { font-size: 30px; }
  .rail-motion .rail-footer { position: absolute; z-index: 3; inset: auto var(--gutter) 30px; margin: 0; }
  .motion-ready .home-portrait { transform: translate3d(0,var(--portrait-shift,0px),0) rotate(var(--portrait-rotation,0deg)); transform-origin: center; }
  .motion-ready .home-portrait img { clip-path: inset(var(--portrait-inset,0%) 0 0 0); }
  .motion-ready:not(.craft-motion) .craft-sequence { height: auto; }
  .motion-ready:not(.craft-motion) .craft-pin { position: static; height: auto; min-height: 0; display: block; }
  .motion-ready:not(.craft-motion) .craft-panels { display: block; }
  .motion-ready:not(.craft-motion) .craft-panel { visibility: visible; opacity: 1; transform: none; }
  .motion-ready:not(.craft-motion) .craft-panel + .craft-panel { margin-top: 28px; }
  .motion-ready:not(.craft-motion) .craft-word { color: var(--ink); background: transparent; }
  @media (max-width: 900px), (max-height: 649px) {
    .scroll-work .work-pin { padding-block: 45px; }
    .scroll-work .section-heading { grid-template-columns: 1fr; gap: 18px; }
    .scroll-work .section-heading > p { justify-self: start; max-width: 500px; }
    .scroll-work .project-grid { display: flex; width: max-content; gap: 16px; }
    .scroll-work .project-card { width: 94vw; flex-shrink: 0; opacity: 1; transform: none; }
    .scroll-work .project-card .project-cover { clip-path: none; }
    .work-window { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--accent) #343a42; padding-bottom: 14px; }
    .scroll-work .project-card { scroll-snap-align: start; }
    .mobile-cue { display: inline; }
    .desktop-cue { display: none; }
    .rail-footer { gap: 15px; }
    .rail-line { min-width: 20px; }
  }
  @media (max-width: 600px) {
    .hero-motion .hero-scroll { height: 160svh; }
    .hero-motion .home-hero .landscape-frame { clip-path: inset(calc(46% * (1 - var(--hero-progress,0))) 0 0); }
    .hero-motion .home-hero .landscape-frame > img { width: 100%; height: calc(54% + var(--hero-progress,0) * 46%); margin-left: 0; margin-top: calc(46svh * (1 - var(--hero-progress,0))); }
    .hero-motion .home-title { transform: translate3d(calc(var(--hero-progress,0) * -45vw),calc(var(--hero-progress,0) * -20px),0) rotate(calc(var(--hero-progress,0) * -4deg)); }
    .hero-motion .hero-film-title { bottom: 165px; font-size: 23vw; }
    .ticker-shell { padding-block: 12px; }
    .ticker-copy { font-size: 28px; gap: 20px; padding-right: 20px; }
    .scroll-work .project-card { width: 94vw; }
    .rail-cue { display: none; }
    .rail-footer .text-link { font-size: 11px; gap: 15px; }
    .rail-count { font-size: 10px; }
    .scroll-work .section-heading h2 { font-size: 38px; }
    .craft-pin { padding-inline: var(--gutter); }
  }
  @media (prefers-reduced-motion: reduce) {
    .craft-pin { transition: none; }
    .hero-motion .hero-scroll { height: auto; }
    .hero-motion .hero-scroll .home-hero { position: relative; height: auto; min-height: 745px; }
    .hero-motion .home-title, .hero-motion .hero-bottom, .motion-ready .home-portrait { transform: none; opacity: 1; }
    .hero-film-title { display: none; }
    .motion-ready .home-portrait img { clip-path: none; }
    .motion-ready .ticker-track { transform: none; }
    .rail-motion .scroll-work { height: auto; }
    .rail-motion .work-pin { position: static; height: auto; }
  }
}