/* V12: a quiet editorial rhythm, equal frames and native horizontal reels. */
.v12-section-heading{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);align-items:end;gap:clamp(28px,5vw,90px);margin-bottom:48px}
.v12-section-heading .eyebrow{font-size:9px;color:#aaa9a4;letter-spacing:.17em;margin-bottom:26px}
.v12-section-heading h2{font-size:clamp(48px,6.1vw,112px);font-weight:400;letter-spacing:-.075em;line-height:.92;margin:0}
.v12-section-heading h2 em{color:transparent;-webkit-text-stroke:.8px #dbdad4;font-style:normal}
.v12-section-heading>p,.reels-intro p{font-size:clamp(15px,1.15vw,19px);font-weight:400;line-height:1.65;color:#aaa9a3;max-width:440px;margin:0 0 4px}
.director-home{background:#070707;padding-top:clamp(80px,9vw,160px);padding-bottom:clamp(70px,8vw,135px)}
.director-home-screen{aspect-ratio:16/9;overflow:hidden;background:#030303}
.director-home-screen video{width:100%;height:100%;object-fit:contain}
.v12-film-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:18px;color:#a8a8a3;font-size:8px;letter-spacing:.13em;line-height:1.6}
.v12-film-footer>div{display:flex;gap:24px;align-items:center;flex-shrink:0}
.v12-film-footer button,.v12-section-foot button{border:0;border-bottom:1px solid #686862;padding:12px 0;background:none;color:#e1e0da;font-size:8px;font-family:inherit;letter-spacing:.14em;min-height:44px}
.v12-film-footer button span{font-size:14px;margin-left:8px}
.selected-motion{background:#080808;padding-top:110px;padding-bottom:100px}
.motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:38px}
.motion-card{min-width:0}
.motion-screen{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border:0;padding:0;background:#111;color:#f1f0eb;text-align:left}
.motion-screen video{display:block;width:100%;height:100%;object-fit:contain;transition:filter .35s}
.motion-card--light video{object-position:50% 42%}
.motion-play{position:absolute;left:20px;bottom:18px;background:rgba(0,0,0,.62);padding:9px 12px;border:1px solid rgba(255,255,255,.27);font-size:8px;letter-spacing:.13em;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.motion-screen:hover .motion-play,.motion-screen:focus-visible .motion-play{opacity:1;transform:none}
.motion-screen:hover video{filter:brightness(.86)}
.motion-caption{padding:17px 0 0;min-height:76px}
.motion-caption>span{font-size:8px;letter-spacing:.1em;color:#9b9d98;line-height:1.5}
.motion-caption h3{font-size:clamp(16px,1.75vw,28px);font-weight:400;letter-spacing:-.04em;line-height:1.2;margin:8px 0 0}
.v12-section-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:38px;padding-top:16px;border-top:1px solid #343531}
.v12-section-foot>a,.reels-intro>a{display:inline-flex;gap:30px;align-items:center;font-size:9px;letter-spacing:.14em;line-height:1.7;padding:12px 0}
.reels-home{overflow:hidden;background:#060606;padding-top:110px;padding-bottom:90px}
.reels-intro>a{margin-top:20px;border-bottom:1px solid #64665f}
.reel-row{--reel-gap:18px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--reel-gap))/4);gap:var(--reel-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1px;overscroll-behavior-x:contain;padding:4px 1px 22px;scrollbar-width:thin;scrollbar-color:#51534e #151613}
.reel-item{min-width:0;scroll-snap-align:start}
.reel-screen{display:block;position:relative;aspect-ratio:9/16;width:100%;padding:0;border:0;background:#141414;color:#f1f0eb;overflow:hidden}
.reel-screen video{width:100%;height:100%;object-fit:cover}
.reel-screen>span{position:absolute;bottom:18px;left:18px;padding:8px 10px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);font-size:8px;letter-spacing:.1em;opacity:0;transition:opacity .2s}
.reel-screen:hover>span,.reel-screen:focus-visible>span{opacity:1}
.reel-caption{padding-top:15px;min-height:80px}
.reel-caption>span{font-size:7px;letter-spacing:.1em;color:#969891;line-height:1.5}
.reel-caption h3{font-size:clamp(16px,1.4vw,23px);letter-spacing:-.035em;font-weight:400;line-height:1.2;margin:8px 0 0}
.reel-nav{display:flex;gap:10px}
.reel-nav button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #454740;padding:0;font-size:20px;font-weight:300}
.reel-nav button:disabled{opacity:.3;cursor:default}
body[data-page="home"] .story-portals-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
body[data-page="home"] .story-portal{min-height:0;aspect-ratio:16/10;margin:0!important;transform:none!important}
body[data-page="home"] .story-portal--portrait{margin:0!important}
body[data-page="home"] .story-portal strong{font-size:clamp(27px,3.2vw,54px)}
body[data-page="home"] .home-docs-grid{gap:30px}
body[data-page="home"] .team-teaser{border-top:1px solid #30312d}
.motion-screen:focus-visible,.reel-screen:focus-visible,.reel-row:focus-visible{outline:1px solid #eeeae2;outline-offset:3px}
@media(hover:none){.motion-play,.reel-screen>span{opacity:1;transform:none}}
@media(max-width:900px){.v12-section-heading{grid-template-columns:1.1fr .9fr;gap:28px}.v12-section-heading h2{font-size:7.8vw}.reel-row{grid-auto-columns:calc((100% - var(--reel-gap))/2)}.v12-film-footer{align-items:flex-start}.v12-film-footer>span{max-width:40%}.v12-film-footer>div{gap:14px}}
@media(max-width:600px){
  .v12-section-heading{grid-template-columns:1fr;gap:25px;margin-bottom:30px}
  .v12-section-heading .eyebrow{font-size:7px;margin-bottom:20px}
  .v12-section-heading h2{font-size:clamp(44px,11vw,68px)}
  .v12-section-heading>p,.reels-intro p{font-size:14px;line-height:1.6}
  .director-home,.selected-motion,.reels-home{padding-top:75px;padding-bottom:70px}
  .v12-film-footer{display:block;font-size:7px;margin-top:14px}
  .v12-film-footer>span{display:block;max-width:none;margin-bottom:5px}
  .v12-film-footer>div{justify-content:space-between;gap:12px}
  .v12-film-footer button{font-size:7px}
  .motion-grid{gap:26px 12px}
  .motion-caption{padding-top:12px;min-height:75px}
  .motion-caption>span{font-size:6px;letter-spacing:.04em}
  .motion-caption h3{font-size:14px;line-height:1.3;margin-top:5px}
  .motion-play{left:8px;bottom:8px;padding:6px;font-size:6px;letter-spacing:.04em}
  .reel-row{--reel-gap:12px;grid-auto-columns:70%;padding-bottom:18px}
  .reels-intro>a{margin-top:10px}
  .v12-section-foot{margin-top:24px;gap:10px}
  .v12-section-foot>a{font-size:7px;letter-spacing:.08em;gap:12px}
  .v12-section-foot button{font-size:7px}
  .reel-nav button{font-size:18px}
  body[data-page="home"] .story-portals-grid{gap:14px}
  body[data-page="home"] .story-portal{aspect-ratio:3/4;padding:14px}
  body[data-page="home"] .story-portal strong{font-size:clamp(20px,5.6vw,30px)}
  body[data-page="home"] .story-portal>span,body[data-page="home"] .story-portal>b{font-size:6px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){.motion-play,.motion-screen video,.reel-screen>span{transition:none}.reel-row{scroll-snap-type:none}}

.v12-media-fallback{font-size:12px;line-height:1.8;color:#c5c6bf}.v12-media-fallback a{text-decoration:underline;text-underline-offset:4px}

/* V14: the original white mark, a smaller editorial title and a clear invitation. */
body[data-page="home"] .v10-sky .universe-coordinates .universe-signature{display:flex;align-items:center;gap:12px;max-width:none}
.universe-rec{display:block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#d83b31;box-shadow:0 0 7px rgba(216,59,49,.25);animation:universe-record 3.4s ease-in-out infinite;animation-play-state:var(--sky-motion-state,running)}
@keyframes universe-record{0%,35%,100%{opacity:1}62%,80%{opacity:.24}}
.v10-sky .universe-mark{background:none;border:0;border-radius:0;box-shadow:none;filter:none;isolation:isolate;opacity:.92}
.v10-sky .universe-mark::before,.v10-sky .universe-mark::after{display:none;content:none;border:0;background:none;box-shadow:none}
.universe-moon-reveal{position:relative;width:82%;aspect-ratio:4500/2685;transform-origin:50% 50%}
.universe-moon-surface{position:absolute;inset:0;display:block;width:100%;height:100%}
.universe-moon-phase{position:absolute;inset:0;display:block;background:#e9e8e3;-webkit-mask:url('assets/lua-moon.png') center/contain no-repeat;mask:url('assets/lua-moon.png') center/contain no-repeat}
.universe-moon-phase--a{clip-path:inset(0 89.4889% 0 0);transform-origin:5.25555% 50%}
.universe-moon-phase--b{clip-path:inset(0 59.6667% 0 10.5111%);transform-origin:25.4222% 50%}
.universe-moon-phase--disc{clip-path:inset(0 0 0 40.3333%);transform-origin:70.16665% 50%}
/* Complete phases open gently: the silhouette never passes behind a moving knife edge. */
.sky-intro-ready .universe-moon-reveal{animation:universe-moon-develop 3.6s cubic-bezier(.2,.65,.2,1) 1.1s both;animation-play-state:var(--sky-motion-state,running)}
.sky-intro-ready .universe-moon-phase{animation-duration:3.6s;animation-timing-function:cubic-bezier(.2,.65,.2,1);animation-delay:1.1s;animation-fill-mode:both;animation-play-state:var(--sky-motion-state,running)}
.sky-intro-ready .universe-moon-phase--a{animation-name:universe-phase-a}
.sky-intro-ready .universe-moon-phase--b{animation-name:universe-phase-b}
.sky-intro-ready .universe-moon-phase--disc{animation-name:universe-phase-disc}
@keyframes universe-moon-develop{
  0%{opacity:0;transform:translateY(8px) scale(.72)}
  26%{opacity:.85}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes universe-phase-a{
  0%,30%{opacity:0;transform:translateX(16%) scaleX(.14)}
  100%{opacity:1;transform:translateX(0) scaleX(1)}
}
@keyframes universe-phase-b{
  0%,18%{opacity:0;transform:translateX(9%) scaleX(.2)}
  90%,100%{opacity:1;transform:translateX(0) scaleX(1)}
}
@keyframes universe-phase-disc{
  0%,18%{transform:translateX(-20.16665%)}
  90%,100%{transform:translateX(0)}
}
.v10-sky .universe-statement{bottom:calc(14% + 14px)}
.v10-sky .universe-statement h1{font-size:clamp(64px,8.2vw,152px);margin:0;line-height:.94;letter-spacing:-.065em}
.v10-sky .universe-statement h1 .universe-title-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:7px}
.v10-sky .universe-statement h1 .universe-welcome{display:block;margin:0;font-size:clamp(8px,.64vw,10px);font-weight:400;line-height:1.5;letter-spacing:.27em;color:#b0b2ab}
.v10-sky .universe-statement .universe-title-intro .universe-our{margin:0;line-height:1}
.v10-sky .universe-statement h1 .universe-creations{margin:21px 0 0 3px;font-size:clamp(10px,.83vw,14px);font-weight:400;line-height:1.5;letter-spacing:.26em;color:#b9bbb5;white-space:normal;text-wrap:balance;max-width:100%}
.v10-sky .universe-outline{animation:universe-type-light 17s ease-in-out 4s infinite;animation-play-state:var(--sky-motion-state,running)}
@keyframes universe-type-light{
  0%,65%,100%{-webkit-text-stroke-color:rgba(239,238,231,.84);text-shadow:0 0 0 transparent}
  82%{-webkit-text-stroke-color:rgba(239,238,231,.98);text-shadow:0 0 18px rgba(229,232,222,.065)}
}
.v10-sky .universe-footer{align-items:center}
.v10-sky .universe-footer>span:first-child{line-height:1.6;letter-spacing:.18em}
.v10-sky .universe-footer>a{min-height:44px;line-height:1.6}
@media(max-width:700px){
 body[data-page="home"] .v10-sky .universe-coordinates{gap:15px;font-size:6px;letter-spacing:.08em;align-items:flex-start}
 body[data-page="home"] .v10-sky .universe-coordinates .universe-signature{gap:7px;white-space:nowrap}
 body[data-page="home"] .v10-sky .universe-coordinates .universe-producer{display:block;text-align:right;max-width:45%;line-height:1.5}
 .v10-sky .universe-statement{bottom:calc(16% + 12px)}
 .v10-sky .universe-statement h1{font-size:clamp(39px,11.8vw,82px);letter-spacing:-.055em}
 .v10-sky .universe-statement h1 .universe-title-intro{gap:9px;margin-bottom:6px}
 .v10-sky .universe-statement h1 .universe-welcome{font-size:7px;letter-spacing:.23em}
 .v10-sky .universe-statement h1 .universe-creations{font-size:9px;letter-spacing:.22em;margin:15px 0 0 1px}
 .v10-sky .universe-footer>span:first-child{font-size:6px;letter-spacing:.08em;max-width:none}
 .v10-sky .universe-footer>a{font-size:6.5px;letter-spacing:.06em;gap:8px}
}
@media(max-height:600px) and (min-width:701px){
 .v10-sky .universe-statement{bottom:calc(18% + 8px)}
 .v10-sky .universe-statement h1{font-size:clamp(56px,7vw,74px)}
 .v10-sky .universe-statement h1 .universe-title-intro{gap:7px}
 .v10-sky .universe-statement h1 .universe-creations{font-size:9px;margin-top:12px}
}
@media(max-height:480px) and (max-width:700px){
 .v10-sky .universe-home-sticky{min-height:100svh}
 .v10-sky .universe-statement{bottom:84px}
 .v10-sky .universe-statement h1{font-size:48px}
 .v10-sky .universe-statement h1 .universe-title-intro{gap:5px;margin-bottom:3px}
 .v10-sky .universe-statement h1 .universe-creations{font-size:8px;margin-top:10px}
 .v10-sky .universe-mark{width:150px;top:24%;right:10%}
 .v10-sky .universe-words span:nth-child(1){top:34%;left:44%}
 .v10-sky .universe-words span:nth-child(3),.v10-sky .universe-words span:nth-child(5){display:none}
 .v10-sky .universe-footer{bottom:15px}
}
@media(prefers-reduced-motion:reduce){
 .universe-rec{animation:none;opacity:1}
 .sky-intro-ready .universe-moon-reveal,.sky-intro-ready .universe-moon-surface,.sky-intro-ready .universe-moon-phase,.v10-sky .universe-outline{animation:none}
 .universe-moon-reveal,.universe-moon-surface{opacity:1;clip-path:none;transform:none}
}
/* Hold the sky until the opening film has dissolved. */
body.cinema-intro-active .v10-sky{--sky-motion-state:paused!important}

/* The Canon sponsor marks follow the Canon reel, after the BTS opening. */
.v16-canon-sponsors{display:flex;align-items:center;gap:23px;padding-top:30px;margin-top:24px;border-top:1px solid #ffffff16;color:#999b94}
.v16-canon-sponsors>span{font-size:7px;letter-spacing:.16em;margin-right:10px}
.v16-canon-sponsors img{width:auto;height:18px;max-width:110px;object-fit:contain}
.v16-canon-sponsors img:last-child{height:15px}
.v16-canon-sponsors i{font-size:10px;font-style:normal;color:#666862}
@media(max-width:600px){.v16-canon-sponsors{gap:15px;padding-top:23px;margin-top:16px}.v16-canon-sponsors>span{font-size:6px;margin-right:0}.v16-canon-sponsors img{height:15px;max-width:85px}.v16-canon-sponsors img:last-child{height:12px}}