*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fdf6ee;--bg-card:#fef9f3;--bg-card2:#fffdf8;
  --text:#2c1b14;--text-light:#7a5c4d;--text-faint:#c4a898;
  --accent:#d4a5a5;--accent-soft:#f0d6d6;--gold:#c9a96e;--gold2:#e8c98a;
  --shadow:rgba(180,120,100,0.10);--shadow-deep:rgba(100,60,40,0.18);
  --border:rgba(212,165,165,0.25);--tape-color:rgba(212,185,165,0.38);
  --env-bg:#f0e0cc;--env-bg2:#e8d3bb;--env-fold:#cdb394;--env-fold-l:#d6bc9e;--env-fold-bottom:#c0a882;
  --env-flap-open:#dfc9ae;--env-label-bg:#faf7f2;
  --env-border:rgba(170,135,105,0.5);--env-shadow:rgba(160,120,90,0.22);
  --seal-bg:#bf4c30;--seal-inner:#8b2d1a;--seal-accent:#a83a23;--seal-text:#fde8e0;
  --lock-bg:rgba(44,27,20,0.06);--lock-border:rgba(212,165,165,0.4);
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Caveat',cursive;
  --font-signature:'Sacramento',cursive;
  --font-ui:'DM Sans',system-ui,sans-serif;
}
html,body{min-height:100%;background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:18px;line-height:1.75;color:var(--text)}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");background-repeat:repeat;opacity:1;}
.state-screen{position:relative;z-index:1;min-height:100vh;width:100%}
.state-screen.hidden{display:none!important}
#state-envelope{display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:visible;padding:1.5rem 1rem;}
.envelope-scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both;}
.envelope-scale-box{position:relative;width:420px;height:280px;transform-origin:top center;}
.lock-panel{width:420px;transform-origin:top center;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem 0;gap:1.2rem;}
.lock-ornament{display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0.7;}
.lock-ornament svg{filter:drop-shadow(0 2px 6px rgba(191,76,48,0.15))}
.lock-divider{width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.5;}
.password-form{display:flex;flex-direction:column;align-items:center;gap:0.85rem;width:100%;max-width:260px;font-family:var(--font-ui);}
.password-form .input-label{font-size:0.65rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-light);}
.password-form input{width:100%;text-align:center;font-family:var(--font-ui);font-size:0.92rem;color:var(--text);background:rgba(255,253,248,0.9);border:1px solid var(--lock-border);border-radius:40px;padding:0.72rem 1.2rem;outline:none;box-shadow:0 2px 10px rgba(212,165,165,0.12),inset 0 1px 3px rgba(212,165,165,0.08);transition:border-color 0.25s,box-shadow 0.25s;letter-spacing:0.04em;}
.password-form input:focus{border-color:var(--accent);box-shadow:0 2px 16px rgba(212,165,165,0.25),inset 0 1px 3px rgba(212,165,165,0.08);}
.password-form input::placeholder{color:var(--text-faint)}
.password-form .login-btn{font-family:var(--font-ui);font-size:0.82rem;letter-spacing:0.08em;color:var(--seal-text);background:linear-gradient(135deg,var(--seal-bg),var(--seal-accent));border:none;border-radius:40px;padding:0.72rem 2rem;cursor:pointer;box-shadow:0 4px 18px rgba(191,76,48,0.28),0 1px 4px rgba(191,76,48,0.15);transition:transform 0.2s,box-shadow 0.2s,filter 0.2s;position:relative;overflow:hidden;}
.password-form .login-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12),transparent);border-radius:inherit;}
.password-form .login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(191,76,48,0.35),0 2px 8px rgba(191,76,48,0.2);filter:brightness(1.05);}
.password-form .login-btn:active{transform:translateY(0) scale(0.97)}
.password-error{font-family:var(--font-ui);font-size:0.77rem;color:var(--seal-bg);text-align:center;background:rgba(191,76,48,0.06);border:1px solid rgba(191,76,48,0.18);border-radius:20px;padding:0.4rem 1rem;animation:fadeUp 0.4s ease both;}
.hidden{display:none!important}
.envelope-wrapper{cursor:pointer;position:relative;width:420px;height:280px;outline:none;-webkit-tap-highlight-color:transparent;animation:float-envelope 4s ease-in-out infinite;}
.envelope-wrapper.is-locked{cursor:default;pointer-events:none}
@keyframes float-envelope{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(0.3deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.envelope-body{width:100%;height:100%;position:relative;background:linear-gradient(160deg,#f7e8d5 0%,#ead5bb 60%,#e0c9ab 100%);border:1px solid var(--env-border);border-radius:2px;box-shadow:0 2px 0 rgba(255,255,255,0.4) inset,0 6px 28px var(--env-shadow),0 28px 72px rgba(0,0,0,0.13),0 2px 6px rgba(0,0,0,0.06);overflow:hidden;transition:box-shadow 0.35s,transform 0.35s;}
.envelope-wrapper:not(.is-locked):hover .envelope-body{transform:translateY(-5px) scale(1.015) rotate(-0.3deg);box-shadow:0 2px 0 rgba(255,255,255,0.4) inset,0 12px 40px var(--shadow),0 40px 90px var(--shadow-deep);}
.env-texture{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent,transparent 27px,rgba(180,140,100,0.04) 27px,rgba(180,140,100,0.04) 28px);}
.env-folds{position:absolute;inset:0;z-index:3;pointer-events:none}
.env-fold-left{position:absolute;top:0;left:0;width:0;height:0;border-top:140px solid transparent;border-bottom:140px solid transparent;border-left:170px solid var(--env-fold-l);filter:drop-shadow(3px 0 8px rgba(0,0,0,0.06));}
.env-fold-left::after{content:'';position:absolute;top:-140px;left:-170px;border-top:140px solid transparent;border-bottom:140px solid transparent;border-left:170px solid rgba(255,255,255,0.06);}
.env-fold-right{position:absolute;top:0;right:0;width:0;height:0;border-top:140px solid transparent;border-bottom:140px solid transparent;border-right:170px solid var(--env-fold);filter:drop-shadow(-3px 0 8px rgba(0,0,0,0.06));}
.env-bottom-fold{position:absolute;bottom:0;left:0;width:100%;height:0;border-left:210px solid transparent;border-right:210px solid transparent;border-bottom:118px solid var(--env-fold-bottom);z-index:5;filter:drop-shadow(0 -4px 14px rgba(0,0,0,0.07));}
.env-letter-peek{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:76%;height:68px;background:linear-gradient(to bottom,#fffef9,#faf8f2);border:1px solid rgba(220,190,165,0.5);border-bottom:none;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 1.5rem;transition:transform 0.65s cubic-bezier(0.16,1,0.3,1);box-shadow:0 -3px 14px rgba(180,130,100,0.08),0 -1px 4px rgba(180,130,100,0.06);}
.env-letter-lines{width:100%;display:flex;flex-direction:column;gap:0.6rem}
.env-letter-lines span{display:block;height:1px;background:var(--accent);opacity:0.2;border-radius:1px}
.env-letter-lines span:nth-child(1){width:100%}
.env-letter-lines span:nth-child(2){width:75%}
.env-letter-lines span:nth-child(3){width:50%}
.env-letter-heart{position:absolute;right:18px;top:12px;font-size:12px;opacity:0.25;color:var(--seal-bg);}
.env-flap{position:absolute;top:0;left:0;width:100%;z-index:10;transform-origin:top center;height:0;border-left:210px solid transparent;border-right:210px solid transparent;border-top:122px solid #ead5bc;transition:transform 1.15s cubic-bezier(0.19,1,0.22,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,0.07));}
.env-flap::after{content:'';position:absolute;top:-122px;left:-210px;border-left:210px solid transparent;border-right:210px solid transparent;border-top:122px solid rgba(255,255,255,0.07);}
.env-seal{position:absolute;top:92px;left:50%;transform:translateX(-50%);width:102px;height:102px;z-index:30;transition:opacity 0.6s,transform 0.6s ease-out;filter:drop-shadow(0 3px 10px rgba(140,45,26,0.35));}
.env-recipient{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:78%;max-width:270px;max-height:76px;overflow:hidden;background:rgba(250,247,242,0.92);border:1px solid rgba(200,170,145,0.45);border-radius:2px;box-shadow:0 2px 10px rgba(180,140,110,0.12),0 1px 3px rgba(180,140,110,0.08);padding:0.55rem 1rem;text-align:center;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.3rem;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent,transparent 30px,rgba(180,140,110,0.07) 30px,rgba(180,140,110,0.07) 31px);transition:opacity 0.3s,transform 0.3s;}
.env-stamp{position:absolute;top:8px;right:10px;z-index:25;width:34px;height:42px;background:linear-gradient(135deg,#f7e8d5,#f0dcc0);border:1px dashed rgba(180,140,110,0.5);border-radius:1px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,0.06);pointer-events:none;}
.env-stamp svg{opacity:0.6}
.env-to-label{font-family:var(--font-ui);font-size:0.68rem;letter-spacing:0.38em;text-transform:uppercase;color:var(--text-light);background:rgba(250,247,242,0.9);padding:0 6px;z-index:1;line-height:1;}
.env-to-name{font-family:var(--font-body);font-size:2.2rem;color:var(--text);opacity:0.92;line-height:1;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.envelope-hint{font-family:var(--font-ui);font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-faint);animation:float-hint 2.2s ease-in-out infinite;user-select:none;margin-top:1.2rem;}
@keyframes float-hint{0%,100%{opacity:0.4;transform:translateY(0)}50%{opacity:0.9;transform:translateY(-4px)}}
.envelope-wrapper.is-opening{animation:none!important;transform:translateY(12px) scale(1.04) rotate(0.5deg);transition:transform 0.65s cubic-bezier(0.34,1.56,0.64,1);}
.envelope-wrapper.is-opening .env-flap{transform:perspective(600px) rotateX(-180deg);border-top-color:var(--env-flap-open);}
.envelope-wrapper.is-opening .env-seal{opacity:0;transform:translateX(-50%) translateY(-22px) scale(0.55)}
.envelope-wrapper.is-opening .env-letter-peek{transform:translateX(-50%) translateY(-105px)}
.envelope-wrapper.is-opening .env-recipient{opacity:0;transform:translateX(-50%) translateY(12px)}
.envelope-wrapper.is-opening .env-stamp{opacity:0}
.envelope-scene.is-exit{animation:env-exit 0.6s cubic-bezier(0.4,0,1,1) forwards}
@keyframes env-exit{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.82) translateY(36px)}}
@media(max-width:500px){.letter-scroll{padding:2.5rem 0.75rem 7rem}.letter-paper{padding:2.5rem 1.75rem}.letter-paper::before,.letter-paper::after{display:none}}
@media(max-width:360px){.letter-paper{padding:2rem 1.25rem}}

/* ===== إصلاحات iOS =====
   سفاري بيعمل زووم إجباري على أي خانة إدخال حجم خطها أقل من 16px، فالصفحة
   بتتحرك والكيبورد بيطلع والزائر بيحس إنها علّقت. 16px بالظبط بيلغي الزووم.
   (ملاحظة: user-scalable=no مش بيمنعه — iOS بيتجاهله من إصدار 10) */
@media (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}
/* الكيبورد مايغطيش الخانة، والتمرير يبقى ناعم على iOS */
input, textarea { -webkit-appearance: none; border-radius: inherit; }

/* ===== تخفيف الحِمل على الموبايل =====
   العناصر المتحركة كانت بتتكوّم: 3 قلوب كل 0.6 ثانية × عمر 15 ثانية
   = 75 عنصر متحرك في نفس اللحظة. المتصفح بيعيد رسمهم 60 مرة/ثانية
   وده بيخنق معالج الموبايل. */
.float-item, .heart, .petal, .bubble, .sparkle {
  will-change: transform, opacity;   /* يرسمهم على كارت الشاشة مش المعالج */
  contain: layout style paint;       /* يمنع إعادة حساب باقي الصفحة */
}
/* لو المستخدم مفعّل "تقليل الحركة" في إعدادات جهازه، نحترمها */
@media (prefers-reduced-motion: reduce) {
  .float-item, .heart, .petal, .bubble, .sparkle { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; }
}

/* ===== تحسين أداء الأنيميشن =====
   المشكلة: gradientShift بيحرّك background-position و photoGlow بيحرّك
   box-shadow — الاتنين مش بيشتغلوا على كارت الشاشة، فالمعالج بيعيد رسم
   الشاشة كلها 60 مرة في الثانية. على الموبايل ده بيعلّق وياكل البطارية.
   transform و opacity بس هما اللي بيشتغلوا على الكارت. */

/* نقول للمتصفح يحجز طبقة للقلوب — بيمنع إعادة الرسم */
.float-item {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* على الموبايل: نقلل القلوب ونوقف الأنيميشن التقيلة */
@media (max-width: 820px) {
  /* نسيب أول 10 قلوب بس بدل 24 */
  .float-item:nth-child(n+11) { display: none; }
  /* التدرج المتحرك: بيرسم الشاشة كلها كل فريم */
  body { animation: none !important; background-size: 100% 100% !important; }
  /* توهج الصورة: box-shadow متحرك = إعادة رسم كاملة */
  .photo-circle img, .photo-circle { animation: none !important; }
  /* الضبابية تقيلة على معالج الموبايل */
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* احترام إعداد "تقليل الحركة" في نظام المستخدم */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}