/* ============================================================
   Huda's Graduation Book — shared theme
   "A herbarium of love" — botanical album aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  /* Palette — drawn from her real cover + her carnation */
  --paper:        #FBF8F1;  /* warm book cream */
  --paper-2:      #F4EEE0;  /* page mid */
  --paper-deep:   #E9DFCB;  /* aged edge / shadow */
  --gold:         #C9A24B;  /* embossed gold */
  --gold-lite:    #E8CE8A;  /* gold highlight */
  --gold-deep:    #8C6A1E;  /* gold shadow */
  --carnation:    #D2588A;  /* Chabaud picotee magenta */
  --carnation-2:  #B8466F;  /* deeper magenta */
  --blush:        #F4CBDB;  /* petal blush */
  --leaf:         #6E8B6A;  /* botanical green */
  --leaf-deep:    #4F6A4C;
  --ink:          #3A352C;  /* warm sepia ink */
  --ink-soft:     #6B6354;
  --line:         #D8CDB6;  /* hairline */

  --shadow-soft: 0 18px 50px -24px rgba(58, 53, 44, 0.45);
  --shadow-page: 0 40px 90px -40px rgba(58, 53, 44, 0.6);

  --serif:  'Cormorant Garamond', serif;
  --body:   'Spectral', Georgia, serif;
  --arab:   'Tajawal', system-ui, sans-serif;
  --calig:  'Aref Ruqaa', serif;
}

* { box-sizing: border-box; }

/* the `hidden` attribute must always win, even over .stage/.book-stage display:flex */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(120% 90% at 50% -10%, #fffdf8 0%, var(--paper) 42%, var(--paper-2) 100%);
  background-attachment: fixed;
}

/* faint paper grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(120,100,60,0.045) 1px, transparent 1px),
    radial-gradient(rgba(120,100,60,0.035) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  mix-blend-mode: multiply;
}

[dir="rtl"] { font-family: var(--arab); }
[lang="ar"], .ar { font-family: var(--arab); }

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--leaf-deep);
  font-size: 1.05rem;
}
.latin-binomial {
  font-family: var(--serif);
  font-style: italic;
  color: var(--leaf-deep);
}
.smallcaps {
  font-family: var(--serif);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-weight: 500;
}

/* ---------- gold text ---------- */
.gold-text {
  background: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold) 28%, var(--gold-lite) 50%, var(--gold) 72%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* ============================================================
   Buttons & fields
   ============================================================ */
.btn {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #fffdf6, var(--paper-2));
  color: var(--ink);
  padding: 0.7em 1.6em;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 3px 0 -1px rgba(140,106,30,0.25), var(--shadow-soft);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -1px rgba(140,106,30,0.25), var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--carnation); outline-offset: 3px; }
.btn--gold {
  background: linear-gradient(180deg, var(--gold-lite), var(--gold));
  color: #4a3a12;
  border-color: var(--gold-deep);
  font-weight: 500;
}
.btn--ghost { background: transparent; box-shadow: none; }

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--leaf-deep);
  margin-bottom: 0.4rem;
}
.field .hint { font-size: 0.86rem; color: var(--ink-soft); font-style: normal; }
.input, textarea.input {
  width: 100%;
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  border: none;
  border-bottom: 1.5px solid var(--line);
  padding: 0.55em 0.2em;
  transition: border-color .25s ease, background .25s ease;
}
textarea.input { border: 1.5px solid var(--line); border-radius: 3px; padding: 0.7em; resize: vertical; min-height: 120px; }
.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--carnation);
  background: rgba(255,255,255,0.85);
}

/* ============================================================
   Falling petals (ambient)
   ============================================================ */
.petal-field {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 2;
}
.petal {
  position: absolute;
  top: -40px;
  width: 18px; height: 14px;
  background: radial-gradient(120% 120% at 30% 20%, var(--blush) 0%, var(--carnation) 70%, var(--carnation-2) 100%);
  border-radius: 60% 60% 65% 65% / 80% 80% 55% 55%;
  opacity: 0.85;
  filter: drop-shadow(0 2px 2px rgba(120,40,70,0.15));
  will-change: transform;
  animation: petal-fall linear infinite;
}
@keyframes petal-fall {
  0%   { transform: translate(0, -5vh) rotate(0deg) scale(var(--s,1)); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translate(var(--drift, 40px), 108vh) rotate(540deg) scale(var(--s,1)); opacity: 0.7; }
}

/* ============================================================
   Atmosphere helpers
   ============================================================ */
.stage {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}

