/* ==========================================================================
   Fountain of Fortune — design system
   Vintage storybook / poster illustration aesthetic.
   Mobile-first: base styles target small screens, min-width queries scale up.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — sampled from the fountain illustration */
  --green-deep: #0c2620;
  --green-mid: #123a2f;
  --green-vignette: #06140f;
  --gold: #cda45e;
  --gold-bright: #e8c988;
  --gold-pale: #f6e3b4;
  --gold-dim: #8a6f3d;
  --ochre: #b8863c;
  --teal: #2f7a6c;
  --teal-deep: #164a40;
  --coral: #c1432f;
  --cream: #f1e6cf;
  --cream-dim: rgba(241, 230, 207, 0.75);
  --ivory: #f4eedd;

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

  --ease-slow: cubic-bezier(0.22, 0.61, 0.24, 1);
  --dur-slow: 900ms;
  --dur-slower: 1600ms;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--green-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

@media (min-width: 640px) {
  body { font-size: 18px; }
}

/* subtle vintage paper grain, layered over everything */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* soft vignette darkening the edges */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(4, 12, 9, 0.55) 100%);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--gold); }

/* ==========================================================================
   Full-screen scenes — the fountain illustration is the living backdrop of
   every screen. Layer order inside a scene:
     .parallax-scene (0) → scrim ::before (1) → .fx-canvas particles (2) → content (3+)
   ========================================================================== */

.screen,
.coin-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw 8vh;
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, var(--green-mid) 0%, var(--green-deep) 60%, var(--green-vignette) 100%);
  overflow: hidden;
}

.screen > * {
  position: relative;
  z-index: 3;
}

/* The scene is a stack of hand-separated illustration plates (sky, buildings,
   palms, ground, fountain, lamps, flowers), each drifting at its own depth —
   a real parallax diorama rather than one flat image. Transforms are driven
   by ambient.js; without JS the stack still composes the full scene. */
.parallax-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.layer {
  position: absolute;
  inset: -32px; /* bleed so parallax drift never reveals an edge */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 38%;
  will-change: transform;
}

.layer--sky       { background-image: url('../images/layers/sky.webp'); }
.layer--buildings { background-image: url('../images/layers/buildings.webp'); }
.layer--palms     { background-image: url('../images/layers/palms.webp'); }
.layer--ground    { background-image: url('../images/layers/ground.webp'); }
.layer--fountain  { background-image: url('../images/layers/fountain.webp'); }
.layer--lamps     { background-image: url('../images/layers/lamps.webp'); }
.layer--flowers   { background-image: url('../images/layers/flowers.webp'); }

/* the lamplight breathes, almost imperceptibly */
@media (prefers-reduced-motion: no-preference) {
  .layer--lamps {
    animation: lampBreath 7s ease-in-out infinite;
  }
}

@keyframes lampBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.9; }
}

/* coin screen: frame the basin, where the coin will land */
.parallax-scene--basin .layer {
  background-position: center 78%;
}

.screen::before,
.coin-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 20, 15, 0.74) 0%, rgba(6, 20, 15, 0.42) 45%, rgba(6, 20, 15, 0.78) 100%);
}

/* particle layer (stars, fireflies, water glints) injected by ambient.js */
.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- typography ---- */

/* wordmark: thin serif capitals, widely tracked, ivory */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* optically recenter tracked-out caps */
  text-transform: uppercase;
  color: var(--ivory);
  margin: 0 0 0.6em;
  text-shadow: 0 1px 6px rgba(4, 12, 9, 0.7);
}

/* thin gold rules flanking the eyebrow, like an engraved frontispiece */
.eyebrow::before,
.eyebrow::after {
  content: '';
  height: 1px;
  width: clamp(1.4em, 8vw, 3em);
  flex: none;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}

.eyebrow::after {
  background: linear-gradient(270deg, transparent, var(--gold-dim));
}

/* headline: large display serif, regular weight, upright, ivory —
   high contrast against the night scene */
.title {
  font-size: clamp(2.5rem, 10vw, 3.8rem);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 0.35em;
  color: var(--ivory);
  text-shadow: 0 2px 10px rgba(4, 12, 9, 0.8), 0 0 40px rgba(4, 12, 9, 0.5);
}

/* subheadline: same serif family, upright regular — must stay legible
   on a phone in daylight, so near-full opacity and a firm shadow */
.intro {
  max-width: 26em;
  font-family: var(--font-display);
  color: var(--ivory);
  font-style: normal;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.65;
  margin: 0 auto 1.8em;
  text-shadow: 0 1px 8px rgba(4, 12, 9, 0.85);
}

/* ---- the landing coin — a floating brass emblem above the title ---- */

.coin-hero {
  width: clamp(140px, 38vw, 200px);
  aspect-ratio: 1;
  margin: 0.2em auto 1.4em;
  perspective: 800px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 30px rgba(205, 164, 94, 0.3));
}

