/* Luck Potion Works landing page.
 *
 * Every colour comes from the theme tokens below. The four [data-theme]
 * blocks are candidate brand palettes; <html data-theme> picks the live one
 * and ?theme=<name> previews another (see brand/palettes.html).
 */

:root,
[data-theme='apothecary'] {
  /* Midnight Apothecary: indigo night, golden ambrosia. */
  color-scheme: dark;
  --bg: #120e26;
  --bg-glow: #2a1f5c;
  --ink: #f5ecd7;
  --muted: #b5a9c9;
  --accent: #f2b84b;
  --accent-ink: #1b1330;
  --potion-hi: #fff1b8;
  --potion-mid: #f6c046;
  --potion-lo: #d97b1e;
  --halo: rgb(242 184 75 / 0.3);
  --glass: #cdd9ff;
  --hand: #e9ddc4;
  --cuff: #f5ecd7;
  --spark: #fff6d6;
  --field: rgb(255 255 255 / 0.06);
  --field-border: rgb(245 236 215 / 0.28);
  --ok: #7be0a8;
  --err: #ff9b8a;
}

[data-theme='clover'] {
  /* Lucky Clover: deep forest, emerald potion, gold trim. */
  color-scheme: dark;
  --bg: #0b2019;
  --bg-glow: #17503a;
  --ink: #f3efd9;
  --muted: #a5bcab;
  --accent: #e8b93f;
  --accent-ink: #0b2019;
  --potion-hi: #d6ffd9;
  --potion-mid: #45cf80;
  --potion-lo: #17824f;
  --halo: rgb(69 207 128 / 0.28);
  --glass: #d9f5e4;
  --hand: #eadfc0;
  --cuff: #f3efd9;
  --spark: #ffe9a3;
  --field: rgb(255 255 255 / 0.06);
  --field-border: rgb(243 239 217 / 0.28);
  --ok: #8fe3a9;
  --err: #ffa48f;
}

[data-theme='parchment'] {
  /* Parchment Alchemist: storybook paper, amber potion, oxblood ink. */
  color-scheme: light;
  --bg: #f3e8d2;
  --bg-glow: #fff7e3;
  --ink: #2a1c12;
  --muted: #6b5644;
  --accent: #8e2f3a;
  --accent-ink: #fbf3e2;
  --potion-hi: #ffe08a;
  --potion-mid: #eba22c;
  --potion-lo: #b85c12;
  --halo: rgb(235 162 44 / 0.3);
  --glass: #4a3828;
  --hand: #2a1c12;
  --cuff: #8e2f3a;
  --spark: #c8861a;
  --field: rgb(255 255 255 / 0.6);
  --field-border: rgb(42 28 18 / 0.35);
  --ok: #2f6b4f;
  --err: #9b2c2c;
}

