/* ============================================================
   SPAITS 2026 — festival landing
   Palette derived from the brand banner & logo
   ============================================================ */

:root {
  --c-purple:    #662D91;   /* base background (the banner purple) */
  --c-purple-d:  #4d2070;   /* deeper, for section depth           */
  --c-purple-dd: #3a1657;   /* deepest, footer                     */
  --c-purple-l:  #8D4F9F;   /* mid shapes                          */
  --c-lilac:     #DC9FED;   /* light cards / accent                */
  --c-lilac-2:   #efd2f8;   /* softest lilac                       */
  --c-yellow:    #F7EA2F;   /* primary accent / CTA                */
  --c-white:     #ffffff;
  --c-ink:       #2a103f;   /* dark text on light surfaces         */

  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --c-water:  #41246e;   /* map water  */
  --c-sand:   #ecd9a4;   /* map beach  */

  --wrap: 1180px;
  --r: 22px;       /* card radius        */
  --r-lg: 34px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --nav-h: 76px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }

body {
  font-family: var(--font-body);
  color: var(--c-white);
  background: var(--c-purple);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--c-yellow); color: var(--c-ink);
  padding: 10px 16px; border-radius: 12px; font-weight: 700;
  transform: translateY(-150%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- typography helpers ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 700;
  font-size: .78rem;
  color: var(--c-lilac);
  margin-bottom: .85rem;
}
.lead { font-size: 1.12rem; line-height: 1.65; color: #f3e6fb; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg: var(--c-yellow);
  --btn-fg: var(--c-ink);
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: .8rem 1.4rem;
  border-radius: 100px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
  will-change: transform;
}
.btn--solid { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 6px 0 0 #c9bd1f; }
.btn--solid:hover { transform: translateY(-3px); box-shadow: 0 9px 0 0 #c9bd1f, 0 14px 26px -10px rgba(247,234,47,.6); }
.btn--solid:active { transform: translateY(2px); box-shadow: 0 3px 0 0 #c9bd1f; }
.btn--ghost {
  background: transparent; color: var(--c-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 6px 0 0 rgba(255,255,255,.16);
}
.btn--ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px var(--c-white), 0 9px 0 0 rgba(255,255,255,.16); }
.btn--ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--c-white), 0 3px 0 0 rgba(255,255,255,.16); }
.btn--lg { padding: 1rem 1.8rem; font-size: 1.1rem; }

/* tiny megaphone "ear" before label */
.btn__ear {
  width: 14px; height: 14px; flex: none;
  background: currentColor;
  clip-path: polygon(0 28%, 60% 28%, 100% 0, 100% 100%, 60% 72%, 0 72%);
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.nav.is-stuck {
  background: rgba(58,22,87,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px -18px #000;
}
.nav__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__brand img { height: 36px; width: auto; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a {
  font-weight: 600; font-size: .96rem; position: relative; padding: 4px 0;
  color: #f0e3fa;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0;
  background: var(--c-yellow); border-radius: 3px; transition: width .28s var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--c-white); }
.nav__cta { padding: .6rem 1.1rem; font-size: .95rem; box-shadow: 0 4px 0 0 #c9bd1f; }

.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.nav__burger span { width: 26px; height: 3px; background: var(--c-white); border-radius: 3px; transition: .25s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav__mobile {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: rgba(45,18,68,.97); backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem clamp(20px,5vw,48px) 1.6rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: .85rem .25rem; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav__mobile .btn { margin-top: 1rem; justify-content: center; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 3rem) 1rem 4rem;
  background:
    radial-gradient(120% 90% at 50% -10%, #7a3aad 0%, var(--c-purple) 48%, var(--c-purple-d) 100%);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }

/* floating decor */
.hero__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shard, .spark { position: absolute; opacity: .9; will-change: transform; }
.shard--1 { width: 340px; top: -60px; left: -90px; opacity: .55; }
.shard--2 { width: 420px; bottom: -120px; right: -120px; opacity: .5; }
.spark--1 { width: 90px; top: 18%; right: 12%; animation: float 7s ease-in-out infinite; }
.spark--2 { width: 70px; bottom: 20%; left: 10%; animation: float 9s ease-in-out infinite reverse; }
.spark--3 { width: 120px; top: 26%; left: 6%; animation: drift 12s ease-in-out infinite; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(8deg); } }
@keyframes drift { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(18px,-14px) rotate(-10deg); } }

/* ---- interactive sun-eye ---- */
.eye-stage {
  position: relative; width: clamp(240px, 38vw, 380px); aspect-ratio: 1;
  margin: 0 auto;
}
.rays { position: absolute; inset: 0; animation: spin 40s linear infinite; }
.rays line { stroke: var(--c-yellow); stroke-width: 7; stroke-linecap: round; }
@keyframes spin { to { transform: rotate(360deg); } }

.eye {
  position: absolute; top: 50%; left: 50%;
  width: 74%; transform: translate(-50%,-50%);
  overflow: visible;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.28));
}
.eye__white { fill: var(--c-white); }
.eye__line  { fill: none; stroke: var(--c-purple-d); stroke-width: 9; }
.eye__iris  { fill: var(--c-yellow); }
.eye__pupil { fill: var(--c-purple-d); }
.eye__glint { fill: #fff; }
.eye__lid {
  fill: var(--c-purple-l);
  transform: translateY(0);
}

/* hero logo */
.hero__logo { margin: 0; }
.hero__logo img { width: min(760px, 88vw); height: auto; }

.hero__facts {
  list-style: none; padding: 0; margin: 2.8rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 2.2rem;
}
.hero__facts li:not(.dot) { display: flex; flex-direction: column; line-height: 1.25; }
.hero__facts strong { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.hero__facts span { font-size: .9rem; color: var(--c-lilac); margin-top: .1rem; }
.hero__facts .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); }

/* countdown */
.countdown {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: 3rem;
}
.cd__unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 1rem .8rem .8rem;
  min-width: clamp(78px, 18vw, 124px);
}
.cd__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 4rem); line-height: 1;
  color: var(--c-yellow);
  font-variant-numeric: tabular-nums;
}
.cd__num.tick { animation: tick .4s var(--ease); }
@keyframes tick { 0% { transform: translateY(-30%); opacity: .2; } 100% { transform: translateY(0); opacity: 1; } }
.cd__lbl { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--c-lilac); margin-top: .55rem; }
.cd__sep { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: rgba(255,255,255,.35); align-self: flex-start; margin-top: .5rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 3.2rem; }

