/* ==========================================================================
   Nebula Nights — RSVP page
   Design tokens
   ========================================================================== */
:root {
  --void:   #060512;   /* deep space scrim */
  --mist:   #F2EEFB;   /* primary text, near-white lavender */
  --dust:   #B7AED4;   /* secondary text */
  --nova:   #9C8FFF;   /* violet accent */
  --ion:    #5EE6D0;   /* cyan-teal accent */

  --font-display: 'Anton';
  --font-label:   'Anton';
  --font-body:    'Anton';
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
}

@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Shader background
   ========================================================================== */
#container {
  position: fixed;
  inset: 0;
  z-index: 0;
}

canvas {
  display: block;
}

/* ==========================================================================
   Hero / RSVP overlay
   ========================================================================== */
.hero {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none; /* let clicks fall through, except on interactive children */
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 55% at 50% 50%,
    rgba(4, 3, 10, 0.62) 0%,
    rgba(4, 3, 10, 0.34) 45%,
    rgba(4, 3, 10, 0) 75%
  );
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 40rem;
  pointer-events: auto;
}

/* Eyebrow ------------------------------------------------------------- */
.eyebrow {
    margin: 0 0 1.1rem;
    font-family: var(--font-label);
    font-size: 19px;
    font-weight: 500;
    /* letter-spacing: 0.32em; */
    text-transform: uppercase;
    color: #ffffff;
}

/* Logo ------------------------------------------------------------------ */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.4rem;
  margin-bottom: 1rem;
}

.logo__image {
  display: block;
  max-width: min(80vw, 720px);
  max-height: 8.5rem;
  width: auto;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(156, 143, 255, 0.25));
}

.logo__fallback {
  display: none; /* shown by content.js if no logo image is found */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--mist);
  letter-spacing: -0.01em;
}

/* Meta row --------------------------------------------------------------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-weight: bold!important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.meta__divider {
  color: var(--nova);
  opacity: 0.7;
}

/* Description -------------------------------------------------------- */
.description {
  margin: 0 0 2.2rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--mist);
  max-width: 34rem;
}

/* RSVP button — signature element ---------------------------------------
   A physical piece of glass floating above the nebula: refracted blur,
   a soft top specular highlight, a tinted elevation shadow, and a
   gentle pointer-tracked tilt that catches the light like real glass.
   ------------------------------------------------------------------- */
.rsvp {
  --tiltX: 0deg;
  --tiltY: 0deg;
  --press: 1;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05rem 2.9rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  isolation: isolate;
  perspective: 600px;
  transform: perspective(600px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) scale(var(--press));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

/* The glass surface itself */
.rsvp__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(242, 238, 251, 0.08) 42%,
      rgba(156, 143, 255, 0.10) 100%
    );
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(242, 238, 251, 0.4);
  box-shadow:
    /* elevation: soft dark lift off the page */
    0 14px 30px -10px rgba(3, 2, 10, 0.55),
    /* ambient colour bleed from the nebula, like glass catching light */
    0 4px 24px -6px rgba(156, 143, 255, 0.35),
    /* inner top highlight = refraction along the rim */
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.65),
    /* inner bottom shade = the underside of the glass */
    inset 0 -10px 16px -12px rgba(3, 2, 10, 0.6);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Specular shine sweeping the top third, like a curved highlight on glass */
.rsvp__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.rsvp__shine::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -10%;
  width: 120%;
  height: 90%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.45) 47%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-30%);
  transition: transform 0.6s ease;
}

.rsvp__label {
  font-family: var(--font-label);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  text-shadow: 0 1px 8px rgba(3, 2, 10, 0.35);
  transform: translateZ(18px);
}

.rsvp:hover {
  --tiltX: -4deg;
}

.rsvp:hover .rsvp__glass {
  border-color: rgba(94, 230, 208, 0.55);
  box-shadow:
    0 18px 34px -10px rgba(3, 2, 10, 0.6),
    0 6px 30px -4px rgba(94, 230, 208, 0.4),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.8),
    inset 0 -10px 16px -12px rgba(3, 2, 10, 0.55);
}

.rsvp:hover .rsvp__shine::before {
  transform: translateX(30%);
}

.rsvp:hover .rsvp__label {
  color: #FFFFFF;
}

.rsvp:active {
  --press: 0.96;
  --tiltX: 1deg;
  transition-duration: 0.12s;
}

.rsvp:active .rsvp__glass {
  box-shadow:
    0 6px 14px -6px rgba(3, 2, 10, 0.55),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 6px 14px -8px rgba(3, 2, 10, 0.55);
}

.rsvp:focus-visible {
  outline: 2px solid var(--ion);
  outline-offset: 4px;
}

/* Footnote ------------------------------------------------------------ */
.footnote {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--dust);
  opacity: 0.75;
}

/* Footer logo ------------------------------------------------------------ */
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.75rem;
}

.footer-logo__image {
  display: block;
  max-width: min(50vw, 220px);
  max-height: 3.5rem;
  width: auto;
  height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 16px rgba(156, 143, 255, 0.2));
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 560px) {
  .hero {
    padding: 6vh 1.25rem;
  }
  .logo__image {
    max-width: 72vw;
    max-height: 4rem;
  }
  .footer-logo__image {
    max-width: 60vw;
    max-height: 2.75rem;
  }
  .meta {
    gap: 0.4rem;
    font-size: 0.8rem;
  }
  .rsvp {
    padding: 0.85rem 2.1rem;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rsvp__ring {
    animation: none;
  }
}