/* ═══════════════════════════════════════════════════════════
   VIVAHAMS — Wedding Invitation · Production Stylesheet
   Srujana & Harshavardhan · June 24, 2026
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES
   ───────────────────────────────────────────────────────── */
:root {
  /* Colours */
  --c-burg-950:   #0c0204;
  --c-burg-900:   #1a0508;
  --c-burg-800:   #2a0910;
  --c-burg-700:   #3a0913;
  --c-burg:       #5d0f1d;
  --c-burg-400:   #7a1f2f;
  --c-gold:       #FFD700;
  --c-gold-soft:  #FFF5A0;
  --c-gold-dim:   #4d3200;
  --c-ivory:      #f8f2e8;

  /* Reusable gold gradients */
  --grad-gold: linear-gradient(
    110deg,
    #3d2200 0%, #C8960C 15%, #FFD700 28%, #FFF5A0 38%,
    #FFFFF0 43%, #FFF5A0 48%, #FFD700 60%, #C8960C 74%,
    #3d2200 88%, #C8960C 96%, #FFD700 100%
  );
  --grad-shimmer: linear-gradient(
    90deg,
    #3d2200 0%, #C8960C 15%, #FFD700 25%, #FFF5A0 32%,
    #FFFFF0 36%, #FFF5A0 40%, #FFD700 48%, #C8960C 58%,
    #3d2200 68%, #C8960C 78%, #FFD700 85%, #FFF5A0 90%,
    #C8960C 96%, #3d2200 100%
  );

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Great Vibes', cursive;
  --font-sans:    'Montserrat', system-ui, sans-serif;

  /* Easing */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--c-burg-900);
  color: var(--c-ivory);
  font-family: var(--font-sans);
  overflow-x: hidden;
}


/* ─────────────────────────────────────────────────────────
   3. LOADER
   ───────────────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-burg-950);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity  0.9s var(--ease-smooth),
    visibility 0.9s var(--ease-smooth);
}

#loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: loader-pop 0.9s var(--ease-spring) both;
}

.loader-mono svg {
  height: clamp(120px, 22vw, 200px);
  width: auto;
  overflow: visible;
}

.loader-date {
  margin-top: .75rem;
  font-family: var(--font-sans);
  font-size: .6rem;
  letter-spacing: .5em;
  color: rgba(240, 215, 138, .5);
  text-transform: uppercase;
}

@keyframes loader-pop {
  0%   { opacity: 0; transform: scale(.6) translateZ(0); }
  100% { opacity: 1; transform: scale(1)  translateZ(0); }
}


/* ─────────────────────────────────────────────────────────
   4. GOLD TEXT EFFECTS
   ───────────────────────────────────────────────────────── */
.gold-text {
  background: var(--grad-gold);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateZ(0);
}

.shimmer-text {
  background: var(--grad-shimmer);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  transform: translateZ(0);
  animation: shimmer-loop 24s linear infinite;
}

@keyframes shimmer-loop {
  0%   { background-position: 300%  0; }
  100% { background-position: -300% 0; }
}


/* ─────────────────────────────────────────────────────────
   5. NAV LOGO  (SVG monogram lockup)
   ───────────────────────────────────────────────────────── */
.logo-nav {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition:
    filter    .4s ease,
    transform .35s var(--ease-spring);
}

.logo-nav svg {
  height: clamp(32px, 4.5vw, 44px);
  width: auto;
  display: block;
  overflow: visible;
}

.logo-nav:hover {
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, .7));
  transform: scale(1.06) translateZ(0);
}


/* ─────────────────────────────────────────────────────────
   6. GLOW WRAPPER
   ───────────────────────────────────────────────────────── */
.gold-glow {
  position: relative;
  display: inline-block;
}

.gold-glow::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font: inherit;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(14px) brightness(1.6);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
  transform: translateZ(0);
}


/* ─────────────────────────────────────────────────────────
   7. GLASS / ORNATE CARDS
   ───────────────────────────────────────────────────────── */
.gold-card {
  position: relative;
  border: 1px solid rgba(255, 215, 0, .65);
  background: linear-gradient(145deg, rgba(255, 200, 0, .04), rgba(255, 255, 255, 0));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gold-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 220, 0, .28);
  pointer-events: none;
  border-radius: inherit;
}

.ornate {
  border: 1px solid rgba(255, 215, 0, .75);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 0, .28),
    0 0  60px rgba(255, 200, 0, .18),
    0 0 120px rgba(255, 160, 0, .08);
}


