/* Aurora Glow — premium, motion-led: animated gradient text, glowing glass
   cards, a self-drawing schedule timeline and staggered reveals layered on
   top of the shared scroll-in mechanic from _base.css (section.in-view). */
body.template-aurora {
  --accent: #9d6bd1;
  --ink: #241f33;
  --muted: #8b83a1;
  --bg: #f8f6fc;
  --glow-a: var(--accent);
  --glow-b: #d18ba0;
  --glow-c: #e0b45c;
  font-family: 'Poppins', sans-serif;
}

body.template-aurora h1,
body.template-aurora #cover h1,
body.template-aurora section h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; }

/* ── Animated gradient text on the couple's names ───────────────────────── */
body.template-aurora .grad-text {
  color: var(--ink); /* fallback for browsers without background-clip: text */
  background: linear-gradient(90deg, var(--glow-a), var(--glow-b), var(--glow-c), var(--glow-a));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-text-shift 8s linear infinite;
}
body.template-aurora .amp { display: inline-block; margin: 0 .3rem; font-style: italic; -webkit-text-fill-color: initial; color: var(--accent); background: none; }

/* ── Floating sparkle dots (x-aurora-sparkles component) ────────────────── */
body.template-aurora .sparkles { position: relative; width: 100%; height: 18px; margin-bottom: .25rem; pointer-events: none; }
body.template-aurora .sparkles.sparkles-sm { height: 12px; }
body.template-aurora .spark {
  position: absolute; bottom: 0; left: calc(8% + (var(--i) * 16%));
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--glow-a); opacity: .4;
  animation: aurora-float 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.9s);
}
body.template-aurora .spark:nth-child(2n) { background: var(--glow-b); }
body.template-aurora .spark:nth-child(3n) { background: var(--glow-c); }

/* ── Cover ────────────────────────────────────────────────────────────── */
body.template-aurora #cover {
  background: linear-gradient(120deg, #f8f6fc, #f3e9f7, #fbeee2, #f8f6fc);
  background-size: 300% 300%;
  animation: aurora-bg-shift 16s ease infinite;
}
body.template-aurora #cover .eyebrow,
body.template-aurora .hero .eyebrow {
  letter-spacing: .2em; text-transform: uppercase; font-size: .74rem; color: var(--accent); margin-bottom: .9rem;
}
body.template-aurora #cover h1,
body.template-aurora .hero h1 { font-size: 2.7rem; margin: 0 0 .75rem; line-height: 1.15; }
body.template-aurora #cover .date,
body.template-aurora .hero .date { font-size: 1.02rem; color: var(--muted); margin-bottom: 1.75rem; }
body.template-aurora #cover .cover-to { font-size: .95rem; color: var(--muted); margin-bottom: 2rem; line-height: 1.6; }
body.template-aurora #cover .cover-to strong { color: var(--ink); font-size: 1.1rem; }
body.template-aurora .cover-open-btn,
body.template-aurora .hero-cta {
  display: inline-block; width: auto; padding: .8rem 2rem; border-radius: 999px; text-decoration: none;
  background: linear-gradient(90deg, var(--glow-a), var(--glow-b));
  background-size: 200% auto;
  box-shadow: 0 6px 24px rgba(157,107,209,.3);
  transition: background-position .4s ease;
}
body.template-aurora .cover-open-btn:hover,
body.template-aurora .hero-cta:hover { background-position: 100% 0; }
body.template-aurora .add-to-calendar-link { display: block; margin-top: .85rem; font-size: .8rem; color: var(--muted); text-decoration: underline; }

/* ── Hero photo — slow Ken Burns zoom; still a plain banner img per the
   shared contract in _base.css, never a background behind overlaid text. */
body.template-aurora .hero-photo { max-height: 56vh; overflow: hidden; }
body.template-aurora .hero-photo img { max-height: 56vh; animation: aurora-kenburns 18s ease-in-out infinite alternate; }
body.template-aurora .hero {
  min-height: 42vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3.25rem 1.25rem;
}

body.template-aurora section { padding: 3rem 1.25rem; max-width: 600px; margin: 0 auto; }
body.template-aurora section h2 { text-align: center; font-size: 1.9rem; margin-bottom: 1.75rem; }

/* ── Glass card — frosted panel used by story, venue and RSVP ────────────── */
body.template-aurora .glass-card {
  position: relative; background: rgba(255,255,255,.65); backdrop-filter: blur(10px);
  border-radius: 20px; padding: 2rem 1.75rem; text-align: center;
  box-shadow: 0 8px 32px rgba(157,107,209,.12);
}
body.template-aurora .story { font-size: 1.02rem; white-space: pre-line; }

/* ── Countdown — glass tiles with a soft pulsing glow ────────────────────── */
body.template-aurora .countdown-tile {
  background: rgba(255,255,255,.65); backdrop-filter: blur(10px); border-radius: 16px;
  box-shadow: 0 0 0 rgba(157,107,209,.25); animation: aurora-pulse 3.2s ease-in-out infinite;
}
body.template-aurora .countdown-tile:nth-child(2) { animation-delay: .3s; }
body.template-aurora .countdown-tile:nth-child(3) { animation-delay: .6s; }
body.template-aurora .countdown-tile:nth-child(4) { animation-delay: .9s; }

/* ── Schedule — a line that draws itself in as the section scrolls into
   view, with items cascading in after it (both keyed off the shared
   section.in-view class from public-invite.js's IntersectionObserver). ── */
