/* ============================================================
   كتب الكتاب — Cinematic Arabic Wedding Invitation
   Palette: warm-dark navy, muted gold, ivory paper, burgundy wax
   ============================================================ */

:root{
  --bg-0: #07080d;
  --bg-1: #0d1018;
  --bg-2: #161522;

  --gold: #d4b572;
  --gold-2: #b89352;
  --gold-3: #f1dfa6;
  --gold-glow: rgba(212, 181, 114, 0.35);

  --ivory: #f3e8d0;
  --ivory-2: #e6d6b3;
  --paper: #f7eed8;
  --paper-edge: #c9b485;

  --ink: #2a2114;
  --ink-soft: #5a4a32;
  --ink-mute: #8a7855;

  --wax: #6a1a1f;
  --wax-2: #4a1014;
  --wax-hl: #9c2a30;

  --font-ar-display: 'Amiri', 'Tajawal', serif;
  --font-ar-body: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

html, body{
  height: 100%;
  background: var(--bg-0);
  color: var(--ivory);
  font-family: var(--font-ar-body);
  direction: rtl;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(212, 181, 114, 0.10), transparent 55%),
    radial-gradient(80% 60% at 50% 0%, rgba(212, 181, 114, 0.06), transparent 60%),
    linear-gradient(180deg, #0a0c14 0%, #06070b 100%);
  min-height: 100vh;
  position: relative;
}

button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a{ color: inherit; text-decoration: none; }

/* ================ AMBIENT LAYERS ================ */
#ambient-canvas{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  contain: strict;
}

.vignette{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%);
  contain: strict;
}

.grain{
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  contain: strict;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ================ SCENE STACK ================ */
.scene{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.scene.is-active{ pointer-events: auto; }

/* ================ SCENE 1 — TERMINAL ================ */
#scene-terminal{
  background: var(--bg-0);
  z-index: 50;
  opacity: 1;
}

.terminal{
  width: min(640px, 86vw);
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(212, 181, 114, 0.92);
  direction: ltr;
  text-align: left;
  letter-spacing: 0.01em;
  line-height: 1.9;
  position: relative;
}
.terminal::before{
  content: "";
  position: absolute;
  inset: -40px -60px;
  background: radial-gradient(circle, rgba(212, 181, 114, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.term-head{
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  color: rgba(243, 232, 208, 0.35);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212, 181, 114, 0.18);
}
.term-head .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
  animation: term-pulse 1.6s ease-in-out infinite;
}
@keyframes term-pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.4; transform: scale(0.85); }
}
.term-head .sep{
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(212, 181, 114, 0.3), transparent);
}

.term-line{
  display: flex; gap: 12px;
  opacity: 0;
  transform: translateX(-12px);
}
.term-line .arrow{
  color: var(--gold-2);
  flex: 0 0 auto;
}
.term-line .body{ color: rgba(243, 232, 208, 0.75); }
.term-line.success .body{ color: var(--gold-3); font-weight: 500; }
.term-line .body .ok{ color: var(--gold); }

.term-line .cursor{
  display: inline-block;
  width: 8px; height: 14px;
  margin-right: 6px;
  background: var(--gold);
  vertical-align: -2px;
  animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink{
  50%{ opacity: 0; }
}

/* ================ SCENE 2 — INVITATION ANNOUNCE + ENVELOPE ================ */
#scene-envelope{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6vh 24px;
  z-index: 20;
}

.announce{
  text-align: center;
  margin-bottom: clamp(28px, 4vh, 56px);
  opacity: 0;
}
.announce .eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ar-body);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.announce .eyebrow::before,
.announce .eyebrow::after{
  content: ""; width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.announce .title{
  font-family: var(--font-ar-display);
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.25;
  color: var(--ivory);
  letter-spacing: 0.01em;
  max-width: 18ch;
  margin: 0 auto;
}
.announce .title .gold{
  color: var(--gold-3);
  font-style: italic;
}

/* envelope stage */
.envelope-stage{
  perspective: 1600px;
  perspective-origin: 50% 30%;
  position: relative;
  width: min(480px, 84vw);
  aspect-ratio: 1.55 / 1;
  max-height: 56vh;
  filter: drop-shadow(0 50px 80px rgba(0,0,0,0.65));
  contain: layout paint;
}

.envelope{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: filter 0.6s ease;
  will-change: transform, filter, opacity;
}

.envelope-glow{
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, var(--gold-glow), transparent 65%);
  opacity: 0;
  pointer-events: none;
  filter: blur(20px);
  z-index: 0;
}

/* layered panels */
.env-layer{
  position: absolute;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  border-radius: 4px;
}