.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
}
.hero__scroll span {
  position: absolute; top: 8px; left: 50%; width: 5px; height: 8px; margin-left: -2.5px;
  background: var(--c-yellow); border-radius: 3px; animation: scrolldot 1.6s ease-in-out infinite;
}
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }

/* ============================================================
   MARQUEE (tagline ticker)
   ============================================================ */
.marquee {
  background: var(--c-yellow); color: var(--c-ink);
  overflow: hidden; padding: .55rem 0;
  border-block: 4px solid var(--c-ink);
}
.marquee__track { display: flex; width: max-content; animation: marq 45s linear infinite; }
.marquee__group { display: inline-flex; align-items: center; gap: 4rem; padding-right: 4rem; white-space: nowrap; }
.marquee__group > span {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .05em;
}
.marquee__group .star { color: var(--c-purple); font-size: 1rem; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============================================================
   EYE INTERLUDE
   ============================================================ */
.interlude {
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: var(--c-purple-d);
  text-align: center;
  overflow: hidden;
}
.interlude__inner { display: flex; flex-direction: column; align-items: center; }
.interlude__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em;
  margin-top: 1.6rem;
}
.interlude__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--c-lilac);
  max-width: 46ch; margin-top: 1rem;
}

/* ============================================================
   PAR FESTIVĀLU
   ============================================================ */
