/* ============================================================
   دعوة خطوبة بكر & زينب — التصميم
   لوحة ألوان: وردي خمري، ذهبي، كريمي دافئ
   ============================================================ */

:root{
  --ink:#3a2d24;
  --ink-soft:#5a4a3e;
  --rose:#c98b8b;
  --rose-deep:#a8676a;
  --rose-dark:#8f5356;
  --gold:#bf9b5f;
  --gold-soft:#d6bb83;
  --gold-bright:#e3c987;
  --cream:#f7f0e7;
  --cream-2:#f0e6d8;
  --cream-3:#e9dcc9;
  --leaf:#8a9a7b;
  --line:rgba(168,103,106,.24);
  --line-gold:rgba(191,155,95,.3);
  --shadow-sm:rgba(120,80,60,.12);
  --shadow-md:rgba(120,80,60,.18);
  --shadow-lg:rgba(120,80,60,.28);
  --grad-name:linear-gradient(120deg,#8f5356 0%,#a8676a 22%,#c98b8b 45%,#cda86f 72%,#bf9b5f 100%);
  --grad-gold:linear-gradient(120deg,#bf9b5f,#e3c987 50%,#bf9b5f);
  --grad-rose:linear-gradient(135deg,#c98b8b,#a8676a);
  --ease:cubic-bezier(.22,.85,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'El Messiri',sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(201,139,139,.25);color:var(--ink)}

.wrap{max-width:800px;margin:0 auto;position:relative;z-index:2}

/* ====== خلفية متدرّجة ناعمة ثابتة ====== */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(214,187,131,.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(201,139,139,.12), transparent 55%),
    radial-gradient(ellipse 70% 60% at 0% 80%, rgba(191,155,95,.08), transparent 55%),
    linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 50%, var(--cream-3) 100%);
}

/* ============================================================
   الجسيمات والتأثيرات البصرية
   ============================================================ */
.petal{position:fixed;top:-5vh;z-index:1;pointer-events:none;color:var(--rose);
  opacity:.4;will-change:transform;animation:fall linear infinite}
@keyframes fall{
  0%{transform:translateY(-5vh) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.45}
  50%{transform:translateY(50vh) translateX(28px) rotate(180deg)}
  90%{opacity:.4}
  100%{transform:translateY(106vh) translateX(-18px) rotate(360deg);opacity:0}
}

#bokeh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(227,201,135,.55), rgba(191,155,95,0) 70%);
  filter:blur(.5px);will-change:transform,opacity;animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}
  15%{opacity:.85}
  85%{opacity:.4}
  100%{transform:translateY(-118vh) translateX(36px) scale(1.15);opacity:0}
}

/* توهّج يتبع المؤشر/اللمس */
#cursorGlow{position:fixed;width:300px;height:300px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, rgba(214,187,131,.14), transparent 65%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s ease;will-change:left,top}

#starfield{position:absolute;inset:0;z-index:0;pointer-events:none}

/* ====== شريط التقدم ====== */
.progress-bar{position:fixed;top:0;right:0;height:3px;width:0;z-index:85;
  background:var(--grad-gold);box-shadow:0 0 10px rgba(191,155,95,.5);transition:width .1s linear}

/* ============================================================
   زر الموسيقى
   ============================================================ */
