:root{
  --emerald-dark: #06322A;
  --emerald: #0C4B3E;
  --emerald-light: #145B4A;
  --paper: #FBF3E3;
  --paper-shadow: #EAD9B4;
  --ink: #2B2118;
  --ink-soft: #5A4B39;
  --gold: #C69A3B;
  --gold-light: #E8CE85;
  --maroon: #7A1F2B;

  --book-w: min(92vw, 440px);
  --book-h: min(76vh, 620px);

  --flip-speed: 1.6s;
}

@media (prefers-reduced-motion: reduce){
  :root{ --flip-speed: 0.01s; }
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  height:100%;
  background: radial-gradient(ellipse at 50% -10%, var(--emerald-light) 0%, var(--emerald) 45%, var(--emerald-dark) 100%);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}

.ambience{
  position: fixed;
  inset: 0;
  color: var(--gold-light);
  opacity: 0.05;
  pointer-events: none;
}
.ambience .jali{ width: 100%; height: 100%; }

.stage{
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 75px 16px 24px;
}

/* ---------- BOOK ---------- */

.book{
  position: relative;
  width: var(--book-w);
  height: var(--book-h);
  perspective: 2600px;
  touch-action: none;
  overscroll-behavior: none;
}

.progress-track{
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -14px;
  height: 4px;
  border-radius: 2px;
  background: rgba(198,154,59,0.25);
  overflow: hidden;
  z-index: 20;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.progress-fill{
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--maroon), var(--gold), var(--gold-light));
  transition: width var(--flip-speed) ease;
}

.book-frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--emerald-dark);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.65),
    0 0 0 1px rgba(198,154,59,0.5);
  padding: 10px;
}

.corner{
  position: absolute;
  width: 34px;
  height: 34px;
  color: var(--gold);
  z-index: 15;
  opacity: 0.9;
  pointer-events: none;
}
.corner--tl{ top: 6px; left: 6px; }
.corner--tr{ top: 6px; right: 6px; transform: scaleX(-1); }
.corner--bl{ bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner--br{ bottom: 6px; right: 6px; transform: scale(-1,-1); }

.pages{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border: 1px solid rgba(198,154,59,0.55);
  border-radius: 3px;
  overflow: hidden;
}

.page{
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform var(--flip-speed) cubic-bezier(.6,.05,.28,1);
  box-shadow: 2px 0 12px rgba(0,0,0,0.25);
}

.page.is-flipped{
  transform: rotateY(-178deg);
}

.page-inner{
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 90% 8%, rgba(122,31,43,0.06), transparent 40%),
    var(--paper);
  padding: 15% 11% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
}

.page-inner::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198,154,59,0.55);
  pointer-events: none;
}

/* ---------- TYPE ---------- */

.eyebrow{
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0;
}

.bismillah-ar{
  font-family: 'Amiri', serif;
  font-size: 1.5rem;
  color: var(--emerald);
  margin: 0;
  direction: rtl;
}
.bismillah-en{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 4px;
}

.divider{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 70%;
  color: var(--gold);
  margin: 4px 0;
}
.divider span{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.divider i{ font-style: normal; font-size: 0.8rem; }
.divider.small{ width: 40%; }

.cover-names{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--emerald-dark);
  margin: 6px 0 2px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cover-names span{ font-size: clamp(1.7rem, 6vw, 2.3rem); }
.cover-names em{
  font-style: normal;
  font-family: 'Amiri', serif;
  color: var(--gold);
  font-size: 1.1rem;
  margin: 2px 0;
}

.tap-hint{
  position: absolute;
  bottom: 8%;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
}

.section-title{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--emerald-dark);
  margin: 2px 0 6px;
}

.body-text{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 32ch;
}
.body-text.small{ font-size: 0.95rem; }

.names-inline{
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 4.5vw, 1.6rem);
  color: var(--maroon);
  margin: 4px 0;
}
.names-inline em{ font-style: normal; color: var(--gold); margin: 0 6px; }

.person-name{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--emerald-dark);
  margin: 4px 0 2px;
}

.rel-label{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}

.parent-block{ margin: 6px 0; }
.parent-name{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0;
}
.parent-sub{
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 2px 0 0;
}
.parent-sub.italic{ font-style: italic; }
.parent-block.placeholder{
  border: 1px dashed rgba(122,31,43,0.35);
  padding: 14px 18px;
  border-radius: 4px;
}

.date-line{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 2.6rem);
  color: var(--maroon);
  margin: 0;
}
.date-sub{
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0;
}

.venue-label{
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 4px 0 0;
}
.venue-city{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  color: var(--emerald-dark);
  margin: 0 0 6px;
}

.map-btn{
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(180deg, var(--emerald-light), var(--emerald-dark));
  border: 1px solid var(--gold);
  border-radius: 2px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.map-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5); }

.countdown{
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.countdown-unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 8px 6px 6px;
  background: rgba(12,75,62,0.06);
  border: 1px solid rgba(198,154,59,0.55);
  border-radius: 4px;
}
.countdown-num{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--emerald-dark);
}
.countdown-label{
  margin-top: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.closing-ar{
  font-family: 'Amiri', serif;
  font-size: 1.3rem;
  color: var(--emerald);
  direction: rtl;
  margin: 0;
}
.signature{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ---------- CONTROLS ---------- */

.progress{
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0;
  z-index: 30;
}

.swipe-hint{
  font-family: 'Jost', sans-serif;
  color: var(--gold-light);
  opacity: 0.55;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  z-index: 30;
}

.page-inner:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: -6px;
}

@media (max-width: 380px){
  .page-inner{ padding: 18% 8% 12%; }
}

/* ---------- ESWAGATHAM SITE HEADER / HOME BUTTON ---------- */

.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: 76px;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(6,50,42,.85), rgba(6,50,42,0));
}

.site-header .container{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
}

.logo .dot{ color: var(--gold); }

.logo-mark{
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--paper);
  color: var(--emerald-dark);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  transition: transform .2s ease, background .2s ease;
}

.logo:hover .logo-mark{
  transform: rotate(-8deg);
  background: var(--gold);
}

.home-float{
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: var(--paper);
  text-decoration: none;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(198, 154, 59, 0.6);
  border-radius: 50%;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  z-index: 45;
  transition: all 0.3s ease;
}

.home-float:hover{
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.restart-float{
  display: flex;
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: var(--gold-light);
  font-size: 18px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(198, 154, 59, 0.6);
  border-radius: 50%;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  z-index: 45;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restart-float:hover{
  transform: translateY(-4px) scale(1.05);
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.restart-float:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}