/* =========================================================================
   02-tophero — main hero (._common-header, data-layout="full")
   Ported from CommonHeader.DFxrkEKr.css. Grid columns, scroll-hint and
   coin-drop are scoped under the section root so global utilities stay clean.
   ========================================================================= */

._common-header {
  position: relative;
  overflow: hidden;
  /* Dark backdrop of its own: any sliver the video/overlay ever fails to
     cover shows section-dark, never white body. */
  background: var(--surface-dark);
}

/* The split-text wrapper clips each char as it rises in */
._common-header h1 .c { overflow: hidden; }

/* Background media fades in once ready (mirrors the source video fade) */
._common-header .background > * {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
._common-header.is-ready .background > * { opacity: 1; }

/* The featured media (when used) is slightly over-scaled then opacity-revealed */
._common-header .featured-media {
  margin-bottom: max(30.6px, 30.6px + 100vw * .0561);
  overflow: hidden;
}
._common-header .featured-media > * {
  height: auto;
  width: 100%;
  transform: scale(1.066);
}
@media only screen and (max-width: 1290px) {
  ._common-header .featured-media { margin-bottom: 48px; }
}
@media only screen and (max-width: 1023px) {
  ._common-header .featured-media { margin-bottom: 32px; }
}
@media only screen and (max-width: 743px) {
  ._common-header .featured-media { margin-bottom: 16px; }
}

/* ---- Main row: full-viewport hero --------------------------------------- */
._common-header[data-layout=full] .main-row {
  min-height: 100vh;
  /* lvh, not svh: with svh the hero ends at the SMALL viewport height, so
     once the mobile URL bar collapses (viewport grows) a white band of body
     showed below the hero. lvh keeps it covering the largest viewport. */
  min-height: 100lvh;
  padding-top: var(--120);
  padding-bottom: clamp(116px, 108.863px + 100vw * .0183, 140px);
}
@media only screen and (max-width: 1023px) {
  ._common-header[data-layout=full] .main-row {
    padding-bottom: 80px;
    align-content: space-between;
    padding-top: 116px;
  }
}

/* ---- Grid columns (scoped so layout works without global col utilities) -- */
._common-header .xxl-8        { flex: 0 0 50%;   max-width: 50%; }
._common-header .xxl-4        { flex: 0 0 25%;   max-width: 25%; }
._common-header .xxl-offset-3 { margin-left: 18.75%; }

@media only screen and (max-width: 1290px) {
  ._common-header .md-9        { flex: 0 0 56.25%; max-width: 56.25%; }
  ._common-header .md-6        { flex: 0 0 37.5%;  max-width: 37.5%; }
  ._common-header .md-offset-1 { margin-left: 6.25%; }
  ._common-header .xxl-offset-3 { margin-left: 0; }
}
@media only screen and (max-width: 1023px) {
  ._common-header .sm-12       { flex: 0 0 75%; max-width: 75%; }
  ._common-header .sm-8        { flex: 0 0 50%; max-width: 50%; }
  ._common-header .sm-offset-0 { margin-left: 0; }
  ._common-header .md-offset-1 { margin-left: 0; }
}
@media only screen and (max-width: 743px) {
  ._common-header .xs-16 { flex: 0 0 100%; max-width: 100%; }
}

/* Each grid cell stacks its own content vertically; override .g-col defaults */
._common-header .g-col {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
}
._common-header .mb-12 { margin-bottom: var(--12); }

/* ---- App-store badges: white over the dark hero (ring = ph-badge's own) -- */
._common-header ._app-button { color: inherit; }
._common-header ._app-button .ph-badge { color: inherit; }

/* ---- Background: looping video + uniform dark overlay ------------------- */
._common-header .background { background: #000; } /* fallback behind the video */
._common-header ._video-asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fill the hero, keep aspect ratio */
  object-position: center;
}
/* Plain semi-transparent dark layer over the whole video (no gradient). */
._common-header ._video-overlay {
  background-color: rgba(10, 10, 10, .4); /* near-black @ 40% — lets 60% of the video through */
}

/* ---- Scroll hint -------------------------------------------------------- */
._common-header ._scroll-hint {
  bottom: 42px;
  left: var(--grid-margin);
  display: inline-block;
  position: absolute;
  color: #fff;
  padding: .4em .85em;
  border: 1px solid hsla(0, 0%, 100%, .1);
  border-radius: 5em;
  background-color: #ffffff1a;
  transition: background-color .2s cubic-bezier(.25, .46, .45, .94);
}
._common-header ._scroll-hint > .flex { gap: .5em; }
._common-header ._scroll-hint:hover  { background-color: #fff3; }
._common-header ._scroll-hint:active { background-color: #ffffff40; }
._common-header ._scroll-hint:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ffffff80;
  outline: none;
}
._common-header ._scroll-hint ._icon { width: 1em; height: 1em; }
@media only screen and (max-width: 1023px) {
  ._common-header ._scroll-hint { display: none; }
}

/* ---- Coin-drop loop (inside the scroll hint) ---------------------------- */
._common-header ._coin-drop {
  width: var(--size, 24px);
  height: var(--size, 24px);
  border-radius: 100%;
  background-color: #f74522;
}
._common-header ._scroll-hint ._coin-drop {
  width: .5em;
  height: .5em;
  margin-bottom: .2em;
}
._common-header ._coin-drop[data-tone=neutral] { background-color: #fff; }
._common-header ._coin-drop span {
  border-radius: inherit;
  transform-origin: center;
  will-change: background-color, opacity, transform;
  animation-name: coin-loop-orange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.445, .05, .55, .95);
}
._common-header ._coin-drop[data-tone=neutral] span { animation-name: coin-loop-neutral; }
._common-header ._coin-drop span:first-child   { animation-delay: .3333333333s; }
._common-header ._coin-drop span:nth-child(2)  { animation-delay: .6666666667s; }
._common-header ._coin-drop span:nth-child(3)  { animation-delay: 1s; }
._common-header ._coin-drop span:nth-child(4)  { animation-delay: 1.3333333333s; }
._common-header ._coin-drop span:nth-child(5)  { animation-delay: 1.6666666667s; }
._common-header ._coin-drop span:nth-child(6)  { animation-delay: 2s; }

@keyframes coin-loop-orange {
  0%   { background-color: #f74522; opacity: 1; transform: translateY(0) scaleY(1); z-index: 1; }
  60%  { opacity: 1; }
  80%  { background-color: #fdd6ce; opacity: 0; }
  100% { opacity: 0; transform: translateY(200%) scaleY(0); z-index: 7; }
}
@keyframes coin-loop-neutral {
  0%   { background-color: #fff; opacity: 1; transform: translateY(0) scaleY(1); z-index: 1; }
  48%  { opacity: 1; }
  80%  { background-color: #f5b1a3; opacity: 0; }
  100% { opacity: 0; transform: translateY(200%) scaleY(0); z-index: 7; }
}

/* ---- Large-desktop (≥2000px) scale-ups from source ---------------------- */
@media only screen and (min-width: 2000px) {
  ._common-header[data-layout=full] .main-row { padding-bottom: 7vw; }
  ._common-header ._scroll-hint { bottom: 2.1vw; }
  ._common-header .featured-media { margin-bottom: 6.3vw; }
}

/* ---- Reduced motion: stop the looping coin drop ------------------------- */
@media (prefers-reduced-motion: reduce) {
  ._common-header ._coin-drop span { animation: none; opacity: 1; }
}