/* ===== DESIGN TOKENS ===== */
:root {
  --font-display: 'Cinzel Decorative', serif;
  --font-script:  'Dancing Script', cursive;
  --font-body:    'Cormorant Garamond', Georgia, serif;

  --gold:        #d4a847;
  --gold-light:  #f0c96e;
  --gold-pale:   #fcefc5;
  --gold-deep:   #8a6a00;
  --rose-deep:   #8b1a4a;
  --rose-mid:    #c94b7a;
  --rose-soft:   #f2aac3;
  --rose-pale:   #fde8f0;
  --plum:        #3d0030;
  --plum-mid:    #6b0050;
  --plum-dark:   #1a0015;
  --ivory:       #fdf8ef;
  --cream:       #f5ead8;
  --text-primary:#fcefc5;
  --text-muted:  #e8c9a0;
  --text-faint:  #c9a87a;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;    --space-10:2.5rem;
  --space-12:3rem;   --space-16:4rem;   --space-20:5rem;

  --radius-sm:0.375rem; --radius-md:0.5rem; --radius-lg:0.75rem;
  --radius-xl:1rem;     --radius-full:9999px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--text-primary);
  background:#1a0015;
  overflow-x:hidden;
}

/* ===== CANVAS LAYERS ===== */
#star-canvas, #petal-canvas {
  position:fixed; inset:0; pointer-events:none;
}
#star-canvas  { z-index:0; }
#petal-canvas { z-index:3; }

/* ===== NAME INPUT SCREEN ===== */
#name-screen {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:var(--space-6);
  padding:var(--space-8);
  background: radial-gradient(ellipse at center, oklch(0.2 0.12 330 / 0.96) 0%, oklch(0.1 0.08 330 / 0.98) 100%);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#name-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.name-screen-title {
  font-family:var(--font-display);
  font-size:var(--text-lg);
  color:var(--gold-light);
  text-align:center;
  letter-spacing:0.12em;
  text-shadow: 0 0 30px oklch(0.7 0.15 60 / 0.5);
}
.name-screen-sub {
  font-family:var(--font-script);
  font-size:var(--text-xl);
  color:var(--rose-soft);
  text-align:center;
  opacity:0.85;
}
.input-wrap {
  position:relative;
  width:min(380px, 90vw);
}
.input-wrap input {
  width:100%;
  padding:var(--space-4) var(--space-6);
  background: oklch(0.15 0.06 330 / 0.6);
  border:1px solid var(--gold);
  border-radius:var(--radius-full);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:var(--text-base);
  text-align:center;
  outline:none;
  transition:border-color 0.3s, box-shadow 0.3s;
}
.input-wrap input::placeholder { color:var(--text-faint); }
.input-wrap input:focus {
  border-color:var(--gold-light);
  box-shadow:0 0 20px oklch(0.7 0.15 60 / 0.3);
}

/* ===== ENTER BUTTON ===== */
#enter-btn {
  display: none;
  padding:var(--space-3) var(--space-10);
  background: linear-gradient(135deg, var(--rose-deep), var(--plum-mid));
  border:1px solid var(--gold);
  border-radius:var(--radius-full);
  color:var(--gold-light);
  font-family:var(--font-display);
  font-size:var(--text-sm);
  letter-spacing:0.15em;
  cursor:pointer;
  transition:all 0.3s;
  text-transform:uppercase;
  box-shadow:0 4px 20px oklch(0.4 0.15 330 / 0.4);
}
#enter-btn:hover {
  background: linear-gradient(135deg, var(--rose-mid), var(--plum));
  box-shadow:0 6px 30px oklch(0.5 0.2 330 / 0.6);
  transform:translateY(-2px);
}
#enter-btn.visible { display: block; }

.ornament {
  font-size:var(--text-xl);
  color:var(--gold);
  opacity:0.7;
  text-align:center;
  letter-spacing:0.2em;
}

/* ===== WELCOME MESSAGE ===== */
#welcome-msg {
  position:fixed; inset:0; z-index:99;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:var(--space-4);
  background: radial-gradient(ellipse at center, oklch(0.2 0.12 330 / 0.92) 0%, oklch(0.1 0.08 330 / 0.96) 100%);
  padding:var(--space-8);
  opacity:0; visibility:hidden;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
