/* The studio's aerial film chapter, in the preview's serif / navy / gold style. */
.a360-scroll-film {
  --film-progress: 1;
  --film-scale: 1;
  --film-drift: 0%;
  --film-entry-drift: 0px;
  --film-exit-drift: 0px;
  --film-cta-opacity: 1;
  --film-topline-exit: 1;
  --film-intro-exit: 1;
  --film-word-exit: 1;
  --film-caption-exit: 1;
  --film-entry-veil: 0;
  --film-intro-opacity: 1;
  --film-intro-shift: 0vw;
  --film-word-shift: 0vw;
  --film-word-scale: 1;
  --film-caption: 1;
  --film-gutter: clamp(24px, 4vw, 64px);
  position: relative;
  color: var(--a360-paper);
  background: var(--a360-navy);
  scroll-margin-top: 0;
}
.a360-film-frame {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  isolation: isolate;
}
.a360-scroll-film[data-motion="scroll"] { height: 320svh; }
.a360-scroll-film[data-motion="scroll"] .a360-film-frame { position: sticky; top: 0; }
.a360-film-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: translate3d(0, calc(var(--film-entry-drift) + var(--film-exit-drift) + var(--film-drift)), 0) scale(var(--film-scale));
  will-change: transform;
  pointer-events: none;
}
.a360-homepage .a360-film-media > img,
.a360-homepage .a360-film-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.a360-film-media > video { opacity: 0; transition: opacity .5s ease; }
.a360-film-media > video.is-ready { opacity: 1; }
.a360-film-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #07182740, #07182773 37%, #07182788 68%, #071827ba);
}
.a360-film-topline, .a360-film-bottom {
  position: absolute;
  inset-inline: var(--film-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  z-index: 2;
}
.a360-film-topline { top: clamp(32px, 5svh, 64px); opacity: var(--film-topline-exit); }
.a360-film-topline .a360-eyebrow { color: var(--a360-paper); font-size: 10px; margin: 0; }
.a360-film-topline > span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.a360-film-bottom { bottom: clamp(28px, 4svh, 48px); opacity: var(--film-cta-opacity); }
.a360-scroll-film[data-motion="scroll"] .a360-film-topline,
.a360-scroll-film[data-motion="scroll"] .a360-film-bottom,
.a360-scroll-film[data-motion="scroll"] .a360-film-story { transform: translate3d(0, var(--film-exit-drift), 0); }
.a360-film-story {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px var(--film-gutter) 115px;
  pointer-events: none;
}
.a360-film-words { width: 100%; text-align: center; font: 500 1em/1 var(--a360-serif); letter-spacing: -.035em; }
.a360-film-intro {
  display: block;
  font-size: clamp(58px, 8vw, 120px);
  line-height: 1.05;
  opacity: calc(var(--film-intro-opacity) * var(--film-intro-exit));
  transform: translate3d(var(--film-intro-shift), 0, 0);
}
.a360-film-word {
  display: inline-block;
  position: relative;
  font-size: clamp(130px, 19vw, 290px);
  font-style: italic;
  line-height: 1.02;
  padding-inline: .05em;
  padding-bottom: .18em;
  opacity: var(--film-word-exit);
  transform: translate3d(var(--film-word-shift), 0, 0) scale(var(--film-word-scale));
}
.a360-film-outline { color: transparent; -webkit-text-stroke: 1px #ffffff99; }
.a360-film-outline, .a360-film-fill { font-kerning: none; font-variant-ligatures: none; }
.a360-film-fill { position: absolute; top: 0; left: .05em; right: .05em; display: flex; white-space: nowrap; }
.a360-film-letter {
  --letter-progress: clamp(0, calc((var(--film-progress) - .08) * 2.7 - var(--letter-index) * .095), 1);
  display: inline-block;
  clip-path: inset(0 -.08em 0 -.08em);
  /* Feather the moving edge instead of slicing the white letterforms cleanly. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - .065em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - .065em), transparent 100%);
  padding-bottom: .3em;
  margin-bottom: -.3em;
  /* Italic swashes (especially y's leftward tail) extend past their advance
     width. Give the mask its own gutters without changing letter spacing. */
  padding-inline: .16em;
  margin-inline: -.16em;
}
.a360-film-letter > span {
  display: inline-block;
  transform: translate3d(0, calc((1 - var(--letter-progress)) * 125%), 0);
  filter: blur(calc((1 - var(--letter-progress)) * 1.5px));
  text-shadow:
    calc((1 - var(--letter-progress)) * -1.8px) 0 calc((1 - var(--letter-progress)) * 1px) #79d9f080,
    calc((1 - var(--letter-progress)) * 1.8px) 0 calc((1 - var(--letter-progress)) * 1px) #f79da680;
}
.a360-film-story .a360-film-caption {
  margin: 10px 0 0;
  color: var(--a360-paper);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  opacity: calc(var(--film-caption) * var(--film-caption-exit));
  transform: translate3d(0, calc((1 - var(--film-caption)) * 22px), 0);
}
.a360-film-caption em { padding-left: 8px; font: italic 500 26px/1.5 var(--a360-serif); }
.a360-film-progress { position: absolute; inset: auto 0 0; height: 2px; background: #ffffff1a; }
.a360-film-progress > span { display: block; height: 100%; transform: scaleX(var(--film-progress)); transform-origin: left; background: var(--a360-gold); }
.a360-scroll-film .a360-film-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* No-JS, reduced-motion, data-saving and failed-media views keep the complete
   composition, without a pinned gap or invisible headline. */
.a360-scroll-film[data-motion="still"] .a360-film-media,
.a360-scroll-film[data-motion="still"] .a360-film-intro,
.a360-scroll-film[data-motion="still"] .a360-film-word,
.a360-scroll-film[data-motion="still"] .a360-film-letter > span,
.a360-scroll-film[data-motion="still"] .a360-film-caption { transform: none; opacity: 1; }
.a360-scroll-film[data-motion="still"] .a360-film-letter { -webkit-mask-image: none; mask-image: none; }
.a360-scroll-film[data-motion="still"] .a360-film-letter > span { filter: none; text-shadow: none; }
.a360-scroll-film[data-motion="still"] .a360-film-progress,
.a360-scroll-film[data-motion="still"] video { display: none; }
@media (max-width: 760px) {
  .a360-film-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, #071827f5 0%, #071827df 35%, #0718277a 75%, #07182700 100%);
    opacity: var(--film-entry-veil);
    pointer-events: none;
  }
  .a360-scroll-film[data-motion="scroll"] { height: 280svh; }
  .a360-film-topline { gap: 12px; }
  .a360-film-topline .a360-eyebrow, .a360-film-topline > span { font-size: 9px; letter-spacing: .1em; }
  .a360-film-intro { font-size: clamp(38px, 11.5vw, 78px); }
  .a360-film-word { font-size: clamp(65px, 21vw, 152px); }
  .a360-film-outline { -webkit-text-stroke-width: .7px; }
  /* Keep the letter edge treatment, without nine animated blur surfaces on a
     phone GPU. This width-based treatment also matches desktop phone previews. */
  .a360-film-letter > span { filter: none; text-shadow: none; }
  .a360-film-caption em { display: block; padding-left: 0; font-size: 24px; }
  .a360-film-story .a360-film-caption { font-size: 12px; }
  .a360-film-bottom { gap: 12px; bottom: 24px; }
  .a360-film-bottom .a360-btn { font-size: 10px; padding-inline: 18px; }
}
@media (max-width: 360px) { .a360-film-bottom { align-items: flex-start; flex-direction: column; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .a360-film-media > video { transition: none; } }