/* ==========================================================================
   FlagshipHero — rules transcribed verbatim from
   docs/research/css/index.f9761eab.pretty.css (.flagship-hero* / .video-base*)
   and docs/research/css/defaults.3400d60b.pretty.css (grid vars, picture img).
   Breakpoints are the source's own: 375 / 600 / 744 / 1020 / 1280 / 1440 / 1920.
   ========================================================================== */

/* Local stacking/positioning context for the absolutely positioned background.
   On the live page the background container is a child of `main#content`. */
.hero {
  position: relative;
  /* Inherits the site-wide motion tokens from globals.css so the hero and the
     scroll-triggered sections cannot drift apart. */
  --hero-ease: var(--anim-ease);
  --hero-duration: var(--anim-duration);
}

/* --------------------------------------------------------------------------
   Keyframes. CSS Modules scope animation names, so these are declared here
   rather than shared from globals.css.
   -------------------------------------------------------------------------- */
@keyframes fadeAnimation {
  0% { opacity: 0; }
  to { opacity: 1; }
}

/* Entrance for the hero. The reference used `skewAnimation` — a rotateY(-24deg)
   rotate(-8deg) flip — which reads as an effect rather than as composure. This
   is the restrained version: a short rise and a fade, nothing else. Elegance
   here is travelling less and taking longer, not moving more. */
@keyframes riseIn {
  0% { opacity: 0; transform: translateY(var(--anim-rise)); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Background image
   -------------------------------------------------------------------------- */
.hero__background-image-container {
  width: 100%;
  /* The live page writes an inline `--height` from JS; `100%` of the hero
     wrapper is the same box, and is used until the ResizeObserver reports. */
  height: var(--height, 100%);
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.hero__background-image-container picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* The reference shipped a portrait crop per breakpoint, so `height: auto` grew
   the image to fill this box. Vitoria's background frame is landscape (6000x4000),
   and at 440px wide auto-height collapses it to ~293px inside a ~1091px
   container, leaving the rest of the hero blank. Fill the box instead and let
   `.backgroundImage`'s `object-fit: cover` do the cropping.
   Note the specificity: this selector is (0,1,2) and beats `.backgroundImage`. */
.hero__background-image-container picture img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__background-image {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
}
@media (width >= 744px) {
  .hero__background-image {
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   Headline block (#hero)
   -------------------------------------------------------------------------- */
.hero__headline {
  padding: 144px var(--grid-gutter-width) 56px;
  text-align: center;
  z-index: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
@media (width >= 744px) {
  .hero__headline {
    padding-left: calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 2));
    padding-right: calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 2));
    padding-bottom: 56px;
  }
}
@media (width >= 1020px) {
  .hero__headline {
    padding-left: calc((var(--grid-column-width) * 2) + (var(--grid-gutter-width) * 3));
    padding-right: calc((var(--grid-column-width) * 2) + (var(--grid-gutter-width) * 3));
  }
}
@media (width >= 1280px) {
  .hero__headline {
    padding-top: 200px;
    padding-bottom: 72px;
  }
}

.hero__eyebrow {
  margin: 0 0 16px;
  font-weight: 500;
}
@media (width >= 744px) {
  .hero__eyebrow {
    margin-bottom: 24px;
  }
}
.hero__eyebrow-animated {
  opacity: 0;
  animation: var(--hero-duration) var(--hero-ease) 0.1s forwards riseIn;
  transform: translateY(var(--anim-rise));
}

.hero__title {
  text-wrap: balance;
  margin: 0 0 56px;
}

/* The name as the headline, set in caps. The `.text--title*` scale is uniformly
   `font-weight: 300`, so the weight has to be overridden here, and the tracking
   is pulled back in because the scale's -0.05em is tuned for lowercase display
   sizes, not for caps.

   500, not 700: at ~100px the name was heavier than it needed to be — display
   sizes carry weight on their own. This is one real step down rather than two,
   because the family here runs 100-500 and then jumps to 700, so a 600 would
   round back up to Bold and change nothing.

   The splash screen sets the same weight. It has to: the opening name flies
   onto this headline and hands over to it, and a weight that changes mid-swap
   is the one thing that would give the trick away. */
.hero__title-name {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.hero__title-animated {
  opacity: 0;
  animation: var(--hero-duration) var(--hero-ease) 0.24s forwards riseIn;
  transform: translateY(var(--anim-rise));
}

.hero__cta-animated {
  opacity: 0;
  animation: var(--hero-duration) var(--hero-ease) 0.42s forwards riseIn;
  transform: translateY(var(--anim-rise));
}

/* --------------------------------------------------------------------------
   Device assets
   -------------------------------------------------------------------------- */
/* The hero film. One portrait frame at every width — the archive is entirely
   9:16, so a landscape frame could only ever show a film cropped through the
   middle. Past 744px the grid formula would blow the phone up to half the
   viewport, so it is capped and centred instead. */
.hero__mobile-asset {
  padding: 0 calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 2));
}
@media (width >= 744px) {
  .hero__mobile-asset {
    max-width: 340px;
    margin: 0 auto;
    padding: 0;
  }
}
@media (width >= 1280px) {
  .hero__mobile-asset {
    max-width: 380px;
    padding-bottom: 120px;
  }
}
@media (width >= 1920px) {
  .hero__mobile-asset {
    padding-bottom: 140px;
  }
}

.hero__tablet-asset {
  padding: 0 calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 5));
  display: none;
  overflow: hidden;
}
@media (width >= 744px) {
  .hero__tablet-asset {
    display: block;
  }
}
@media (width >= 1280px) {
  .hero__tablet-asset {
    display: none;
  }
}

