/* MaestroSuite Flow — palette drift, waterfall wordmark, dome backdrop,
   rising starfield. Token animation lives in flow.js. */

/* 5. Flow — draft-switcher.js drifts the tokens through all four palettes;
   these animations carry the baked-color art (wordmark PNG, hero canvas,
   divider SVG) along by cycling their hue on the same 40s period. */

/* constrained hue swing: base spectrum is cyan->violet, so -40..+50deg keeps
   the wave inside teal->lavender->violet->magenta — no green, no red */
@keyframes draft-hue {
  from { filter: hue-rotate(-40deg); }
  to   { filter: hue-rotate(50deg); }
}

/* Wordmark: in every non-current palette the PNG is swapped for the live
   vector (wordmark-dynamic.svg, from MS_wordmark_vector.svg). Its M/clef
   gradient reads --dw-0/1/2 — set per palette above, animated by the flow
   tick — and the letters read --ms-white/--ms-muted, so all palettes get a
   genuinely recolored wordmark. Glow/float carry over from .hero-wordmark. */
.hero-wordmark--svg {
  display: block;
  height: auto;
}

:root[data-palette="flow"] #wave-canvas,
:root[data-palette="flow"] .wave-divider img {
  animation: draft-hue 26s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-palette="flow"] #wave-canvas,
  :root[data-palette="flow"] .wave-divider img { animation: none; }
}

/* ---------- Dome backdrop (draft) — Al Wasl lattice overhead + shimmers ---------- */

.draft-dome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/dome-lattice.svg") top center / cover no-repeat;
  /* Base lattice dimness is baked into the SVG so the stars keep full luminance.
     This is the fade knob on top of that: 0.22 = fainter still; the lattice reads as texture, not pattern.
     Applies to the shimmer too (.draft-reflect is a child), so the lines and
     the colour riding along them stay in proportion. */
  opacity: 0.22;
  /* parent mask (radial fade) also clips ::after, so the roll stays inside the dome zone */
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, black 35%, transparent 80%);
  mask-image: radial-gradient(130% 95% at 50% 0%, black 35%, transparent 80%);
}

/* reflection: the waveform's colors glide along the trellis lines.
   Masked wrapper is static; only the inner strip translates (GPU-composited). */
.draft-reflect {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url("assets/dome-lattice.svg");
  mask-image: url("assets/dome-lattice.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: top center;
  mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
}

.draft-reflect-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  background: linear-gradient(105deg,
    var(--wave-0, #02d9ff), var(--wave-1, #1558ff), var(--wave-2, #7219ff),
    var(--wave-3, #ff24c8), var(--wave-4, #ff9d00), var(--wave-2, #7219ff),
    var(--wave-0, #02d9ff));
  animation: dome-reflect-slide 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes dome-reflect-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-66.6%); }
}

:root[data-palette="flow"] .draft-reflect {
  animation: draft-hue 26s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .draft-reflect-strip, :root[data-palette="flow"] .draft-reflect { animation: none; }
}

.draft-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.draft-shimmer {
  position: absolute;
  top: 100%;
  border-radius: 50%;
  background: rgb(var(--ms-cyan-rgb));
  box-shadow: 0 0 8px 2px rgba(var(--ms-cyan-rgb), 0.4);
  opacity: 0;
  animation:
    draft-rise var(--dr-dur, 20s) linear var(--dr-delay, 0s) infinite,
    draft-star-glow var(--dr-dur, 20s) linear var(--dr-delay, 0s) infinite;
  will-change: transform, opacity;
}

/* climb the full hero and exit the top; respawn below the fold */
@keyframes draft-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100svh - 30px)); }
}

/* quick fade-in at the bottom, gentle breathing on the way up */
@keyframes draft-star-glow {
  0%   { opacity: 0; }
  5%   { opacity: 0.8; }
  30%  { opacity: 0.35; }
  55%  { opacity: 0.75; }
  80%  { opacity: 0.4; }
  100% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .draft-stars { display: none; }
}


/* ---------- Wordmark waterfall (CSS-transform, iOS-safe) ----------
   M/clef in the SVG are a mono luminance ramp under the bevel (3D form).
   This overlay carries the rolling waterfall colors, masked to the M+clef
   silhouettes, recoloring the form via mix-blend-mode:color. CSS transform
   is GPU-composited and animates on every engine (SMIL gradientTransform
   does not on WebKit/iOS). */
.hero-wordmark-wrap {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(600px, 86vw);
  margin: 0 auto 18px;
  animation: wordmark-float 7s ease-in-out infinite;
}

.hero-wordmark-wrap .hero-wordmark--svg {
  width: 100%;
  margin: 0;
  animation: none;
}

.wordmark-flow {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* glyph boxes as fractions of the wordmark viewBox (941 624 2033 573) */
.wordmark-flow.flow-m {
  left: 1.82%;
  top: 6.63%;
  width: 20.32%;
  height: 87.09%;
  -webkit-mask-image: url("assets/wordmark-m-mask.svg");
  mask-image: url("assets/wordmark-m-mask.svg");
}

.wordmark-flow.flow-c {
  left: 60.26%;
  top: 6.46%;
  width: 12.64%;
  height: 87.43%;
  -webkit-mask-image: url("assets/wordmark-c-mask.svg");
  mask-image: url("assets/wordmark-c-mask.svg");
}

.wordmark-flow-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: -900%;
  height: 1800%;
  background: linear-gradient(167deg, #ffb224 0.000%, #ff7a1f 2.000%, #ff3b7e 4.000%, #c322c8 6.000%, #f0559a 8.000%, #ffc24d 10.000%, #9440ff 12.000%, #7a3aff 14.000%, #3c22c8 16.000%, #4a55e8 18.000%, #9adcff 20.000%, #38b6ff 22.000%, #2f6bff 24.000%, #1c2fb8 26.000%, #c85fd0 28.000%, #ffd75e 30.000%, #ff9a26 32.000%, #ff6b1a 34.000%, #2440c8 36.000%, #b84ae8 38.000%, #ffc25e 40.000%, #a44dff 42.000%, #7a48ff 44.000%, #2c2fa8 46.000%, #c855d8 48.000%, #ffb224 50.000%, #ff7a1f 52.000%, #ff3b7e 54.000%, #c322c8 56.000%, #f0559a 58.000%, #ffc24d 60.000%, #9440ff 62.000%, #7a3aff 64.000%, #3c22c8 66.000%, #4a55e8 68.000%, #9adcff 70.000%, #38b6ff 72.000%, #2f6bff 74.000%, #1c2fb8 76.000%, #c85fd0 78.000%, #ffd75e 80.000%, #ff9a26 82.000%, #ff6b1a 84.000%, #2440c8 86.000%, #b84ae8 88.000%, #ffc25e 90.000%, #a44dff 92.000%, #7a48ff 94.000%, #2c2fa8 96.000%, #c855d8 98.000%, #ffb224 100.000%);
  animation: wordmark-flow-roll 135s linear infinite;
  will-change: transform;
}

@keyframes wordmark-flow-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wordmark-wrap { animation: none; }
  .wordmark-flow-strip { animation: none; }
}