/* Three of Wands Atelier — coming soon
   Palette drawn from the logo asset file:
   near-black surface, cream ink, wine accent. */

:root {
  --bg: oklch(0.195 0.014 350);          /* just-off-black, warm wine cast (#1a1418) */
  --ink: oklch(0.915 0.032 85);          /* cream (#efe5d1) */
  --ink-muted: oklch(0.78 0.028 85);     /* dimmed cream, still AA on --bg */
  --wine: oklch(0.51 0.155 356);         /* logo wine (#a62e59) */
  --wine-bright: oklch(0.67 0.14 356);   /* lifted wine for hover on dark */
  --focus: oklch(0.8 0.1 356);
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Literata", "Sitka Text", Georgia, serif;
  font-optical-sizing: auto;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* let a finger drag stir the water instead of rubber-band scrolling;
     pinch-zoom stays available */
  touch-action: pinch-zoom;
  overscroll-behavior: none;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scene {
  position: relative;
  min-height: 100dvh;
}

/* ---- water canvas ---- */

#water {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* cross-fades over the still logo while the opening splash plays */
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-live #water { opacity: 1; }

/* Still fallback: same composition as the simulation's logo texture.
   The opaque canvas fades in over it, so it doubles as the first frame
   of the entrance; it stays for no-JS, no-WebGL and reduced motion. */
.still {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
}

.still img {
  width: min(72vw, 680px);
  height: auto;
  transform: translateY(-9dvh);
  opacity: 0.92;
  filter: blur(0.6px);   /* a hint of "beneath the surface" even when still */
}


/* ---- copy ---- */

.content {
  position: fixed;
  inset-inline: 0;
  bottom: clamp(2.5rem, 9dvh, 6.5rem);
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  text-align: center;
  padding: 0 1.5rem;
}

.tagline {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 400;
  text-wrap: balance;
}

.soon {
  margin: 0.15rem 0 0;
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--ink-muted);
}

.follow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.9rem;
  padding: 0.65rem 1.15rem;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid color-mix(in oklch, var(--wine) 55%, transparent);
  border-radius: 999px;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.follow .ig { color: var(--wine-bright); transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.follow .handle { font-style: italic; }

.follow:hover,
.follow:focus-visible {
  border-color: var(--wine-bright);
  background: color-mix(in oklch, var(--wine) 18%, transparent);
}

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

/* ---- entrance ---- */

.content { animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 500ms backwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
  .follow { transition: none; }
  .still img { filter: none; }
  #water { transition: none; }
}