/* ─────────────────────────────────────────────────────
   DESIGN SYSTEM — adeilé & ekanem
   Director of Design: Apple-level execution
   Motion: GSAP 3 / ScrollTrigger
   Identity: Purple & Gold (traditional wedding colours)
───────────────────────────────────────────────────── */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:#0C0906;color:#F2EAD8;font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;}

/* ── DESIGN TOKENS ── */
:root{
  /* Base surfaces */
  --black:   #0C0906;
  --surface: #100C1A;   /* Purple-tinted dark — wedding identity */
  --surf2:   #1A1428;   /* Deeper purple surface */

  /* Primary identity — Purple & Gold */
  --purple:    #8B6DC2;  /* Royal purple — Yoruba ceremony */
  --purple-dk: #5B3A99;
  --purple-lt: #B494E0;
  --gold:      #C9A84C;  /* Precious gold — ceremonial accent */
  --gold-lt:   #E8C97A;
  --gold-dk:   #8B7030;

  /* Efik ceremony only */
  --amber:    #C4622D;
  --amber-lt: #D4824D;

  /* Neutral */
  --ivory:   #F2EAD8;
  --ivory-d: #C2B49A;
  --muted:   #8A7F74;
  --border:        rgba(242,234,216,.07);
  --border-md:     rgba(242,234,216,.12);
  --border-purple: rgba(139,109,194,.18);
  --border-gold:   rgba(201,168,76,.2);

  /* Motion timing system */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp:  cubic-bezier(0.76, 0, 0.24, 1);

  --dur-micro:    100ms;
  --dur-fast:     200ms;
  --dur-normal:   300ms;
  --dur-medium:   500ms;
  --dur-slow:     800ms;
  --dur-dramatic: 1400ms;
}

/* ── KEYFRAMES ── */
@keyframes pulse-dot {
  0%,100%{ transform:scale(1); opacity:.7; }
  50%    { transform:scale(1.6); opacity:1; }
}
@keyframes float {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}
@keyframes shimmer-name {
  from { opacity:0; letter-spacing:-.06em; }
  to   { opacity:1; letter-spacing:-.025em; }
}
@keyframes gold-shimmer {
  0%  { background-position: -200% center; }
  100%{ background-position:  200% center; }
}

/* ── CRITICAL — prevent FOUC on nav ── */
/* Each page sets #nav { opacity:0 } inline; GSAP animates it in */

/* ── NAVIGATION ── */
#nav{
  position:fixed;top:24px;left:50%;
  transform:translateX(-50%);
  z-index:200;
  display:flex;align-items:center;gap:4px;
  background:rgba(12,9,6,.92);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  border:1px solid var(--border-purple);
  border-radius:100px;
  padding:8px;
  /* Height transitions for scroll shrink — controlled by JS */
  transition:
    padding var(--dur-normal) var(--ease-out),
    background var(--dur-normal) ease,
    border-color var(--dur-normal) ease;
  white-space:nowrap;
  /* Start invisible — GSAP animates in */
  opacity:0;
  pointer-events:none;
}
#nav.nav-ready{
  opacity:1;
  pointer-events:all;
}
#nav.scrolled{
  padding:6px;
  background:rgba(12,9,6,.97);
  border-color:var(--border-gold);
}

.nav-btn{
  background:none;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);
  padding:8px 14px;border-radius:100px;
  transition:color var(--dur-fast) ease, background var(--dur-fast) ease;
  text-decoration:none;display:inline-block;
}
.nav-btn:hover{
  color:var(--ivory);
  background:rgba(242,234,216,.06);
}
.nav-btn.active-page{ color:var(--gold); }

.nav-cta{
  background:var(--purple);
  color:var(--ivory) !important;
  border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  padding:9px 20px;border-radius:100px;
  transition:background var(--dur-fast) ease, transform var(--dur-micro) ease;
  text-decoration:none;display:inline-block;
}
.nav-cta:hover{ background:var(--purple-lt); }
.nav-cta:active{ transform:scale(.97); }

.nav-divider{
  width:1px;height:14px;
  background:var(--border-md);
  margin:0 3px;flex-shrink:0;
}

.lang-btn{
  background:none;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  padding:6px 8px;border-radius:100px;
  transition:color var(--dur-fast) ease;
}
.lang-btn.active{ color:var(--gold); }
.lang-btn:hover { color:var(--ivory); }

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding:160px 72px 80px;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.page-hero-inner{max-width:1240px;margin:0 auto;}
.page-eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;font-weight:400;
}
.page-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,6vw,88px);font-weight:300;
  color:var(--ivory);line-height:.95;letter-spacing:-.02em;
}
.page-sub{
  font-size:14px;color:var(--muted);
  margin-top:18px;line-height:1.85;max-width:520px;
}

/* ── SECTIONS ── */
.section{padding:112px 72px;}
.section-inner{max-width:1240px;margin:0 auto;}
.s-eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;font-weight:400;
}
.s-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,4vw,54px);font-weight:300;
  color:var(--ivory);line-height:1.0;letter-spacing:-.015em;
}
.s-subtitle{
  font-size:14px;color:var(--muted);
  margin-top:14px;line-height:1.85;max-width:480px;
}
.s-divider{height:1px;background:var(--border);margin:64px 0;}

/* ── ASO EBI PAGE ── */
.asoebi-hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(139,109,194,.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(201,168,76,.07) 0%, transparent 60%);
}
.info-block{
  padding:22px;
  border:1px solid var(--border-purple);
  background:rgba(139,109,194,.04);
  border-radius:2px;
}
.ib-label{
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;
}
.ib-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.ib-row:last-child{border-bottom:none;padding-bottom:0;}
.ib-key{font-size:12px;color:var(--muted);}
.ib-val{font-family:'Playfair Display',serif;font-size:14px;color:var(--ivory);font-weight:400;}

