/* ==========================================================================
   Pick Me — randompick.me design system
   Layers: reset → tokens → base → components → utilities
   Theming: color-scheme + light-dark(), palette in oklch, brand = app blue
   ========================================================================== */

@layer reset, tokens, base, components, utilities;

/* ---------- Fonts (self-hosted, variable) ---------- */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/DMSans-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Fraunces-var-latin.woff2") format("woff2");
}

/* Metric-tuned fallback to minimize CLS before DM Sans arrives */
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 30%;
}

/* ---------- Reset ---------- */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
  p, li { text-wrap: pretty; }
  a { color: inherit; }
}

/* ---------- Tokens ---------- */

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Brand: the app's accent blue #1476D7 */
    --brand:   oklch(0.57 0.17 253);
    --brand-2: oklch(0.72 0.13 215);          /* cyan */
    --brand-3: oklch(0.55 0.19 285);          /* indigo */
    --brand-hi: color-mix(in oklch, var(--brand) 72%, white);

    /* Wheel slice palette — vivid, shared by wheel art, icons, confetti */
    --slice-1: oklch(0.68 0.19 25);   /* coral red */
    --slice-2: oklch(0.78 0.15 65);   /* orange */
    --slice-3: oklch(0.86 0.15 95);   /* yellow */
    --slice-4: oklch(0.75 0.17 150);  /* green */
    --slice-5: oklch(0.70 0.14 210);  /* teal */
    --slice-6: oklch(0.62 0.17 255);  /* blue */
    --slice-7: oklch(0.60 0.19 290);  /* violet */
    --slice-8: oklch(0.70 0.19 350);  /* pink */

    /* Surfaces & ink */
    --bg:        light-dark(oklch(0.99 0.005 250), oklch(0.16 0.02 260));
    --surface:   light-dark(oklch(1 0 0), oklch(0.22 0.02 260));
    --ink:       light-dark(oklch(0.25 0.03 260), oklch(0.95 0.01 250));
    --ink-muted: light-dark(oklch(0.45 0.02 255), oklch(0.72 0.02 250));
    --border:    light-dark(oklch(0.88 0.01 250 / 0.8), oklch(0.45 0.02 255 / 0.4));

    --glass:      light-dark(oklch(1 0 0 / 0.62), oklch(0.26 0.02 260 / 0.55));
    --glass-deep: light-dark(oklch(1 0 0 / 0.8),  oklch(0.23 0.02 260 / 0.75));

    --tint:      color-mix(in oklch, var(--brand) 10%, transparent);
    --tint-deep: color-mix(in oklch, var(--brand) 18%, transparent);

    /* Radii, blur, shadows */
    --r-sm: 12px;
    --r: 20px;
    --r-lg: 28px;
    --r-pill: 999px;
    --blur: 20px;
    --shadow-soft: 0 8px 32px light-dark(oklch(0.5 0.05 255 / 0.12), oklch(0 0 0 / 0.45));
    --shadow-lift: 0 18px 48px light-dark(oklch(0.5 0.08 255 / 0.2), oklch(0 0 0 / 0.6));

    /* Type */
    --font-sans: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, sans-serif;
    --font-display: "Fraunces", "DM Sans", serif;
    --fs-hero: clamp(2.6rem, 1.2rem + 5.6vw, 4.6rem);
    --fs-h1: clamp(2.2rem, 1.3rem + 3.4vw, 3.4rem);
    --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
    --fs-h3: 1.2rem;
    --fs-lg: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);

    --maxw: 72rem;
    --pad: clamp(1rem, 4vw, 2rem);
  }
}

/* ---------- Base ---------- */

