/*
  gate.css — Minimal Calm Gate
  Arjoo & Manish · Anant Mahal, Jaipur
  Two clean dark panels · gold monograms · soft petal fall
*/

/* ══ OVERLAY ════════════════════════════════════════════════════════ */
.gate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding-top: clamp(.8rem, 2vh, 1.8rem);
  overflow: hidden;
  /* Deep velvet midnight — dark plum-navy base */
  background: radial-gradient(
    ellipse 80% 70% at 50% 48%,
    #2A1848 0%,
    #1A0F32 40%,
    #100920 72%,
    #080514 100%
  );
  transition: opacity 1.4s ease, transform 1s ease;
}
/* Warm golden candlelight glow layers */
.gate-overlay::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Strong gold bloom at centre — where the couple appears */
    radial-gradient(ellipse 65% 55% at 50% 48%,
      rgba(201,164,71,.55) 0%,
      rgba(201,164,71,.20) 45%,
      transparent 70%),
    /* Warm honey shimmer at top */
    radial-gradient(ellipse 100% 35% at 50% 0%,
      rgba(220,180,80,.30) 0%, transparent 65%),
    /* Soft diya glow — bottom corners */
    radial-gradient(ellipse 50% 30% at 8%  95%,
      rgba(201,164,71,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 92% 95%,
      rgba(201,164,71,.22) 0%, transparent 60%);
}
.gate-overlay.exit {
  opacity: 0; transform: scale(1.04);
  pointer-events: none; transition: opacity 1.4s ease, transform 1s ease;
}

/* ══ PETALS ══════════════════════════════════════════════════════════ */
.petals-container { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.petal-css {
  position: absolute; top: -30px;
  opacity: 0; user-select: none;
  animation: petalFall linear infinite;
  border-radius: 80% 0 80% 0;
  transform-origin: center bottom;
}
@keyframes petalFall {
  0%   { opacity: 0;   transform: translateY(-10px) rotate(0deg)   scale(.7); }
  8%   { opacity: .85; }
  88%  { opacity: .6;  }
  100% { opacity: 0;   transform: translateY(108vh) rotate(540deg) scale(1.1); }
}

/* ══ TOP INFO — centred column over the doors ══════════════════════ */
.gate-top-info {
  position: relative; z-index: 10;
  pointer-events: all;
  text-align: center;
  width: 100%;
  max-width: min(560px, 90vw);
  /* fill the remaining viewport height so name+date can be pushed to bottom */
  height: calc(100dvh - clamp(.8rem, 2vh, 1.8rem));
  padding: clamp(.4rem,1vh,.8rem) 1rem clamp(3rem, 7vh, 5rem); /* bigger bottom padding = group sits higher */
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.2rem, .5vh, .45rem);
  background: none;
  transition: opacity .5s ease;
}