.env-back{
  background:
    linear-gradient(180deg, #f0e3c1 0%, #e0cf9f 100%);
  box-shadow:
    inset 0 0 60px rgba(140, 110, 60, 0.18),
    inset 0 -2px 0 rgba(140, 110, 60, 0.15);
  z-index: 1;
}

.env-front{
  background:
    linear-gradient(180deg, #f5ead0 0%, #e8d6ab 100%);
  clip-path: polygon(0 28%, 50% 78%, 100% 28%, 100% 100%, 0 100%);
  z-index: 4;
  box-shadow: inset 0 -4px 12px rgba(160, 130, 70, 0.18);
}
.env-front::before{
  /* subtle paper grain */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.05) 50%, transparent 51%),
    linear-gradient(45deg, transparent 49%, rgba(140, 110, 60, 0.04) 50%, transparent 51%);
  background-size: 8px 8px, 12px 12px;
  pointer-events: none;
  clip-path: inherit;
}
.env-front::after{
  /* gold inner border accent at V */
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 28%, 50% 78%, 100% 28%,
    100% calc(28% + 1.2px), 50% calc(78% + 1.2px), 0 calc(28% + 1.2px)
  );
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

.env-flap{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 78%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(180deg, #faf0d4 0%, #e9d7ad 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  z-index: 6;
  box-shadow: inset 0 6px 14px rgba(140, 110, 60, 0.18);
  transition: transform 0s;
  will-change: transform;
}
.env-flap::before{
  /* fold crease */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  pointer-events: none;
  clip-path: inherit;
}
.env-flap::after{
  /* gold edge along bottom V */
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0, 100% 0, 100% 1.5px,
    50% calc(100% - 1.5px),
    0 1.5px
  );
  display: none; /* visually we get edge from front already */
}

/* back of flap (visible when opened) */
.env-flap-back{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 78%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(180deg, #d6c594 0%, #b89e63 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transform: rotateY(180deg) translateZ(-0.5px);
  z-index: 5;
  display: none;
}

/* wax seal sits at the tip of the flap */
.env-seal{
  position: absolute;
  width: 96px; height: 96px;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45));
}

.seal-disc{
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #c0353c 0%, var(--wax) 38%, var(--wax-2) 100%);
  position: relative;
  display: grid; place-items: center;
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.12),
    inset 0 -6px 12px rgba(0, 0, 0, 0.4);
}
.seal-disc::before{
  /* irregular wax edge */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--wax-2);
  z-index: -1;
  clip-path: polygon(
    50% 0%, 62% 6%, 74% 4%, 84% 12%, 92% 22%, 96% 36%, 100% 50%,
    96% 64%, 94% 78%, 84% 86%, 72% 94%, 58% 96%, 50% 100%, 38% 94%,
    24% 92%, 14% 84%, 6% 72%, 2% 58%, 0% 50%, 4% 36%, 10% 22%,
    20% 12%, 32% 6%
  );
}
.seal-disc .monogram{
  font-family: var(--font-ar-display);
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 220, 200, 0.95);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.4),
    0 -1px 0 rgba(255, 200, 180, 0.18);
  letter-spacing: -0.04em;
}
.seal-disc::after{
  /* inner ring */
  content: "";
  position: absolute; inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 220, 200, 0.28);
  pointer-events: none;
}

