/* -----------------------------------------------------------
   Tokens
----------------------------------------------------------- */
:root{
  --cream:      #F7EFDA;
  --cream-alt:  #EFE1BC;
  --maroon:     #7A1B2B;
  --gold:       #A9791E;
  --gold-light: #C9A227;
  --ink:        #3B2A1E;
  --ink-soft:   #6B5842;

  --tamil-head: 'Noto Serif Tamil', serif;
  --tamil-body: 'Noto Sans Tamil', sans-serif;
  --accent-font:'Cormorant Garamond', serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--tamil-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* -----------------------------------------------------------
   Layout shell
----------------------------------------------------------- */
.scroll{
  max-width:640px;
  margin:0 auto;
  position:relative;
}

.panel{
  padding:56px 30px;
  text-align:center;
  position:relative;
}
.panel:nth-of-type(odd){ background:var(--cream); }
.panel:nth-of-type(even){ background:var(--cream-alt); }

.section-heading{
  font-family:var(--tamil-head);
  font-weight:700;
  font-size:1.5rem;
  color:var(--maroon);
  margin:0 0 22px;
}

.gopuram-divider{
  max-width:640px;
  margin:0 auto;
  background:var(--cream-alt);
  line-height:0;
}
.gopuram-divider svg{ width:100%; height:auto; display:block; }

/* -----------------------------------------------------------
   Ambient jasmine petals (subtle, continuous, low opacity)
----------------------------------------------------------- */
.petals{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.petals span{
  position:absolute; top:-20px;
  width:8px; height:8px;
  background:#FFFDF6;
  border:1px solid #E9DDB8;
  border-radius:50% 0 50% 50%;
  opacity:0.55;
  animation:fall linear infinite;
}
.petals span:nth-child(1){ left:8%;  animation-duration:16s; animation-delay:0s; }
.petals span:nth-child(2){ left:22%; animation-duration:21s; animation-delay:3s; }
.petals span:nth-child(3){ left:41%; animation-duration:18s; animation-delay:6s; }
.petals span:nth-child(4){ left:63%; animation-duration:24s; animation-delay:1s; }
.petals span:nth-child(5){ left:80%; animation-duration:19s; animation-delay:5s; }
.petals span:nth-child(6){ left:92%; animation-duration:22s; animation-delay:9s; }

@keyframes fall{
  0%   { transform:translateY(-5vh) rotate(0deg);   opacity:0; }
  10%  { opacity:0.55; }
  90%  { opacity:0.5; }
  100% { transform:translateY(105vh) rotate(220deg); opacity:0; }
}

/* -----------------------------------------------------------
   Hero
----------------------------------------------------------- */
.hero{
  padding:34px 18px 46px;
}
.ornate-frame{
  position:relative;
  border:2px solid var(--gold);
  padding:40px 24px 34px;
  background:
    radial-gradient(ellipse at top, rgba(201,162,39,0.10), transparent 60%),
    var(--cream);
}
.ornate-frame::before{
  content:"";
  position:absolute; inset:8px;
  border:1px solid rgba(169,121,30,0.5);
  pointer-events:none;
}
.corner{ position:absolute; width:52px; height:52px; }
.corner-tl{ top:-2px; left:-2px; }
.corner-tr{ top:-2px; right:-2px; transform:scaleX(-1); }
.corner-bl{ bottom:-2px; left:-2px; transform:scaleY(-1); }
.corner-br{ bottom:-2px; right:-2px; transform:scale(-1,-1); }

.ganapathi{
  font-family:var(--tamil-head);
  font-size:1rem;
  color:var(--maroon);
  letter-spacing:0.5px;
  margin:6px 0 18px;
}

.diya{ margin:0 auto 6px; width:34px; }
.flame{ transform-origin:30px 45px; animation:flicker 2.4s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ transform:scaleY(1) translateX(0); }
  30%    { transform:scaleY(1.08) translateX(1px); }
  55%    { transform:scaleY(0.94) translateX(-1px); }
  80%    { transform:scaleY(1.05) translateX(0.5px); }
}

.invite-title{
  font-family:var(--tamil-head);
  font-weight:700;
  font-size:2.1rem;
  color:var(--maroon);
  margin:8px 0 26px;
}

.couple-photo-wrap{
  width:190px; height:190px;
  margin:0 auto 24px;
  border-radius:50%;
  padding:6px;
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
}
.couple-photo{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--cream);
  display:block;
}

.couple-names{
  font-family:var(--accent-font);
  font-style:italic;
  font-weight:600;
  font-size:2.1rem;
  color:var(--ink);
  margin:0 0 8px;
}
.couple-names .amp{
  color:var(--gold);
  font-family:var(--tamil-head);
  font-style:normal;
  margin:0 12px;
}

.hero-sub{
  font-family:var(--tamil-body);
  font-size:0.95rem;
  color:var(--ink-soft);
  letter-spacing:0.5px;
  margin:0;
}

/* single orchestrated entrance sequence */
.reveal{
  opacity:0;
  transform:translateY(10px);
  animation:rise 0.8s cubic-bezier(.2,.7,.3,1) forwards;
}
.ganapathi{        animation-delay:0.05s; }
.diya{              animation-delay:0.25s; }
.invite-title{      animation-delay:0.40s; }
.couple-photo-wrap{ animation-delay:0.60s; }
.couple-names{      animation-delay:0.80s; }
.hero-sub{          animation-delay:0.95s; }
@keyframes rise{
  to{ opacity:1; transform:translateY(0); }
}

/* -----------------------------------------------------------
   Deities
----------------------------------------------------------- */
.deity-list{
  list-style:none; margin:0 0 18px; padding:0;
  font-family:var(--tamil-head);
  color:var(--maroon);
  font-size:1rem;
  line-height:2;
}
.temple-line{
  font-size:0.95rem;
  color:var(--gold);
  letter-spacing:0.5px;
}