.audio-toggle{
  position:fixed;top:18px;left:18px;z-index:80;
  width:48px;height:48px;border-radius:50%;
  background:rgba(247,240,231,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-gold);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px var(--shadow-md);
  transition:transform .35s var(--ease), opacity .6s ease, box-shadow .35s ease;
  opacity:0;pointer-events:none;
}
.audio-toggle.show{opacity:1;pointer-events:auto}
.audio-toggle:hover{transform:scale(1.1);box-shadow:0 8px 26px var(--shadow-lg)}
.audio-toggle:active{transform:scale(.95)}
.audio-toggle .bars{display:flex;align-items:flex-end;gap:2.5px;height:18px}
.audio-toggle .bars i{width:3px;border-radius:2px;background:var(--rose-deep);animation:eq 1s ease-in-out infinite}
.audio-toggle .bars i:nth-child(1){height:7px;animation-delay:0s}
.audio-toggle .bars i:nth-child(2){height:16px;animation-delay:.18s}
.audio-toggle .bars i:nth-child(3){height:10px;animation-delay:.36s}
.audio-toggle .bars i:nth-child(4){height:18px;animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.audio-toggle.muted .bars i{animation-play-state:paused;transform:scaleY(.35);opacity:.45}

/* ============================================================
   شاشة الافتتاح
   ============================================================ */
#gate{
  position:fixed;inset:0;z-index:60;
  background:
    radial-gradient(circle at 50% 30%, #fbf5ed, #ece0cf 78%);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  transition:opacity 1s ease, visibility 1s;
}
#gate.hide{opacity:0;visibility:hidden}
.gate-inner{display:flex;flex-direction:column;align-items:center}
.gate-orn{font-family:'Amiri',serif;color:var(--gold);font-size:28px;letter-spacing:4px;animation:shimmer 3s ease-in-out infinite}
.gate-orn.top{margin-bottom:32px}
@keyframes shimmer{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

.env{
  width:256px;height:182px;position:relative;cursor:pointer;
  animation:floaty 4s ease-in-out infinite;
  transition:transform .5s var(--ease);
}
.env-shadow{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);width:70%;height:24px;
  background:radial-gradient(ellipse, rgba(120,80,60,.28), transparent 70%);filter:blur(5px);
  animation:shadowPulse 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.82);opacity:.32}}
.env:hover{transform:translateY(-6px) scale(1.03)}

