/* =====================================================================
   Landing page styles. Colours, sizes, positions and animation values
   come from config.js (applied as CSS variables by js/landing.js).
   ===================================================================== */
:root {
  --page-bg: #0626b8;
  --page-max: 480px;
  --pulse-scale: 1.035;
  --pulse-duration: 2.2s;
  --pulse-ease: ease-in-out;
  --pulse-delay-bottom: 0s;
  --press-scale: 0.95;
  --focus: #ffd600;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--page-bg);
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* Centered mobile-style page; fits the viewport on small screens. */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

/* The stage is exactly the artwork's size; every overlay is positioned
   in % of it, so everything scales together. */
.stage {
  position: relative;
  width: 100%;
  container-type: inline-size;
}

/* Full-page artwork: natural aspect ratio, never cropped or stretched. */
.artwork {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (min-width: 520px) {
  .page { box-shadow: 0 0 60px rgba(0, 0, 0, 0.35); }
}

/* ---------- Overlay positioning layer -------------------------------
   Positioning uses translate(); the animation lives on a CHILD element,
   so the two transforms never conflict. */
.overlay {
  position: absolute;
  z-index: 2;
}

.overlay--cta {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%);
}

.overlay--logo {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: var(--ratio, 432 / 122);
  transform: translateX(-50%);
  pointer-events: none;
}

.logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- CTA buttons --------------------------------------------- */
.cta {
  display: block;
  border-radius: 999px;
  transition: transform 0.12s ease-out;
  outline: none;
  touch-action: manipulation;
}

/* Pressed effect (on the link — separate from the pulse layer). */
.cta:active,
.cta.is-pressed { transform: scale(var(--press-scale)); }

.cta:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55);
}

.cta[aria-disabled="true"] { cursor: not-allowed; }

/* Animation layer: scales from its centre, 1 → 1.035 → 1. */
.cta__pulse {
  display: block;
  transform-origin: 50% 50%;
  animation: cta-pulse var(--pulse-duration) var(--pulse-ease) infinite;
  will-change: transform;
}
.cta__pulse--bottom { animation-delay: var(--pulse-delay-bottom); }
.no-pulse .cta__pulse { animation: none; }

.cta__img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--pulse-scale)); }
}

/* ---------- Language selector --------------------------------------- */
.overlay--lang {
  right: var(--right);
  top: var(--top);
  z-index: 5;
  font-size: 12px;
  font-size: clamp(12px, 2.9cqw, 14px);
}

.lang__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.5em;
  padding: 0.35em 0.75em 0.35em 0.6em;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(3, 18, 110, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
}
/* Larger invisible tap area */
.lang__toggle::before { content: ""; position: absolute; inset: -8px -6px; }

.lang__globe { width: 1.25em; height: 1.25em; flex: none; }
.lang__caret { width: 0.9em; height: 0.9em; flex: none; transition: transform 0.15s; }
.lang__toggle[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

/* "artwork" mode: the selector box is drawn in the background image, so
   the toggle becomes an invisible hotspot exactly over it (same size). */
.lang--artwork { width: var(--lw); }
.lang--artwork .lang__toggle {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--lratio);
  padding: 0;
  border: 0;
  border-radius: 14%/34%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: transparent;
  transition: background-color 0.15s;
}
.lang--artwork .lang__toggle > * { display: none; }
.lang--artwork .lang__toggle:hover,
.lang--artwork .lang__toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }

.lang__toggle:focus-visible,
.lang__option:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 12.5em;
  white-space: nowrap;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 10, 80, 0.35);
}
.lang__menu[hidden] { display: none; }

.lang__option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: 44px;
  padding: 0 0.8em;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0a1a6b;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lang__option:hover { background: #eef2ff; }
.lang__option[aria-checked="true"] { background: #e3e9ff; font-weight: 700; }
.lang__code { min-width: 2.6em; font-weight: 700; color: #0626b8; }
.lang__check { margin-left: auto; width: 16px; height: 16px; visibility: hidden; color: #0626b8; }
.lang__option[aria-checked="true"] .lang__check { visibility: visible; }

/* ---------- Toast (shown when a link is not configured yet) --------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cta__pulse { animation: none; }
  .cta, .lang__caret, .toast { transition: none; }
}