/* ============================================================
 * Motion layer — scroll reveals, the site-wide fluid aurora
 * background, and ambient continuous animations.
 * All motion here is GPU-cheap (transform/opacity/filter) and
 * is fully disabled under prefers-reduced-motion via base.css,
 * which freezes every animation to a static first frame.
 * ============================================================ */

/* ---------- Scroll reveal ------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity var(--t-entry) var(--ease-out-expo),
              transform var(--t-entry) var(--ease-out-expo),
              filter var(--t-entry) var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(5px);
  transition: opacity var(--t-entry) var(--ease-out-expo),
              transform var(--t-entry) var(--ease-out-expo),
              filter var(--t-entry) var(--ease-out-expo);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 600ms; }

/* ============================================================
 * Fluid aurora background
 * ------------------------------------------------------------
 * Two drifting, blurred gradient fields live behind everything.
 * Light (paper) sections are transparent, so the warm aurora on
 * `body` shows through them; the opaque `.bg-deep` sections paint
 * over it and carry their own darker aurora instead. The net
 * effect is slow, organic motion "all around" the content.
 * ============================================================ */

/* Warm aurora for the light/paper areas — painted on body, behind
   all in-flow content, revealed by every transparent section. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

body::before {
  background:
    radial-gradient(38% 42% at 20% 28%, color-mix(in oklab, var(--accent-soft) 38%, transparent) 0%, transparent 62%),
    radial-gradient(34% 38% at 82% 22%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(46% 50% at 65% 88%, color-mix(in oklab, var(--accent-soft) 30%, transparent) 0%, transparent 64%);
  opacity: 0.55;
  animation: aurora-drift-a 38s var(--ease-in-out) infinite alternate;
}

body::after {
  background:
    radial-gradient(40% 44% at 78% 70%, color-mix(in oklab, var(--accent-soft) 30%, transparent) 0%, transparent 62%),
    radial-gradient(36% 40% at 12% 78%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(50% 52% at 40% 8%, color-mix(in oklab, var(--accent-soft) 24%, transparent) 0%, transparent 66%);
  opacity: 0.4;
  animation: aurora-drift-b 52s var(--ease-in-out) infinite alternate;
}

/* Dark aurora inside the deep sections. `isolation: isolate`
   gives each section its own stacking context so the z-index:-1
   glow sits above the section's solid background but below all
   of its content — no markup changes needed. The hero is excluded:
   it already carries a full-bleed photo. */
.bg-deep:not(.hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bg-deep:not(.hero)::before,
.bg-deep:not(.hero)::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

.bg-deep:not(.hero)::before {
  background:
    radial-gradient(40% 46% at 28% 34%, color-mix(in oklab, var(--accent) 55%, transparent) 0%, transparent 72%),
    radial-gradient(44% 48% at 72% 70%, color-mix(in oklab, var(--accent-soft) 18%, transparent) 0%, transparent 74%);
  opacity: 0.45;
  animation: aurora-deep-a 44s var(--ease-in-out) infinite alternate;
}

.bg-deep:not(.hero)::after {
  background:
    radial-gradient(38% 42% at 70% 26%, color-mix(in oklab, var(--accent) 42%, transparent) 0%, transparent 70%),
    radial-gradient(48% 50% at 34% 80%, color-mix(in oklab, var(--accent-soft) 14%, transparent) 0%, transparent 74%);
  opacity: 0.35;
  animation: aurora-deep-b 60s var(--ease-in-out) infinite alternate;
}

/* Warm aurora for in-flow light/paper sections. The fixed aurora on
   `body` still drifts behind everything, but it's anchored to the
   viewport; these contained fields travel with their section as it
   scrolls, giving the light areas the same living motion the deep
   sections have. Tuned warmer and a touch stronger so it reads on
   paper. Applied via the `.bg-paper` marker class. */
.bg-paper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bg-paper::before,
.bg-paper::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

.bg-paper::before {
  background:
    radial-gradient(58% 64% at 30% 32%, color-mix(in oklab, var(--accent-soft) 24%, transparent) 0%, transparent 78%),
    radial-gradient(56% 62% at 76% 70%, color-mix(in oklab, var(--accent-soft) 16%, transparent) 0%, transparent 80%);
  opacity: 0.5;
  animation: aurora-paper-a 52s var(--ease-in-out) infinite alternate;
}

.bg-paper::after {
  background:
    radial-gradient(60% 64% at 72% 26%, color-mix(in oklab, var(--accent-soft) 18%, transparent) 0%, transparent 80%);
  opacity: 0.42;
  animation: aurora-paper-b 68s var(--ease-in-out) infinite alternate;
}

/* Edge feather. Each in-flow section clips its aurora with
   `overflow: hidden`, so without this the glow stops dead at the
   section's top/bottom — reading as a hard dividing line between
   neighbouring sections. The pseudo-elements are inset -30% (so the
   element box is 160% of the section), which puts the section's own
   edges at ~19% / ~81% in the element's coordinate space. This radial
   mask is solid through the centre and ramps to fully transparent
   right at those edges, so every section's aurora has faded to nothing
   by the time it meets its neighbour. Result: seamless hand-off, no
   visible seam. */
.bg-deep:not(.hero)::before,
.bg-deep:not(.hero)::after,
.bg-paper::before,
.bg-paper::after {
  -webkit-mask-image: radial-gradient(31% 31% at 50% 50%, #000 0%, #000 70%, transparent 100%);
          mask-image: radial-gradient(31% 31% at 50% 50%, #000 0%, #000 70%, transparent 100%);
}

@keyframes aurora-drift-a {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0)   scale(1.18) rotate(4deg); }
  100% { transform: translate3d(5%, -2%, 0)  scale(1.08) rotate(-3deg); }
}

@keyframes aurora-drift-b {
  0%   { transform: translate3d(3%, 4%, 0)   scale(1.12) rotate(0deg); }
  50%  { transform: translate3d(-4%, -3%, 0) scale(1.0)  rotate(-5deg); }
  100% { transform: translate3d(-2%, 3%, 0)  scale(1.15) rotate(4deg); }
}

/* Gentler drift for the paper sections: smaller travel and no rotation
   so the soft warm fields never swing far enough to hit the clipped
   section edges (which would otherwise show as a seam). */
@keyframes aurora-paper-a {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(2%, 2%, 0)   scale(1.1); }
}