.par { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--c-purple); }
.par__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.par__text h2 { margin-bottom: 1.7rem; }
.par__body p { font-size: 1.08rem; line-height: 1.7; color: #efe2fb; }
.par__body p + p { margin-top: .85rem; }
.par__figures { display: flex; flex-direction: column; }
.figure {
  display: flex; align-items: baseline; gap: 1.4rem;
  padding: 1.3rem .2rem;
  border-top: 1px solid rgba(255,255,255,.16);
  transition: padding-left .3s var(--ease);
}
.figure:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.figure:hover { padding-left: .9rem; }
.figure__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: .9;
  color: var(--c-yellow); min-width: 4.4rem;
  font-variant-numeric: tabular-nums;
}
.figure__lbl { font-weight: 600; font-size: 1.02rem; color: #efe2fb; }

/* ============================================================
   PROGRAMMA
   ============================================================ */
.prog { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--c-purple-d); }
.sec-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head__note { margin-top: 1.3rem; }
.pill {
  display: inline-block; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: .5rem 1rem; border-radius: 100px; font-weight: 600; font-size: .92rem;
}

.prog__tracks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.track__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem;
}
.track__dot { width: 16px; height: 16px; border-radius: 50%; }
.track__dot--yellow { background: var(--c-yellow); }
.track__dot--lilac  { background: var(--c-lilac); }

.slot {
  display: grid; grid-template-columns: 92px 1fr; gap: 1.1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 1.1rem 1.3rem;
  margin-bottom: .9rem;
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.slot:hover { transform: translateX(6px); background: rgba(255,255,255,.09); border-color: rgba(247,234,47,.4); }
.slot__time {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--c-yellow); line-height: 1.1; display: flex; flex-direction: column;
}
.slot__time span { font-size: .85rem; color: var(--c-lilac); font-weight: 500; }
.slot__time span::before { content: "↓ "; opacity: .6; }
.slot__body h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: .25rem; }
.slot__body p { font-size: .94rem; color: #e9d9f5; }
.slot__body b { color: var(--c-white); font-weight: 700; }
.slot__tag {
  display: inline-block; background: var(--c-yellow); color: var(--c-ink);
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .2rem .7rem; border-radius: 100px; margin-bottom: .5rem;
}
.slot--head {
  background: linear-gradient(135deg, rgba(141,79,159,.5), rgba(247,234,47,.12));
  border-color: rgba(247,234,47,.45);
}

/* ============================================================
   MĀKSLINIEKI
   ============================================================ */
.line { padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem,8vw,6rem); background: var(--c-purple); }
.line__marquee { overflow: hidden; padding: 1.4rem 0 2.6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.line__track { display: flex; width: max-content; gap: 2.4rem; animation: marq 38s linear infinite; }
.line__track span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem); white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.6px var(--c-lilac); text-stroke: 1.6px var(--c-lilac);
  opacity: .55;
}
.line__track span.is-star { color: var(--c-yellow); -webkit-text-stroke: 0; opacity: 1; }

