/* ============================================================
   SZNS landing — bespoke layer on top of Tailwind utilities.
   Only things utilities can't cleanly express live here.
   ============================================================ */

:root {
  --ink: #100f14;
  --canvas: #15131a;
  --bone: #f4f1ec;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient studio light — a slow chromatic drift behind the page,
   the colors of the four families bleeding into the dark drape. */
.studio-glow {
  background:
    radial-gradient(60% 50% at 18% 8%,  rgba(255, 127, 92, 0.22), transparent 70%),
    radial-gradient(55% 45% at 86% 14%, rgba(159, 179, 154, 0.20), transparent 70%),
    radial-gradient(60% 55% at 78% 88%, rgba(42, 63, 184, 0.20),  transparent 72%),
    radial-gradient(50% 45% at 12% 92%, rgba(199, 91, 122, 0.18), transparent 72%);
  animation: glowdrift 26s ease-in-out infinite alternate;
}
@keyframes glowdrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); opacity: 0.9; }
  100% { transform: translate3d(2%, 2%, 0) scale(1.12);  opacity: 1; }
}

/* Fine film grain so the dark fields read like fabric, not flat #000. */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradient ink for the one word that should glow — peach → green,
   pulled straight from the app icon. */
.glow-text {
  background: linear-gradient(100deg, #ffb98e 0%, #ff7f5c 34%, #f0b24a 60%, #9fb39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- The spectrum band (desktop signature) ----------------- */
.spectrum-col {
  flex: 1 1 0%;
  transition: flex-grow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.spectrum-col:hover { flex-grow: 4; }
/* Dim the neighbours so the hovered season takes the light. */
.spectrum-band:hover .spectrum-col:not(:hover) { filter: brightness(0.62) saturate(0.85); }
.spectrum-col .col-label { writing-mode: vertical-rl; }
.spectrum-col .col-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease 120ms, transform 420ms ease 120ms;
}
.spectrum-col:hover .col-reveal { opacity: 1; transform: translateY(0); }
.spectrum-col:hover .col-label  { opacity: 0; }

/* ---- Scroll reveals ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Floating swatch chips around the hero portrait. */
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--r, 0deg)); }
}
.floaty { animation: floaty 6s ease-in-out infinite; }

/* Marquee of season names under the hero. */
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}

/* Respect users who'd rather not have motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-glow, .floaty, .marquee-track { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .spectrum-col { transition: none; }
}