/* ═══════════════════════════════════════════════════════════════════════
   DNH & DD MONSOON FESTIVAL 2026 — Daman
   Holding page: logo + "content coming soon".
   Palette sampled directly from the official logo.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand — sampled from assets/img/logo.png.
     `*-ink` variants are darkened so they clear 4.5:1 on --paper. */
  --navy:      #1C3362;
  --navy-deep: #142547;
  --teal:      #139597;
  --teal-ink:  #0D6E70;
  --coral:     #DE5853;
  --coral-ink: #B3312C;
  --amber:     #F39D29;

  --paper:     #F9F4EF;
  --surface:   #FFFFFF;
  --ink:       #1C3362;
  --ink-2:     #4A5A75;
  --ink-3:     #5A6880;
  --line:      #E6E1D9;

  --font-display: "Fredoka", ui-rounded, "SF Pro Rounded", "Avenir Next Rounded",
                  "Hiragino Maru Gothic ProN", Avenir, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 44px);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}


/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 46% at 82% 2%,  rgba(243, 157, 41, .16), rgba(243, 157, 41, 0) 60%),
    radial-gradient(62% 48% at 6% 0%,   rgba(19, 149, 151, .17), rgba(19, 149, 151, 0) 58%),
    radial-gradient(80% 40% at 50% 100%, rgba(222, 88, 83, .10), rgba(222, 88, 83, 0) 62%),
    linear-gradient(180deg, #E9F2F2 0%, #F6F2EC 46%, var(--paper) 100%);
  background-attachment: fixed;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.006em;
}
p { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ── Rain ────────────────────────────────────────────────────────── */
/* Fixed behind everything, deliberately faint. Removed entirely under
   prefers-reduced-motion (see the bottom of this file). */
.rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}


/* ── Layout ──────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}


/* ── Logo block ──────────────────────────────────────────────────── */
.block-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(36px, 6vh, 64px) clamp(20px, 3vh, 36px);
}

.logo-wrap { margin: 0; }
.logo {
  /* Capped by height as well as width so the whole page still clears the
     fold on short laptop screens. */
  width: min(100%, 560px);
  max-height: 34vh;
  height: auto;
  object-fit: contain;
  animation: rise .8s var(--ease) both;
}

/* Fallback wordmark if assets/img/logo.png is ever missing. */
.logo-wrap.is-empty .logo { display: none; }
.logo-wrap.is-empty::after {
  content: "DNH & DD Monsoon Festival 2026";
  display: block;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.08;
  color: var(--navy);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* ── Wave divider ────────────────────────────────────────────────── */
.wave {
  width: 100%;
  height: clamp(40px, 5vw, 76px);
  color: var(--surface);
  pointer-events: none;
}


/* ── Coming soon block ───────────────────────────────────────────── */
.block-soon {
  max-width: none;
  padding-block: clamp(32px, 4.5vw, 56px) clamp(36px, 5vw, 64px);
  background: var(--surface);
}
.block-soon > * {
  max-width: 620px;
  margin-inline: auto;
}

.kicker {
  margin-bottom: clamp(14px, 1.6vw, 20px);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

.soon-title {
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.7rem);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
/* Three brand-coloured dots trailing the heading — the only ornament here. */
.soon-title::after {
  content: "";
  display: block;
  width: 74px;
  height: 6px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--teal) 0 33.33%, var(--coral) 33.33% 66.66%, var(--amber) 66.66% 100%);
}

.soon-lead {
  font-size: clamp(1.04rem, .98rem + .38vw, 1.22rem);
  color: var(--ink-2);
}

.soon-tag {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  font-weight: 500;
  color: var(--coral-ink);
}


/* ── Footer ──────────────────────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 28px) var(--gutter);
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .68);
  font-size: .82rem;
  text-align: center;
}
.foot :focus-visible { outline-color: var(--amber); }


/* ── Reduced motion / print ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rain { display: none; }
}

@media print {
  .rain { display: none !important; }
  body { background: #fff; color: #000; }
  .foot { background: #fff; color: #000; }
}