/* =====================================================================
   Padmasaliyar Matrimonial — Coming Soon / pre-launch page
   Standalone: shares no CSS with the main site, so nothing here can
   change how the site itself looks after launch.
   ===================================================================== */

:root {
  --maroon: #7a1a2b;
  --maroon-deep: #4f0f1b;
  --gold: #c9973f;
  --gold-light: #e8c77a;
  --gold-deep: #8a611f;
  --cream: #fbf4e6;
  --ivory: #fffaf0;
  --beige: #efe2c9;
  --ink: #3a2a22;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cinzel', 'Cormorant Garamond', 'Times New Roman', serif;
  --wide: 'Montserrat', 'Inter', system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.cs {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   AnimatedBackground
   --------------------------------------------------------------------- */
.cs-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.cs-photo {
  position: absolute; inset: -3%;
  background: var(--cream) url('/assets/img/coming-soon-bg.jpg?v=2') center center / cover no-repeat;
  animation: cs-zoom 38s ease-in-out infinite alternate;
  transition: filter 1.6s ease;
  will-change: transform;
}
@keyframes cs-zoom {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1%, -1%, 0); }
}

/* keeps the centre calm and readable whatever the photo does */
.cs-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 52% at 50% 46%, rgba(255, 250, 240, .55) 0%, rgba(255, 250, 240, .25) 60%, rgba(255, 250, 240, 0) 100%),
    linear-gradient(to bottom, rgba(251, 244, 230, .25), rgba(251, 244, 230, 0) 30%, rgba(251, 244, 230, 0) 75%, rgba(239, 226, 201, .45));
}

/* a slow, warm light drifting across */
.cs-light {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 30% 40%, rgba(255, 214, 140, .28), rgba(255, 214, 140, 0) 38%);
  mix-blend-mode: soft-light;
  animation: cs-light 22s ease-in-out infinite alternate;
}
@keyframes cs-light {
  from { transform: translate3d(-8%, -4%, 0); }
  to   { transform: translate3d(18%, 8%, 0); }
}

.cs-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* petals are generated by animated-background.js */
.cs-petals { position: absolute; inset: 0; }
.cs-petal {
  position: absolute; top: -40px; left: var(--x);
  width: var(--w); height: calc(var(--w) * 1.3);
  border-radius: 150% 0 150% 0;
  background: var(--c);
  opacity: 0;
  animation: cs-fall var(--t) linear var(--delay) infinite;
  filter: drop-shadow(0 2px 2px rgba(79, 15, 27, .18));
}
.cs-petal--once { animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes cs-fall {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8%   { opacity: .9; }
  50%  { transform: translate3d(var(--drift), 55vh, 0) rotate(calc(var(--spin) * .5)); }
  90%  { opacity: .85; }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * -.4), 112vh, 0) rotate(var(--spin)); }
}

/* The photo has its own curtains, pillar, lamp and couple. These drawn
   ones are only for tall narrow (phone) screens, where the photo is
   cropped to its plain centre — see the portrait media query below. */
.cs-valance, .cs-curtain, .cs-garland { display: none; }

/* burgundy scalloped valance with a gold edge along the very top */
.cs-valance {
  position: absolute; top: 0; left: 0; right: 0; height: clamp(22px, 3.2vw, 38px);
  background:
    radial-gradient(circle at 50% 0, #6b1526 0 64%, var(--gold) 64% 70%, transparent 71%) 0 0 / clamp(34px, 4.4vw, 56px) 100% repeat-x;
  filter: drop-shadow(0 3px 4px rgba(79, 15, 27, .28));
}
.cs-valance::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--gold), var(--gold-light), var(--gold-deep));
}