[data-theme='arcade'] {
  /* Arcade Elixir: plum black, neon cyan potion, hot pink. */
  color-scheme: dark;
  --bg: #150a22;
  --bg-glow: #3b1560;
  --ink: #fdf7ff;
  --muted: #c3a9d8;
  --accent: #ff4fa3;
  --accent-ink: #1a0b22;
  --potion-hi: #d4fcff;
  --potion-mid: #3de0ff;
  --potion-lo: #7a5cff;
  --halo: rgb(61 224 255 / 0.28);
  --glass: #f5d9ff;
  --hand: #ffe14d;
  --cuff: #fdf7ff;
  --spark: #ffe14d;
  --field: rgb(255 255 255 / 0.07);
  --field-border: rgb(253 247 255 / 0.3);
  --ok: #5cf2b0;
  --err: #ff8a7a;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem 1.5rem;
  color: var(--ink);
  background: radial-gradient(70rem 42rem at 50% -8rem, var(--bg-glow), transparent 70%) no-repeat;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

main {
  width: 100%;
  max-width: 35rem;
  margin: auto 0;
  text-align: center;
}

h1,
h2,
.eyebrow {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}

.eyebrow {
  margin: 0.75rem 0 0;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

h1 {
  margin: 0.4rem 0 0;
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  margin: 1.25rem auto 0;
  max-width: 31rem;
  color: var(--muted);
  font-size: 1.125rem;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------- form -- */

form {
  margin-top: 2.25rem;
}

form > label {
  display: block;
  font-weight: 600;
  text-wrap: balance;
}

.field {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.375rem;
  border: 1px solid var(--field-border);
  border-radius: 999px;
  background: var(--field);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--halo);
}

.field input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.4rem 0.6rem 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.field input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

button {
  flex: none;
  padding: 0.6rem 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

button:disabled {
  cursor: progress;
  filter: saturate(0.6) brightness(0.9);
}

@media (max-width: 26rem) {
  .field {
    flex-direction: column;
    border-radius: 1.4rem;
  }

  .field input {
    padding: 0.6rem 0.9rem;
    text-align: center;
  }
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.status {
  min-height: 1.6em;
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.status.is-error {
  color: var(--err);
}

.fineprint {
  margin: 0.25rem auto 0;
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.done {
  margin-top: 2.25rem;
}

.done h2 {
  margin: 0;
  color: var(--ok);
  font-size: 1.9rem;
  font-weight: 600;
  outline: 0;
}

.done p {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

[hidden] {
  display: none !important;
}

footer {
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* ------------------------------------------------------------- logo -- */

.logo {
  display: block;
  width: clamp(9.5rem, 42vw, 13rem);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.lp-halo-in {
  stop-color: var(--halo);
}

.lp-halo-out {
  stop-color: var(--halo);
  stop-opacity: 0;
}

.lp-potion-hi {
  stop-color: var(--potion-hi);
}

.lp-potion-mid {
  stop-color: var(--potion-mid);
}

.lp-potion-lo {
  stop-color: var(--potion-lo);
}

.lp-glass {
  fill: var(--glass);
  fill-opacity: 0.1;
}

.lp-outline {
  fill: none;
  stroke: var(--glass);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-rim {
  fill: var(--glass);
}

.lp-shine {
  fill: none;
  stroke: var(--glass);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
}

.lp-liquid-sheen {
  fill: var(--potion-hi);
  opacity: 0.85;
}

.lp-bubble {
  fill: var(--potion-hi);
  opacity: 0.7;
}

.lp-spark {
  fill: var(--spark);
  transform-box: fill-box;
  transform-origin: center;
}

.lp-spark-3 {
  scale: 0.6;
}

.lp-spark-4 {
  scale: 0.75;
}

.lp-palm,
.lp-thumb {
  fill: var(--hand);
}

.lp-thumb {
  stroke: var(--bg);
  stroke-width: 2.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

.lp-cuff {
  fill: var(--cuff);
  opacity: 0.55;
}

.lp-button {
  fill: var(--accent);
}

/* Pool of light the flask casts on the palm. */
.lp-shadow {
  fill: var(--potion-hi);
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-flask {
    animation: lp-hover 5s ease-in-out infinite;
  }

  .lp-shadow {
    animation: lp-shadow 5s ease-in-out infinite;
  }

  .lp-liquid {
    animation: lp-wave 3.2s linear infinite;
  }

  .lp-liquid-sheen {
    animation: lp-wave 4.6s linear infinite reverse;
  }

  .lp-bubble {
    animation: lp-rise 3s ease-in infinite;
  }

  .lp-bubble-2 {
    animation-duration: 3.8s;
    animation-delay: -1.3s;
  }

  .lp-bubble-3 {
    animation-duration: 2.6s;
    animation-delay: -0.7s;
  }

  .lp-spark {
    animation: lp-twinkle 2.8s ease-in-out infinite;
  }

  .lp-spark-2 {
    animation-delay: -0.9s;
  }

  .lp-spark-3 {
    animation-delay: -1.7s;
  }

  .lp-spark-4 {
    animation-delay: -2.3s;
  }

  .lp-halo {
    animation: lp-pulse 5s ease-in-out infinite;
  }
}

@keyframes lp-hover {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes lp-shadow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.34;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.18;
  }
}

/* The wave paths repeat every 60 units, so sliding by one period loops. */
@keyframes lp-wave {
  to {
    transform: translateX(-60px);
  }
}

@keyframes lp-rise {
  0% {
    transform: translateY(8px);
    opacity: 0;
  }
  25% {
    opacity: 0.75;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}

@keyframes lp-twinkle {
  0%,
  100% {
    opacity: 0.25;
    rotate: 0deg;
  }
  50% {
    opacity: 1;
    rotate: 45deg;
  }
}

@keyframes lp-pulse {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}