/* ==========================================================================
   EBC App 下载页 — Figma「2026.01.19-WEB-app下载页-Jimmy」node 1295:3926
   Desktop-only. All measurements are the design's own 1920-artboard pixels.
   ========================================================================== */

:root {
  /* Figma variables, kept under their original names. */
  --text-primary: #000;
  --text-secondary: rgba(0, 0, 0, 0.64);
  --text-primary-white: #fff;
  --text-tertiary-white: rgba(255, 255, 255, 0.48);
  --neutral-bg-a: #fff;
  --neutral-stroke: rgba(0, 0, 0, 0.12);
  --brand-deep-black: #232222;
  --brand-burgundy: #5d2333;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;

  /* The artboard centres a 1200px column inside 1920px, leaving 360px gutters. */
  --column: 1200px;
  --topbar-inset: 64px;

  /* Overridden per locale by the inline <style> the generator emits. Inter has
     no Thai, CJK, Arabic or Devanagari, so those locales name a Noto face; the
     headline drops below the design's 76px where the translation runs long. */
  --font-script: "Noto Sans";
  --hero-title-size: 76px;
  --hero-title-leading: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Sinter in the Figma file is Inter; the Noto face carries whatever script
     Inter is missing for this locale. */
  font-family: "Inter", var(--font-script), "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--neutral-bg-a);
  /* Narrow windows scroll rather than collapsing the fixed-width layout. */
  min-width: 1280px;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:where(a, summary):focus-visible {
  outline: 2px solid var(--brand-burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}

.column {
  width: var(--column);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Top bar — overlays the hero, 80px tall, 64px from each edge
   -------------------------------------------------------------------------- */

.topbar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  padding-inline: var(--topbar-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.topbar__logo img {
  width: 245.556px;
  height: 40px;
}

/* Language switcher ------------------------------------------------------- */

.lang {
  position: relative;
}

.lang__toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-block: 8px;
  border-radius: var(--radius-8);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lang__toggle::-webkit-details-marker {
  display: none;
}

.lang__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  overflow: hidden;
  transition: transform 0.18s ease;
}

.lang__caret img {
  width: 9.667px;
  height: 5.667px;
}

.lang[open] .lang__caret {
  transform: rotate(180deg);
}

/* Closed state is the only one specified in Figma; the panel below is a
   zero-JS <details> expansion of the same visual language. */
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  width: 180px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--neutral-bg-a);
  border: 1px solid var(--neutral-stroke);
  border-radius: var(--radius-12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.lang__menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-8);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
}

.lang__menu a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.lang__menu a[aria-current] {
  color: var(--brand-burgundy);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Hero — 852px tall, video backdrop, 640px content column starting at y=223
   -------------------------------------------------------------------------- */

/*
  Fills the viewport, with the content centred in the space the topbar leaves.
  That centring is what the design already does — 223px above the headline less
  the 80px topbar is 143px, against 145px below the download cluster — and it is
  the only way the gaps stay equal across seventeen locales, whose content
  blocks range from 484px tall in Chinese to 608px in Japanese.

  min-height, not height: a locale that outgrows the viewport pushes the section
  taller instead of being clipped.
*/
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-top: 80px;
  overflow: hidden;
  background-color: var(--neutral-bg-a);
}

/*
  The artwork stays at its designed 852px and is centred, so the section has to
  fill the rest itself. These are the two 1px rows lifted from the footage's own
  visible top and bottom edges (scripts/build-hero.ps1), stretched over the gap.
  The frame is near-flat there — 40 rows in either direction differs by 2/255 —
  so they read as a continuation rather than a seam.

  They are elements rather than background layers on .hero for two reasons.
  Backgrounds paint *under* the video, so they could not cover its edge; and
  their URL is per-locale, which in CSS would mean a custom property, where a
  relative url() resolves against the wrong stylesheet.
*/
.hero__edge {
  position: absolute;
  left: 50%;
  width: 4006px;
  /*
    425, not the 426 half-height of the video box: each strip runs one pixel
    into the footage. Chrome composites video on its own layer, and where that
    layer's edge lands between device pixels — any fractional viewport height or
    display scaling — the uncovered sliver shows the layer's black backing as a
    thin dark line along the bottom of the video. Overlapping puts an opaque
    pixel there instead, and since the strip was cut from the very row it now
    covers, the overlap is invisible.
  */
  height: max(0px, 50% - 425px);
  transform: translateX(-50%) translateX(40px);
  pointer-events: none;
}

.hero__edge--top {
  top: 0;
}

.hero__edge--bottom {
  bottom: 0;
}

/*
  Figma pins the hero artwork to a 4006x852 box centred on the artboard and
  nudged 40px right, which is what puts the handset clear of the headline.
  The video ships untouched from ebc.com at 8048x1800 — a different aspect to
  the Figma placeholder — so it is cover-fitted onto that same box rather than
  stretched across the section, otherwise the handset drifts ~50px left of where
  the design puts it. 8048 across a 4006px box is ~2 source pixels per CSS
  pixel, which is what keeps the in-frame UI text crisp on HiDPI screens.
*/
/*
  Height stays pinned at the design's 852 rather than following the section.
  object-fit: cover on a full-height box would scale the whole frame to fill it,
  and because the handset is small against the 4006px width that reads as a
  ~45% blow-up on a 1300px-tall viewport — the handset ends up clipped by the
  right edge. Fixing the box keeps it exactly the size the 1200px text column
  was drawn against, at any viewport height.

  Centring it also reproduces the design's vertical relationship: there the
  video spans 0–852 (centre 426) while the content centres at 465, and here the
  content centres 40px lower because of the topbar padding. Same 40px offset.
*/
.hero__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4006px;
  height: 852px;
  transform: translate(-50%, -50%) translateX(40px);
  object-fit: cover;
  pointer-events: none;
}