.env .body{position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(155deg,#f6ebdb,#e8d5be);
  border:1px solid rgba(168,103,106,.25);box-shadow:0 24px 40px rgba(120,80,60,.26)}
.env .flap{position:absolute;top:0;left:0;right:0;height:0;z-index:3;
  border-left:128px solid transparent;border-right:128px solid transparent;
  border-top:102px solid #efe0ca;transform-origin:top;
  filter:drop-shadow(0 4px 5px rgba(120,80,60,.1));
  transition:transform .8s cubic-bezier(.6,.05,.3,1)}
.env .pocket{position:absolute;bottom:0;left:0;right:0;height:130px;z-index:4;
  background:linear-gradient(155deg,#f2e4d0,#e5d0b5);border-radius:0 0 13px 13px;
  clip-path:polygon(0 32%,50% 100%,100% 32%,100% 100%,0 100%)}
.env .letter{position:absolute;top:20px;left:20px;right:20px;height:68px;z-index:2;
  background:linear-gradient(180deg,#fffdf8,#fff8ee);border-radius:6px;
  box-shadow:0 -2px 8px rgba(0,0,0,.06);padding:14px 18px;
  transition:transform .8s var(--ease) .15s}
.letter-line{display:block;height:3px;border-radius:2px;background:rgba(168,103,106,.16);margin-bottom:7px}
.letter-line.a{width:70%}.letter-line.b{width:90%}.letter-line.c{width:55%}
.env .seal{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:5;
  width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--rose), var(--rose-deep));
  border:2px solid rgba(255,247,239,.4);
  box-shadow:0 6px 16px rgba(143,83,86,.45), inset 0 2px 5px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease, transform .45s ease}
.monogram{display:flex;align-items:baseline;direction:ltr;line-height:1;gap:1px}
.monogram .ml{font-family:'Amiri',serif;font-weight:700;font-size:27px;color:#fff7ef;text-shadow:0 1px 3px rgba(120,40,40,.4)}
.monogram .amp-s{font-family:'Amiri',serif;font-style:italic;font-size:15px;color:#ffe9e0;align-self:center;margin:0 1px}

#gate.opening .env{animation:none;transform:translateY(-16px) scale(1.05)}
#gate.opening .flap{transform:rotateX(180deg)}
#gate.opening .seal{opacity:0;transform:translateX(-50%) scale(.5)}
#gate.opening .letter{transform:translateY(-30px)}
#gate.opening .env-shadow{opacity:0}

.gate-hint{margin-top:38px;font-family:'Reem Kufi',sans-serif;letter-spacing:1px;color:var(--rose-deep);font-size:16px}
.gate-hint span{display:inline-block;animation:hintPulse 1.9s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.gate-sub{margin-top:9px;font-size:13px;color:#a08a78;font-family:'Reem Kufi',sans-serif}

/* قصاصات الاحتفال */
.burst{position:fixed;left:50%;top:42%;z-index:62;pointer-events:none;border-radius:50%;will-change:transform,opacity}

/* ============================================================
   الواجهة الرئيسية
   ============================================================ */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px;position:relative}
.hero-content{position:relative;z-index:2}

.eyebrow{font-family:'Reem Kufi',sans-serif;letter-spacing:5px;font-size:13px;color:var(--rose-deep);margin-bottom:30px;font-weight:500}

.orn-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}
.orn-line{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn-row .orn-line:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.orn-mark{color:var(--gold);font-size:17px;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.names{font-family:'Amiri',serif;font-weight:700;font-size:clamp(52px,14vw,104px);line-height:1.06;letter-spacing:1px}
.names .word{display:inline-block;position:relative;opacity:0;
  transform:translateY(40px) scale(.9);filter:blur(8px);
  background:var(--grad-name);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s ease}
.names .word.show{opacity:1;transform:none;filter:none;animation:shine 5s linear infinite 1.2s}
@keyframes shine{0%{background-position:220% center}100%{background-position:-220% center}}
.amp{display:block;font-family:'Amiri',serif;font-style:italic;font-size:.42em;margin:6px 0;
  background:var(--grad-gold);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
  animation:shine 4s linear infinite}

.sub{margin-top:28px;font-size:19px;color:var(--rose-deep);font-weight:500}

.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2}
.mouse{display:block;width:24px;height:38px;border:2px solid var(--rose);border-radius:14px;position:relative;opacity:.6}
.wheel{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:3px;height:7px;border-radius:2px;background:var(--rose);
  animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:1;top:7px}60%{opacity:0;top:18px}100%{opacity:0;top:18px}}

/* ============================================================
   الأقسام العامة
   ============================================================ */
.section{padding:84px 24px;position:relative}
.kicker{font-family:'Reem Kufi',sans-serif;letter-spacing:4px;font-size:12px;color:var(--gold);text-align:center;
  margin-bottom:10px;text-transform:uppercase;font-weight:600}
.title{font-family:'Amiri',serif;font-weight:700;font-size:clamp(32px,7.5vw,48px);text-align:center;color:var(--ink);margin-bottom:6px}

.divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px auto 0;max-width:200px}
.d-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.divider .d-line:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.d-mark{color:var(--gold);font-size:14px}

/* حركة الظهور */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s ease var(--d,0s), transform 1s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ===== كلمة الدعوة ===== */
.note{text-align:center}
.salut{font-family:'Amiri',serif;font-size:26px;color:var(--rose-deep);margin-bottom:26px;font-weight:700}
.note-body{max-width:580px;margin:0 auto;font-size:18.5px;color:var(--ink-soft)}

/* ===== التاريخ + بطاقة الكشف ===== */
.datebox{text-align:center}
.scratch-wrap{max-width:450px;margin:38px auto 0}
.scratch-stage{position:relative;width:100%;aspect-ratio:1.55/1;border-radius:22px;overflow:hidden;
  box-shadow:0 20px 50px var(--shadow-md), inset 0 0 0 1px var(--line);}
.date-underneath{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(circle at 50% 30%, #fffaf2, #f1e4d2)}
.date-grid{display:flex;align-items:flex-start;gap:18px;direction:ltr}
.dcol{display:flex;flex-direction:column;align-items:center;min-width:62px}
.dnum{font-family:'Amiri',serif;font-weight:700;font-size:50px;line-height:1;
  background:var(--grad-name);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep)}
.dlbl{font-family:'Reem Kufi',sans-serif;font-size:12px;color:var(--rose-deep);letter-spacing:1px;margin-top:8px}
.dsep{font-family:'Amiri',serif;font-size:42px;color:var(--gold);align-self:center}
.day-name{font-family:'El Messiri',sans-serif;font-size:16px;color:var(--gold);font-weight:600;letter-spacing:1px}
#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
#scratchCanvas:active{cursor:grabbing}
.scratch-hint{margin-top:18px;font-family:'Reem Kufi',sans-serif;font-size:14px;color:var(--rose-deep);letter-spacing:.5px;transition:opacity .5s}

/* العد التنازلي */
.countdown{display:flex;justify-content:center;gap:14px;margin-top:40px;flex-wrap:wrap;direction:ltr}
.cd{position:relative;background:rgba(247,240,231,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-gold);border-radius:18px;padding:20px 16px;min-width:82px;text-align:center;
  box-shadow:0 10px 26px var(--shadow-sm);overflow:hidden}
.cd::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.cd b{display:block;font-family:'Amiri',serif;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad-name);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep)}
.cd span{font-family:'Reem Kufi',sans-serif;font-size:12px;color:var(--ink-soft);letter-spacing:1px;margin-top:8px;display:block;direction:rtl}

/* ===== برنامج الحفل ===== */
.schedule{text-align:center}
.timeline{max-width:480px;margin:42px auto 0;position:relative;text-align:right}
.timeline::before{content:'';position:absolute;top:10px;bottom:10px;right:62px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line),var(--line),transparent)}
.ev{display:flex;align-items:center;gap:22px;padding:16px 0;position:relative}
.ev .t{font-family:'Amiri',serif;font-weight:700;font-size:23px;color:var(--rose-deep);
  min-width:66px;text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.ev .dot{width:14px;height:14px;border-radius:50%;background:var(--grad-rose);flex-shrink:0;z-index:2;
  border:3px solid var(--cream);box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--ease), box-shadow .35s ease}
