/* ═══════════════════════════════════════════════════════════════
   4th Installation Ceremony — Rotaract Club of Gampaha
   Palette & type taken from the event flyer:
   midnight navy, velvet blue drapes, moonlit white, soft gold.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #03060f;   /* deepest background            */
  --navy:       #0a1330;   /* midnight blue                 */
  --velvet:     #111c44;   /* drape fabric                  */
  --moon:       #f4f7ff;   /* primary text                  */
  --moon-dim:   #b9c4e0;   /* secondary text                */
  --gold:       #d9b872;   /* hairlines, accents            */
  --gold-soft:  rgba(217, 184, 114, 0.35);
  --glow:       rgba(150, 190, 255, 0.55);

  --font-script:  'Great Vibes', cursive;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Montserrat', system-ui, -apple-system, sans-serif;

  --maxw: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--moon);
  background:
    radial-gradient(ellipse 58% 40% at 50% 34%, #16265e 0%, transparent 68%),
    radial-gradient(ellipse 120% 60% at 50% 100%, #0a1030 0%, transparent 72%),
    linear-gradient(180deg, #02040c 0%, #071027 38%, #0a1230 62%, #04070f 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ── Atmosphere ──────────────────────────────────────────────── */
#stars {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

.drape {
  position: fixed;
  top: 0; bottom: 0;
  width: 30vw; max-width: 420px;
  z-index: 0; pointer-events: none;
  opacity: 1;
}
.drape--left {
  left: 0;
  background:
    radial-gradient(75% 55% at -10% 88%, rgba(58,84,175,0.55) 0%, rgba(24,38,95,0.32) 45%, transparent 76%),
    radial-gradient(45% 38% at 18% 100%, rgba(78,106,200,0.34) 0%, transparent 70%),
    linear-gradient(100deg, rgba(26,42,100,0.50) 0%, rgba(10,17,44,0.26) 42%, transparent 74%);
  filter: blur(10px);
}
.drape--right {
  right: 0;
  background:
    radial-gradient(75% 55% at 110% 88%, rgba(58,84,175,0.55) 0%, rgba(24,38,95,0.32) 45%, transparent 76%),
    radial-gradient(45% 38% at 82% 100%, rgba(78,106,200,0.34) 0%, transparent 70%),
    linear-gradient(260deg, rgba(26,42,100,0.50) 0%, rgba(10,17,44,0.26) 42%, transparent 74%);
  filter: blur(10px);
}

.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 70% at 50% 45%, transparent 40%, rgba(2,4,12,0.72) 100%);
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 1.75rem 1.25rem 3rem;
}

/* Club lockup */
.club {
  width: clamp(190px, min(30vw, 24svh), 300px);
  height: auto;
  margin: 0 auto clamp(1.75rem, 5vh, 3rem);
  /* The mark is pure white; soften it so it sits behind the headline. */
  opacity: 0.92;
  filter: drop-shadow(0 0 18px rgba(150, 190, 255, 0.28));
}

.welcome {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, min(5.6vw, 5.4svh), 3.4rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.25;
  text-shadow: 0 0 34px var(--glow);
}

.tothe {
  font-family: var(--font-script);
  font-size: clamp(1.05rem, min(3vw, 2.8svh), 1.75rem);
  margin: clamp(0.5rem, 1.6vh, 1rem) 0 0;
  color: var(--moon);
  text-shadow: 0 0 26px var(--glow);
}

/* The big "4th" */
.numeral {
  position: relative;
  margin: clamp(0.1rem, 1vh, 0.5rem) 0 clamp(0.4rem, 1.4vh, 0.9rem);
  line-height: 1;
}
.numeral::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(200px, min(42vw, 40svh), 460px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(96,145,255,0.30) 0%, rgba(40,70,170,0.14) 42%, transparent 70%);
  z-index: -1;
  animation: breathe 6s var(--ease) infinite;
}
.numeral__four {
  font-family: var(--font-script);
  font-size: clamp(4.6rem, min(19vw, 17svh), 11.5rem);
  line-height: 0.85;
  display: inline-block;
  text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 60px var(--glow), 0 0 110px rgba(90,140,255,0.35);
}
.numeral__ord {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.15rem, min(4.2vw, 4svh), 2.6rem);
  vertical-align: super;
  margin-left: -0.1em;
  text-shadow: 0 0 20px var(--glow);
}

@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

/* Title */
.title { margin: 0; }
.title__main, .title__sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,255,255,0.45), 0 0 46px var(--glow);
}
.title__main {
  font-size: clamp(1.7rem, min(7.2vw, 7svh), 4.1rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.title__sub {
  font-size: clamp(1.3rem, min(5.4vw, 5.2svh), 3.1rem);
  letter-spacing: 0.03em;
  margin-top: 0.1em;
}

/* Ornamental divider */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem;
  width: min(420px, 78vw);
  margin: clamp(1rem, 2.6vh, 1.8rem) auto;
}
.ornament--sm { width: min(260px, 60vw); margin: 0 auto 1.6rem; }
.ornament__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 35%, var(--gold) 100%);
}
.ornament__line:last-child {
  background: linear-gradient(270deg, transparent, var(--gold-soft) 35%, var(--gold) 100%);
}
.ornament__diamond {
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--gold-soft);
}