/* Hint text + double click prompt */
.hint{
  margin-top: clamp(28px, 4vh, 56px);
  text-align: center;
  opacity: 0;
}
.hint .label{
  font-family: var(--font-ar-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: rgba(243, 232, 208, 0.45);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hint .arrow{
  display: inline-block;
  margin: 0 8px;
  color: var(--gold);
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob{
  0%, 100%{ transform: translateY(0); opacity: 0.6; }
  50%{ transform: translateY(-4px); opacity: 1; }
}
.hint .ar{
  font-family: var(--font-ar-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--gold-3);
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

/* ================ INVITATION CARD ================ */
.card-host{
  position: fixed;
  width: min(380px, 88vw);
  max-height: 94vh;
  top: 50%;
  left: 50%;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.55);
  transform-origin: center center;
  will-change: transform, opacity;
  contain: layout paint;
}

.card{
  position: relative;
  width: 100%;
  height: auto;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(212, 181, 114, 0.12), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, #f0e3c1 100%);
  border-radius: 6px;
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(140, 110, 60, 0.15) inset,
    0 0 0 1px rgba(212, 181, 114, 0.6);
  overflow: hidden;
}

.card::before{
  /* inner gold rule frame */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184, 147, 82, 0.35);
  border-radius: 3px;
  pointer-events: none;
}
.card::after{
  /* corner ornaments — top-left/right + bottom-left/right shimmer */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(212, 181, 114, 0.18), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(212, 181, 114, 0.14), transparent 30%);
  pointer-events: none;
}

.card-eyebrow{
  font-family: var(--font-ar-body);
  font-size: 10px;
  letter-spacing: 0.42em;
  color: var(--gold-2);
  margin: 8px 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.card-eyebrow::before,
.card-eyebrow::after{
  content: ""; width: 24px; height: 1px;
  background: var(--gold-2);
  opacity: 0.6;
}

.card-couple{
  font-family: var(--font-ar-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 6px 0 0;
  position: relative;
  z-index: 2;
}
.card-couple .name{
  font-size: 30px;
  line-height: 1.1;
  display: block;
}
.card-couple .name:nth-child(1){ color: var(--ink); }
.card-couple .name:nth-child(3){ color: var(--ink); }
.card-couple .amp{
  display: block;
  font-family: var(--font-ar-display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  color: var(--gold-2);
  margin: 4px 0;
  position: relative;
}
.card-couple .amp::before,
.card-couple .amp::after{
  content: "";
  position: absolute;
  top: 50%; width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2));
}
.card-couple .amp::before{ right: 100%; margin-right: 10px; background: linear-gradient(-90deg, transparent, var(--gold-2)); }
.card-couple .amp::after{ left: 100%; margin-left: 10px; }

.card-occasion{
  font-family: var(--font-ar-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.card-divider{
  width: 60px; height: 1px;
  background: var(--gold-2);
  margin: 14px auto;
  position: relative;
}
.card-divider::before{
  content: "✦";
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 0 8px;
  color: var(--gold-2);
  font-size: 10px;
}

.card-when-where{
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 12px;
  width: 100%;
  margin: 4px 0 12px;
}
.cww-col{
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.cww-col .lbl{
  font-family: var(--font-ar-body);
  font-size: 9px;
  letter-spacing: 0.34em;
  color: var(--ink-mute);
}
.cww-col .val{
  font-family: var(--font-ar-display);
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}
.cww-col .sub{
  font-family: var(--font-ar-body);
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 400;
}
.cww-sep{ background: var(--gold-2); opacity: 0.3; }

/* countdown */
.countdown{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  margin: 2px 0 12px;
  padding: 10px 6px;
  background:
    linear-gradient(180deg, rgba(212, 181, 114, 0.10), rgba(212, 181, 114, 0.04));
  border: 1px solid rgba(184, 147, 82, 0.25);
  border-radius: 4px;
}
.cd-cell{
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.cd-cell .n{
  font-family: var(--font-ar-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 32px;
  letter-spacing: -0.01em;
}
.cd-cell .l{
  font-family: var(--font-ar-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-top: 4px;
}

.card-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}
.act{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 10px;
  font-family: var(--font-ar-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.act.primary{
  background: var(--ink);
  color: var(--paper);
}
.act.primary:hover{
  background: #1a130a;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
.act svg{ width: 14px; height: 14px; flex-shrink: 0; }

/* ================ END SCENE ENHANCEMENTS ================ */

/* the final hover state for the card — gentle float */
.card-host.is-floating .card{
  animation: card-float 7s ease-in-out infinite;
}
@keyframes card-float{
  0%, 100%{ transform: translateY(0) rotate(-0.4deg); }
  50%{ transform: translateY(-6px) rotate(0.4deg); }
}

/* sparkle layer */
#sparkle-layer{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 40;
  contain: strict;
}
.sparkle{
  position: absolute;
  width: 8px; height: 8px;
  background: radial-gradient(circle, var(--gold-3) 0%, var(--gold) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(0.5px);
  opacity: 0;
  will-change: transform, opacity;
  contain: layout paint;
}

/* tiny skip button */
.skip{
  position: fixed;
  top: 20px; left: 20px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(243, 232, 208, 0.4);
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(212, 181, 114, 0.18);
  border-radius: 999px;
  transition: color 0.3s, border-color 0.3s, opacity 0.5s;
  opacity: 1;
}
.skip:hover{
  color: var(--gold-3);
  border-color: var(--gold);
}
.skip.is-hidden{ opacity: 0; pointer-events: none; }

/* sound toggle */
.snd{
  position: fixed;
  top: 20px; right: 20px;
  z-index: 100;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(212, 181, 114, 0.2);
  border-radius: 50%;
  color: rgba(243, 232, 208, 0.55);
  transition: color 0.3s, border-color 0.3s, opacity 0.4s;
}
.snd:hover{
  color: var(--gold-3);
  border-color: var(--gold);
}
.snd svg{ width: 14px; height: 14px; }
.snd .off-bar{ display: none; }
.snd.is-muted .off-bar{ display: block; }

/* RESPONSIVE */
@media (max-width: 540px){
  .announce .title{ font-size: clamp(26px, 7vw, 38px); }
  .envelope-stage{ width: 90vw; height: 56vw; max-height: 320px; }
  .env-seal{ width: 72px; height: 72px; }
  .seal-disc .monogram{ font-size: 22px; }
  .hint{ margin-top: 36px; }
  .hint .ar{ font-size: 18px; }
  .card-host{
    width: min(340px, 84vw);
    height: min(520px, 86vh);
  }
  .terminal{ font-size: 12px; }
}

/* Final state — when card is centered for inspection, dim and shrink envelope */
.envelope.is-receded{
  opacity: 0.18;
  filter: blur(2px) saturate(0.6);
  pointer-events: none;
  transition: opacity 1.2s ease, filter 1.2s ease;
}

/* ================ REDUCED MOTION ================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .grain{ display: none; }
  .hint .arrow{ animation: none; }
  .term-head .dot{ animation: none; }
  .card-host.is-floating .card{ animation: none; }
}