/* -----------------------------------------------------------
   Invitation text (parchment)
----------------------------------------------------------- */
.parchment{
  border:1px solid var(--gold);
  padding:34px 26px;
  background:
    repeating-linear-gradient(135deg, rgba(169,121,30,0.03) 0 2px, transparent 2px 14px),
    #FBF5E5;
}
.invite-text{
  font-family:var(--tamil-head);
  font-size:1.15rem;
  line-height:2.1;
  color:var(--ink);
  margin:0;
}

/* -----------------------------------------------------------
   Couple name card
----------------------------------------------------------- */
.name-card{
  display:flex; align-items:center; justify-content:center;
  gap:22px; flex-wrap:wrap;
}
.name-block{ flex:1 1 200px; min-width:180px; }
.rel-title{
  font-family:var(--tamil-body);
  font-size:0.85rem;
  color:var(--ink-soft);
  margin:0 0 4px;
}
.full-name{
  font-family:var(--tamil-head);
  font-weight:700;
  font-size:1.35rem;
  color:var(--maroon);
  margin:0 0 4px;
}
.qual{
  font-family:var(--accent-font);
  font-style:italic;
  font-size:0.95rem;
  color:var(--gold);
  margin:0;
}
.lamp-divider{ flex:0 0 auto; }

/* -----------------------------------------------------------
   Date panel
----------------------------------------------------------- */
.suba-muhurtham{
  font-family:var(--tamil-head);
  font-weight:700;
  font-size:1.4rem;
  color:var(--maroon);
  margin:0 0 26px;
}
.countdown{
  display:flex; justify-content:center; gap:14px;
  margin:0 0 30px;
}
.countdown div{
  background:var(--cream);
  border:1px solid var(--gold);
  padding:10px 6px;
  min-width:58px;
}
.countdown span{
  display:block;
  font-family:var(--accent-font);
  font-weight:600;
  font-size:1.5rem;
  color:var(--maroon);
}
.countdown small{
  font-size:0.68rem;
  color:var(--ink-soft);
}
.big-date{
  font-family:var(--accent-font);
  font-weight:600;
  font-size:2.4rem;
  color:var(--gold);
  margin:0;
}
.day-name{
  font-family:var(--tamil-head);
  font-size:1.05rem;
  color:var(--ink);
  margin:2px 0 20px;
}
.muhurtham-time{
  font-family:var(--tamil-head);
  font-size:1.05rem;
  color:var(--maroon);
  margin:0;
}

/* -----------------------------------------------------------
   Venue
----------------------------------------------------------- */
.venue-name{
  font-family:var(--tamil-head);
  font-weight:600;
  font-size:1.2rem;
  color:var(--ink);
  margin:0 0 10px;
}
.venue-address{
  font-size:0.98rem;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0 0 26px;
}
.map-btn{
  display:inline-block;
  font-family:var(--tamil-body);
  font-size:0.95rem;
  color:var(--cream);
  background:var(--maroon);
  padding:12px 26px;
  text-decoration:none;
  letter-spacing:0.3px;
  transition:background 0.2s ease;
}
.map-btn:hover, .map-btn:focus-visible{ background:#5e1420; }
.map-btn span{ margin-left:6px; }

/* -----------------------------------------------------------
   Gallery
----------------------------------------------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.gallery-grid img{
  width:100%; height:220px; object-fit:cover;
  border:1px solid var(--gold);
}

/* -----------------------------------------------------------
   Wishes form
----------------------------------------------------------- */
.wishes-panel form{
  display:flex; flex-direction:column; gap:12px;
  max-width:420px; margin:0 auto;
}
.wishes-panel input,
.wishes-panel textarea{
  font-family:var(--tamil-body);
  font-size:0.95rem;
  padding:12px 14px;
  border:1px solid var(--gold);
  background:var(--cream);
  color:var(--ink);
  resize:vertical;
}
.wishes-panel input:focus,
.wishes-panel textarea:focus{
  outline:2px solid var(--maroon);
  outline-offset:1px;
}
.wishes-panel button{
  font-family:var(--tamil-body);
  font-size:0.95rem;
  padding:12px 14px;
  background:var(--maroon);
  color:var(--cream);
  border:none;
  cursor:pointer;
  transition:background 0.2s ease;
}
.wishes-panel button:hover, .wishes-panel button:focus-visible{ background:#5e1420; }
.wish-status{
  font-size:0.85rem;
  min-height:1.2em;
  color:var(--gold);
  margin:0;
}
.wishes-list{
  list-style:none;
  margin:26px 0 0; padding:0;
  max-width:420px; margin-left:auto; margin-right:auto;
  text-align:left;
}
.wishes-list li{
  border-bottom:1px solid rgba(169,121,30,0.3);
  padding:10px 4px;
  font-size:0.92rem;
}
.wishes-list li b{ color:var(--maroon); }

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.footer-panel{ padding:44px 30px 58px; }
.thanks{
  font-family:var(--tamil-head);
  font-weight:700;
  font-size:1.6rem;
  color:var(--maroon);
  margin:0 0 8px;
}
.footer-names{
  font-family:var(--accent-font);
  font-style:italic;
  font-size:1.1rem;
  color:var(--gold);
  margin:0;
}

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */
@media (max-width:480px){
  .panel{ padding:44px 18px; }
  .invite-title{ font-size:1.7rem; }
  .couple-names{ font-size:1.7rem; }
  .big-date{ font-size:1.9rem; }
  .countdown{ gap:8px; }
  .countdown div{ min-width:48px; padding:8px 4px; }
  .gallery-grid img{ height:170px; }
}