/* ─────────────────────────────────────────────────────────
   8. DIVIDER
   ───────────────────────────────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #FFF5A0, rgba(255, 215, 0, .6), transparent);
  box-shadow: 0 0 6px rgba(255, 215, 0, .4);
}


/* ─────────────────────────────────────────────────────────
   9. NAVIGATION
   ───────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  transition:
    background       .45s var(--ease-smooth),
    backdrop-filter  .45s ease,
    box-shadow       .45s ease;
  transform: translateZ(0);
}

#nav.scrolled {
  background: rgba(26, 5, 8, .98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255, 215, 0, .18);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease-smooth);
}

.nav-link.active {
  color: rgba(255, 215, 0, .95) !important;
}

.nav-link.active::after,
.nav-link:hover::after {
  transform: scaleX(1);
}


/* ─────────────────────────────────────────────────────────
   10. HERO
   ───────────────────────────────────────────────────────── */
#hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

#hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1) translateZ(0);
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 5, 8, .3)  0%,
    rgba(26, 5, 8, .2)  30%,
    rgba(26, 5, 8, .55) 60%,
    rgba(26, 5, 8, .95) 100%
  );
}

/* Hero script name sizing — used on both bride & groom spans */
.hero-script-name {
  font-size: clamp(3.5rem, 10vw, 8rem);
  -webkit-text-fill-color: transparent;
}


/* ─────────────────────────────────────────────────────────
   11. PETALS  (SVG, Web Animations API — per-petal path)
   ───────────────────────────────────────────────────────── */
.petal {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  overflow: visible;
}


/* ─────────────────────────────────────────────────────────
   12. FLOAT ANIMATION
   ───────────────────────────────────────────────────────── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

.float {
  animation: float-y 4.5s ease-in-out infinite;
}


/* ─────────────────────────────────────────────────────────
   13. SCROLL REVEAL  (smooth expo-out spring)
   ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   .9s var(--ease-expo),
    transform .9s var(--ease-expo);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition:
    opacity   .9s var(--ease-expo),
    transform .9s var(--ease-expo);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity   .9s var(--ease-expo),
    transform .9s var(--ease-expo);
}

/* Sequential timeline item — same visual as reveal-right */
.tl-item {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity   .8s var(--ease-expo),
    transform .8s var(--ease-expo);
}

.tl-item.show {
  opacity: 1;
  transform: translate(0);
}

.reveal.show,
.reveal-left.show,
.reveal-right.show {
  opacity: 1;
  transform: translate(0);
}


/* ─────────────────────────────────────────────────────────
   14. EVENTS EDITORIAL LAYOUT
   ───────────────────────────────────────────────────────── */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* each row: two equal halves side by side */
.ev-row {
  display: flex;
  flex-direction: row;
  min-height: 300px;
  overflow: hidden;
}

/* reversed: image left, content right */
.ev-row.ev-row-reverse {
  flex-direction: row-reverse;
}

/* text half */
.ev-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.5rem;
  gap: 0.5rem;
}

.ev-row-text .ev-date {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: rgba(255, 245, 160, 0.6);
}

.ev-row-text .ev-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--c-ivory);
  line-height: 1.15;
}

.ev-row-text .ev-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, var(--c-gold), transparent);
}

.ev-row-text .ev-time {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: rgba(248, 242, 232, 0.5);
  line-height: 1.7;
}

.ev-row-text .ev-desc {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: rgba(248, 242, 232, 0.38);
  margin-top: 0.25rem;
}

/* image half */
.ev-row-img {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ev-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s var(--ease-expo);
}

.ev-row:hover .ev-row-img img {
  transform: scale(1.06);
}

/* mobile: stack vertically — image always on top */
@media (max-width: 639px) {
  .ev-row,
  .ev-row.ev-row-reverse {
    flex-direction: column;
  }
  .ev-row-img {
    height: 220px;
    order: -1;
  }
  .ev-row-text {
    padding: 1.25rem 1.25rem;
  }
}

/* ─────────────────────────────────────────────────────────
   15. LIVE STREAM
   ───────────────────────────────────────────────────────── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, .4);
  background: rgba(255, 215, 0, .07);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--c-gold-soft);
}

.live-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 6px #ff4444;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

.stream-frame {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, .22);
  background: var(--c-burg-950);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.stream-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem;
  text-align: center;
  width: 100%;
}

.stream-placeholder .stream-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 215, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  background: rgba(255, 215, 0, .06);
}

/* ─────────────────────────────────────────────────────────
   16. GALLERY
   ───────────────────────────────────────────────────────── */