#welcome-msg.show { opacity:1; visibility:visible; }
.welcome-line1 {
  font-family:var(--font-body); font-size:var(--text-base);
  color:var(--rose-soft); letter-spacing:0.1em; text-align:center;
}
.welcome-line2 {
  font-family:var(--font-script); font-size:var(--text-2xl);
  color:var(--gold-light); text-align:center;
  text-shadow:0 0 40px oklch(0.7 0.15 60 / 0.6); line-height:1.3;
}
.welcome-line3 {
  font-family:var(--font-body); font-size:var(--text-lg);
  color:var(--rose-soft); font-style:italic; text-align:center;
}

/* ===== ENVELOPE SCREEN ===== */
#envelope-screen {
  position:fixed; inset:0; z-index:98;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, oklch(0.2 0.12 330 / 0.92) 0%, oklch(0.1 0.08 330 / 0.96) 100%);
  opacity:0; visibility:hidden;
  transition:opacity 0.8s ease, visibility 0.8s ease;
}
#envelope-screen.show { opacity:1; visibility:visible; }
.envelope-wrap { position:relative; cursor:pointer; }
.envelope {
  width:280px; height:200px; position:relative;
  filter:drop-shadow(0 10px 40px oklch(0.4 0.15 60 / 0.5));
}
.env-body {
  position:absolute; inset:0;
  background: linear-gradient(160deg, #4a0038 0%, #2d0022 100%);
  border-radius:4px 4px 8px 8px; border:1px solid var(--gold); overflow:hidden;
}
.env-body::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:70%;
  background: linear-gradient(180deg, #3a0030 0%, #2a001e 100%);
}
.env-seal {
  position:absolute; width:60px; height:60px;
  top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:5; transition:opacity 0.5s ease;
}
.seal-circle {
  width:100%; height:100%; border-radius:50%;
  background: radial-gradient(circle, var(--gold-light), var(--gold-deep));
  border:2px solid var(--gold-pale);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:10px;
  color:#1a0015; text-align:center; line-height:1.2; letter-spacing:0.05em;
  box-shadow:0 0 20px oklch(0.7 0.15 60 / 0.6);
}
.env-flap {
  position:absolute; top:0; left:0; right:0; height:100px;
  transform-origin:top center;
  transition:transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index:10; clip-path:polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, #5a0045 0%, #3d0030 100%);
  border-bottom:1px solid var(--gold);
}
.envelope.open .env-flap { transform:rotateX(180deg); }
.env-left, .env-right {
  position:absolute; bottom:0; width:50%; height:60%;
  background: linear-gradient(135deg, #3a0030 0%, #2a0022 100%);
  border-top:1px solid var(--gold);
}
.env-left  { left:0;  clip-path:polygon(0 0, 100% 100%, 0 100%); }
.env-right { right:0; clip-path:polygon(0 100%, 100% 0, 100% 100%); }
.env-card {
  position:absolute; width:240px; top:20px; left:50%;
  transform:translateX(-50%) translateY(0);
  background: linear-gradient(160deg, #fcefc5 0%, #f5e0a8 100%);
  border:1px solid var(--gold); border-radius:4px;
  padding:var(--space-4); text-align:center; z-index:8; opacity:0;
  transition:transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s, opacity 0.5s ease 0.6s;
}
.envelope.open .env-card { transform:translateX(-50%) translateY(-160px); opacity:1; }
.env-card-text { font-family:var(--font-script); font-size:1rem; color:#3d0030; line-height:1.5; }
.tap-hint {
  margin-top:var(--space-6); font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--rose-soft); text-align:center; opacity:0.7;
  animation:pulse-hint 2s ease-in-out infinite; transition:opacity 0.5s;
}
@keyframes pulse-hint { 0%,100%{opacity:0.5;} 50%{opacity:1;} }

/* ===== MAIN PAGE ===== */
#main-page {
  position:relative; z-index:2;
  opacity:0; visibility:hidden;
  transition:opacity 1s ease, visibility 1s ease;
  min-height:100dvh;
  background: linear-gradient(180deg,
    rgba(26,0,21,0.92) 0%, rgba(42,0,32,0.90) 20%,
    rgba(26,0,21,0.92) 50%, rgba(13,0,11,0.95) 100%);
}
#main-page.show { opacity:1; visibility:visible; }

.page-header { padding:var(--space-16) var(--space-8) var(--space-12); text-align:center; position:relative; }
.bismillah {
  font-family:var(--font-script); font-size:var(--text-2xl); color:var(--gold-light);
  margin-bottom:var(--space-6); text-shadow:0 0 30px oklch(0.7 0.15 60 / 0.4);
  direction:rtl; font-weight:600;
}
.divider-ornament { display:flex; align-items:center; gap:var(--space-4); justify-content:center; margin:var(--space-4) 0; }
.divider-line { height:1px; flex:1; max-width:120px; background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider-gem { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 8px var(--gold-light); }
.header-invite {
  font-family:var(--font-body); font-size:var(--text-base); color:var(--text-muted);
  letter-spacing:0.15em; text-transform:uppercase; margin-bottom:var(--space-4);
}
.couple-names {
  font-family:var(--font-display); font-size:var(--text-3xl); color:var(--gold-light);
  line-height:1.2; text-shadow:0 0 50px oklch(0.7 0.15 60 / 0.4); margin-bottom:var(--space-2);
}
.couple-ampersand { font-family:var(--font-script); font-size:var(--text-2xl); color:var(--rose-soft); display:block; margin:var(--space-2) 0; }
.nikah-label { font-family:var(--font-body); font-size:var(--text-lg); color:var(--rose-soft); font-style:italic; letter-spacing:0.08em; }

/* ===== COUPLE IMAGES ===== */
.couple-img {
  border-radius:var(--radius-xl); border:2px solid var(--gold);
  box-shadow:0 0 40px oklch(0.4 0.15 330 / 0.5), 0 0 80px oklch(0.5 0.1 20 / 0.2);
  transition:transform 0.4s ease, box-shadow 0.4s ease;
  max-width:100%; height:auto; display:block;
}
.couple-img:hover { transform:translateY(-6px) scale(1.01); box-shadow:0 0 60px oklch(0.5 0.2 330 / 0.6), 0 0 100px oklch(0.6 0.15 60 / 0.3); }
.hero-image-wrap    { text-align:center; padding:var(--space-8) var(--space-8) 0; max-width:500px; margin-inline:auto; }
.mid-image-wrap     { text-align:center; padding:var(--space-8); max-width:420px; margin-inline:auto; }
.closing-image-wrap { text-align:center; padding:var(--space-6) var(--space-8); max-width:460px; margin-inline:auto; }

/* ===== CARDS GRID ===== */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
  gap:var(--space-6); padding:var(--space-8); max-width:900px; margin-inline:auto;
}
.info-card {
  background: oklch(0.18 0.07 330 / 0.7); border:1px solid oklch(0.7 0.15 60 / 0.35);
  border-radius:var(--radius-xl); padding:var(--space-8) var(--space-6); text-align:center;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 32px oklch(0.1 0.05 330 / 0.5), inset 0 1px 0 oklch(0.7 0.15 60 / 0.1);
  position:relative; overflow:hidden;
}
.info-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, oklch(0.7 0.15 60 / 0.06) 0%, transparent 70%);
  pointer-events:none;
}
.card-icon { font-size:2rem; margin-bottom:var(--space-3); display:block; }
.card-title { font-family:var(--font-display); font-size:var(--text-xs); color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:var(--space-3); }
.card-value { font-family:var(--font-script); font-size:var(--text-xl); color:var(--ivory); margin-bottom:var(--space-2); line-height:1.3; }
.card-sub   { font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-muted); font-style:italic; }