.hero__desktop-asset {
  padding: 0 calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 5)) 120px;
  display: none;
}
@media (width >= 1280px) {
  .hero__desktop-asset {
    display: block;
  }
}
@media (width >= 1920px) {
  .hero__desktop-asset {
    padding-bottom: 140px;
  }
}

/* Device frames — `--frame-color` comes from the inline style (#0e0e0e). */
.hero__website-box {
  border: 12px solid var(--frame-color);
  background-color: #626262;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.hero__website-box::before {
  content: "";
  width: 100%;
  display: block;
}

/* A closed frame on all four sides. The original dropped the bottom border
   and squared the bottom corners because the device bled off the foot of the
   hero — it read as a phone rising into view, and there was no bottom edge to
   see. This one is centred with space beneath it, so that same rule just ended
   the picture on a hard flat line. */
.hero__mobile-website-box {
  border-radius: 24px;
}
.hero__mobile-website-box::before {
  padding-top: 184.942%;
}

.hero__tablet-website-box {
  border-bottom: none;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.hero__tablet-website-box::before {
  padding-top: 61.086%;
}

.hero__desktop-website-box {
  border-radius: 24px;
}
.hero__desktop-website-box::before {
  padding-top: 61.086%;
}

.hero__website-box-animated {
  opacity: 0;
  animation: var(--hero-duration) var(--hero-ease) 0.6s forwards riseIn;
  transform: translateY(var(--anim-rise));
}

/* --------------------------------------------------------------------------
   Device assets. The scoped VideoBase copy that used to live here went with
   the phone frame's film — all three frames hold the same branding still now,
   so there is no <video> on this page and nothing for a play control to do.
   -------------------------------------------------------------------------- */
.hero__device-video {
  object-position: top center;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  position: absolute;
  top: 0;
  left: 0;
}
.hero__device-video video {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  overflow: hidden;
}
@media (width >= 1280px) {
  .hero__device-video video {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
  }
}
/* Media swap: the tablet/desktop frame holds a landscape still instead of a
   video. It reuses `.deviceVideo` for the box (absolute, calc(100% + 1px)), so
   this only restates what `.deviceVideo video` gave the <video> element —
   the inner corner radii — plus the crop the poster already used. */
/* The film fills the phone screen. Frame is 184.942% tall (0.541 w/h) and the
   films are 608x1080 (0.563), so `cover` trims about 4% off the sides — the
   difference between the two ratios, and nothing more. */
.hero__device-film {
  object-fit: cover;
  object-position: center;
  /* Rounded on all four corners to match the closed frame; 12px inside a 24px
     outer radius is the same curve less the 12px border. */
  border-radius: 12px;
}

.hero__device-still {
  object-fit: cover;
  object-position: top center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
@media (width >= 1280px) {
  .hero__device-still {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
  }
}

/* The phone frame. `cover` on a 4:3 mockup in a 9:16.6 box keeps 40.5% of the
   image's width and all of its height, so the crop is a vertical slice — the
   only question is where. Measured on the file, the two cards sit between 16%
   and 81% across; 42% centres the slice on the nearer one and keeps an edge of
   the far one, instead of the concrete either side. */
.hero__mobile-still {
  object-position: 42% 50%;
}

.hero__device-video-controls {
  z-index: 3;
  inset: 0 0 auto auto;
}
@media (width >= 744px) {
  .hero__device-video-controls {
    inset: auto 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — the source swaps every entrance for `fadeAnimation`
   and drops the transform.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow-animated {
    animation: var(--hero-duration) var(--hero-ease) 0.1s forwards fadeAnimation;
    transform: none;
  }
  .hero__title-animated {
    animation: var(--hero-duration) var(--hero-ease) 0.24s forwards fadeAnimation;
    transform: none;
  }
  .hero__cta-animated {
    animation: var(--hero-duration) var(--hero-ease) 0.42s forwards fadeAnimation;
    transform: none;
  }
  .hero__website-box-animated {
    animation: var(--hero-duration) var(--hero-ease) 0.6s forwards fadeAnimation;
    transform: none;
  }
}