.g-item {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 215, 0, .22);
  cursor: zoom-in;
  transition: border-color .4s ease, box-shadow .4s ease;
}

.g-item:hover {
  border-color: rgba(255, 215, 0, .5);
  box-shadow: 0 0 30px rgba(255, 200, 0, .15);
}

.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.g-item:hover img {
  transform: scale(1.1);
}

.g-item .g-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 5, 8, .75) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .45s var(--ease-smooth);
}

.g-item:hover .g-ov {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────
   15. COUNTDOWN
   ───────────────────────────────────────────────────────── */
.c-box {
  border: 1px solid rgba(255, 215, 0, .6);
  background: linear-gradient(135deg, rgba(255, 200, 0, .06), transparent);
  box-shadow:
    0 0 40px rgba(255, 200, 0, .2),
    0 0 80px rgba(255, 160, 0, .08),
    inset 0 0 20px rgba(255, 200, 0, .06);
  transition:
    transform  .4s var(--ease-spring),
    box-shadow .4s ease;
}

.c-box:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow:
    0 0 60px rgba(255, 200, 0, .32),
    0 0 100px rgba(255, 160, 0, .12),
    inset 0 0 30px rgba(255, 200, 0, .08);
}


/* ─────────────────────────────────────────────────────────
   16. FORM ELEMENTS
   ───────────────────────────────────────────────────────── */
.f-input {
  width: 100%;
  background: rgba(248, 242, 232, .04);
  border: 1px solid rgba(255, 215, 0, .38);
  border-radius: .875rem;
  padding: .9rem 1.25rem;
  color: var(--c-ivory);
  font-family: var(--font-sans);
  font-size: .8125rem;
  outline: none;
  transition:
    border-color .3s ease,
    box-shadow   .3s ease,
    background   .3s ease;
  appearance: none;
}

.f-input:focus {
  border-color: rgba(255, 215, 0, .85);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .18);
  background: rgba(248, 242, 232, .06);
}

.f-input::placeholder {
  color: rgba(248, 242, 232, .32);
}

select.f-input option {
  background: #2a0910;
  color: var(--c-ivory);
}


/* ─────────────────────────────────────────────────────────
   17. BUTTON
   ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border: 1px solid rgba(255, 215, 0, .75);
  border-radius: 9999px;
  color: var(--c-ivory);
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255, 200, 0, .18), rgba(255, 160, 0, .07));
  box-shadow:
    0 6px 24px rgba(0, 0, 0, .25),
    0 0 20px rgba(255, 200, 0, .15),
    inset 0 1px 0 rgba(255, 245, 160, .25);
  transition:
    background    .35s ease,
    box-shadow    .35s ease,
    transform     .35s var(--ease-spring),
    border-color  .35s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: linear-gradient(135deg, rgba(255, 200, 0, .32), rgba(255, 160, 0, .15));
  box-shadow:
    0 10px 36px rgba(255, 215, 0, .45),
    0 0 40px rgba(255, 200, 0, .3),
    inset 0 1px 0 rgba(255, 245, 160, .4);
  transform: translateY(-3px) scale(1.02);
}

.btn:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: .1s;
}

.btn-sm {
  padding: .6rem 1.4rem;
  font-size: .7rem;
}


/* ─────────────────────────────────────────────────────────
   18. SECTION ALT BACKGROUND
   ───────────────────────────────────────────────────────── */
.s-alt {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(93, 15, 29, .3), transparent);
}


/* ─────────────────────────────────────────────────────────
   19. SPARKLE DOTS BACKGROUND
   ───────────────────────────────────────────────────────── */
.sparkle-bg {
  background-image:
    radial-gradient(circle at 10% 12%, rgba(240, 215, 138, .07) 0 2px,   transparent 3px),
    radial-gradient(circle at 88%  8%, rgba(240, 215, 138, .06) 0 2px,   transparent 3px),
    radial-gradient(circle at 75% 55%, rgba(240, 215, 138, .05) 0 1.5px, transparent 3px),
    radial-gradient(circle at 22% 72%, rgba(240, 215, 138, .06) 0 2px,   transparent 3px),
    radial-gradient(circle at 52% 90%, rgba(240, 215, 138, .05) 0 2px,   transparent 3px);
}


/* ─────────────────────────────────────────────────────────
   20. MONOGRAM RING
   ───────────────────────────────────────────────────────── */
