/* One continuous navy backdrop, with motion carried by the content. */
html,body{background:#06101e}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 16% 20%,rgba(31,72,126,.27),transparent 58%),
    radial-gradient(ellipse at 88% 70%,rgba(20,54,99,.25),transparent 60%),
    linear-gradient(145deg,#071321,#050d19 68%,#071424)}
.hero{background:transparent}
.hero .bg{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 89%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 89%,transparent 100%)}
.sec,.sec.alt,.trailer-section,.marquee,.site-footer{background:transparent;border-top-color:transparent}
.sec,.sec.alt,.trailer-section{border-top:0}
.trailer-section::before,.sec::before{display:none}
.marquee{border-color:rgba(133,169,216,.075)}
.site-motion{opacity:.58;background:none}
.site-footer{border-top:1px solid rgba(133,169,216,.09)}

/* Measured entrances, with different weight for type, cards and film. */
.reveal{opacity:0;transform:translateY(32px) scale(.987);filter:blur(2px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),
    filter .85s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal.in{opacity:1;transform:none;filter:none}
.sec-head.reveal,.trailer-heading.reveal{transform:translateY(25px);filter:blur(4px)}
.sec-head.reveal.in,.trailer-heading.reveal.in{transform:none;filter:none}
.card.reveal{transform:perspective(1100px) translateY(38px) rotateX(3deg) scale(.985);filter:none}
.card.reveal.in{transform:none}
.card.reveal.in:hover{transform:translateY(-5px)}
.trailer-frame.reveal{transform:translateY(30px) scale(.955);filter:blur(2px);
  clip-path:inset(3% 2% round 26px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1),
    filter 1s ease,clip-path 1.2s cubic-bezier(.22,1,.36,1)}
.trailer-frame.reveal.in{transform:none;filter:none;clip-path:inset(0 0 round 22px)}
.reveal .sec-eyebrow::before{transform:scaleX(.35);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .12s}
.reveal.in .sec-eyebrow::before{transform:scaleX(1)}

/* Small layers of depth respond to native scrolling, in either direction. */
.scroll-scene .sec-head,.scroll-scene .trailer-heading{translate:0 calc(var(--scene-shift,0px) * .28);
  transition-property:opacity,transform,filter,translate;transition-duration:.85s,1s,.85s,.4s}
.scroll-scene .trailer-frame{translate:0 calc(var(--scene-shift,0px) * .65);
  scale:var(--scene-scale,1);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1),
    filter 1s ease,clip-path 1.2s cubic-bezier(.22,1,.36,1),translate .5s ease,scale .5s ease}
.scroll-scene .table-scroll,.scroll-scene .funnel{translate:0 calc(var(--scene-shift,0px) * .35);transition:translate .45s ease}
.motion-paused .reveal{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
.motion-paused .scroll-scene *{translate:none;scale:none}
@media(max-width:700px){
  .site-motion{opacity:.43}
  .reveal,.card.reveal,.sec-head.reveal,.trailer-heading.reveal{transform:translateY(18px);filter:none}
  .reveal.in,.card.reveal.in,.sec-head.reveal.in,.trailer-heading.reveal.in{transform:none}
  .scroll-scene .sec-head,.scroll-scene .trailer-heading,.scroll-scene .trailer-frame,
  .scroll-scene .table-scroll,.scroll-scene .funnel{translate:none;scale:none}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.sec-head.reveal,.trailer-heading.reveal,.card.reveal,.trailer-frame.reveal{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
  .scroll-scene *{translate:none;scale:none}
  .reveal .sec-eyebrow::before{transform:none;transition:none}
}