/* ===== PRAYER SECTION ===== */
.prayer-section { text-align:center; padding:var(--space-12) var(--space-8); max-width:700px; margin-inline:auto; }
.prayer-arabic { font-size:clamp(1.4rem, 4vw, 2rem); color:var(--gold-light); direction:rtl; line-height:2; margin-bottom:var(--space-6); text-shadow:0 0 20px oklch(0.7 0.15 60 / 0.3); }
.prayer-translation { font-family:var(--font-body); font-size:var(--text-base); color:var(--text-muted); font-style:italic; line-height:1.8; }

/* ===== FAMILY SECTION ===== */
.family-section { padding:var(--space-10) var(--space-8); max-width:800px; margin-inline:auto; }
.section-heading { font-family:var(--font-display); font-size:var(--text-xl); color:var(--gold-light); text-align:center; margin-bottom:var(--space-8); letter-spacing:0.1em; }
.family-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); }
.family-side { text-align:center; padding:var(--space-6); background:oklch(0.15 0.07 330 / 0.5); border:1px solid oklch(0.7 0.15 60 / 0.2); border-radius:var(--radius-xl); }
.family-label { font-family:var(--font-body); font-size:var(--text-xs); color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:var(--space-2); }
.family-name  { font-family:var(--font-script); font-size:var(--text-xl); color:var(--ivory); margin-bottom:var(--space-2); }
.family-parent{ font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-muted); font-style:italic; line-height:1.7; }