@keyframes aurora-paper-b {
  0%   { transform: translate3d(2%, 1%, 0)   scale(1.08); }
  100% { transform: translate3d(-2%, -2%, 0) scale(1.02); }
}

/* Deep sections drift gently too — small travel, no rotation, modest
   scale. The wider aurora-drift-a/b (used by the unclipped fixed body
   aurora) would swing the feathered mask far enough past the section
   edge to re-expose the clipped seam, so the clipped deep aurora gets
   its own restrained motion, matching the paper fields. */
@keyframes aurora-deep-a {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  100% { transform: translate3d(2%, 2%, 0)   scale(1.11); }
}

@keyframes aurora-deep-b {
  0%   { transform: translate3d(2%, 1%, 0)   scale(1.1); }
  100% { transform: translate3d(-2%, -2%, 0) scale(1.04); }
}

/* ---------- Ambient hero motion ------------------------------ */
/* Keyframes for the hero's continuous drift + scroll cue bob. The
   animation declarations themselves live in site.css, alongside the
   intro hero-zoom they chain from (site.css loads after this file). */
@keyframes hero-breathe {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, -1.5%, 0); }
}

/* Applied to the inner SVG so the anchor keeps its centering + hover lift. */
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Slow ken-burns drift for the full-bleed photos — barely-there
   continuous motion that keeps the big images feeling alive. */
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

/* Soft breathing glow on the concert countdown number. */
@keyframes count-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; opacity: 0.92; }
  50%      { text-shadow: 0 0 22px color-mix(in oklab, var(--accent-soft) 55%, transparent); opacity: 1; }
}

/* ============================================================
 * Cross-page transitions
 * ------------------------------------------------------------
 * This is a multi-page site, so navigating between nav items is a
 * full document load. The cross-document View Transitions API gives
 * the browser a clean cross-fade between the outgoing and incoming
 * page (supporting browsers only — others just navigate instantly).
 *
 * Deliberately a pure opacity cross-fade: an earlier version also
 * slid the new page up, which fought the `#main` entrance below and
 * read as a double/janky motion. Fade only is calmer and reads as
 * premium. The whole root (nav included) fades uniformly.
 * ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-fade-out 200ms var(--ease-standard) both;
}

::view-transition-new(root) {
  animation: vt-fade-in 320ms var(--ease-standard) both;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* First-paint entrance for the page content — opacity only, so it
   never slides and (unlike a transform) leaves no lingering
   containing block that would re-anchor fixed descendants such as
   the gallery lightbox. On supporting browsers this simply layers
   under the view-transition fade; on others it's the entrance. */
#main {
  animation: vt-fade-in 500ms var(--ease-standard);
}

/* ---------- Reduced motion ----------------------------------- */
/* base.css already neutralises animations/transitions globally,
   but make the intent explicit and ensure revealed content is
   never left blurred or hidden. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  body::before,
  body::after,
  .bg-deep:not(.hero)::before,
  .bg-deep:not(.hero)::after,
  .bg-paper::before,
  .bg-paper::after {
    animation: none;
  }

  #main {
    animation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* No decorative aurora when printing. */
@media print {
  body::before,
  body::after,
  .bg-deep:not(.hero)::before,
  .bg-deep:not(.hero)::after,
  .bg-paper::before,
  .bg-paper::after {
    display: none;
  }
}