/* =========================================================================
   05-mediahero  —  ._mobile-app-hero  ("Pay like a local via QR codes")
   Light section (white body shows through): a QR code being laser-scanned,
   framed by two running flag marquees (Plasma-style).
   ========================================================================= */

._mobile-app-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Phone geometry lives on the SECTION so the flex gap and the scene share
     it. The phone is NOT transformed any more — spacing is pure layout. */
  --w: min(clamp(220px, 8vw + 140px, 290px), 29vh);
  --phone-h: calc(var(--w) * 920 / 450);
  /* Historical heading→phone tightening: 10% of the phone height, then keep
     70% of what remains (the earlier "-30%" request). Purely a gap size —
     the phone itself stays where layout puts it. */
  --gap-tighten: calc(var(--phone-h) * .1);
  gap: calc((clamp(40px, 6vw, 84px) - var(--gap-tighten)) * .7);
  padding-top: clamp(72px, 9vw, 132px);
  /* bottom trimmed to 75% — part of the −25% gap to the converter below */
  padding-bottom: calc(clamp(72px, 9vw, 132px) * .75);
  /* no 100vh floor: the section is exactly as tall as its content, so the
     converter below sits right after the phone scene */
}

/* ---- Centered statement -------------------------------------------------- */
._mobile-app-hero .g-row { position: relative; z-index: 2; }
._mobile-app-hero .col-statement {
  width: min(620px, 86%);
  margin-inline: auto;
}
._mobile-app-hero .gap-24-16 { gap: var(--24-16, 20px); }
._mobile-app-hero .subtitle { color: rgba(10, 10, 10, .6); }

/* ---- Scene: flags run BEHIND, phone sits on top ------------------------- */
._mobile-app-hero .qr-scene {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  /* No min-height: the scene hugs the phone exactly (the flag rows are
     absolutely positioned and add no height), so the section is as short as
     its content allows — nothing dead above or below the phone. */
}