/* ===== RSVP ===== */
.rsvp-section { text-align:center; padding:var(--space-12) var(--space-8) var(--space-20); }
.rsvp-text { font-family:var(--font-body); font-size:var(--text-lg); color:var(--text-muted); font-style:italic; margin-bottom:var(--space-6); }
.rsvp-btn {
  display:inline-block; padding:var(--space-4) var(--space-12);
  background: linear-gradient(135deg, var(--rose-deep), var(--plum-mid));
  border:1px solid var(--gold); border-radius:var(--radius-full);
  color:var(--gold-pale); font-family:var(--font-display); font-size:var(--text-sm);
  letter-spacing:0.15em; text-decoration:none; transition:all 0.3s;
  box-shadow:0 4px 20px oklch(0.4 0.15 330 / 0.4); text-transform:uppercase; cursor:pointer;
}
.rsvp-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px oklch(0.5 0.2 330 / 0.6); }
.footer-msg { margin-top:var(--space-8); font-family:var(--font-script); font-size:var(--text-lg); color:var(--rose-soft); opacity:0.7; }

/* ===== MAP BUTTON ===== */
.map-btn {
  display:inline-block; margin-top:var(--space-3); padding:var(--space-2) var(--space-5);
  background:linear-gradient(135deg, var(--plum-mid), var(--rose-deep));
  border:1px solid var(--gold); border-radius:var(--radius-full);
  color:var(--gold-pale); font-family:var(--font-body); font-size:0.72rem;
  letter-spacing:0.08em; text-decoration:none; transition:all 0.3s;
  box-shadow:0 2px 10px oklch(0.3 0.1 330 / 0.3);
}
.map-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px oklch(0.4 0.15 330 / 0.5); }

/* ===== VIDEO CARD ===== */
.video-card { padding:var(--space-4); display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.video-wrapper { position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(212,168,71,0.35); background:#0d000b; aspect-ratio:16/9; }
.invitation-video { width:100%; height:100%; object-fit:cover; display:block; }
.video-overlay-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--gold-pale); pointer-events:none; text-shadow:0 2px 12px rgba(0,0,0,0.7); transition:opacity 0.4s; }
.video-overlay-icon.hidden { opacity:0; }

/* ===== COMPLIMENTS SECTION ===== */
.compliments-section { max-width:900px; margin:0 auto; padding:var(--space-12) var(--space-8) var(--space-20); text-align:center; }
.compliments-box {
  position:relative; overflow:hidden;
  background:rgba(61,0,48,0.52); backdrop-filter:blur(12px);
  border:1px solid rgba(212,168,71,0.35); border-radius:28px; padding:2.8rem 2rem 2.4rem;
  box-shadow:0 12px 45px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 60px rgba(139,26,74,0.12);
}
.compliments-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top center, rgba(240,201,110,0.1) 0%, transparent 60%);
  pointer-events:none;
}
.compliments-title { font-family:var(--font-display); font-size:var(--text-sm); letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-light); margin-bottom:2rem; position:relative; z-index:1; }
.comp-ornament { color:var(--gold); margin:0 0.5rem; opacity:0.75; }
.typewriter-wrap { min-height:88px; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; }
#compliment-name { font-family:var(--font-script); font-size:clamp(2rem, 5vw, 3.4rem); color:var(--rose-pale); text-shadow:0 0 22px rgba(242,170,195,0.28), 0 0 60px rgba(201,75,122,0.15); line-height:1.2; }
.tw-cursor { display:inline-block; width:3px; height:1em; background:var(--gold-light); margin-left:6px; vertical-align:-4px; border-radius:2px; animation:tw-blink 0.75s ease-in-out infinite; }
@keyframes tw-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.compliments-note { margin-top:1.6rem; font-family:var(--font-body); font-size:var(--text-base); color:var(--text-muted); font-style:italic; position:relative; z-index:1; }

/* ===== RESPONSIVE ===== */
@media (max-width:480px) {
  .family-grid { grid-template-columns:1fr; }
  .couple-names { word-break:break-word; }
  .envelope { width:240px; height:170px; }
}