.gate-pre {
  display: block;
  width: min(340px, 78vw);   /* scaled down — was 560px, too wide on desktop */
  height: auto;
  margin: 0 auto clamp(.5rem, 1.2vh, 1rem) auto;
  animation:
    shubhReveal   1.3s cubic-bezier(.22,1,.36,1) .1s both,
    shubhImgGlow  3.6s ease-in-out 1.4s infinite;
}
.gate-title {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2rem, 3.8vw, 3rem);
  color: #F5D78E;
  text-shadow:
    0 0 28px rgba(201,164,71,.70),
    0 2px 8px rgba(0,0,0,.80);
  line-height: 1;
  margin-top: auto;   /* ← spacer: pushes name+date+button down to bottom zone */
  margin-bottom: clamp(.3rem, .8vh, .55rem);
  padding: .2rem 1.6rem;
  /* subtle dark pill so name reads clearly over the door seam */
  background: rgba(10, 1, 24, 0.55);
  border-radius: 2rem;
  backdrop-filter: blur(4px);
  text-transform: capitalize;
  animation: gUp 1.2s ease .3s both;
}
.gate-date {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.65rem, 1.1vw, .80rem);
  color: rgba(245,215,142,.75);
  letter-spacing: .18em; text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  animation: gUp 1.4s ease .5s both;
}
.gate-place {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.65rem, 1.1vw, .80rem);
  color: rgba(245,215,142,.75);
  letter-spacing: .18em; text-transform: uppercase;
  margin: 0;
  animation: gUp 1.4s ease .6s both;
}
.gate-enter-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.8rem;
  background: linear-gradient(135deg, #7A5800, #C9A447, #F5D78E, #C9A447, #7A5800);
  background-size: 300% 100%;
  color: #0B011A; font-weight: 600;
  border: none; border-radius: 2px; cursor: pointer;
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(.65rem, 1.1vw, .78rem);
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 32px rgba(201,164,71,.4);
  transition: all .4s ease;
  animation: gUp 1.4s ease .9s both, goldPulse 3s ease 2s infinite;
}
.gate-enter-btn:hover {
  background-position: right center; transform: translateY(-2px);
  box-shadow: 0 0 55px rgba(201,164,71,.7);
}
.gate-enter-btn:focus-visible { outline: 2px solid #C9A447; outline-offset: 3px; }
.gate-auto-text {
  margin-top: .55rem;
  color: rgba(201,164,71,.45);
  font-size: .7rem; letter-spacing: .1em;
  animation: gUp 1.4s ease 1.1s both;
}

/* ══ DOOR STAGE ══════════════════════════════════════════════════════ */
.gate-stage {
  position: absolute; inset: 0;
  display: flex; z-index: 4;
}
.gate-door {
  flex: 1;
  transition: transform 2s cubic-bezier(0.77, 0, 0.18, 1);
}
.gate-left  { transform-origin: left center; }
.gate-right { transform-origin: right center; }
.gate-left.open  { transform: translateX(-100%); }
.gate-right.open { transform: translateX(100%);  }

.door-face {
  width: 100%; height: 100%;
  background: linear-gradient(160deg,
    #221440 0%,
    #160D2E 35%,
    #1E1238 65%,
    #110A22 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* Depth shadow only — no all-sides border (that caused the centre bar) */
  box-shadow: inset 0 0 60px rgba(0,0,0,.40);
}
/* Left door: gold frame on outer(left) + top + bottom, NOT on right/inner edge */
.gate-left .door-face {
  border-top:    5px solid rgba(201,164,71,.85);
  border-left:   5px solid rgba(201,164,71,.85);
  border-bottom: 5px solid rgba(201,164,71,.85);
  border-right:  none;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.40),
    -4px 0 20px rgba(201,164,71,.15);
}
/* Right door: gold frame on outer(right) + top + bottom, NOT on left/inner edge */
.gate-right .door-face {
  border-top:    5px solid rgba(201,164,71,.85);
  border-right:  5px solid rgba(201,164,71,.85);
  border-bottom: 5px solid rgba(201,164,71,.85);
  border-left:   none;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.40),
    4px 0 20px rgba(201,164,71,.15);
}
/* Inner decorative border line */
.door-face::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(201,164,71,.40);
  pointer-events: none;
  z-index: 1;
}
/* Innermost echo line */
.door-face::after {
  content: '';
  position: absolute;
  inset: 27px;
  border: 1px solid rgba(201,164,71,.18);
  pointer-events: none;
  z-index: 1;
}

/* ══ GATE DECORATION: hinges + handle ══════════════════════ */
.door-frame-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* Hinge strip — 3 hinges stacked vertically on outer edge */
.door-hinges {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(40px, 10vh, 90px) 0;
}
.gate-left  .door-hinges { left: 6px; align-items: flex-start; }
.gate-right .door-hinges { right: 6px; align-items: flex-end; }