.line__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }
.artist {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
}
.artist:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(247,234,47,.4); }
.artist__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.artist__meta { font-size: .85rem; color: var(--c-lilac); }
.artist__kicker {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
  color: var(--c-ink); background: var(--c-yellow); align-self: flex-start;
  padding: .2rem .6rem; border-radius: 100px; margin-bottom: .3rem;
}
.artist--star {
  grid-column: span 2;
  background: linear-gradient(130deg, var(--c-purple-l), rgba(247,234,47,.16));
  border-color: rgba(247,234,47,.5);
}
.artist--star .artist__name { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/* ============================================================
   NORISES VIETA
   ============================================================ */
.place { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--c-purple-d); }
.place__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.place__info h2 { margin-bottom: 1.4rem; }
.place__facts { margin: 2rem 0; display: grid; gap: .9rem; }
.place__facts div { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: baseline; }
.place__facts dt { font-weight: 700; color: var(--c-lilac); text-transform: uppercase; font-size: .76rem; letter-spacing: .1em; }
.place__facts dd { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.place__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.brandmap { width: 100%; height: auto; border-radius: var(--r-lg); }
.bm-water { fill: var(--c-water); }
.bm-land  { fill: var(--c-purple-l); }
.bm-sand  { fill: var(--c-sand); }
.bm-spit  { fill: none; stroke: var(--c-purple-l); stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; }
.bm-road  { fill: none; stroke: rgba(255,255,255,.30); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 13; }
.bm-tree  { fill: var(--c-yellow); opacity: .55; }
.bm-pin { transform-box: fill-box; transform-origin: 316px 300px; animation: pinbob 3s ease-in-out infinite; }
.bm-pin__shadow { fill: rgba(0,0,0,.25); animation: pinshadow 3s ease-in-out infinite; }
.bm-pin__body { fill: var(--c-yellow); }
.bm-pin__eye-white { fill: var(--c-white); }
.bm-pin__eye { fill: var(--c-purple-d); }
.bm-label { fill: rgba(255,255,255,.85); font-family: var(--font-display); font-weight: 700; font-size: 23px; text-anchor: start; letter-spacing: .5px; }
@keyframes pinbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pinshadow { 0%,100% { transform: scale(1); opacity: .25; } 50% { transform: scale(.8); opacity: .15; } }

/* ============================================================
   CTA STRIP
   ============================================================ */
.strip { background: var(--c-yellow); color: var(--c-ink); padding: clamp(3rem,7vw,5rem) 0; text-align: center; }
.strip__inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.strip__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,5vw,3.2rem); line-height: 1; }
.strip__sub { font-weight: 600; font-size: 1.1rem; margin-bottom: 1rem; }
.strip .btn--solid { background: var(--c-ink); color: var(--c-white); box-shadow: 0 6px 0 0 #160726; }
.strip .btn--solid:hover { box-shadow: 0 9px 0 0 #160726, 0 14px 26px -10px rgba(0,0,0,.4); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--c-purple-dd); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.foot__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot__brand img { width: 200px; margin-bottom: .8rem; }
.foot__brand p { font-family: var(--font-display); color: var(--c-yellow); font-size: 1.2rem; }
.foot__col h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--c-lilac); margin-bottom: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.foot__col p { font-size: .95rem; color: #e6d6f3; }
.foot__social { list-style: none; padding: 0; display: grid; gap: .5rem; }
.foot__social a:hover { color: var(--c-yellow); }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem; color: var(--c-lilac);
}
.foot__bottom a:hover { color: var(--c-yellow); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.figure.reveal { transition-delay: calc(var(--d, 0) * 90ms); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .par__grid, .prog__tracks, .place__grid { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .hero__decor { display: none; }
}
@media (max-width: 560px) {
  .foot__inner { grid-template-columns: 1fr; }
  .cd__sep { display: none; }
  .countdown { gap: .45rem; width: 100%; margin-top: 2.4rem; }
  .cd__unit { min-width: 0; flex: 1 1 0; padding: .7rem .25rem .55rem; border-radius: 16px; }
  .cd__num { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  .cd__lbl { font-size: .6rem; letter-spacing: .06em; }
  .hero__facts { flex-direction: column; gap: 1.1rem; margin-top: 2.2rem; }
  .hero__facts strong { font-size: 1.15rem; }
  .hero__facts .dot { display: none; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .slot { grid-template-columns: 76px 1fr; gap: .8rem; }
  .shard--1 { width: 200px; top: -30px; left: -70px; }
  .shard--2 { width: 240px; }
  .spark--2 { display: none; }
  .spark--1 { width: 60px; top: 13%; }
  .spark--3 { width: 80px; top: 20%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .rays, .marquee__track, .line__track, .bm-pin, .bm-pin__shadow, .hero__scroll span,
  .spark--1, .spark--2, .spark--3 { animation: none !important; }
}