/* No vertical padding at all: any would be added to one side of the centred
   block only, which is exactly the imbalance this section is avoiding. */
.hero__inner {
  position: relative;
  width: var(--column);
  margin-inline: auto;
}

/* margin-right: auto (not a logical property) deliberately: it pins the block
   to the left in both directions, which the RTL note further down explains. */
.hero__title {
  width: 640px;
  margin: 0 auto 48px 0;
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-leading);
  font-weight: 700;
  color: var(--text-primary);
}

/* Download cluster -------------------------------------------------------- */

.download {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.download__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 200px;
}

.download__qr-card {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  background: var(--neutral-bg-a);
  border: 1px solid var(--neutral-stroke);
  border-radius: var(--radius-16);
}

.download__qr-card img {
  width: 160px;
  height: 160px;
}

.download__qr-label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--text-primary);
}

.download__badges {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 160px;
  height: 60px;
  overflow: hidden;
  background: var(--neutral-bg-a);
  border: 1px solid var(--neutral-stroke);
  border-radius: var(--radius-12);
}

/* The App Store artwork ships with its own card and border baked in. */
.badge--prebuilt {
  background: none;
  border: 0;
}

.badge--prebuilt img {
  width: 160px;
  height: 60px;
}

.badge--play img {
  width: 113.985px;
  height: 26.483px;
}

.badge--apk .badge__icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.badge__label {
  display: flex;
  flex-direction: column;
}

/* Gilroy in the Figma file is unlicensed here; Inter carries the same weights. */
.badge__kicker {
  font-size: 9px;
  line-height: 11px;
  font-weight: 500;
  color: var(--text-primary);
}

.badge__name {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   FCB partnership band — 680px tall
   -------------------------------------------------------------------------- */

/*
  Figma builds this from a rotated 4096px backdrop, two gradient washes and six
  masked player cut-outs totalling 34 MB. scripts/build-fcb.ps1 bakes that exact
  stack into one 69 KB image; only the headline stays live text.
  The asset is 2560px wide with the 1920 artboard centred, so wide monitors get
  real pixels instead of an upscale.
*/
.fcb {
  min-height: 680px;
  background-color: var(--brand-deep-black);
  background-image: url("../assets/fcb-scene.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.fcb__inner {
  width: var(--column);
  margin-inline: auto;
  padding-block: 264px 80px;
}

.fcb__title {
  margin: 0;
  font-size: 56px;
  line-height: 76px;
  font-weight: 700;
  color: var(--text-primary-white);
}

/* --------------------------------------------------------------------------
   Footer — 364px tall (80 padding + 48 row + 48 + 40 text + 48 + 20 + 80)
   -------------------------------------------------------------------------- */

.footer {
  padding-block: 80px;
  background: var(--brand-deep-black);
}

.footer__inner {
  width: var(--column);
  margin-inline: auto;
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

.footer__logo {
  width: 294.667px;
  height: 48px;
}

.social {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: block;
  transition: opacity 0.18s ease;
}

.social a:hover {
  opacity: 0.72;
}

.social img {
  width: 32px;
  height: 32px;
}

.footer__disclaimer,
.footer__copyright {
  margin: 48px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-tertiary-white);
}

.footer__copyright a {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --------------------------------------------------------------------------
   Arabic and Uyghur
   -------------------------------------------------------------------------- */

/*
  Neither backdrop can be mirrored: flipping the hero would reverse the UI text
  printed on the handset screen, and flipping the FCB band would reverse the
  Barça crest and kit. Both put their subject right of centre, so the copy has
  to stay in the left half exactly where the design places it.

  <html dir="rtl"> therefore stays on — it is what makes the Arabic script shape
  and order correctly, and what tells assistive tech the reading direction —
  while the structural rows below are pinned back to LTR so the composition is
  identical to the other fifteen locales. Only running text flows right-to-left.
*/

[dir="rtl"] .topbar,
[dir="rtl"] .download,
[dir="rtl"] .footer__top {
  direction: ltr;
}

[dir="rtl"] .lang__menu,
[dir="rtl"] .download__qr-label {
  direction: rtl;
}

/* The copyright line has no localised form and is entirely Latin, so leaving it
   to the bidi algorithm strands the © and the closing full stop at the wrong
   end. It reads left-to-right but still sits on the RTL page's leading edge. */
[dir="rtl"] .footer__copyright {
  direction: ltr;
  text-align: right;
}

[dir="rtl"] .hero__title,
[dir="rtl"] .fcb__title {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Swap the autoplaying loop for the poster still, on the same 4006px box so
     the handset lands where the design puts it. */
  .hero__bg {
    display: none;
  }

  .hero::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4006px;
    height: 852px;
    transform: translate(-50%, -50%) translateX(40px);
    /* background-image comes from the page's own <style>, which is the only
       place a per-locale relative URL resolves correctly. */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}