.door-hinge {
  display: block;
  width:  clamp(14px, 2.2vw, 26px);
  height: clamp(34px, 5.5vh, 64px);
  border-radius: 3px;
  background: linear-gradient(
    to right,
    rgba(245,215,142,.4),
    rgba(201,164,71,1) 30%,
    rgba(255,235,160,1) 50%,
    rgba(201,164,71,.9) 70%,
    rgba(120,90,20,.5)
  );
  box-shadow:
    0 2px 8px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.35);
  position: relative;
}
/* Central screw dot */
.door-hinge::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(5px, .9vw, 9px);
  height: clamp(5px, .9vw, 9px);
  border-radius: 50%;
  background: radial-gradient(circle, #FFE9A0 0%, #8B6914 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* Round door knob on inner edge */
.door-handle {
  position: absolute;
  top: 50%; 
  transform: translateY(-50%);
  width:  clamp(18px, 2.8vw, 36px);
  height: clamp(18px, 2.8vw, 36px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #FFF5C0 0%,
    #E8C84A 25%,
    #C9A447 55%,
    #8B6914 85%,
    #5A4010 100%
  );
  box-shadow:
    0 3px 10px rgba(0,0,0,.65),
    0 0 0 2px rgba(201,164,71,.5),
    0 0 18px rgba(201,164,71,.4),
    inset 0 -2px 4px rgba(0,0,0,.4),
    inset 0 1px 3px rgba(255,255,255,.4);
}
.gate-left  .door-handle { right: 10px; }
.gate-right .door-handle { left:  10px; }

/* ── Diamond ornament at junction of bottom seam ── */
.gate-seam-ornament {
  position: absolute;
  bottom: 26%;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  color: rgba(201,164,71,.80);
  font-size: .7rem;
  line-height: 1;
  z-index: 6;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(201,164,71,.9), 0 0 24px rgba(201,164,71,.5);
  animation: seam-pulse 3s ease-in-out infinite;
}
@keyframes seam-pulse {
  0%, 100% { opacity: .8; text-shadow: 0 0 12px rgba(201,164,71,.9); }
  50%       { opacity: 1;  text-shadow: 0 0 20px rgba(201,164,71,1), 0 0 40px rgba(201,164,71,.5); }
}

/* ── Top seam: short gold hairline fading down from the top ── */
.gate-stage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%; width: 2px;
  height: 18%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(201,164,71,.70) 0%,
    rgba(201,164,71,.45) 55%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(201,164,71,.35);
  z-index: 5;
  pointer-events: none;
}

/* ── Bottom seam: rises from floor with ✦ diamond cap ── */
.gate-stage::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%; width: 2px;
  height: 26%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201,164,71,.45) 30%,
    rgba(201,164,71,.75) 70%,
    rgba(201,164,71,.90) 100%
  );
  box-shadow: 0 0 10px rgba(201,164,71,.45);
  z-index: 5;
  pointer-events: none;
}

/* Inset bordered rectangle — the calm frame on each door */
/* ── Arch-shaped portrait frame — fills the door panel ── */
.door-inset {
  width:  clamp(140px, 38vw, 310px);
  /* aspect-ratio matches the actual 2:3 portrait images — zero side-crop */
  aspect-ratio: 2 / 3;
  max-height: calc(68vh - 80px);  /* safety: never taller than usable door */
  border: 2px solid rgba(201,164,71,.6);
  border-radius: 50% 50% 6px 6px / 18% 18% 6px 6px;
  box-shadow:
    0 0 0 6px  rgba(201,164,71,.09),
    0 0 0 10px rgba(201,164,71,.04),
    0 0 40px   rgba(201,164,71,.35),
    inset 0 0 50px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
  display: block;
}
/* no inner echo border on arch */
.door-inset::before { display: none; }

/* Photo fills the entire arch */
.door-portrait {
  width: 100%; height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: block;
  position: relative;
}
.door-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .9s ease;
}
.gate-door:hover .door-portrait img { transform: scale(1.06); }

/* Name — glamorous overlay at bottom of arch */
.door-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3rem 0 1rem;
  text-align: center;
  background: linear-gradient(to top,
    rgba(5,0,15,.80) 0%,
    rgba(5,0,15,.35) 55%,
    transparent      100%);
  font-family: 'Great Vibes', cursive;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: #F5D78E;
  text-shadow:
    0 0 22px rgba(201,164,71,.9),
    0 2px 6px rgba(0,0,0,.7);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: capitalize;
  z-index: 2;
}

/* Ornament rule — sits just above the name */
.door-rule {
  position: absolute;
  bottom: 2.6rem;
  left: 14%; right: 14%;
  z-index: 3;
  display: flex; align-items: center; gap: .5rem;
}
.door-rule span {
  flex: 1; height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(201,164,71,.65), transparent);
}
.door-rule em {
  font-style: normal;
  color: rgba(201,164,71,.8);
  font-size: .65rem; line-height: 1;
}