.ev:hover .dot{transform:scale(1.4);box-shadow:0 0 0 1px var(--rose-deep), 0 0 16px rgba(168,103,106,.45)}
.ev .lbl{font-size:18px;color:var(--ink-soft)}

/* ===== المكان ===== */
.venue{text-align:center}
.venue-card{position:relative;max-width:460px;margin:38px auto 0;
  background:rgba(247,240,231,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-gold);border-radius:24px;padding:44px 30px;overflow:hidden;
  box-shadow:0 18px 46px var(--shadow-md);transition:transform .45s var(--ease), box-shadow .45s ease}
.venue-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px var(--shadow-lg)}
.venue-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;pointer-events:none;
  background:radial-gradient(circle at 50% 0%, rgba(214,187,131,.18), transparent 50%)}
.venue-card .pin{color:var(--rose-deep);position:relative;animation:pinBob 2.6s ease-in-out infinite}
@keyframes pinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.venue-name{font-family:'Amiri',serif;font-size:34px;color:var(--ink);margin:12px 0 4px;position:relative}
.venue-addr{color:var(--ink-soft);font-size:17px;position:relative}
.map-btn{display:inline-block;margin-top:26px;position:relative;
  font-family:'Reem Kufi',sans-serif;font-size:14px;letter-spacing:1px;color:var(--rose-deep);text-decoration:none;
  border:1px solid var(--rose);border-radius:32px;padding:13px 30px;overflow:hidden;
  transition:color .35s ease, box-shadow .35s ease}
.map-btn span{position:relative;z-index:2}
.map-btn::before{content:'';position:absolute;inset:0;background:var(--grad-rose);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);z-index:1}
.map-btn:hover{color:#fff;box-shadow:0 10px 24px rgba(201,139,139,.4)}
.map-btn:hover::before{transform:scaleX(1)}

/* ===== تأكيد الحضور ===== */
.rsvp{text-align:center}
.rsvp-text{max-width:490px;margin:20px auto 0;font-size:18px;color:var(--ink-soft)}
.rsvp-btn{position:relative;margin-top:34px;font-family:'El Messiri',sans-serif;font-weight:600;font-size:18px;color:#fff;
  border:none;border-radius:36px;padding:17px 50px;cursor:pointer;overflow:hidden;letter-spacing:.5px;
  background:var(--grad-rose);background-size:200% auto;
  box-shadow:0 14px 30px rgba(168,103,106,.42);transition:transform .3s var(--ease), box-shadow .3s ease, background-position .5s ease}
.rsvp-btn span{position:relative;z-index:2}
.rsvp-btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(168,103,106,.52);background-position:right center}
.rsvp-btn:active{transform:translateY(-1px) scale(.98)}