.m-ring {
  border: 1px solid rgba(255, 215, 0, .75);
  box-shadow:
    0 0 40px rgba(255, 215, 0, .3),
    inset 0 0 30px rgba(255, 215, 0, .15);
}

.m-ring::after {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 215, 0, .22);
  pointer-events: none;
}

/* Story monogram float badge */
.story-badge {
  position: absolute;
  background: var(--c-burg-900);
}

.story-badge #story-monogram {
  width: 62px;
  height: 62px;
}

.story-badge #story-monogram svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}


/* ─────────────────────────────────────────────────────────
   21. TIMELINE
   ───────────────────────────────────────────────────────── */
/* Single continuous line on the container — works with any spacing */
#story-timeline {
  position: relative;
}

#story-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 215, 0, .7) 10%,
    rgba(255, 215, 0, .7) 90%,
    transparent
  );
}

/* kept for any legacy use but no longer generated */
.tl-line {
  display: none;
}


/* ─────────────────────────────────────────────────────────
   22. MOBILE MENU
   ───────────────────────────────────────────────────────── */
#mob-menu {
  display: none;
}

#mob-menu.open {
  display: block;
}


/* ─────────────────────────────────────────────────────────
   23. ENTRY GATE
   ───────────────────────────────────────────────────────── */
#entry-gate {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: #130212;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  transition:
    opacity    1.3s var(--ease-smooth),
    visibility 1.3s;
}

#entry-gate.open-now {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gate-geo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gate-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 52% 62% at 50% 47%,
    rgba(160, 80, 5, .15) 0%,
    rgba(19, 2, 18, .95)  68%
  );
}

.gate-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: clamp(.46rem, .82vw, .62rem);
  letter-spacing: .58em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, .68);
  text-align: center;
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

.gate-compass {
  position: relative;
  z-index: 2;
  width:  clamp(150px, 27vw, 220px);
  height: clamp(150px, 27vw, 220px);
  filter:
    drop-shadow(0 0 18px rgba(255, 200, 0, .75))
    drop-shadow(0 0 50px rgba(255, 165, 0, .35));
  animation: cpass-glow 3.5s ease-in-out infinite;
}

@keyframes cpass-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 18px rgba(255, 200, 0, .7))
      drop-shadow(0 0 50px rgba(255, 165, 0, .3));
  }
  50% {
    filter:
      drop-shadow(0 0 36px rgba(255, 215, 0, 1))
      drop-shadow(0 0 85px rgba(255, 185, 0, .55));
  }
}

.gate-compass .c-spin {
  transform-origin: 100px 100px;
  animation: c-spin 32s linear infinite;
}

@keyframes c-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gate-names {
  position: relative;
  z-index: 2;
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 5.5vw, 3.6rem);
  color: #f5e3ae;
  text-align: center;
  line-height: 1;
  margin-top: clamp(10px, 1.9vh, 20px);
  text-shadow:
    0 0 32px rgba(255, 200, 0, .38),
    0 2px 10px rgba(0, 0, 0, .6);
}

.gate-orn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(7px, 1.3vh, 14px) 0;
}

.gate-orn-line {
  width: clamp(50px, 10vw, 95px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .55));
}

.gate-orn-line.rev {
  background: linear-gradient(270deg, transparent, rgba(255, 215, 0, .55));
}

.gate-btn-wrap {
  position: relative;
  z-index: 2;
  margin-top: clamp(10px, 2.2vh, 22px);
}

.gate-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 2.8rem;
  border: 1.5px solid rgba(255, 215, 0, .52);
  border-radius: 9999px;
  color: #f5e3ae;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: rgba(82, 14, 30, .9);
  cursor: pointer;
  transition:
    background    .35s ease,
    border-color  .35s ease,
    box-shadow    .35s ease,
    transform     .35s var(--ease-spring);
  white-space: nowrap;
}

.gate-open-btn:hover {
  background: rgba(108, 20, 42, .97);
  border-color: rgba(255, 215, 0, .82);
  box-shadow: 0 0 26px rgba(255, 200, 0, .28);
  transform: translateY(-3px) scale(1.04);
}

.gate-open-btn:active {
  transform: translateY(-1px) scale(1.01);
  transition-duration: .1s;
}


/* ─────────────────────────────────────────────────────────
   24. FOOTER SCRIPT NAMES
   ───────────────────────────────────────────────────────── */
.footer-script-names {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  -webkit-text-fill-color: transparent;
}


/* ─────────────────────────────────────────────────────────
   25. REDUCED MOTION
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}