/* ══ COUPLE PHOTO REVEAL ══════════════════════════════ */
/* Outer row: [branch] [photo+quote] [branch] */
.gate-couple {
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%) translateY(-48%) scale(0.8);
  width: min(700px, 94vw);  /* wide enough for branches + photo           */
  z-index: 8;               /* doors=4, photo=8, petals=9 (fall ON photo) */
  pointer-events: none;
  opacity: 0;               /* JS fades in when doors open                */
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.6rem);
}

/* Centre column — photo + quote */
.couple-main {
  flex: 0 0 auto;
  width: clamp(200px, 36%, 270px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Branch columns */
.gate-branch {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gate-branch svg {
  width: 100%;
  height: auto;
  max-height: clamp(260px, 42vh, 360px);
}
/* Mirror the right branch horizontally */
.gate-branch--right svg { transform: scaleX(-1); }

/* Quote beneath the photo */
.couple-quote {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: rgba(245,215,142,.80);
  text-align: center;
  margin-top: .65rem;
  line-height: 1.45;
  text-shadow: 0 0 22px rgba(201,164,71,.45);
  letter-spacing: .02em;
}

.couple-hashtag {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #F5D78E;
  text-align: center;
  margin: .7rem 0 0;
  line-height: 1.2;
  text-shadow:
    0 0 18px rgba(245,215,142,.80),
    0 0 40px rgba(201,164,71,.50);
  letter-spacing: .01em;
  position: relative;
  z-index: 10;
  padding: .15rem 1.2rem;
}
/* Dark pill sits behind the text, hides the gate seam line */
.couple-hashtag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,1,26,.72);
  border-radius: 2rem;
  z-index: -1;
}
/* Dark pill sits behind the gradient text, hides the gate seam line */
.couple-hashtag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,1,26,.72);
  border-radius: 2rem;
  z-index: -1;
}

/* The arch-shaped image frame — done in pure CSS */
.couple-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;                /* exact match to couple1.jpg 2:3 ratio */
  border-radius: 50% 50% 0 0 / 42% 42% 0 0;  /* dome arch at the top        */
  overflow: hidden;
  /* Multi-layer inset box-shadow for gold arch border + outer glow        */
  box-shadow:
    inset 0 0 0 3px  #C9A447,
    inset 0 0 0 8px  rgba(11,1,26,.7),
    inset 0 0 0 11px rgba(201,164,71,.45),
    0 0 0 2px rgba(201,164,71,.3),
    0 0 45px rgba(201,164,71,.55),      /* gold glow (moved from filter)     */
    0 22px 60px rgba(0,0,0,.9);        /* depth shadow                      */
}
/* Warm golden veil over the photo for depth */
.couple-frame::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%,
    rgba(201,164,71,.13) 0%, transparent 65%);
}
/* Tiny keystone diamond gem at the apex */
.couple-frame::before {
  content: '';
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #F5D78E, #C9A447);
  box-shadow: 0 0 10px rgba(201,164,71,.8);
  z-index: 2;
}

.couple-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}


/* ══ KEYFRAMES ═══════════════════════════════════════════════════════ */
/* शुभ विवाह entrance */
/* gold glow for <img> element */
@keyframes shubhImgGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(212,168,50,.50))
                    drop-shadow(0 2px 24px rgba(201,164,71,.25)); }
  50%     { filter: drop-shadow(0 0 28px rgba(255,220,80,.90))
                    drop-shadow(0 2px 55px rgba(201,164,71,.55)); }
}
@keyframes shubhReveal {
  0%   { opacity:0; transform:scale(.84) translateY(22px); }
  70%  { opacity:1; transform:scale(1.05) translateY(-5px); }
  100% { opacity:1; transform:scale(1)    translateY(0); }
}
/* gold colour pulse — invitation-card warm glow */
  50% {
    color: #FFFDE0;
    text-shadow: 0 0 36px rgba(255,253,224,.95), 0 0 75px rgba(201,164,71,.55),
                 0 0 120px rgba(201,164,71,.20);
  }
}
/* glow halo breath */
  50%     { text-shadow:
    0 0 42px rgba(245,215,142,1),
    0 0 90px rgba(201,164,71,.55),
    0 0 150px rgba(201,164,71,.18); }
}