/* Flag marquees — absolutely placed so the phone overlaps them (z above) */
._mobile-app-hero .flag-marquee {
  position: absolute;
  left: 0; right: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Rows sit symmetrically about the phone centre (= scene centre, since the
   scene hugs the phone), offset by ±13% of the phone height. translateY(-50%)
   makes the computed point the row's CENTRE at any row height. */
._mobile-app-hero .flag-marquee.row-a,
._mobile-app-hero .flag-marquee.row-b {
  top: calc(50% + var(--row-offset));
  transform: translateY(-50%);
}
._mobile-app-hero .flag-marquee.row-a { --row-offset: calc(var(--phone-h) * -.13); }
._mobile-app-hero .flag-marquee.row-b { --row-offset: calc(var(--phone-h) * .13); }
/* Both rows run at the SAME speed (one shared duration). Directions come
   from two mirrored keyframe sets rather than animation-direction:reverse,
   so every iteration moves the same way and lands exactly on the -50%
   boundary — with 4 identical strips per track, the frame at -50% is
   pixel-identical to 0%, giving a fully seamless infinite loop. */
._mobile-app-hero .flag-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Armed by JS (data-ready) once every strip image has loaded — Safari bakes
   percentage keyframes against the track width at animation start, so the
   loop must not begin while the track is still images-loading-narrow. */
._mobile-app-hero .flag-track[data-ready="true"] {
  animation: mediahero-flags 40s linear infinite;
}
._mobile-app-hero .flag-track.reverse[data-ready="true"] {
  animation-name: mediahero-flags-rev;
}
._mobile-app-hero .flag-strip {
  display: block;
  height: clamp(52px, 4.6vw, 78px);
  width: auto;
}
@keyframes mediahero-flags {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes mediahero-flags-rev {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ---- iPhone mockup — real frame SVG over a live scanner screen ---------- */
._mobile-app-hero .phone-mockup {
  position: relative;
  z-index: 1;
  /* No transform: the phone sits exactly where layout puts it, so it can
     never overlap the heading above. */
}
._mobile-app-hero .iphone {
  position: relative;
  /* width comes from --w on .qr-scene (shared with the flag rows) */
  width: var(--w);
  aspect-ratio: 450 / 920;
}
/* The frame PNG has a TRANSPARENT screen cut-out, so it sits ON TOP and the
   scanner shows through it. */
._mobile-app-hero .iphone .frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}
/* Screen fills the cut-out (insets measured from the frame image); the frame's
   rounded cut-out defines the visible corners, so this sits a hair larger and
   the bezel hides the excess. */
._mobile-app-hero .iphone .screen {
  position: absolute; z-index: 1;
  left: 5%; right: 5%; top: 2.2%; bottom: 2.2%;
  border-radius: calc(var(--w) * .085);
  overflow: hidden;
  background: #16202a;
}
._mobile-app-hero .iphone .screen > * { z-index: 1; }
._mobile-app-hero .scan-photo {
  position: absolute; inset: 0; z-index: 0;
  /* dusk-over-sea gradient standing in for the camera feed */
  background:
    linear-gradient(180deg,
      #9f93c9 0%, #b89fca 26%, #e3aec2 44%, #f3b892 53%,
      #dd9273 60%, #6f9198 72%, #3f6068 86%, #0e1c22 100%);
}

/* Provided iOS status bar — pinned to the top of the screen, scaled to its
   width (both are 402-wide, so they line up 1:1). */
._mobile-app-hero .statusbar {
  position: absolute; top: 1.4%; left: 0; z-index: 3;
  width: 100%; height: auto; display: block;
}

/* Close (×) */
._mobile-app-hero .scan-x {
  position: absolute; top: 9.5%; left: 8%; z-index: 3;
  width: calc(var(--w) * .085); height: calc(var(--w) * .085);
}
._mobile-app-hero .scan-x::before,
._mobile-app-hero .scan-x::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
}
._mobile-app-hero .scan-x::before { transform: translateY(-50%) rotate(45deg); }
._mobile-app-hero .scan-x::after  { transform: translateY(-50%) rotate(-45deg); }

/* Scan reticle: corner brackets + QR + moving blue band */
._mobile-app-hero .reticle {
  position: absolute; z-index: 2;
  top: 30%; left: 50%; transform: translateX(-50%);
  width: 62%; aspect-ratio: 1;
}
._mobile-app-hero .reticle .qr {
  position: absolute; inset: 8%;
  width: 84%; height: 84%;
  border-radius: 4px;
  opacity: .9;
  mix-blend-mode: multiply;  /* white → shows the camera feed, modules stay dark */
}
._mobile-app-hero .reticle::before { /* faint light backing so modules read over dark water */
  content: ""; position: absolute; inset: 8%;
  border-radius: 4px; background: rgba(255, 255, 255, .34);
}
._mobile-app-hero .reticle .rc {
  position: absolute; width: 18%; height: 18%; border: 3px solid #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
._mobile-app-hero .reticle .rc.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
._mobile-app-hero .reticle .rc.tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; border-top-right-radius: 8px; }
._mobile-app-hero .reticle .rc.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
._mobile-app-hero .reticle .rc.br { bottom: 0; right: 0; border-left: 0;  border-top: 0; border-bottom-right-radius: 8px; }
._mobile-app-hero .reticle .band {
  position: absolute; left: 5%; right: 5%; top: 4%;
  height: 44%;
  background: linear-gradient(180deg, rgba(41, 121, 255, .04), rgba(41, 121, 255, .42));
  border-bottom: 2px solid rgba(90, 160, 255, .95);
  box-shadow: 0 0 20px rgba(41, 121, 255, .55);
  border-radius: 3px;
  animation: mediahero-scan 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes mediahero-scan {
  0%   { top: 2%; }
  50%  { top: 54%; }
  100% { top: 2%; }
}

/* "Look for this logo" hint */
._mobile-app-hero .scan-hint {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 15%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 12%; text-align: center; color: #fff;
  font-size: calc(var(--w) * .046); line-height: 1.25;
}
._mobile-app-hero .hint-logo {
  width: calc(var(--w) * .11); height: calc(var(--w) * .11);
  border-radius: 9px; background: linear-gradient(135deg, #0b2f57, #16436f);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}
._mobile-app-hero .scan-help {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 5%;
  text-align: center; color: #3b8bff; font-weight: 600;
  font-size: calc(var(--w) * .052);
}

/* ---- Scroll-reveal entrance (progressively enhanced by JS) -------------- */
._mobile-app-hero[data-reveal] .col-statement {
  opacity: 0;
  transform: translateY(32px);
}
._mobile-app-hero[data-reveal].is-in .col-statement {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-quart),
              transform var(--dur-slow) var(--ease-out-quart);
}

/* ---- Reduced motion: stop the marquee + scan band ----------------------- */
@media (prefers-reduced-motion: reduce) {
  ._mobile-app-hero .flag-track,
  ._mobile-app-hero .band { animation: none; }
  ._mobile-app-hero .band { top: 28%; }
  ._mobile-app-hero[data-reveal] .col-statement { opacity: 1; transform: none; }
}

/* ---- Phone -------------------------------------------------------------- */
@media only screen and (max-width: 743px) {
  ._mobile-app-hero {
    --w: min(clamp(200px, 60vw, 260px), 34vh);
    /* mobile keeps a plain 70% of its old gap — no phone-height cut here
       (that offset is bigger than the whole mobile gap and would overlap) */
    gap: calc(clamp(32px, 9vw, 56px) * .7);
    min-height: 0;
  }
  ._mobile-app-hero .flag-strip { height: clamp(44px, 12vw, 60px); }
}