/* generic card / paper sheet */
.sheet {
  position: relative;
  background:
    linear-gradient(180deg, #fffdf7 0%, var(--paper) 60%, var(--paper-2) 100%);
  border: 1px solid var(--paper-deep);
  border-radius: 4px;
  box-shadow: var(--shadow-page);
}
.sheet::after { /* deckle inner line */
  content:""; position:absolute; inset:10px;
  border: 1px solid rgba(201,162,75,0.28);
  border-radius: 2px; pointer-events:none;
}

/* corner pressed-flower marks */
.corner-flora { position:absolute; width:74px; height:74px; opacity:0.9; pointer-events:none; }
.corner-flora.tl { top:14px; left:14px; transform: rotate(0deg); }
.corner-flora.tr { top:14px; right:14px; transform: scaleX(-1); }
.corner-flora.bl { bottom:14px; left:14px; transform: scaleY(-1); }
.corner-flora.br { bottom:14px; right:14px; transform: scale(-1,-1); }

/* audio + language controls (fixed) */
.controls {
  position: fixed; top: 14px; z-index: 50;
  display: flex; gap: 8px; align-items: center;
}
.controls.right { right: 14px; }
.controls.left  { left: 14px; }
.ctl {
  font-family: var(--serif);
  font-size: 0.95rem;
  background: rgba(251,248,241,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.ctl:hover { color: var(--carnation); border-color: var(--carnation); }
.ctl:focus-visible { outline: 2px solid var(--carnation); outline-offset: 2px; }

/* duck mascot */
.duck-walk { position: absolute; bottom: 8px; width: 64px; z-index: 6; pointer-events: none; }
@keyframes waddle {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  50%     { transform: rotate(5deg) translateY(-3px); }
}
.duck-walk svg { animation: waddle 0.5s ease-in-out infinite; transform-origin: bottom center; }

/* accessible focus baseline */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--carnation); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .petal { display: none; }
}

/* ============================================================
   Specimen page (friend's message) — shared
   ============================================================ */
.specimen {
  position: relative;
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem);
}
.spec-tag {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(0deg, #fffdf6, #fffdf6 6px, #fbf6ea 6px, #fbf6ea 7px);
  padding: 0.5rem 1.4rem;
  border-radius: 2px;
  box-shadow: 0 4px 14px -8px rgba(58,53,44,.5);
  transform: rotate(-1.2deg);
  margin-bottom: 1.2rem;
}
.spec-label { font-family: var(--serif); font-style: italic; color: var(--leaf-deep); font-size: .8rem; letter-spacing:.1em; }
.spec-name { font-family: var(--calig); font-size: 1.7rem; color: var(--carnation-2); line-height: 1; }
[dir="ltr"] .spec-name { font-family: var(--serif); font-weight: 600; }
.spec-from { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: .9rem; }
.spec-from strong { color: var(--leaf-deep); font-style: normal; }

.spec-photo {
  position: relative; display: inline-block; margin: 0 0 1.2rem;
  padding: 8px 8px 8px; background: #fff; border: 1px solid #efe7d4;
  box-shadow: 0 14px 30px -18px rgba(58,53,44,.7);
  transform: rotate(1.4deg);
  max-width: min(78%, 320px);
}
.spec-photo img { display:block; width:100%; height:auto; filter: saturate(.96) contrast(1.02); }
.tape { position:absolute; width:64px; height:22px; background: rgba(201,162,75,.28); top:-10px;
        border-left:1px dashed rgba(140,106,30,.3); border-right:1px dashed rgba(140,106,30,.3); }
.tape-l { left:-14px; transform: rotate(-32deg); }
.tape-r { right:-14px; transform: rotate(32deg); }

.spec-msg {
  font-family: var(--body); font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.85; color: var(--ink); max-width: 46ch; margin: 0 auto 1.2rem;
}
[dir="rtl"] .spec-msg { font-family: var(--arab); line-height: 2.1; }

.spec-voice {
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.6); border:1px solid var(--line);
  border-radius: 999px; padding: .4rem .9rem .4rem .45rem;
}
.voice-btn {
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background: linear-gradient(180deg, var(--carnation), var(--carnation-2));
  color:#fff; font-size:.85rem; display:grid; place-items:center;
}
.voice-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.voice-wave { display:inline-flex; align-items:center; gap:3px; height:20px; }
.voice-wave i { width:3px; height:7px; background:var(--carnation); border-radius:2px; opacity:.55; }
.voice-wave.playing i { animation: wave .9s ease-in-out infinite; }
.voice-wave.playing i:nth-child(2){animation-delay:.1s}
.voice-wave.playing i:nth-child(3){animation-delay:.2s}
.voice-wave.playing i:nth-child(4){animation-delay:.3s}
.voice-wave.playing i:nth-child(5){animation-delay:.15s}
.voice-wave.playing i:nth-child(6){animation-delay:.25s}
.voice-wave.playing i:nth-child(7){animation-delay:.05s}
@keyframes wave { 0%,100%{height:6px} 50%{height:18px} }
.voice-label { font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:.9rem; }
.spec-press { margin-top: .4rem; display:flex; justify-content:center; opacity:.85; }