/* curtains swagged back at the top corners */
.cs-curtain {
  position: absolute; top: 0;
  width: clamp(110px, 24vw, 340px); height: auto;
  filter: drop-shadow(0 10px 18px rgba(79, 15, 27, .35));
  transform-origin: top left;
  animation: cs-sway 9s ease-in-out infinite alternate;
}
.cs-curtain--left  { left: 0; }
.cs-curtain--right { right: 0; transform: scaleX(-1); transform-origin: 50% 0; animation-name: cs-sway-r; }
@keyframes cs-sway   { from { transform: rotate(0deg); }             to { transform: rotate(.8deg); } }
@keyframes cs-sway-r { from { transform: scaleX(-1) rotate(0deg); }  to { transform: scaleX(-1) rotate(.8deg); } }
.cs-tassel { animation: cs-tassel 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes cs-tassel { from { rotate: -3deg; } to { rotate: 3deg; } }

/* jasmine strings with a marigold every few flowers */
.cs-garland {
  position: absolute; top: 0; width: 10px;
  height: var(--len);
  background:
    radial-gradient(circle, #f29a1f 0 4px, rgba(242, 154, 31, 0) 4.4px) 50% 0 / 10px 55px repeat-y,
    radial-gradient(circle, #fffdf6 0 3.2px, rgba(255, 253, 246, 0) 3.6px) 50% 0 / 10px 11px repeat-y;
  filter: drop-shadow(0 1px 1px rgba(90, 60, 20, .35));
  transform-origin: top center;
  animation: cs-swing var(--sw, 7s) ease-in-out infinite alternate;
}
.cs-garland::after {
  content: ''; position: absolute; left: -2px; bottom: -8px; width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffc24a, #e8841a 60%, #b85a0c);
}
.cs-garland--l1 { left: clamp(10px, 2.2vw, 30px);  --len: 44vh; --sw: 7s; }
.cs-garland--l2 { left: clamp(26px, 4.6vw, 64px);  --len: 30vh; --sw: 8.5s; }
.cs-garland--r1 { right: clamp(10px, 2.2vw, 30px); --len: 44vh; --sw: 7.6s; }
.cs-garland--r2 { right: clamp(26px, 4.6vw, 64px); --len: 30vh; --sw: 9s; }
@keyframes cs-swing { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }

/* ---------------------------------------------------------------------
   ComingSoonPage — content
   --------------------------------------------------------------------- */
.cs-main {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(56px, 9vh, 96px) 16px clamp(28px, 5vh, 56px);
  max-width: 820px; margin: 0 auto;
  transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}

.cs-crest {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: min(560px, 86vw);
}
.cs-crest-line { flex: 1; height: 1.5px; background: linear-gradient(90deg, rgba(201, 151, 63, 0), var(--gold)); position: relative; }
.cs-crest-line:last-child { background: linear-gradient(90deg, var(--gold), rgba(201, 151, 63, 0)); }
.cs-crest-line::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
.cs-crest-line:first-child::after { right: -2px; }
.cs-crest-line:last-child::after { left: -2px; }
.cs-crest .cs-crest-line { opacity: 0; animation: cs-up 1.2s ease .2s forwards; }

.cs-logo {
  width: clamp(64px, 8vw, 92px); height: auto;
  opacity: 0; transform: scale(.86);
  animation: cs-logo 1.4s cubic-bezier(.2, .7, .2, 1) .05s forwards,
             cs-float 6s ease-in-out 1.6s infinite alternate;
  filter: drop-shadow(0 6px 14px rgba(138, 97, 31, .28));
}
@keyframes cs-logo  { to { opacity: 1; transform: scale(1); } }
@keyframes cs-float { from { translate: 0 0; } to { translate: 0 -6px; } }

.cs-reveal {
  opacity: 0; transform: translateY(18px);
  animation: cs-up 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;
}
@keyframes cs-up { to { opacity: 1; transform: none; } }

.cs-rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: min(340px, 72vw); margin: clamp(10px, 2vh, 16px) auto;
}
.cs-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.cs-rule i {
  width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 151, 63, .18);
  animation: cs-float 5s ease-in-out infinite alternate;
}
.cs-rule--sm { width: min(240px, 56vw); }

.cs-brand { margin: 0; line-height: 1; }
.cs-brand-name {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(32px, 6.6vw, 72px);
  letter-spacing: .03em;
  background: linear-gradient(180deg, #9a2a3f 0%, var(--maroon) 45%, var(--maroon-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 250, 240, .8));
}
.cs-brand-sub {
  display: block; margin-top: .4em;
  font-family: var(--wide); font-weight: 500;
  font-size: clamp(14px, 2.5vw, 30px);
  letter-spacing: .32em; padding-left: .32em; /* balance the trailing letter-space */
  color: var(--maroon-deep);
}

.cs-title {
  margin: clamp(4px, 1vh, 10px) 0 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(36px, 7.6vw, 84px);
  line-height: 1.05; letter-spacing: .02em;
  background: linear-gradient(180deg, #a3263d 0%, var(--maroon) 50%, #5a1020 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 250, 240, .85)) drop-shadow(0 8px 18px rgba(122, 26, 43, .16));
}

.cs-tagline {
  margin: 0;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.6vw, 28px);
  color: var(--maroon-deep);
}

/* ---------------------------------------------------------------------
   CountdownTimer
   --------------------------------------------------------------------- */
.cs-countdown {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
  width: min(640px, 100%);
  margin: clamp(22px, 4.4vh, 40px) auto 0;
  transition: opacity .9s ease, transform .9s ease;
}
.cs-unit {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(12px, 2.4vw, 22px) 4px clamp(10px, 1.8vw, 16px);
  border-radius: clamp(12px, 2vw, 20px);
  background: linear-gradient(160deg, rgba(255, 252, 245, .78), rgba(255, 246, 228, .52));
  border: 1px solid rgba(201, 151, 63, .75);
  box-shadow:
    inset 0 0 0 3px rgba(255, 250, 240, .55),
    inset 0 0 0 4px rgba(201, 151, 63, .28),
    0 10px 28px rgba(79, 15, 27, .12), 0 2px 6px rgba(79, 15, 27, .08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow: hidden;
}
.cs-unit::before { /* soft top highlight — the glass */
  content: ''; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.cs-num {
  position: relative; display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(32px, 8.4vw, 68px);
  line-height: 1; font-variant-numeric: lining-nums tabular-nums;
  color: var(--maroon);
}
.cs-num.is-tick { animation: cs-tick .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes cs-tick {
  0%   { opacity: 0; transform: translateY(-35%); text-shadow: 0 0 0 rgba(232, 199, 122, 0); }
  45%  { opacity: 1; text-shadow: 0 0 18px rgba(232, 199, 122, .95); }
  100% { transform: none; text-shadow: 0 0 0 rgba(232, 199, 122, 0); }
}
.cs-label {
  margin-top: clamp(6px, 1vw, 10px);
  font-size: clamp(9px, 1.5vw, 12px); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-deep);
}

.cs-date {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 16px; max-width: calc(100% - 28px);
  margin: clamp(16px, 2.6vh, 24px) auto clamp(4px, 1vh, 8px);
  padding: 12px clamp(22px, 4.4vw, 44px);
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0%, #9a2a3f, var(--maroon) 55%, var(--maroon-deep));
  border: 1.5px solid var(--gold);
  box-shadow: inset 0 0 0 3px var(--maroon-deep), inset 0 0 0 4px rgba(232, 199, 122, .7), 0 10px 26px rgba(79, 15, 27, .28);
  color: var(--ivory);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(14px, 2.2vw, 24px); letter-spacing: .06em;
  font-variant-numeric: lining-nums;
}
/* the pointed gold ends of the plaque */
.cs-date::before, .cs-date::after {
  content: ''; position: absolute; top: 50%; width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border: 3px solid var(--maroon-deep);
  outline: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.cs-date::before { left: -11px; }
.cs-date::after  { right: -11px; }
.cs-date i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); }

.cs-contact {
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-size: 13px; color: rgba(58, 42, 34, .78);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
}
.cs-contact a { color: var(--maroon); text-decoration: none; overflow-wrap: anywhere; }
.cs-contact a:hover, .cs-contact a:focus-visible { text-decoration: underline; }
.cs-contact a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.cs-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   LaunchAnimation
   --------------------------------------------------------------------- */
.cs-launch {
  position: fixed; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center; pointer-events: none;
}
.cs-launch[hidden] { display: none; }
.cs-launch-logo {
  width: clamp(80px, 12vw, 120px); height: auto;
  opacity: 0; transform: scale(.6);
  filter: drop-shadow(0 8px 20px rgba(138, 97, 31, .35));
}
.cs-launch-welcome {
  margin: 18px 0 0; opacity: 0; transform: translateY(12px);
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(13px, 2vw, 18px); letter-spacing: .6em; padding-left: .6em;
  color: var(--gold-deep);
}
.cs-launch-brand {
  margin: 12px 0 0; opacity: 0; transform: scale(.82);
  font-family: var(--serif); font-weight: 700; line-height: 1.05;
  color: var(--maroon);
}
.cs-launch-brand span { display: block; }
.cs-launch-brand span:first-child { font-size: clamp(36px, 8vw, 84px); letter-spacing: .04em; }
.cs-launch-brand span:last-child  { font-size: clamp(16px, 2.6vw, 26px); letter-spacing: .5em; padding-left: .5em; font-family: var(--sans); font-weight: 500; color: var(--ink); margin-top: .5em; }

/* the sequence, step by step (launch-animation.js adds the classes) */
.is-launching .cs-countdown,
.is-launching .cs-date,
.is-launching .cs-contact { opacity: 0 !important; transform: scale(.94) !important; transition: opacity .9s ease, transform .9s ease; }
.is-launching .cs-main { opacity: 0; transform: scale(.97); transition-delay: .5s; }
.is-launching .cs-photo { filter: brightness(1.12) saturate(1.06); }
.is-launching .cs-veil { transition: opacity 1.6s ease; opacity: .75; }

.is-welcome .cs-launch-logo    { animation: cs-in-scale 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
.is-welcome .cs-launch-welcome { animation: cs-up 1s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
.is-welcome .cs-launch-brand   { animation: cs-in-scale 1.3s cubic-bezier(.2, .7, .2, 1) .9s forwards; }
@keyframes cs-in-scale { to { opacity: 1; transform: scale(1); } }

.is-leaving .cs-bg,
.is-leaving .cs-launch { transition: opacity .9s ease, transform 1.1s ease; opacity: 0; transform: scale(1.06); }

/* ---------------------------------------------------------------------
   Small and short screens
   --------------------------------------------------------------------- */
@media (max-width: 700px) and (orientation: portrait) {
  .cs-valance, .cs-curtain, .cs-garland { display: block; }
  .cs-garland--l2, .cs-garland--r2 { display: none; }
}
@media (max-width: 600px) {
  .cs-garland--l2, .cs-garland--r2 { display: none; }
  .cs-garland--l1, .cs-garland--r1 { --len: 26vh; }
  .cs-veil {
    background:
      radial-gradient(ellipse 90% 60% at 50% 50%, rgba(255, 250, 240, .9) 0%, rgba(255, 250, 240, .6) 60%, rgba(255, 250, 240, .15) 100%);
  }
  .cs-label { letter-spacing: .14em; }
  .cs-contact { font-size: 12px; }
  .cs-date { flex-wrap: nowrap; white-space: nowrap; gap: 10px; padding: 11px 22px; font-size: clamp(11px, 3.5vw, 15px); letter-spacing: .03em; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .cs-main { padding-top: 44px; padding-bottom: 18px; }
  .cs-logo { width: 52px; }
  .cs-rule { margin: 6px auto; }
  .cs-brand-name { font-size: clamp(26px, 5vw, 44px); }
  .cs-title { font-size: clamp(28px, 6vw, 52px); }
  .cs-tagline { font-size: 16px; margin-top: 4px; }
  .cs-countdown { margin-top: 12px; width: min(520px, 100%); }
  .cs-num { font-size: clamp(24px, 5vw, 40px); }
  .cs-unit { padding: 8px 4px; }
  .cs-date { margin-top: 12px; padding: 7px 18px; font-size: 15px; }
  .cs-contact { display: none; }
  .cs-garland { --len: 22vh !important; }
}

/* ---------------------------------------------------------------------
   Reduced motion: keep the page and the countdown, drop the movement
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs-photo, .cs-light, .cs-curtain, .cs-tassel, .cs-garland, .cs-rule i { animation: none !important; }
  .cs-curtain--right { transform: scaleX(-1); }
  .cs-petals, .cs-particles { display: none; }
  .cs-logo, .cs-reveal { animation: none !important; opacity: 1; transform: none; }
  .cs-num.is-tick { animation: none; }
  .is-welcome .cs-launch-logo,
  .is-welcome .cs-launch-welcome,
  .is-welcome .cs-launch-brand { animation: cs-fade .6s ease forwards; transform: none; }
  @keyframes cs-fade { to { opacity: 1; } }
  .is-leaving .cs-bg, .is-leaving .cs-launch { transform: none; }
}