/*
 * Waitlist V4 — "Antichità". Marble, papyrus and lapis-night, with gold leaf.
 * Everything is scoped under .wl4 so nothing leaks into the app's design system.
 * Sections pick a tone (marble / papyrus / night) and every component reads the
 * tone's variables, so the same card works on light and dark stone.
 */

.wl4 {
  --night: #080d1f;
  --night-2: #101a3b;
  --lapis: #1b2f66;
  --gold: #c9a24b;
  --gold-hi: #f1d98f;
  --gold-lo: #8b6b26;
  --marble: #f7f2e8;
  --papyrus: #eadcb6;
  --terracotta: #b4502e;

  font-family: var(--font-geist-sans), system-ui, sans-serif;
  color: var(--fg);
  background: var(--marble);
  -webkit-font-smoothing: antialiased;
}

.wl4 *:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- Type ---------- */
.wl4-display { font-family: var(--font-cinzel), "Trajan Pro", Georgia, serif; }
.wl4-serif { font-family: var(--font-cormorant), Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; }

/* ---------- Tones: variables only ---------- */
.wl4-tone-marble {
  --fg: #2b251c;
  --strong: #15110b;
  --muted: #62584a;
  --surface: #fffdf8;
  --surface-2: #f2ead8;
  --line: rgba(139, 107, 38, 0.42);
  --line-soft: rgba(139, 107, 38, 0.2);
  --accent: #755616;
  --ok: #3f6b3a;
}
.wl4-tone-papyrus {
  --fg: #2b2416;
  --strong: #150f05;
  --muted: #5c5038;
  --surface: #f6ecd0;
  --surface-2: #e6d5a8;
  --line: rgba(117, 86, 22, 0.5);
  --line-soft: rgba(117, 86, 22, 0.25);
  --accent: #6e4f12;
  --ok: #3f6b3a;
}
.wl4-tone-night {
  --fg: #e6e0cf;
  --strong: #fbf6e6;
  --muted: #a9b0c9;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line: rgba(201, 162, 75, 0.5);
  --line-soft: rgba(201, 162, 75, 0.22);
  --accent: #e6c877;
  --ok: #9fd39a;
}

/* ---------- Tone helpers ---------- */
.wl4-fg { color: var(--fg); }
.wl4-strong { color: var(--strong); }
.wl4-muted { color: var(--muted); }
.wl4-accent { color: var(--accent); }
.wl4-ok { color: var(--ok); }
.wl4-surface { background: var(--surface); }
.wl4-surface-2 { background: var(--surface-2); }
.wl4-line { border-color: var(--line); }
.wl4-line-soft { border-color: var(--line-soft); }
.wl4-rule { background: var(--line); }

/* ---------- Backgrounds ---------- */
.wl4-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background-image: url("/assets/wl4-grain.png");
  background-size: 128px 128px;
}
.wl4-bg-marble {
  background-color: var(--marble);
  background-image:
    radial-gradient(1100px 520px at 12% -5%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(900px 500px at 95% 105%, rgba(201, 162, 75, 0.1), transparent 70%);
}
.wl4-bg-papyrus {
  background-color: var(--papyrus);
  background-image:
    radial-gradient(900px 480px at 85% 0%, rgba(255, 246, 214, 0.75), transparent 70%),
    radial-gradient(900px 500px at 5% 100%, rgba(139, 107, 38, 0.16), transparent 70%);
}
.wl4-bg-night {
  background-color: var(--night);
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(45, 72, 150, 0.55), transparent 70%),
    radial-gradient(800px 500px at 90% 110%, rgba(201, 162, 75, 0.12), transparent 70%);
}

/* ---------- Hero sky ---------- */
.wl4-sky {
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(241, 190, 96, 0.55) 0%, rgba(201, 110, 60, 0.28) 38%, transparent 72%),
    linear-gradient(180deg, #060a1a 0%, #0d1638 46%, #1e2b63 74%, #6a4a4d 100%);
}
.wl4-stars {
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #fff, transparent),
    radial-gradient(1px 1px at 17% 32%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 26% 9%, #f8e9b8, transparent),
    radial-gradient(1px 1px at 34% 24%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 43% 12%, #fff, transparent),
    radial-gradient(1px 1px at 52% 30%, #f8e9b8, transparent),
    radial-gradient(1.4px 1.4px at 61% 8%, #fff, transparent),
    radial-gradient(1px 1px at 69% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 77% 13%, #f8e9b8, transparent),
    radial-gradient(1px 1px at 85% 34%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 92% 10%, #fff, transparent),
    radial-gradient(1px 1px at 13% 46%, #fff, transparent),
    radial-gradient(1px 1px at 88% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 5% 60%, #f8e9b8, transparent),
    radial-gradient(1px 1px at 96% 66%, #fff, transparent);
  animation: wl4-twinkle 6s ease-in-out infinite;
}
.wl4-rays {
  background: repeating-conic-gradient(from 0deg, rgba(246, 224, 150, 0.3) 0 1.6deg, transparent 1.6deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  animation: wl4-spin 240s linear infinite;
  will-change: transform;
}
.wl4-sun {
  background: radial-gradient(circle at 50% 50%, #fff6d2 0%, #f6dd8f 32%, #e0a94a 62%, rgba(224, 169, 74, 0) 72%);
  animation: wl4-rise 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes wl4-spin { to { transform: rotate(360deg); } }
@keyframes wl4-twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.45; } }
@keyframes wl4-rise { from { transform: translateY(70px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wl4-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- Gold ---------- */
.wl4-foil {
  background: linear-gradient(100deg, #b58f38 0%, #f8e7a8 30%, #cfa64b 52%, #f5df97 74%, #a67f2c 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wl4-shimmer 9s linear infinite;
}
.wl4-btn {
  font-family: var(--font-cinzel), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b1408;
  background: linear-gradient(180deg, #f6e2a0 0%, #d0a74d 55%, #ab8631 100%);
  border: 1px solid #7d5f1e;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 26px -10px rgba(201, 162, 75, 0.75);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.wl4-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.wl4-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.wl4-btn-ghost {
  font-family: var(--font-cinzel), Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  transition: background 0.2s ease;
}
.wl4-btn-ghost:hover { background: var(--surface-2); }

/* ---------- Stone card: a stele with an inner engraved frame ---------- */
.wl4-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 5px var(--surface),
    inset 0 0 0 6px var(--line-soft),
    0 24px 44px -28px rgba(20, 14, 4, 0.45);
}
.wl4-card-hi {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 5px var(--surface),
    inset 0 0 0 6px var(--line),
    0 0 0 1px var(--line-soft),
    0 30px 60px -30px rgba(201, 162, 75, 0.45);
}

/* ---------- Greek key ---------- */
.wl4-meander {
  height: 16px;
  background-repeat: repeat-x;
  background-size: auto 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 15H24M4 15V1.5H19.5V10.5H9V6H14.5' fill='none' stroke='%23c9a24b' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E");
  opacity: 0.75;
}
.wl4-meander-dark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath d='M0 15H24M4 15V1.5H19.5V10.5H9V6H14.5' fill='none' stroke='%238b6b26' stroke-width='1.6' stroke-linejoin='miter'/%3E%3C/svg%3E");
  opacity: 0.6;
}

/* ---------- Details / FAQ ---------- */
.wl4 details > summary { list-style: none; }
.wl4 details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wl4-stars, .wl4-rays, .wl4-sun, .wl4-foil { animation: none; }
}