/* Cobalt Lab — LEVEL UP landing · global styles */
@import url("./assets/tokens/design-tokens.css");

@font-face {
  font-family: "Garet";
  src: local("Garet"), local("Garet-Book");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --display-font: "Garet", "Sora", "Inter", sans-serif;
  --ui-font: "Inter", system-ui, sans-serif;
  --fx-intensity: 1;
  --canvas-bg: #0a0b10;
}

* { box-sizing: border-box; }
html, body, #root { background: var(--canvas-bg); color: var(--color-text-primary); font-family: var(--ui-font); margin: 0; }

/* Design-canvas page chrome */
.app-stage {
  width: 100vw; min-height: 100vh;
  background: #050609;
  color: #c9cfdb;
}

/* ── Landing artboard frame ───────────────────────── */
.lp {
  width: 1440px;
  position: relative;
  font-family: var(--ui-font);
  color: var(--color-text-primary);
  background: var(--color-bg-deep);
  overflow: hidden;
  isolation: isolate;
}
.lp * { -webkit-font-smoothing: antialiased; }

/* ── Reusable atoms ───────────────────────────────── */
.eyebrow {
  font: 600 12px/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-highlight);
}
.label-sm {
  font: 500 11px/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.muted { color: var(--color-text-muted); }

/* ── CTA button — base ────────────────────────────── */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 36px;
  background: var(--color-brand-primary);
  color: #fff;
  font: 700 16px/1 "Rubik", var(--ui-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 12px 32px -12px rgba(54,128,190,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
  text-decoration: none;
  white-space: nowrap;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 20px 40px -10px rgba(54,128,190,0.85), inset 0 1px 0 rgba(255,255,255,0.3); }
.cta--lg { height: 72px; padding: 0 44px; font-size: 18px; }
.cta--xl { height: 84px; padding: 0 56px; font-size: 20px; border-radius: 14px; }

/* ── Locale switch ────────────────────────────────── */
.locale-switch {
  display: inline-flex; gap: 2px; padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.locale-switch button {
  appearance: none; border: 0; background: transparent;
  color: rgba(255,255,255,0.55);
  padding: 6px 12px; min-width: 36px;
  font: 600 12px/1 var(--ui-font);
  letter-spacing: 0.1em;
  border-radius: 999px;
  cursor: pointer;
}
.locale-switch button.active { background: rgba(151,224,255,0.15); color: var(--color-brand-highlight); }

/* ── Countdown chip ───────────────────────────────── */
.count-chip { display: inline-flex; align-items: center; gap: 12px; }
.count-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF4D4D;
  box-shadow: 0 0 12px #FF4D4D;
  animation: cl-pulse 1.6s ease-in-out infinite;
}
@keyframes cl-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* Big digital countdown */
.cd-block { display: flex; gap: 14px; }
.cd-cell {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 78px;
  text-align: center;
}
.cd-num {
  font: 600 36px/1 var(--display-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg,#fff, #97E0FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cd-lab {
  font: 500 10px/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 8px;
}

/* ── Bg effects ───────────────────────────────────── */
.bg-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.bg-glow::before, .bg-glow::after {
  content: "";
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: calc(0.55 * var(--fx-intensity));
}
.bg-glow::before { left: -200px; top: -300px; background: radial-gradient(circle, #3680BE 0%, transparent 60%); }
.bg-glow::after { right: -180px; bottom: -200px; background: radial-gradient(circle, #6E3DBB 0%, transparent 60%); }

.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(151,224,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151,224,255,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
  opacity: var(--fx-intensity);
}

.bg-noise {
  position: absolute; inset: 0; pointer-events: none;
  opacity: calc(0.5 * var(--fx-intensity));
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Confetti drift ───────────────────────────────── */
.confetti-layer {
  position: absolute; inset: 0; pointer-events: none;
  background: url("./assets/images/hero-confetti.webp") center/contain no-repeat;
  opacity: calc(0.7 * var(--fx-intensity));
  mix-blend-mode: screen;
}
.confetti-layer.tilted { transform: rotate(-12deg) scale(1.2); }

/* ── Floating animation ───────────────────────────── */
@keyframes cl-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.float { animation: cl-float 6s ease-in-out infinite; }

/* LEVEL UP breathing: pulses scale + cyan halo to feel "alive" */
@keyframes cl-levelup-breathe {
  0%, 100% {
    transform: scale(1.18);
    filter:
      drop-shadow(0 18px 40px rgba(54,128,190,0.6))
      drop-shadow(0 0 24px rgba(151,224,255,0.35));
  }
  50% {
    transform: scale(1.26);
    filter:
      drop-shadow(0 24px 60px rgba(54,128,190,0.95))
      drop-shadow(0 0 48px rgba(151,224,255,0.7))
      drop-shadow(0 0 80px rgba(151,224,255,0.35));
  }
}
.lvlup-breathe {
  animation: cl-levelup-breathe 4.2s ease-in-out infinite;
  will-change: transform, filter;
  transform-origin: center;
}

/* Crate Battle — combat-energy: subtle sway + warm glow pulse */
@keyframes cl-crate-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter:
      drop-shadow(0 18px 36px rgba(0,0,0,0.55))
      drop-shadow(0 0 24px rgba(255,140,40,0.18));
  }
  25% {
    transform: scale(1.015) rotate(-0.6deg);
  }
  50% {
    transform: scale(1.035) rotate(0.4deg);
    filter:
      drop-shadow(0 26px 54px rgba(0,0,0,0.7))
      drop-shadow(0 0 50px rgba(255,140,40,0.55))
      drop-shadow(0 0 80px rgba(255,90,40,0.2));
  }
  75% {
    transform: scale(1.015) rotate(-0.3deg);
  }
}
.crate-pulse {
  animation: cl-crate-pulse 3.6s ease-in-out infinite;
  will-change: transform, filter;
  transform-origin: center bottom;
}

/* ── Card base ────────────────────────────────────── */
.tile {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  overflow: hidden;
}
.tile-art {
  position: relative; overflow: hidden;
}
.tile-title {
  font: 600 28px/1.1 var(--display-font);
  letter-spacing: -0.01em;
}
.tile-body {
  font: 400 16px/1.5 var(--ui-font);
  color: rgba(255,255,255,0.65);
}

/* ── Chip ─────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  font: 600 11px/1 var(--ui-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.03);
}
.chip.cobalt { color: var(--color-brand-highlight); border-color: rgba(151,224,255,0.35); background: rgba(151,224,255,0.06); }
.chip.purple { color: #C9A4FF; border-color: rgba(171,97,255,0.35); background: rgba(171,97,255,0.06); }
.chip.orange { color: #FFD8A0; border-color: rgba(254,183,95,0.4); background: rgba(254,183,95,0.06); }
.chip.green { color: #C8EE9C; border-color: rgba(156,216,88,0.4); background: rgba(156,216,88,0.06); }

/* helpers */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px } .gap-12 { gap: 12px } .gap-16 { gap: 16px } .gap-24 { gap: 24px }
.gap-32 { gap: 32px } .gap-48 { gap: 48px }

/* Logo / brand row */
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row img { display: block; height: 36px; }

/* Tag for tweaks */
button { font-family: inherit; }