@layer motion {
  .scroll-meter { position: fixed; z-index: 30; top: 35%; left: 13px; width: 26px; height: 220px; border: 1px solid #cbb98935; border-radius: 30px; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: 13px 0; background: #090d1299; }
  .scroll-meter-label, .scroll-meter-value { font-size: 6px; font-weight: 700; letter-spacing: .07em; color: #d6d0bc; }
  .scroll-meter-track { height: 150px; width: 2px; margin: 10px 0; background: #f3efe617; overflow: hidden; }
  .scroll-meter-fill { display: block; width: 100%; height: 100%; background: #ff6a00; transform: scaleY(var(--page-progress, 0)); transform-origin: top; }
  .craft-sequence { margin: 0 var(--gutter); border-bottom: 1px solid var(--line); }
  .craft-pin { padding: 95px 0; isolation: isolate; }
  .craft-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .craft-header > span { font-size: 9px; color: #939da0; letter-spacing: .12em; text-transform: uppercase; }
  .craft-composition { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10%; align-items: center; padding: 65px 0; }
  .craft-title { font-size: clamp(72px, 10.5vw, 165px); line-height: .92; letter-spacing: -.07em; }
  .craft-word { display: block; color: #f3efe6; }
  .craft-word > span { color: #ff6a00; }
  .craft-panels { position: relative; }
  .craft-panel + .craft-panel { margin-top: 28px; }
  .craft-panel h3 { font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -.04em; }
  .craft-panel .eyebrow { display: block; margin-bottom: 25px; }
  .craft-panel p { color: #b9bcbf; margin-top: 20px; line-height: 1.8; font-size: 15px; max-width: 350px; }
  .craft-timeline { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 18px; position: relative; font-size: 8px; letter-spacing: .15em; color: #a5acae; }
  .craft-timeline::before { content: ''; position: absolute; top: -1px; left: 0; height: 2px; background: #ff6a00; width: 100%; transform-origin: left; transform: scaleX(var(--craft-progress, 0)); }
  .craft-orbit { display: none; }
  .film-player { position: relative; background: #030608; border: 1px solid #f3efe623; overflow: hidden; }
  .film-player video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #030608; }
  .film-start { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: #f3efe6; background: #090d12d9; border: 1px solid #cbb989b0; border-radius: 3px; font-size: 13px; }
  .film-start:hover { background: #ff6a00; color: #090d12; }
  .film-start:disabled { cursor: progress; }
  .film-start > span { font-size: 22px; }
  .film-player-status { color: #cbb989; font-size: 12px; margin-top: 14px; }
  .film-player-status a { text-decoration: underline; }
  .film-fallback { display: inline-block; margin-top: 12px; font-size: 10px; color: #aeb6bc; text-decoration: underline; }
  .project-cover > .project-image { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.65,.3,1), filter .7s; filter: brightness(.8); }
  .project-cover:hover > .project-image { transform: scale(1.06); filter: brightness(.95); }
  .project-cover:has(.project-image)::before { display: none; }
  .project-cover:has(.project-image)::after { z-index: 0; inset: 0; width: auto; height: auto; transform: none; background: linear-gradient(0deg,#030608b0,transparent 50%); }
  .project-cover .cover-index, .project-cover .cover-status { z-index: 1; }
  .cover-duration { position: absolute; top: 18px; right: 20px; z-index: 1; font-size: 10px; color: #fff; background: #090d1299; padding: 2px 7px; }
  .project-card .project-cover { aspect-ratio: 16/10; }
  .work-collection .project-grid .project-card:last-child { grid-column: auto; }
  .project-card h3 { line-height: 1.4; }
  .work-collection .collection-header { align-items: start; flex-direction: column; gap: 20px; }
  .work-filters { gap: 6px; }
  .project-study-note { margin-top: 25px; font-size: 12px; color: #cbb989; padding-left: 15px; border-left: 2px solid #ff6a00; }
  #reel-dialog { width: min(1180px, calc(100% - 35px)); max-width: none; padding: 28px; }
  #reel-dialog .reel-dialog-title { font-size: 24px; margin: 0 45px 24px 0; letter-spacing: -.035em; }
  #reel-dialog .film-player video { max-height: 72svh; }
  .motion-ready .motion-reveal { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity .85s cubic-bezier(.2,.65,.3,1), transform 1s cubic-bezier(.2,.65,.3,1); transition-delay: var(--reveal-delay,0ms); }
  .motion-ready .motion-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
  .motion-ready .project-card.motion-reveal .project-cover { clip-path: inset(8% 0 0 0); transition: clip-path 1.1s cubic-bezier(.2,.65,.3,1); transition-delay: var(--reveal-delay,0ms); }
  .motion-ready .project-card.motion-reveal.is-visible .project-cover { clip-path: inset(0); }
  .motion-ready .home-hero .landscape-frame > img { transform: translate3d(0,var(--hero-shift,0px),0) scale(1.14); will-change: transform; }
  .motion-ready .home-title { transform: translate3d(0,var(--title-shift,0px),0); opacity: var(--title-opacity,1); }
  .motion-ready .craft-sequence { height: 245svh; }
  .motion-ready .craft-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 50px; overflow: hidden; }
  .motion-ready .craft-composition { flex: 1; max-height: 680px; }
  .motion-ready .craft-word { color: #5e676d; transition: color .55s; }
  .motion-ready .craft-word.is-active { color: #ff6a00; }
  .motion-ready .craft-word.is-complete { color: #f3efe6; }
  .motion-ready .craft-word > span { color: inherit; }
  .motion-ready .craft-panels { display: grid; align-items: center; min-height: 230px; }
  .motion-ready .craft-panel { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .5s, transform .6s, visibility .5s; }
  .motion-ready .craft-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
  .motion-ready .craft-orbit { display: block; position: absolute; width: min(44vw,650px); aspect-ratio: 1; border: 1px solid #ff6a0020; border-radius: 50%; right: -18%; top: 18%; pointer-events: none; z-index: -1; transform: rotate(calc(var(--craft-progress,0) * 100deg)) scale(calc(.8 + var(--craft-progress,0) * .2)); }
  .craft-orbit::before, .craft-orbit::after { content: ''; position: absolute; border: 1px solid #ff6a0026; border-radius: 50%; }
  .craft-orbit::before { inset: 9%; }
  .craft-orbit::after { inset: -9%; border-style: dashed; opacity: .5; }
  .craft-timeline > span.is-active { color: #ff8a33; }
  @media (max-width: 900px) {
    .scroll-meter { left: 0; top: 0; width: 100%; height: 3px; padding: 0; border: 0; border-radius: 0; background: #090d1266; }
    .scroll-meter-label, .scroll-meter-value { display: none; }
    .scroll-meter-track { width: 100%; height: 3px; margin: 0; background: transparent; }
    .scroll-meter-fill { transform: scaleX(var(--page-progress,0)); transform-origin: left; }
    .craft-composition { gap: 7%; }
    .craft-title { font-size: 11vw; }
    .craft-panel h3 { font-size: 24px; }
    .craft-panel p { font-size: 14px; }
  }
  @media (max-width: 600px) {
    .craft-pin { padding-block: 60px; }
    .craft-header > span { font-size: 7px; }
    .craft-composition { grid-template-columns: 1fr; gap: 40px; padding: 45px 0; }
    .craft-title { font-size: clamp(54px,18.6vw,100px); }
    .craft-panel .eyebrow { margin-bottom: 17px; }
    .craft-panel h3 { font-size: 25px; }
    .craft-panel p { margin-top: 13px; font-size: 14px; }
    .craft-timeline { font-size: 7px; letter-spacing: .08em; }
    .motion-ready .craft-sequence { height: 235svh; }
    .motion-ready .craft-pin { padding-block: 35px; min-height: 620px; }
    .motion-ready .craft-composition { flex: 1; align-content: center; gap: 25px; padding-block: 20px; }
    .motion-ready .craft-panels { min-height: 185px; }
    .motion-ready .craft-orbit { width: 90vw; top: 32%; right: -35%; }
    .motion-ready .home-hero .landscape-frame > img { will-change: auto; }
    .motion-ready .motion-reveal { transform: translate3d(0,24px,0); }
    .project-card .project-cover { aspect-ratio: 16/10; }
    #reel-dialog { padding: 22px 15px; }
    #reel-dialog .reel-dialog-title { font-size: 20px; }
    .film-start { font-size: 12px; padding: 13px 17px; white-space: nowrap; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-meter { display: none; }
    .motion-ready .motion-reveal { opacity: 1; transform: none; transition: none; }
    .motion-ready .project-card.motion-reveal .project-cover { clip-path: none; }
    .motion-ready .home-hero .landscape-frame > img, .motion-ready .home-title { transform: none; opacity: 1; }
    .motion-ready .craft-sequence { height: auto; }
    .motion-ready .craft-pin { position: static; height: auto; min-height: 0; }
    .motion-ready .craft-panels { display: block; }
    .motion-ready .craft-panel { visibility: visible; opacity: 1; transform: none; }
    .motion-ready .craft-panel + .craft-panel { margin-top: 28px; }
    .motion-ready .craft-word { color: #f3efe6; }
    .motion-ready .craft-orbit { display: none; }
    .project-cover > .project-image { transition: none; }
  }
}