.coin-hero-inner {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px rgba(232, 201, 136, 0.55),
    inset 0 0 26px rgba(0, 0, 0, 0.4);
  transition: transform 500ms var(--ease-slow);
}

/* the coin art's circle doesn't fill its square canvas — oversize the image
   inside the circular mask so only the clean coin face shows */
.coin-hero-inner img {
  position: absolute;
  width: 136%;
  height: 136%;
  left: -18%;
  top: -18%;
}

@media (prefers-reduced-motion: no-preference) {
  .coin-hero {
    animation: coinFloat 7s ease-in-out infinite;
  }
}

@keyframes coinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---- primary button — gold oval, ivory sans text, breathing glow ---- */
.btn-primary {
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ivory);
  /* deeper gold so the ivory label keeps contrast */
  background: linear-gradient(180deg, #c89f52 0%, #a87c33 55%, #8a6528 100%);
  border: 1px solid rgba(255, 235, 190, 0.55);
  border-radius: 999px;
  padding: 0.9em 2.5em;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(60, 40, 8, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 4px 18px rgba(205, 164, 94, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--dur-slow) var(--ease-slow),
              filter var(--dur-slow) var(--ease-slow);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-primary:not(:disabled) {
    animation: btnGlow 5s ease-in-out infinite;
  }

  /* a faded-in button needs both animations — the shorthand above would
     otherwise cancel the entrance fade and leave it stuck at opacity 0 */
  .btn-primary.fade-in-delay:not(:disabled) {
    animation:
      fadeIn var(--dur-slower) var(--ease-slow) 400ms forwards,
      btnGlow 5s ease-in-out 2.4s infinite;
  }
}

@keyframes btnGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 4px 18px rgba(205, 164, 94, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.25),
      0 6px 30px rgba(205, 164, 94, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

.btn-ghost {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--cream-dim);
  background: transparent;
  border: 1px solid rgba(241, 230, 207, 0.25);
  border-radius: 999px;
  padding: 0.6em 1.6em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color var(--dur-slow) var(--ease-slow), color var(--dur-slow) var(--ease-slow);
}

.btn-ghost:hover {
  border-color: var(--gold-dim);
  color: var(--cream);
}

/* TEMPORARY — the free-preview link on the landing page; remove this rule
   along with the link once Stripe is live and verified */
.test-free-link {
  margin-top: 1em;
  font-size: 0.85rem;
}

/* ---- fade transitions ---- */
.fade-in {
  opacity: 0;
  animation: fadeIn var(--dur-slower) var(--ease-slow) forwards;
}

.fade-in-delay {
  opacity: 0;
  animation: fadeIn var(--dur-slower) var(--ease-slow) forwards;
  animation-delay: 400ms;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-out {
  animation: fadeOut var(--dur-slow) var(--ease-slow) forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ---- coin screen ---- */
.coin-screen {
  padding: 0;
  touch-action: none;
}

.coin-canvas-wrap,
.splash-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.coin-canvas-wrap {
  z-index: 3;
  cursor: grab;
}

.coin-canvas-wrap.dragging {
  cursor: grabbing;
}

.coin-canvas-wrap canvas,
.splash-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.splash-canvas-wrap {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-slow);
}

.splash-canvas-wrap.visible {
  opacity: 1;
}

.coin-hint {
  position: absolute;
  bottom: 7vh;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(244, 238, 221, 0.85);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 0 8vw;
  z-index: 5;
  text-shadow: 0 1px 6px rgba(4, 12, 9, 0.8);
  transition: opacity var(--dur-slow) var(--ease-slow);
}

.closing-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 8vw;
  z-index: 6;
  pointer-events: none;
}

.closing-line span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 600;
  color: var(--gold-bright);
  opacity: 0;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 10px rgba(4, 12, 9, 0.7), 0 0 30px rgba(232, 201, 136, 0.25);
}

/* the sentence settles into place: fades in while its tracking tightens */
.closing-line span.visible {
  animation: closingIn 2800ms var(--ease-slow) forwards;
}

@keyframes closingIn {
  from { opacity: 0; letter-spacing: 0.14em; filter: blur(3px); }
  to { opacity: 1; letter-spacing: 0.03em; filter: blur(0); }
}

/* ---- small print / footer ---- */
.fine-print {
  margin-top: 2.2em;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(244, 238, 221, 0.62);
  max-width: 32em;
  text-shadow: 0 1px 4px rgba(4, 12, 9, 0.7);
}

/* the quietest line, pinned to the very bottom of the screen */
.ritual-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(244, 238, 221, 0.38);
  text-shadow: 0 1px 4px rgba(4, 12, 9, 0.7);
  padding: 0 8vw;
}

.error-box {
  border: 1px solid rgba(193, 67, 47, 0.5);
  background: rgba(193, 67, 47, 0.12);
  color: var(--cream);
  border-radius: 6px;
  padding: 1em 1.4em;
  max-width: 30em;
  margin: 1.5em auto 0;
  font-size: 0.95rem;
}