/* Guest dress code */
.dress-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px;}
.dress-col-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:28px;padding-bottom:20px;
  border-bottom:1px solid var(--border);
}
.dress-col-title{
  font-family:'Playfair Display',serif;font-size:18px;
  color:var(--ivory);font-weight:400;
}
.guest-note{font-size:13px;color:var(--muted);line-height:1.85;margin-bottom:20px;}

/* Palette strip */
.palette-strip{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap;}
.ps-item{text-align:center;}
.ps-swatch{
  width:40px;height:40px;border-radius:2px;
  border:1px solid rgba(242,234,216,.07);
  margin-bottom:6px;display:block;
}
.ps-name{font-size:8px;color:var(--muted);letter-spacing:.04em;line-height:1.4;}

.rule-block{
  padding:20px 22px;
  border:1px solid var(--border);
  background:rgba(242,234,216,.01);
  border-radius:2px;
  margin-bottom:12px;
}
.rule-who{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px;
}
.rule-text{font-size:13px;color:var(--muted);line-height:1.75;}

/* ── RSVP ── */
.rsvp-layout{
  display:grid;grid-template-columns:5fr 4fr;
  gap:88px;align-items:start;margin-top:64px;
}
.rsvp-ctx-note{
  font-size:14px;color:var(--muted);
  line-height:1.85;margin-top:16px;margin-bottom:32px;
}
.rsvp-deadline{
  padding:22px;
  border:1px solid var(--border-purple);
  background:rgba(139,109,194,.04);border-radius:2px;
}
.rd-label{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.rd-date{
  font-family:'Playfair Display',serif;font-size:18px;
  color:var(--gold);font-weight:400;
}
.rd-note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.65;}
.form-card{
  padding:40px;
  background:rgba(242,234,216,.02);
  border:1px solid var(--border-md);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(242,234,216,.04);
}
.form-fields{display:flex;flex-direction:column;gap:18px;}
.field-label{
  display:block;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
input[type=text],input[type=email],select,textarea{
  width:100%;
  background:rgba(242,234,216,.03);
  border:1px solid rgba(242,234,216,.12);border-radius:2px;
  padding:12px 14px;color:var(--ivory);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;
  outline:none;
  transition:border-color var(--dur-normal) ease, background var(--dur-normal) ease;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--purple);
  background:rgba(139,109,194,.05);
}
input::placeholder,textarea::placeholder{color:rgba(138,127,116,.5);}
select option{background:#1A1428;color:var(--ivory);}
textarea{resize:vertical;min-height:80px;}
.submit-btn{
  width:100%;background:var(--purple);color:var(--ivory);
  border:none;
  font-family:'DM Sans',sans-serif;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:16px;border-radius:2px;cursor:pointer;
  transition:background var(--dur-fast) ease, transform var(--dur-micro) ease;
  margin-top:4px;
}
.submit-btn:hover{background:var(--purple-lt);}
.submit-btn:active{transform:scale(.985);}
.err{border-color:rgba(220,60,60,.5)!important;}
.rsvp-success{
  padding:56px 36px;text-align:center;
  border:1px solid var(--border-purple);
  background:rgba(139,109,194,.04);border-radius:2px;
}
.success-name{
  font-family:'Cormorant Garamond',serif;font-size:32px;
  font-weight:300;color:var(--ivory);margin:20px 0 9px;
}
.success-msg{font-size:13px;color:var(--muted);line-height:1.75;}

/* ── FOOTER ── */
footer{
  background:var(--black);padding:88px 72px;
  text-align:center;border-top:1px solid var(--border);
}
.foot-eyebrow{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);opacity:.7;display:block;margin-bottom:28px;
}
.foot-names{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(44px,6.5vw,76px);font-weight:300;
  color:var(--ivory);line-height:.92;letter-spacing:-.02em;display:block;
}
.foot-detail{
  font-size:11px;color:var(--muted);
  letter-spacing:.15em;text-transform:uppercase;
  margin-top:20px;opacity:.6;
}
.foot-addr{font-size:11px;color:var(--muted);margin-top:7px;opacity:.4;letter-spacing:.04em;}
.ornament{display:block;margin:0 auto;}

/* ── SHARED WILL-CHANGE HINTS ── */
.gsap-ready{will-change:transform,opacity;}

/* ═══════════════════════════════════
   MOBILE — < 900px
═══════════════════════════════════ */
@media(max-width:900px){
  .section{padding:80px 24px;}
  .page-hero{padding:100px 24px 60px;}

  /* Nav: keep to absolute minimum — active label + lang + RSVP */
  #nav{top:14px;padding:6px;gap:2px;max-width:calc(100vw - 28px);}
  #nav .nav-btn{display:none;}
  #nav .nav-btn.active-page{display:inline-block;padding:6px 11px;font-size:9px;}
  .lang-btn{padding:5px 6px;font-size:8px;}
  .nav-cta{padding:7px 14px;font-size:9px;}

  /* Hero */
  .hero-name-single{
    font-size:clamp(38px,10vw,116px)!important;
    white-space:normal;word-break:break-word;line-height:.92;
  }

  /* Layouts → single column */
  .rsvp-layout,.dress-cols{grid-template-columns:1fr;gap:44px;}
  .field-row{grid-template-columns:1fr;}

  /* Footer */
  footer{padding:64px 24px;}

  /* Palette wrap */
  .palette-strip{flex-wrap:wrap;}
}

@media(max-width:390px){
  .hero-name-single{font-size:clamp(34px,9.5vw,52px)!important;}
  .form-card{padding:24px 20px;}
}