/* =========================================================================
   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;
  /* svh (small viewport height) — exactly like Jeton's CommonHeader. The hero
     is sized to the viewport WITH the mobile address bar visible, so it always
     fits fully on first load (the bar is expanded at scroll 0). When the bar
     later collapses, the light next section simply shows below — which is the
     intended behaviour here (no dark backstop needed). */
  min-height: 100svh;
  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; }
}