@layer base {
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  /* Aurora — fixed gradient field behind everything */
  .aurora {
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    filter: blur(70px);
    opacity: light-dark(0.55, 0.5);
    background:
      radial-gradient(38% 42% at 18% 18%, color-mix(in oklch, var(--brand) 55%, transparent), transparent 70%),
      radial-gradient(34% 38% at 85% 12%, color-mix(in oklch, var(--brand-2) 45%, transparent), transparent 70%),
      radial-gradient(42% 46% at 70% 88%, color-mix(in oklch, var(--brand-3) 40%, transparent), transparent 70%);
  }

  ::selection { background: color-mix(in oklch, var(--brand) 30%, transparent); }

  h1, h2, h3 { line-height: 1.12; letter-spacing: -0.015em; }

  :focus-visible {
    outline: 3px solid color-mix(in oklch, var(--brand) 70%, transparent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Cross-document view transitions (progressive enhancement) */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
}

/* ---------- Components ---------- */

@layer components {

  /* --- Nav --- */
  .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(var(--blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
    background: var(--glass);
    border-bottom: 1px solid var(--border);
  }
  .site-nav .inner {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 0.65rem var(--pad);
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .wordmark {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    letter-spacing: -0.02em;
    view-transition-name: wordmark;
  }
  .wordmark img { width: 1.65rem; height: 1.65rem; }
  .site-nav .links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav .links::-webkit-scrollbar { display: none; }
  .site-nav .links a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-muted);
    padding: 0.45rem 0.7rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color 0.2s, background 0.2s;
  }
  .site-nav .links a:hover { color: var(--ink); background: var(--tint); }
  .site-nav .links a.cta {
    color: white;
    background: linear-gradient(135deg, var(--brand-hi), var(--brand));
    box-shadow: var(--shadow-soft);
    margin-left: 0.35rem;
  }
  .site-nav .links a.cta:hover { filter: brightness(1.08); }

  /* --- Buttons --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.85rem 1.9rem;
    border-radius: var(--r-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
    touch-action: manipulation;
  }
  .btn:active { transform: scale(0.97); }
  .btn-primary {
    color: white;
    background: linear-gradient(135deg, var(--brand-hi), var(--brand) 55%, color-mix(in oklch, var(--brand) 80%, var(--brand-3)));
    box-shadow: 0 10px 28px color-mix(in oklch, var(--brand) 35%, transparent);
  }
  .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 14px 36px color-mix(in oklch, var(--brand) 45%, transparent); }
  .btn-ghost {
    color: var(--ink);
    background: var(--glass-deep);
    border: 1px solid var(--border);
  }
  .btn-ghost:hover { background: var(--tint); }
  .btn-big { font-size: 1.15rem; padding: 1rem 2.4rem; }

  /* --- Glass panel --- */
  .glass {
    background: var(--glass);
    backdrop-filter: blur(var(--blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .glass, .site-nav { background: var(--glass-deep); }
  }

  /* --- Tool cards (home grid) --- */
  .tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
  }
  .tool-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.4rem 1.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }
  .tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
  .tool-card .glyph {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    border-radius: var(--r-sm);
    background: color-mix(in oklch, var(--tool-hue, var(--brand)) 18%, transparent);
    margin-bottom: 0.3rem;
  }
  .tool-card h3 { font-size: var(--fs-h3); font-weight: 800; }
  .tool-card p { color: var(--ink-muted); font-size: 0.95rem; }
  .tool-card::after {
    content: "→";
    position: absolute;
    right: 1.3rem;
    top: 1.3rem;
    font-weight: 800;
    color: var(--tool-hue, var(--brand));
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.2s, transform 0.2s;
  }
  .tool-card:hover::after { opacity: 1; transform: none; }

  /* --- Sections & headers --- */
  .section { padding-block: clamp(3rem, 8vw, 5.5rem); }
  .section-head { max-width: 44rem; margin-bottom: 2.2rem; }
  .section-head h2 { font-size: var(--fs-h2); margin-bottom: 0.6rem; }
  .section-head p { color: var(--ink-muted); font-size: var(--fs-lg); }
  .kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 0.8rem;
  }

  /* --- Breadcrumb --- */
  .crumbs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin-bottom: 1rem;
  }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { color: var(--brand); }

  /* --- Tool stage (shared widget shell) --- */
  .tool-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    contain: layout paint;
  }
  .result {
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
  }
  .result .win {
    animation: pop-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  @keyframes pop-in {
    from { opacity: 0; scale: 0.6; }
    to { opacity: 1; scale: 1; }
  }
  .entries {
    width: 100%;
    max-width: 26rem;
    min-height: 8.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    resize: vertical;
    line-height: 1.5;
  }
  .entries:focus-visible { outline-offset: 0; }
  .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
    justify-content: center;
  }
  .field-row label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
  .field-row input[type="number"] {
    width: 6.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    font-variant-numeric: tabular-nums;
  }
  .hint { font-size: 0.85rem; color: var(--ink-muted); text-align: center; }

  /* --- Confetti (spawned by tools.js on wins) --- */
  .confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .confetti i {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 0.55rem;
    height: 0.85rem;
    border-radius: 2px;
    opacity: 0;
    animation: confetti-fall 1.1s ease-out forwards;
    animation-delay: var(--d, 0s);
    background: var(--c, var(--brand));
    rotate: var(--rz, 0deg);
  }
  @keyframes confetti-fall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0turn) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx, 0), var(--ty, -220px)) rotate(1.6turn) scale(0.7); }
  }

  /* --- FAQ --- */
  .faq details {
    border-bottom: 1px solid var(--border);
    padding-block: 0.4rem;
  }
  .faq summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.8rem 2rem 0.8rem 0;
    list-style: none;
    position: relative;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+";
    position: absolute;
    right: 0.2rem;
    top: 50%;
    translate: 0 -50%;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brand);
    transition: rotate 0.25s ease;
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details > div { padding: 0 0 1.1rem; color: var(--ink-muted); }

  /* --- Prose (long-form article content) --- */
  .prose { max-width: 46rem; }
  .prose h2 { font-size: var(--fs-h2); margin: 2.6rem 0 0.9rem; }
  .prose h3 { font-size: var(--fs-h3); margin: 1.9rem 0 0.6rem; }
  .prose p, .prose li { color: var(--ink-muted); margin-bottom: 0.9rem; font-size: 1.02rem; }
  .prose li { margin-bottom: 0.45rem; }
  .prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1rem; }
  .prose strong { color: var(--ink); }
  .prose a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

  /* --- Social proof / stars --- */
  .proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem 2rem;
    align-items: center;
  }
  .proof .item { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
  .proof .item small { display: block; font-weight: 500; color: var(--ink-muted); }
  .stars {
    --pct: 92%;
    display: inline-block;
    font-size: 1.15rem;
    letter-spacing: 2px;
    line-height: 1;
    background: linear-gradient(90deg, oklch(0.8 0.16 85) var(--pct), light-dark(oklch(0.85 0.01 250), oklch(0.4 0.01 250)) var(--pct));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* --- Real device shot (transparent-bezel PNG/WebP) --- */
  .device-shot {
    width: min(320px, 78vw);
    height: auto;
    filter: drop-shadow(0 34px 60px light-dark(oklch(0.4 0.08 255 / 0.45), oklch(0 0 0 / 0.65)));
  }

  /* --- Pure-CSS iPhone frame --- */
  .iphone {
    width: min(300px, 78vw);
    aspect-ratio: 1284 / 2778;
    box-sizing: content-box;
    padding: 11px;
    border-radius: 54px;
    background: linear-gradient(145deg, #3c3f46, #101116 55%, #2b2e36);
    box-shadow:
      0 40px 90px -25px light-dark(oklch(0.4 0.08 255 / 0.5), oklch(0 0 0 / 0.7)),
      inset 0 0 0 2px #ffffff26,
      inset 0 0 0 5px #000;
    position: relative;
  }
  .iphone .screen {
    position: relative;
    height: 100%;
    border-radius: 43px;
    overflow: hidden;
    background: #000;
  }
  .iphone .screen img { width: 100%; height: 100%; object-fit: cover; }
  .iphone .screen::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    translate: -50% 0;
    width: 33%;
    height: 24px;
    border-radius: 14px;
    background: #000;
    z-index: 2;
    box-shadow: inset 0 0 0 1px #ffffff14;
  }
  .iphone .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 60% at 30% -10%, #ffffff14, transparent 45%);
    pointer-events: none;
  }

  /* --- Screenshot carousel --- */
  .carousel {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 1.2rem var(--pad) 1.6rem;
    scrollbar-width: none;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { scroll-snap-align: center; flex: 0 0 auto; }
  .carousel .shot {
    width: min(240px, 62vw);
    aspect-ratio: 1284 / 2778;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease;
  }
  .carousel .shot:hover { transform: translateY(-6px); }
  .carousel .shot.wide { aspect-ratio: 2752 / 2064; width: min(420px, 84vw); }
  .carousel .shot img { width: 100%; height: 100%; object-fit: cover; }

  /* --- App Store badge --- */
  .store-badge { display: inline-block; }
  .store-badge img { height: 54px; width: auto; }

  /* --- App promo band --- */
  .app-band {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding: clamp(1.8rem, 5vw, 3.5rem);
    overflow: hidden;
  }
  @media (min-width: 760px) {
    .app-band { grid-template-columns: 1.2fr 0.8fr; }
  }
  .app-band .phone-wrap { display: flex; justify-content: center; }

  /* --- Footer --- */
  .site-footer {
    margin-top: clamp(3rem, 8vw, 6rem);
    border-top: 1px solid var(--border);
    background: var(--glass);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
  }
  .site-footer .inner {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 2.8rem var(--pad) 2.2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .site-footer h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: 0.8rem;
  }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
  .site-footer a { text-decoration: none; color: var(--ink-muted); font-size: 0.95rem; }
  .site-footer a:hover { color: var(--brand); }
  .site-footer .legal {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 0 var(--pad) 2rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
  }

  /* --- Decorative spinning wheel art (hero) --- */
  .wheel-art {
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    background: conic-gradient(
      var(--slice-1) 0 45deg,
      var(--slice-2) 45deg 90deg,
      var(--slice-3) 90deg 135deg,
      var(--slice-4) 135deg 180deg,
      var(--slice-5) 180deg 225deg,
      var(--slice-6) 225deg 270deg,
      var(--slice-7) 270deg 315deg,
      var(--slice-8) 315deg 360deg
    );
    box-shadow:
      inset 0 0 0 10px light-dark(#ffffff, #ffffff1f),
      inset 0 0 40px oklch(0 0 0 / 0.12),
      var(--shadow-lift);
  }
  .wheel-art::after {
    content: "";
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: light-dark(#fff, oklch(0.25 0.02 260));
    box-shadow: 0 4px 18px oklch(0 0 0 / 0.25);
  }
  @media (prefers-reduced-motion: no-preference) {
    .wheel-art.spin { animation: idle-spin 36s linear infinite; }
    @keyframes idle-spin { to { rotate: 1turn; } }
  }
}

/* ---------- Utilities ---------- */

@layer utilities {
  .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
  .center { text-align: center; }
  .stack-s > * + * { margin-top: 0.75rem; }
  .stack > * + * { margin-top: 1.5rem; }
  .muted { color: var(--ink-muted); }
  .display { font-family: var(--font-display); font-weight: 620; letter-spacing: -0.01em; }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}