body.template-aurora .timeline-anim { position: relative; padding-left: 1.75rem; }
body.template-aurora .timeline-line {
  position: absolute; left: 5px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--glow-a), var(--glow-b), var(--glow-c));
  transform: scaleY(0); transform-origin: top; transition: transform 1.1s ease;
}
body.template-aurora section.in-view .timeline-line { transform: scaleY(1); }
body.template-aurora .timeline-item {
  position: relative; margin-bottom: 1.4rem; opacity: 0; transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
body.template-aurora section.in-view .timeline-item { opacity: 1; transform: none; }
body.template-aurora .timeline-item:nth-child(2) { transition-delay: .15s; }
body.template-aurora .timeline-item:nth-child(3) { transition-delay: .3s; }
body.template-aurora .timeline-item:nth-child(4) { transition-delay: .45s; }
body.template-aurora .timeline-item:nth-child(5) { transition-delay: .6s; }
body.template-aurora .timeline-item:nth-child(n+6) { transition-delay: .75s; }
body.template-aurora .timeline-dot {
  position: absolute; left: -1.75rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--glow-a); box-shadow: 0 0 0 4px rgba(157,107,209,.15);
}
body.template-aurora .timeline-item .time { font-weight: 600; color: var(--accent); font-size: .88rem; margin-bottom: .15rem; }
body.template-aurora .timeline-item .details strong { display: block; font-size: 1.05rem; }
body.template-aurora .timeline-item .details span { font-size: .88rem; color: var(--muted); display: block; }

body.template-aurora .venue-card .name { font-size: 1.2rem; font-weight: 600; font-family: 'Cormorant Garamond', serif; margin-bottom: .25rem; }
body.template-aurora .venue-card .address { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
body.template-aurora .venue-card .dress-code { font-size: .88rem; color: var(--muted); }

/* ── Gallery — staggered reveal + a gentle hover tilt ────────────────────── */
body.template-aurora .gallery-glow { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
body.template-aurora .gallery-glow img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(157,107,209,.14);
  opacity: 0; transform: translateY(16px) scale(.96);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}
body.template-aurora section.in-view .gallery-glow img { opacity: 1; transform: none; }
body.template-aurora .gallery-glow img:nth-child(2) { transition-delay: .1s; }
body.template-aurora .gallery-glow img:nth-child(3) { transition-delay: .2s; }
body.template-aurora .gallery-glow img:nth-child(4) { transition-delay: .3s; }
body.template-aurora .gallery-glow img:nth-child(5) { transition-delay: .4s; }
body.template-aurora .gallery-glow img:nth-child(n+6) { transition-delay: .5s; }
body.template-aurora .gallery-glow img:hover { transform: scale(1.04) rotate(-.5deg); box-shadow: 0 12px 30px rgba(157,107,209,.24); }
@media (min-width: 480px) { body.template-aurora .gallery-glow { grid-template-columns: repeat(3, 1fr); } }

body.template-aurora .rsvp-card { max-width: 460px; margin: 0 auto; }
body.template-aurora .submit-btn {
  width: 100%; margin-top: 1.25rem; padding: .85rem; border-radius: 999px; font-size: 1rem;
  background: linear-gradient(90deg, var(--glow-a), var(--glow-b), var(--glow-c));
  background-size: 200% auto; animation: aurora-text-shift 6s linear infinite;
}

body.template-aurora .wishes-list { display: flex; flex-direction: column; gap: .85rem; max-width: 460px; margin: 0 auto; }
body.template-aurora .wish-card {
  background: rgba(255,255,255,.65); backdrop-filter: blur(10px); border-radius: 16px;
  padding: 1.1rem 1.3rem; box-shadow: 0 8px 24px rgba(157,107,209,.1);
  transition: box-shadow .3s ease;
}
body.template-aurora .wish-card:hover { box-shadow: 0 8px 28px rgba(157,107,209,.28); }
body.template-aurora .wish-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
body.template-aurora .wish-head strong { font-size: 1rem; font-family: 'Cormorant Garamond', serif; }
body.template-aurora .wish-attending { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
body.template-aurora .wish-message { margin: 0; font-size: .92rem; white-space: pre-line; }
body.template-aurora .wish-date { margin-top: .5rem; font-size: .75rem; color: var(--muted); }

/* ── Particle canvas — cover-open fireworks, a cursor/touch sparkle trail,
   and RSVP-confirmation confetti (public-invite.js). Left visible at all
   times since it's transparent until particles are drawn; no-op on every
   other template since it only runs when #fireworks-canvas is present. ── */
body.template-aurora #fireworks-canvas {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  width: 100%; height: 100%;
}

@keyframes aurora-text-shift { to { background-position: 300% center; } }
@keyframes aurora-bg-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes aurora-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .3; }
  50% { transform: translateY(-14px) scale(1.3); opacity: .8; }
}
@keyframes aurora-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes aurora-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(157,107,209,.25); }
  50% { box-shadow: 0 0 18px rgba(157,107,209,.35); }
}

/* Motion is this template's whole point, but guests who've asked their OS
   to reduce motion should still get a fully readable, static page. */
@media (prefers-reduced-motion: reduce) {
  body.template-aurora .grad-text,
  body.template-aurora #cover,
  body.template-aurora .spark,
  body.template-aurora .hero-photo img,
  body.template-aurora .countdown-tile,
  body.template-aurora .submit-btn { animation: none; }
  body.template-aurora .grad-text { background-position: 0 0; }
  body.template-aurora #fireworks-canvas { display: none; }
}

@media (max-width: 420px) {
  body.template-aurora section h2 { font-size: 1.55rem; }
  body.template-aurora #cover h1, body.template-aurora .hero h1 { font-size: 2.2rem; }
}