@keyframes gUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes goldPulse {
  0%,100% { box-shadow: 0 0 32px rgba(201,164,71,.45); }
  50%     { box-shadow: 0 0 58px rgba(201,164,71,.85); }
}
@keyframes ganeshFloat {
  /* In-flow element: just translate Y, no X needed */
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-7px); }
}
@keyframes ganeshGlow {
  0%,100% { filter: drop-shadow(0 0 14px rgba(201,164,71,.55)); }
  50%     { filter: drop-shadow(0 0 36px rgba(245,215,142,.90)); }
}
@keyframes shehnaiShimmer {
  0%,100% { opacity: 0.82; }
  50%     { opacity: 1; }
}
@keyframes garlandDrop {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══ GANESH JI — in normal flex flow on desktop ══════════════════════ */
.gate-ganesh {
  position: relative;            /* in-flow, centred by parent flex  */
  z-index: 6;
  text-align: center;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
  margin-top: clamp(.4rem, 1vh, .9rem);     /* tightened — was clamp(.8rem, 2vh, 1.8rem) */
  margin-bottom: clamp(.5rem, 1.2vh, 1rem); /* tightened — was clamp(1.2rem, 3vh, 2.4rem) */
  animation: ganeshFloat 3.5s ease-in-out infinite,
             ganeshGlow  3.5s ease-in-out infinite;
  transition: opacity 1.2s ease, transform 1.2s ease;
  animation-delay: 0s, 0s;
}
.ganesh-svg {
  width: clamp(100px, 11vw, 150px);   /* was clamp(130px, 18vw, 195px) — too tall on desktop */
  height: auto;
  display: block;
}

/* Mobile-only शुभ विवाह label inside Ganesh element — same shimmer */
.ganesh-shubh-mobile {
  display: none;
  width: min(280px, 88vw);
  height: auto;
  order: 1;
  margin: 0 auto .6rem;
  animation:
    shubhReveal   1.2s cubic-bezier(.22,1,.36,1) .2s both,
    shubhImgGlow  3.6s ease-in-out 1.4s infinite;
}
/* ══ SHEHNAI CORNERS ══════════════════════════════════════════════════ */
.gate-shehnai {
  position: absolute;
  z-index: 5;
  width: clamp(38px, 5.5vw, 68px);
  pointer-events: none;
  animation: shehnaiShimmer 4s ease-in-out infinite;
  transition: opacity 0.8s ease;
}
.gate-shehnai svg { width: 100%; height: auto; display: block; }
/* Top corners: mouthpiece toward corner, bell points inward */
.gshn-tl { top: clamp(8px,2vh,20px);    left: clamp(8px,2vw,20px);  transform: rotate(-35deg); transform-origin: top    left;  }
.gshn-tr { top: clamp(8px,2vh,20px);    right: clamp(8px,2vw,20px); transform: rotate(35deg);  transform-origin: top    right; }
/* Bottom corners: bell at floor, mouthpiece tilts toward center */
.gshn-bl { bottom: clamp(8px,2vh,20px); left: clamp(8px,2vw,20px);  transform: rotate(35deg);  transform-origin: bottom left;  }
.gshn-br { bottom: clamp(8px,2vh,20px); right: clamp(8px,2vw,20px); transform: rotate(-35deg); transform-origin: bottom right; }
/* Stagger shimmer so all 4 don't pulse identically */
.gshn-tr { animation-delay: 0.8s; }
.gshn-bl { animation-delay: 1.6s; }
.gshn-br { animation-delay: 2.4s; }

/* ══ GARLAND / TORAN ══════════════════════════════════════════════════ */
.gate-garland {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 6;
  pointer-events: none;
  transform: translateY(110%);          /* hidden below screen           */
  opacity: 0;
  transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .8s ease;
}
.gate-garland.visible {
  transform: translateY(0);
  opacity: 1;
}
.gate-garland svg {
  width: 100%;
  height: clamp(60px, 12vh, 115px);
  display: block;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .gate-title      { font-size: clamp(2rem, 6vw, 3rem); }
  .gate-enter-btn  { padding: .6rem 1.6rem; }
  .door-inset  {
    width:      clamp(100px, 28vw, 210px);
    max-width:  calc(50vw - 30px);
    max-height: calc(60vh - 80px);
    /* aspect-ratio keeps 2:3 — no height needed */
  }
  .door-name   { font-size: clamp(1.6rem, 3.5vw, 2.4rem); padding: 2.2rem 0 .8rem; }
  .door-rule   { bottom: 2rem; }
  .door-hinge  { width: 18px; height: 44px; }
  .door-handle { width: 24px; height: 24px; }
}

/*
  Mobile: text block moves to the BOTTOM of the screen.
  - Takes it out of flex flow → absolute positioning
  - Gradient flips upward so it fades into the dark bg nicely
  - Couple photo keeps the upper 55% of the screen to itself
  - Enter button sits at thumb-friendly lower zone
*/
@media (max-width: 600px) {
  .gate-top-info {
    position: absolute;
    top: auto; bottom: clamp(2rem, 5vh, 3.5rem); /* lifted off screen bottom */
    left: 0; right: 0;
    max-width: 100%;
    height: auto; /* reset desktop full-height trick */
    padding: 1.4rem 1.2rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      rgba(11,1,26,.97) 0%,
      rgba(11,1,26,.88) 50%,
      rgba(11,1,26,.40) 80%,
      transparent 100%);
    border-radius: 0;
    gap: .25rem;
  }

  /* reset auto-margin — mobile stacks naturally */
  .gate-title { margin-top: 0; background: none; backdrop-filter: none; padding: .1rem .6rem; }
  .gate-date  { margin-top: 0; }

  /* Hide desktop शुभ विवाह in info block — it lives in Ganesh element on mobile */
  .gate-pre          { display: none; }
  .gate-title        { font-size: clamp(2.2rem, 11vw, 3.2rem); margin: 0; }
  .gate-date         { font-size: .75rem; letter-spacing: .14em; margin-bottom: .4rem; }
  .gate-place        { font-size: .75rem; letter-spacing: .14em; margin-top: .4rem; }
  .gate-enter-btn    { padding: .65rem 1.6rem; font-size: .72rem; letter-spacing: .12em; }
  .gate-auto-text    { font-size: .58rem; margin-top: .2rem; }

  /* Ganesh: break OUT of gate-top-info — fixed to viewport top */
  .gate-ganesh {
    position: fixed;
    top: 5vh; left: 50%;
    transform: translateX(-50%);
    animation: ganeshGlow 3.5s ease-in-out infinite;
    flex-direction: column;    /* shubh-mobile text goes ABOVE svg via order */
  }
  .ganesh-svg          { width: clamp(80px, 20vw, 118px); order: 2; }
  .ganesh-shubh-mobile { display: block; order: 1;         /* appears above SVG */ }

  /* Doors tighter on mobile — arch scales down */
  .door-inset  {
    width:     clamp(68px, 28vw, 118px);
    max-width: calc(50vw - 26px);
    max-height: calc(65vh - 80px);
    /* aspect-ratio 2/3 inherited — no explicit height */
  }
  .door-name   { font-size: clamp(1.1rem, 4.5vw, 1.6rem); padding: 1.5rem 0 .45rem; }
  .door-rule   { bottom: 1.2rem; left: 10%; right: 10%; }
  /* Hinges tiny, hide handle on very small */
  .door-hinge  { width: 10px; height: 26px; }
  .door-handle { width: 14px; height: 14px; }

  /* Shehnai smaller */
  .gate-shehnai { width: clamp(26px, 5.5vw, 40px); }

  /* Photo: no branches on mobile */
  .gate-branch  { display: none; }
  .couple-main  { width: 100%; }
  .gate-couple  { top: 38%; width: min(200px, 56vw); gap: 0; }
  .couple-quote { font-size: clamp(.85rem, 4.5vw, 1.05rem); margin-top: .5rem; }
  .couple-hashtag { font-size: clamp(1.6rem, 8vw, 2.1rem); margin-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-door       { transition-duration: .01ms !important; }
  .petal-css       { animation: none !important; }
  .gate-ganesh     { animation: none !important; }
  .gate-shehnai    { animation: none !important; }
}