/* ============================================================
   Modal / popup
   ============================================================ */
.overlay {
  position: fixed; inset:0; z-index: 60;
  background: rgba(40,34,26,.55);
  backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding: 1rem; opacity:0; pointer-events:none; transition: opacity .4s ease;
}
.overlay.show { opacity:1; pointer-events:auto; }
.modal {
  width: min(560px, 96vw); max-height: 92vh; overflow:auto;
  transform: translateY(14px) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.25,1);
}
.overlay.show .modal { transform: none; }
.modal-head { text-align:center; padding: 1.4rem 1.4rem .4rem; }
.modal-head h2 { font-family: var(--serif); font-weight:600; font-size: 1.7rem; margin:.2rem 0; color: var(--ink); }
.modal-head p { font-family: var(--serif); font-style:italic; color: var(--ink-soft); margin:.2rem 0 0; }
.modal-actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; padding: 1rem 1.4rem 1.6rem; }

/* ============================================================
   The Book
   ============================================================ */
.book-stage {
  position: relative; z-index: 3;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.5rem, 3vw, 2.5rem);
  perspective: 2200px;
}
.book-frame {
  position: relative;
  width: min(620px, 94vw);
  height: min(82vh, 860px);
  transform-style: preserve-3d;
}
.leaf {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #fffdf7 0%, var(--paper) 55%, var(--paper-2) 100%);
  border: 1px solid var(--paper-deep);
  border-radius: 6px;
  box-shadow: var(--shadow-page);
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  will-change: transform;
}
.leaf::before { /* binding shadow on inner edge */
  content:""; position:absolute; top:0; bottom:0; width:40px; z-index:4; pointer-events:none;
}
[dir="ltr"] .leaf::before { left:0; background: linear-gradient(90deg, rgba(58,53,44,.18), transparent); }
[dir="rtl"] .leaf::before { right:0; background: linear-gradient(270deg, rgba(58,53,44,.18), transparent); }
.leaf::after { /* deckle frame */
  content:""; position:absolute; inset:14px; border:1px solid rgba(201,162,75,.3);
  border-radius:3px; pointer-events:none; z-index:3;
}
.leaf-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  /* center when it fits, but align to top (scrollable) when the page is taller,
     so long messages aren't clipped at the top */
  justify-content: safe center;
  text-align: center; padding: clamp(1.6rem, 5vw, 3rem); overflow-y: auto;
}
/* turn shadow sweep */
.turn-shade {
  position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0;
  background: linear-gradient(90deg, rgba(58,53,44,.5), rgba(58,53,44,0) 60%);
  transition: opacity .2s;
}

/* nav */
.nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(251,248,241,.9); border: 1px solid var(--gold);
  color: var(--gold-deep); font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft); transition: transform .2s, color .2s;
}
.nav:hover { color: var(--carnation); transform: translateY(-50%) scale(1.08); }
.nav:disabled { opacity: 0; pointer-events: none; }
.nav.prev { left: max(8px, calc(50% - min(310px, 47vw) - 23px)); }
.nav.next { right: max(8px, calc(50% - min(310px, 47vw) - 23px)); }
@media (max-width: 700px){ .nav.prev{left:6px} .nav.next{right:6px} .nav{background:rgba(251,248,241,.96)} }
.page-count {
  position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:.95rem; z-index:20;
}