/* ===== الختام ===== */
.closing{padding:90px 24px 70px;text-align:center}
.seeyou{font-family:'El Messiri',sans-serif;color:var(--rose-deep);font-size:20px;margin-bottom:18px;font-weight:500}
.closing .orn-row{margin:18px auto}
.fnames{font-family:'Amiri',serif;font-weight:700;font-size:clamp(36px,9.5vw,60px);letter-spacing:1px;
  background:var(--grad-name);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rose-deep);
  animation:shine 6s linear infinite}
.closing-date{margin-top:12px;font-family:'Amiri',serif;font-size:20px;color:var(--gold);letter-spacing:3px;direction:ltr}

/* ============================================================
   نافذة التأكيد
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(53,42,34,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay.show{display:flex;animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--cream);max-width:444px;width:100%;border-radius:24px;padding:40px 32px;
  max-height:90vh;overflow:auto;box-shadow:0 34px 80px rgba(0,0,0,.34);
  animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(34px) scale(.95)}to{opacity:1;transform:none}}
.modal-title{font-family:'Amiri',serif;font-size:30px;text-align:center;color:var(--ink)}
.modal-hint{text-align:center;color:var(--rose-deep);font-size:14px;margin:6px 0 26px;font-family:'Reem Kufi',sans-serif}
.close{position:absolute;top:16px;left:20px;background:none;border:none;font-size:28px;color:#a89888;cursor:pointer;line-height:1;
  transition:transform .25s var(--ease), color .25s ease}
.close:hover{transform:rotate(90deg);color:var(--rose-deep)}

.field{margin-bottom:20px;text-align:right}
.field label,.field-label{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
.field input[type=text]{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:#fffdf8;font-family:'El Messiri',sans-serif;font-size:15px;color:var(--ink);transition:border-color .25s ease, box-shadow .25s ease}
.field input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(201,139,139,.15)}
.field input.error{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}

.opt{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;
  cursor:pointer;background:#fffdf8;position:relative;font-size:15px;
  transition:border-color .25s ease, background .25s ease, transform .2s var(--ease)}
.opt:hover{border-color:var(--rose);transform:translateX(-3px)}
.opt input{position:absolute;opacity:0}
.opt-text{flex:1}
.opt-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:all .25s ease;position:relative;flex-shrink:0}
.opt-check::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--grad-rose);transform:scale(0);transition:transform .25s var(--ease)}
.opt.sel{border-color:var(--rose-deep);background:#fbeeee}
.opt.sel .opt-check{border-color:var(--rose-deep)}
.opt.sel .opt-check::after{transform:scale(1)}

.submit{width:100%;margin-top:10px;padding:16px;border:none;border-radius:32px;color:#fff;cursor:pointer;
  font-family:'El Messiri',sans-serif;font-weight:600;font-size:17px;
  background:var(--grad-rose);background-size:200% auto;
  box-shadow:0 12px 28px rgba(168,103,106,.4);transition:transform .25s var(--ease), box-shadow .25s ease, background-position .5s ease}
.submit:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(168,103,106,.5);background-position:right center}

.thanks{text-align:center;padding:24px 6px}
.thanks-mark{font-size:40px;color:var(--rose-deep);animation:pop .6s var(--ease)}
.thanks .big{font-family:'Amiri',serif;font-size:32px;color:var(--rose-deep);margin:10px 0 12px}
.thanks p{color:var(--ink-soft);font-size:16px}

/* ============================================================
   استجابة الشاشات الصغيرة
   ============================================================ */
@media (max-width:480px){
  .section{padding:68px 20px}
  .env{width:228px;height:164px}
  .env .flap{border-left-width:114px;border-right-width:114px;border-top-width:92px}
  .env .pocket{height:118px}
  .countdown{gap:10px}
  .cd{min-width:70px;padding:16px 12px}
  .cd b{font-size:32px}
  .timeline::before{right:58px}
  .ev{gap:16px}
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .reveal{opacity:1;transform:none}
  .names .word{opacity:1;transform:none;filter:none}
}