.of {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: var(--moon-dim);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
}
.honoree {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, min(3.8vw, 3.4svh), 1.95rem);
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 0 30px rgba(120,165,255,0.35);
}
.honoree span { font-weight: 500; }

/* Facts */
.facts {
  display: flex; flex-wrap: wrap;
  align-items: stretch; justify-content: center;
  gap: 0;
  margin: clamp(1.4rem, 3.6vh, 2.4rem) 0 0;
  padding: 0;
}
.fact {
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
  position: relative;
  min-width: 100px;
}
.fact + .fact::before {
  content: '';
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 25%, var(--gold-soft) 75%, transparent);
}
.fact dt {
  font-family: var(--font-ui);
  font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.fact dd { margin: 0; display: flex; flex-direction: column; align-items: center; }
.fact dd strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, min(6vw, 5svh), 3rem);
  line-height: 1;
  text-shadow: 0 0 24px var(--glow);
}
.fact dd strong.fact--text { font-size: clamp(1.5rem, 4.6vw, 2.3rem); }
.fact dd strong sup { font-family: var(--font-body); font-size: 0.46em; top: -0.72em; }
.fact dd strong small { font-family: var(--font-body); font-size: 0.54em; margin-left: 0.06em; }
.fact dd span {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  color: var(--moon-dim);
  margin-top: 0.2rem;
}

/* Countdown */
.countdown {
  display: flex; gap: clamp(0.5rem, 2.5vw, 1rem);
  margin: clamp(1.4rem, 3.2vh, 2.1rem) 0 clamp(1.3rem, 2.8vh, 1.9rem);
  flex-wrap: wrap; justify-content: center;
}
.cd {
  min-width: clamp(62px, 17vw, 88px);
  padding: 0.75rem 0.5rem 0.6rem;
  border: 1px solid rgba(217,184,114,0.22);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(20,34,82,0.55), rgba(8,14,36,0.5));
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.cd__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4.2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 18px var(--glow);
}
.cd__lbl {
  font-family: var(--font-ui);
  font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--moon-dim);
}
.countdown.is-past { display: none; }

/* Scroll hint */
.scroll-hint {
  margin-top: auto; padding-top: 1.6rem;
  width: 1px; height: 46px;
  background: linear-gradient(180deg, transparent, var(--gold-soft));
  position: relative;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 2.5rem;
  width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--gold);
  animation: fall 2.4s var(--ease) infinite;
}
@keyframes fall {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(44px); opacity: 0; }
}

/* ── Sections ────────────────────────────────────────────────── */
.section {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 7rem) 1.25rem;
}
.section__head { text-align: center; margin-bottom: clamp(2.2rem, 6vh, 3.4rem); }
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5.2vw, 2.7rem);
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 0 30px var(--glow);
}
.section__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  line-height: 1.7;
  color: var(--moon-dim);
  max-width: 54ch;
  margin: 1.1rem auto 0;
}

/* ── The form card ───────────────────────────────────────────── */
.form-shell {
  position: relative;
  background: rgba(244, 247, 255, 0.97);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  box-shadow: 0 30px 90px rgba(2,6,20,0.65), 0 0 0 1px rgba(255,255,255,0.05) inset;
  overflow: hidden;
}
.form-shell__corner {
  position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--gold); opacity: 0.75; pointer-events: none;
}
.form-shell__corner--tl { top: 8px;    left: 8px;    border-right: 0; border-bottom: 0; }
.form-shell__corner--tr { top: 8px;    right: 8px;   border-left: 0;  border-bottom: 0; }
.form-shell__corner--bl { bottom: 8px; left: 8px;    border-right: 0; border-top: 0; }
.form-shell__corner--br { bottom: 8px; right: 8px;   border-left: 0;  border-top: 0; }

.form-shell iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 2px;
}

.form-fallback {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--moon-dim);
  margin-top: 1.4rem;
}
.form-fallback a {
  color: var(--gold);
  text-underline-offset: 4px;
  text-decoration-color: var(--gold-soft);
}
.form-fallback a:hover { text-decoration-color: var(--gold); }

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(3rem, 8vh, 4.5rem) 1.25rem clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid rgba(217,184,114,0.12);
}
.footer__logo {
  width: clamp(130px, 22vw, 190px);
  height: auto;
  margin: 0 auto 1rem;
  opacity: 0.85;
}
.footer__note {
  font-family: var(--font-body);
  font-size: 1rem; color: var(--moon-dim);
  margin: 0 0 1.6rem;
}
.footer__copy {
  font-family: var(--font-ui);
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: rgba(185,196,224,0.55);
  margin: 0;
}

/* ── Reveal on scroll ────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Accessibility ───────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── Narrow screens ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .drape { width: 34vw; opacity: 0.6; }
  .facts { gap: 0.4rem 0; }
  .fact { padding: 0 0.9rem; }
  .form-shell { padding: 0.4rem; }
}