/* Cinematic editorial motion. The page's copy, layout and spacing stay intact. */
.hero {
  background:
    radial-gradient(ellipse at 84% 39%, #13263e 0%, transparent 53%),
    linear-gradient(180deg, #080c15, #070b14 87%);
}
.hero:before {
  background:
    linear-gradient(90deg, transparent 8%, rgba(7, 11, 20, .22) 37%, rgba(7, 11, 20, .25) 66%, transparent),
    radial-gradient(ellipse at 52% 44%, rgba(7, 11, 20, .2), transparent 73%),
    linear-gradient(180deg, rgba(7, 11, 20, .12), transparent 25%, #070b14 100%);
}
.hero:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
.hero #hero-canvas {
  opacity: 1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent);
}
.hero-grid, .signal-grid { display: none; }
.section-head:after { content: none; }
.hero-portrait img {
  transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0) scale(1.015);
  animation: cinema-portrait 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
.hero .hero-eyebrow { animation: cinema-enter .85s .08s both; }
.hero h1 .hero-line > span {
  animation: cinema-title 1.15s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: .17s;
}
.hero h1 .hero-line:nth-child(2) > span { animation-delay: .31s; }
.hero h1 .hero-line:nth-child(3) > span { animation-delay: .45s; }
.hero .hero-desc { animation: cinema-enter .95s .57s both; }
.hero .hero-actions { animation: cinema-enter .85s .72s both; }
.hero-scroll:before { animation: cinema-scroll 3.8s ease-in-out infinite; }
@keyframes cinema-enter {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cinema-title {
  from { opacity: 0; transform: translate3d(0, 65%, 0); filter: blur(4px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes cinema-portrait { from { opacity: 0; } to { opacity: .79; } }
@keyframes cinema-scroll { 50% { transform: scaleX(.65); opacity: .4; } }

/* Reveal is progressive enhancement: readable if JavaScript is unavailable. */
html.js .reveal { opacity: 1; transform: none; transition: none; }
html.motion-ready .motion-item {
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1),
    transform 1.05s cubic-bezier(.2, .7, .2, 1),
    translate var(--ui-duration, 200ms) var(--ui-ease, ease-out),
    border-color var(--ui-duration, 200ms) var(--ui-ease, ease-out),
    background-color var(--ui-duration, 200ms) var(--ui-ease, ease-out);
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms, 0ms, 0ms;
}
html.motion-ready .motion-item.motion-pending { opacity: 0; transform: translate3d(0, 28px, 0); }
html.motion-ready .motion-item.motion-in { opacity: 1; transform: none; }
.statement:after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: -12% auto -12% -20%;
  width: 70%;
  background: radial-gradient(ellipse at center, rgba(144, 174, 205, .2), transparent 68%);
  transform: translate3d(calc(var(--value-progress, .5) * 16%), 0, 0);
}
.statement .statement-id { transition: transform 1.5s cubic-bezier(.2, .7, .2, 1), color 1.5s; }
.statement.value-entered .statement-id { transform: translateX(5px); }
.statement .statement-rule:before { transition-duration: 1.5s; }
.ticker-track { animation-duration: 54s; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.motion-offscreen .ticker-track,
.hero.motion-offscreen .hero-scroll:before,
html.motion-suspended .ticker-track,
html.motion-suspended .hero-scroll:before { animation-play-state: paused; }


@media (max-width: 700px) {
  .hero:before {
    background: linear-gradient(180deg, rgba(7, 11, 20, .2), rgba(7, 11, 20, .22) 37%, rgba(7, 11, 20, .4) 65%, #070b14 100%);
  }
  .hero:after { opacity: .02; }
  .hero-portrait img { animation: none; opacity: .52; transform: scale(1.01); }
  html.motion-ready .motion-item.motion-pending { transform: translate3d(0, 14px, 0); }
  html.motion-ready .motion-item { transition-duration: .7s, .8s, .2s, .2s, .2s; }
  .hero h1 .hero-line > span { animation-name: cinema-enter; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .hero-eyebrow, .hero h1 .hero-line > span, .hero .hero-desc, .hero .hero-actions,
  .hero-portrait img, .hero-scroll:before, .ticker-track {
    animation: none !important;
  }
  .hero .hero-eyebrow, .hero h1 .hero-line > span, .hero .hero-desc, .hero .hero-actions {
    opacity: 1; transform: none; filter: none;
  }
  .hero-portrait img { transform: none; }
  html.motion-ready .motion-item, html.motion-ready .motion-item.motion-pending {
    opacity: 1; transform: none; transition: none;
  }
  .statement:after { transform: none; }
  .statement .statement-id, .statement.value-entered .statement-id { transform: none; }
  .statement-rule:before { transform: none; transition: none; }
  .work-card:focus-visible { transform: none; }
}