/* ---- cover page ---- */
/* cover blends with the leaf — no hard-edged panel */
.cover { background: transparent !important; }
.cover .hada { font-family: var(--calig); font-size: clamp(4rem, 16vw, 7rem); line-height:.9; margin: .2rem 0; }
.cover .cap-flower { width: clamp(90px,22vw,140px); margin: 0 auto 1rem; }
.cover .classof { margin-top: 1.4rem; }
.cover .classof .smallcaps { color: var(--gold-deep); font-size: .9rem; }
.cover .yr { font-family: var(--serif); font-size: 3rem; color: var(--gold-deep); line-height:1; }
.cover .open-hint { margin-top: 2rem; font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.cover .open-hint::before { content:"❦"; display:block; color:var(--carnation); font-size:1.4rem; margin-bottom:.3rem; }

/* ---- dedication: self-drawing hada ---- */
.hada-draw {
  font-family: var(--calig);
  font-size: clamp(4.5rem, 18vw, 8rem);
  line-height: 1; margin: 0 0 1.4rem;
  background: linear-gradient(115deg, var(--gold-deep), var(--gold) 35%, var(--gold-lite) 50%, var(--gold) 65%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(-0.4em 100% -0.9em 0);
}
[dir="rtl"] .hada-draw.run { animation: drawAr 2.4s ease forwards; }
[dir="ltr"] .hada-draw.run { animation: drawAr 2.4s ease forwards; }
/* generous negative top/bottom insets so calligraphy ascenders/descenders are never clipped */
@keyframes drawAr { to { clip-path: inset(-0.4em 0 -0.9em 0); } }
.dedication-text {
  font-family: var(--body); font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  line-height: 2; color: var(--ink); max-width: 40ch; opacity: 0;
  animation: fadeUp 1.2s ease 1.6s forwards;
}
[dir="rtl"] .dedication-text { font-family: var(--arab); }
@keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }

/* ---- botanical plate ---- */
.plate .bloom { width: clamp(160px, 40vw, 240px); }
.plate .binomial { font-size: clamp(1.4rem, 4vw, 2rem); margin: .8rem 0 .2rem; }
.plate .common { font-family: var(--serif); letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); font-size:.8rem; }
.plate .note { font-family: var(--body); color: var(--ink-soft); max-width: 38ch; margin: 1.2rem auto 0; line-height:1.7; font-style:italic; }
[dir="rtl"] .plate .note { font-family: var(--arab); }
.plate .rule { width: 60px; height:1px; background: var(--gold); margin: 1rem auto; }

/* ---- then / now ---- */
.then .polaroid {
  background:#fff; padding:12px 12px 46px; border:1px solid #eee;
  box-shadow: 0 20px 44px -22px rgba(58,53,44,.7); transform: rotate(-2.2deg);
  max-width: min(74%, 300px); position: relative;
}
.then .polaroid img { display:block; width:100%; filter: saturate(.95) contrast(1.02); }
.then .polaroid figcaption { position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.then .tape { background: rgba(201,162,75,.3); top:-12px; }
.then h2, .now h2 { font-family: var(--serif); font-weight:600; font-size: clamp(1.5rem,4vw,2rem); margin: 1.2rem 0 .4rem; }
.then p, .now p { font-family: var(--body); color: var(--ink-soft); max-width: 40ch; line-height:1.8; }
[dir="rtl"] .then p, [dir="rtl"] .now p { font-family: var(--arab); }
.now .nowmark { display:flex; gap:1.2rem; align-items:center; justify-content:center; margin-bottom:.6rem; }
.now .nowmark .d { width:88px; } .now .nowmark .f { width:84px; }
.now .yr { font-family: var(--serif); font-size: clamp(2.4rem,7vw,3.4rem); color: var(--gold-deep); }

/* ---- divider ---- */
.divider h2 { font-family: var(--serif); font-weight:600; font-size: clamp(1.7rem,5vw,2.4rem); margin:.4rem 0; }
.divider .sub { font-family: var(--serif); font-style: italic; color: var(--ink-soft); max-width:36ch; }
[dir="rtl"] .divider .sub { font-family: var(--arab); font-style: normal; }
.divider .sprig { width:90px; margin: 1rem auto 0; }

/* ---- closing ---- */
.closing .mark { width: 96px; margin: 0 auto 1rem; }
.closing p { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,3.4vw,1.7rem);
  color: var(--ink); max-width: 32ch; line-height:1.8; }
[dir="rtl"] .closing p { font-family: var(--arab); font-style: normal; }

/* ---- empty ---- */
.empty-note { font-family: var(--serif); font-style:italic; color: var(--ink-soft); max-width:34ch; line-height:1.7; }

/* duck waddling along bottom of leaf */
.leaf .duck-strip { position:absolute; bottom:18px; z-index:5; width:54px; pointer-events:none; opacity:.92; }

/* ---- sign-in gate ---- */
.gate-wrap { width: min(440px, 100%); text-align:center; }
.gate-wrap .flower { width: 92px; margin: 0 auto .6rem; }
.gate-wrap h1 { font-family: var(--serif); font-weight:600; font-size: clamp(1.8rem,6vw,2.4rem); margin:.2rem 0; }
.gate-wrap .sub { font-family: var(--body); color: var(--ink-soft); margin:.4rem 0 1.6rem; line-height:1.6; }
[dir="rtl"] .gate-wrap .sub { font-family: var(--arab); }
.gate-card { padding: 1.8rem; text-align:start; }
.gate-card .err { color: var(--carnation-2); font-family:var(--serif); font-style:italic; min-height:1.2em; margin:.4rem 0 0; }