/* Campaign landing — hero, FOMO, winners ticker, conditions.
   Reuses the design tokens from styles.css. */

/* ---------- hero ---------- */
.chero {
  padding-top: clamp(28px, 4vw, 60px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 900px) { .chero { grid-template-columns: 1fr; gap: 36px; } }

.chero__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--step-display); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
.chero__lead { margin-top: 18px; font-size: var(--step-lead); color: var(--ink-soft); max-width: 42ch; }
.chero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.chero__stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin-top: 30px; }
.chero__stat { display: flex; flex-direction: column; }
.chero__stat b { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.chero__stat span { font-size: var(--step-small); color: var(--ink-soft); }

/* hero art: a big mystery box with floating prize chips */
.chero__art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.chero__box {
  position: relative; width: min(66%, 300px); aspect-ratio: 1; border-radius: 34px;
  background: linear-gradient(160deg, #2a37ff, var(--accent) 55%, var(--accent-strong));
  box-shadow: 0 46px 80px -44px rgba(5, 0, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  transform: rotate(-6deg);
}
.chero__box::before, .chero__box::after { content: ""; position: absolute; background: var(--lime); }
.chero__box::before { left: 50%; top: 0; width: 20%; height: 100%; transform: translateX(-50%); }
.chero__box::after { top: 50%; left: 0; height: 20%; width: 100%; transform: translateY(-50%); }
.chero__q {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(40px, 6vw, 64px); color: var(--navy);
}
.chero__q::before {
  content: ""; position: absolute; width: 44%; height: 44%; border-radius: 50%;
  background: var(--lime); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.5);
}
.chero__q span { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .chero__box { animation: box-float 6s var(--ease-soft) infinite; }
}

.chero__chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: var(--step-small); font-weight: 600; white-space: nowrap;
  box-shadow: 0 18px 34px -18px rgba(38, 42, 63, 0.45), 0 1px 0 var(--rule);
}
.chero__chip svg { width: 17px; height: 17px; color: var(--accent); }
.chero__chip--a { top: 4%; left: 0; }
.chero__chip--b { bottom: 8%; right: 2%; }
.chero__chip--c { top: 46%; right: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .chero__chip--a { animation: chip-float 4.5s ease-in-out infinite; }
  .chero__chip--b { animation: chip-float 5.2s ease-in-out infinite 0.4s; }
  .chero__chip--c { animation: chip-float 4.8s ease-in-out infinite 0.9s; }
}

/* ---------- winners ticker ---------- */
.tickwrap { margin-top: clamp(28px, 4vw, 44px); }
.ticker {
  overflow: hidden; padding: 16px 0; background: var(--surface-2); border-radius: 14px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track { display: inline-flex; gap: 30px; white-space: nowrap; will-change: transform; }
@media (prefers-reduced-motion: no-preference) { .ticker__track { animation: ticker 34s linear infinite; } }
@media (hover: hover) and (pointer: fine) { .ticker:hover .ticker__track { animation-play-state: paused; } }
.ticker__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step-small); color: var(--ink-soft); }
.ticker__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pos); flex: none; }
.ticker__item b { color: var(--ink); font-weight: 600; }
.ticker__item small { opacity: 0.7; }

/* ---------- FOMO row inside the game panel ---------- */
.game__fomo { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.game__fomo-txt { font-size: var(--step-small); color: var(--ink-soft); }
.game__fomo-txt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.game__bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.game__bar-fill { position: absolute; inset: 0; width: 100%; border-radius: 999px; background: var(--accent); transform: scaleX(0.48); transform-origin: left center; transition: transform 450ms var(--ease-out); }

/* ---------- conditions ---------- */
.cond { padding-top: var(--section); }
.cond__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 800px) { .cond__steps { grid-template-columns: 1fr; } }
.cond__step { background: var(--surface); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); }
.cond__step h3 { margin-bottom: 10px; font-size: var(--step-lead); }
.cond__step p { color: var(--ink-soft); }
.cond__cta { margin-top: clamp(24px, 3vw, 32px); }
.cond__fine { margin-top: 20px; font-size: var(--step-small); color: var(--ink-soft); max-width: 64ch; line-height: 1.55; }

/* ---------- keyframes ---------- */
@keyframes box-float { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-12px); } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- mobile / touch platform layer ---------- */
/* Kill the grey tap flash on every tappable element (the loudest "this is a website" tell). */
html { -webkit-tap-highlight-color: transparent; }

/* No 300ms tap delay on interactive elements. */
a, button, [role="button"], [role="switch"], [role="radio"], [role="tab"], label, .gbox { touch-action: manipulation; }

/* Controls must not select their text or pop the long-press callout; page content stays selectable. */
button, [role="button"], [role="switch"], [role="radio"], [role="tab"], .gbox, .bar__nav a, .menu__list a, .foot__util .link, .chero__chip, .soc, .wordmark {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* Safe areas: clear the notch/Dynamic Island in landscape and the home indicator at the foot. */
@media (orientation: landscape) {
  .bar__in, main > section, .foot { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
.bar { padding-top: env(safe-area-inset-top); }
.foot { padding-bottom: env(safe-area-inset-bottom); }