/* ════════════════════════════════════════
   LIGHT MODE (default)
   Background: img/background.png (pastel)
   ════════════════════════════════════════ */
:root,
[data-theme="light"] {
  --bg-img: url('/img/background.png');
  --bg: #fdf6f0;
  --surface: rgba(255,255,255,0.82);
  --gold: #b07040;
  --gold-light: #c8885a;
  --gold-dim: rgba(176,112,64,0.12);
  --gold-glow: rgba(176,112,64,0.28);
  --text: #2d1f14;
  --muted: rgba(45,31,20,0.55);
  --border: rgba(45,31,20,0.1);
  --env-back: #e8d5c0;
  --env-side: #f0dece;
  --env-bottom: #e2cbb4;
  --env-top: #ebd9c6;
  --letter-bg: #fffdf8;
  --letter-text: #2d1f14;
  --section-alt: rgba(255,255,255,0.6);
  --shadow: rgba(90,60,30,0.12);
  --env-w: 56vw;
  --env-h: 38vh;
  color-scheme: light;
}

/* ════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-img: none;
  --bg: #0d0b09;
  --surface: rgba(26,20,14,0.9);
  --gold: #c8976b;
  --gold-light: #e5b382;
  --gold-dim: rgba(200,151,107,0.12);
  --gold-glow: rgba(200,151,107,0.28);
  --text: #f0ede8;
  --muted: rgba(240,237,232,0.5);
  --border: rgba(255,255,255,0.07);
  --env-back: #2a1f14;
  --env-side: #2e2218;
  --env-bottom: #251a10;
  --env-top: #332418;
  --letter-bg: #fdf8f0;
  --letter-text: #2d2318;
  --section-alt: rgba(255,255,255,0.02);
  --shadow: rgba(0,0,0,0.5);
  color-scheme: dark;
}

@media(max-width:768px){
  :root,[data-theme="light"],[data-theme="dark"]{ --env-w:90vw; --env-h:26vh }
}

/* ════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  position: relative;
}

/* Light mode: full-page pastel background */
[data-theme="light"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-img) center/cover no-repeat;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  position: fixed;
  top: 2vh;
  right: 2vw;
  z-index: 500;
  width: clamp(36px, 5vw, 46px); height: clamp(36px, 5vw, 46px);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px var(--shadow);
  transition: all 0.3s ease;
}
.theme-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px var(--gold-glow); }

/* ── ORDER OVERLAY ── */
.order-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
[data-theme="light"] .order-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/img/background.png') center/cover no-repeat;
  opacity: 0.5;
  z-index: 0;
}
.order-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.orb-1 { width:clamp(200px,50vw,500px);height:clamp(200px,50vw,500px);top:-10vh;left:-10vw;background:radial-gradient(circle,var(--gold-glow),transparent 70%);animation:orb 10s ease-in-out infinite alternate }
.orb-2 { width:clamp(160px,40vw,400px);height:clamp(160px,40vw,400px);bottom:-10vh;right:-10vw;background:radial-gradient(circle,var(--gold-dim),transparent 70%);animation:orb 10s ease-in-out infinite alternate-reverse }
@keyframes orb{0%{transform:translate(0,0)}100%{transform:translate(50px,30px)}}

.popup-card {
  position: relative; z-index: 2;
  background: var(--surface);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: clamp(16px, 3vw, 24px);
  padding: clamp(1.4rem, 4vh, 2.8rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.1rem, 3vh, 2.2rem);
  width: 90vw; max-width: 440px; margin: clamp(0.6rem, 1.111vw, 1rem);
  box-shadow: 0 32px 80px var(--shadow), 0 0 0 1px var(--gold-dim);
  animation: popup-in 0.8s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popup-in{from{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:none}}

.popup-logo { text-align: center; margin-bottom: clamp(1.2rem, 2.222vw, 2rem); }
.popup-logo-icon {
  width:clamp(48px,8vw,60px);height:clamp(48px,8vw,60px);
  background: linear-gradient(135deg,var(--gold),var(--gold-light));
  border-radius: clamp(12px,2vw,18px);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(1.4rem,3vw,1.8rem); color: #fff; margin-bottom: .8rem;
  box-shadow: 0 8px 32px var(--gold-glow);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 8px 32px var(--gold-glow)}50%{box-shadow:0 8px 48px var(--gold-dim)}}
.popup-logo h1 { font-family:'Playfair Display',serif; font-style:italic; font-size: clamp(1.26rem, 2.000vw, 1.8rem); color:var(--gold); margin-bottom:.3rem; }
.popup-logo p  { font-size:.85rem; color:var(--muted); }

.popup-divider { height:1px; background:linear-gradient(to right,transparent,var(--border),transparent); margin: clamp(0.84rem, 1.556vw, 1.4rem) 0; }

.popup-card label { display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.popup-input-wrap { position:relative; margin-bottom: clamp(0.72rem, 1.333vw, 1.2rem); }
.popup-input-icon { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--gold); opacity:.6; }
.popup-input-wrap input {
  width:100%; padding: .85rem clamp(0.6rem, 1.111vw, 1rem) .85rem clamp(1.56rem, 2.889vw, 2.6rem);
  background: var(--gold-dim);
  border: 1px solid var(--border); border-radius:12px;
  color: var(--text); font-family:'Outfit',sans-serif; font-size:1rem;
  outline:none; transition:all .3s;
}
.popup-input-wrap input:focus { border-color:var(--gold); background:var(--gold-dim); box-shadow:0 0 0 4px var(--gold-dim); }
.popup-input-wrap input::placeholder { color:var(--muted); }

.popup-btn {
  width:100%; padding:.9rem;
  background: linear-gradient(135deg,var(--gold),var(--gold-light));
  border:none; border-radius:12px; color:#fff;
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600;
  cursor:pointer; transition:all .3s;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.popup-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px var(--gold-glow); }
.popup-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.popup-btn-spinner { width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none; }
@keyframes spin{to{transform:rotate(360deg)}}

.popup-msg { margin-top:.8rem; padding:.7rem .9rem; border-radius:10px; font-size:.85rem; display:none; align-items:center; gap:.4rem; }
.popup-msg.error   { background:rgba(224,112,112,.1); border:1px solid rgba(224,112,112,.2); color:#e07070; display:flex; }
.popup-msg.success { background:rgba(126,200,154,.1); border:1px solid rgba(126,200,154,.2); color:#7ec89a; display:flex; }

.popup-footer { text-align:center; margin-top: clamp(0.72rem, 1.333vw, 1.2rem); font-size:.78rem; color:var(--muted); }
.popup-footer a { color:var(--gold); text-decoration:none; font-weight:500; }
.popup-footer a:hover { text-decoration:underline; }

/* ── FADE-UP ANIMATION ── */
.fade-up { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .8s ease; }
.fade-up.visible { opacity:1; transform:none; }

/* ── SECTION 1 HERO ── */
.s1-hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
[data-theme="dark"] .s1-hero { background:radial-gradient(ellipse at center,#1a1208 0%,var(--bg) 70%); }
[data-theme="light"] .s1-hero { background:transparent; }

.s1-bg-ring { position:absolute; border-radius:50%; border:1px solid var(--gold-dim); pointer-events:none; }
.s1-ring-1 { width:clamp(280px,60vw,600px);height:clamp(280px,60vw,600px);top:50%;left:50%;transform:translate(-50%,-50%); }
.s1-ring-2 { width:clamp(420px,90vw,900px);height:clamp(420px,90vw,900px);top:50%;left:50%;transform:translate(-50%,-50%);animation:ring-pulse 4s ease-in-out infinite; }
.s1-ring-3 { width:clamp(560px,120vw,1200px);height:clamp(560px,120vw,1200px);top:50%;left:50%;transform:translate(-50%,-50%);animation:ring-pulse 4s ease-in-out infinite .5s; }
@keyframes ring-pulse{0%,100%{opacity:.4}50%{opacity:.1}}

.s1-content { text-align:center; z-index:1; padding:4vh 5vw; }
.s1-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--gold-dim); border:1px solid var(--gold-dim);
  color:var(--gold); font-size:.8rem; font-weight:600; letter-spacing:.08em;
  padding: .4rem clamp(0.6rem, 1.111vw, 1rem); border-radius:999px; margin-bottom: clamp(0.9rem, 1.667vw, 1.5rem);
}
.s1-title {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(2.4rem,7vw,5rem);
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1.2; margin-bottom: clamp(0.6rem, 1.111vw, 1rem);
}
.s1-sub  { font-size:1.05rem; color:var(--muted); margin-bottom: clamp(1.5rem, 2.778vw, 2.5rem); }
.s1-to {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(1rem,2vw,1.3rem); color:var(--gold); opacity:.85;
  margin-bottom:.5rem; letter-spacing:.04em;
}
.s1-date {
  font-size:.82rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom: clamp(1.2rem, 2.222vw, 2rem); margin-top:.3rem;
}
.s1-scroll-hint { display:flex; flex-direction:column; align-items:center; gap:.4rem; color:var(--muted); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.s1-bounce { font-size:1.2rem; animation:bounce 2s ease-in-out infinite; }
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ── SECTION 2 ENVELOPE ── */
.s2-scroll-track { height:400vh; position:relative; }
[data-theme="dark"] .s2-scroll-track { background:var(--bg); }
[data-theme="light"] .s2-scroll-track { background:transparent; }

.s2-sticky {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  perspective:1200px;
}
.s2-label {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(1.2rem,2.5vw,1.8rem); color:var(--muted);
  margin-bottom:4vh; transition:opacity .4s,transform .4s;
}

/* Envelope */
.envelope-group { position:relative; width:var(--env-w); height:var(--env-h); }
.flap-back   { position:absolute;inset:0;background:var(--env-back);border-radius:8px;z-index:1;box-shadow:0 20px 50px var(--shadow); }
.flap-left   { position:absolute;left:0;top:0;width:55%;height:100%;background:var(--env-side);clip-path:polygon(0 0,100% 50%,0 100%);z-index:3;border-radius:8px 0 0 8px; }
.flap-right  { position:absolute;right:0;top:0;width:55%;height:100%;background:var(--env-side);clip-path:polygon(100% 0,0 50%,100% 100%);z-index:3;border-radius:0 8px 8px 0; }
.flap-bottom { position:absolute;left:0;bottom:0;width:100%;height:60%;background:var(--env-bottom);clip-path:polygon(0 100%,50% 0,100% 100%);z-index:4;border-radius:0 0 8px 8px; }
.flap-top    { position:absolute;left:0;top:0;width:100%;height:65%;background:var(--env-top);clip-path:polygon(0 0,50% 100%,100% 0);z-index:var(--flap-z,5);transform-origin:top;transform:rotateX(var(--flap-angle,0deg));border-radius:8px 8px 0 0; }
.flap-top::after,.flap-left::after,.flap-right::after { content:'';position:absolute;inset:0;background:linear-gradient(rgba(200,151,107,.04),transparent);pointer-events:none; }
.pocket-mask { position:absolute;inset:0;overflow:hidden;border-radius:8px;pointer-events:none; }

/* Letter card */
.letter-card {
  position:absolute; left:50%; bottom:-12%;
  width:90%; min-height:110%; margin-left:-45%;
  background: var(--letter-bg); color: var(--letter-text);
  z-index:2; border-radius:8px; box-shadow:0 4px 20px var(--shadow);
  transform: translateY(var(--card-y,0)) scale(var(--card-scale,.6));
  transform-origin:center bottom;
}
.letter-card-inner { padding:clamp(1.2rem,3vw,2.5rem); border:1px solid var(--gold-dim); border-radius:6px; margin:.5rem; }
.letter-header { margin-bottom: clamp(0.72rem, 1.333vw, 1.2rem); border-bottom:1px solid var(--gold-dim); padding-bottom: clamp(0.6rem, 1.111vw, 1rem); }
.letter-from   { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.letter-title  { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(1.4rem,3vw,2rem); color:var(--letter-text); margin-top:.3rem; }
.letter-body p { font-size:clamp(.85rem,1.5vw,1rem); line-height:1.8; color:var(--letter-text); font-family:'Playfair Display',serif; font-style:italic; opacity:.85; }
.letter-sig    { margin-top: clamp(0.9rem, 1.667vw, 1.5rem); font-size:.9rem; color:var(--gold); font-weight:500; }

.s2-scroll-hint { position:absolute; bottom:2rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--muted); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; opacity:0; transition:opacity .5s; }
.s2-scroll-hint i { font-size:1rem; animation:bounce 2s ease-in-out infinite; }

/* ── SECTION 3 PHOTOBOOTH ── */
.s3-photobooth {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  padding: 8vh 8vw;
  position: relative; overflow: hidden;
  text-align: center;
}
[data-theme="dark"]  .s3-photobooth { background:linear-gradient(135deg,#0d0b09 0%,#150f09 50%,#0d0b09 100%); }
[data-theme="light"] .s3-photobooth { background:rgba(255,255,255,0.35); }


.s3-left { max-width: 700px; width: 100%; }
.s3-quote {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(.95rem,2vw,1.2rem); color:var(--text);
  line-height:1.6; margin: clamp(1.2rem, 2.222vw, 2rem) auto;
  padding: clamp(1.08rem, 2.000vw, 1.8rem) clamp(0.6rem, 1.111vw, 1rem);
  border: none;
  max-width: 800px;
}
.s3-arrow { color:var(--gold); font-size: clamp(1.26rem, 2.000vw, 1.8rem); animation:bounce 2s ease-in-out infinite; }

/* ── SECTION 4 GALLERY ── */
.s4-gallery { min-height:100vh; padding:8vh 8vw; }
[data-theme="dark"]  .s4-gallery { background:var(--bg); }
[data-theme="light"] .s4-gallery { background:rgba(255,255,255,0.3); }

.s4-header { text-align:center; margin-bottom: clamp(1.8rem, 3.333vw, 3rem); }
.s4-tag   { display:inline-flex;align-items:center;gap:.4rem;background:var(--gold-dim);border:1px solid var(--gold-dim);color:var(--gold);font-size:.78rem;font-weight:600;letter-spacing:.08em;padding:.35rem .9rem;border-radius:999px;margin-bottom: clamp(0.6rem, 1.111vw, 1rem); }
.s4-title { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(2rem,4vw,3rem); color:var(--gold-light); margin-bottom:.5rem; }
.s4-sub   { color:var(--muted); font-size:.95rem; }

.s4-grid { display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.2rem, 2.222vw, 2rem); max-width:900px; margin:0 auto; }
@media(max-width:600px){ .s4-grid{grid-template-columns:1fr;max-width:320px} }

.s4-photo {
  background:#fff; padding: 12px 12px clamp(30px, 3.472vw, 50px); border-radius:3px;
  box-shadow:0 15px 40px var(--shadow); cursor:pointer;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1),box-shadow .4s;
  position:relative;
}
.s4-photo:nth-child(1){transform:rotate(-3deg)}
.s4-photo:nth-child(2){transform:rotate(2deg) translateY(-15px)}
.s4-photo:nth-child(3){transform:rotate(-1.5deg)}
.s4-photo:nth-child(4){transform:rotate(3deg) translateY(-10px)}
.s4-photo:hover{transform:scale(1.05) rotate(0deg) !important;box-shadow:0 25px 60px var(--shadow);z-index:10}
.s4-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;display:block}
.s4-caption{font-family:'Playfair Display',serif;font-style:italic;font-size:1rem;color:#333;text-align:center;position:absolute;bottom:14px;left:0;right:0}

.s4-placeholder { background:var(--gold-dim); border:1px dashed var(--border); border-radius:8px; height:300px; display:flex; align-items:center; justify-content:center; color:var(--gold-dim); font-size: clamp(1.4rem, 2.222vw, 2rem); }

/* Lightbox */
.lightbox { position:fixed;inset:0;background:rgba(0,0,0,.95);backdrop-filter:blur(12px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s; }
.lightbox.active { opacity:1; pointer-events:auto; }
.lightbox-close { position:absolute;top:2rem;right:2rem;background:none;border:none;color:#fff;font-size: clamp(1.05rem, 1.667vw, 1.5rem);cursor:pointer;opacity:.7;transition:opacity .2s; }
.lightbox-close:hover { opacity:1; }
.lightbox-inner img { max-width:90vw;max-height:85vh;object-fit:contain;border:3px solid #fff;border-radius:4px;transform:scale(.9);transition:transform .4s cubic-bezier(.34,1.3,.64,1); }
.lightbox.active .lightbox-inner img { transform:scale(1); }

/* ── SECTION 5 CLOSING ── */
.s5-closing {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:6vh 5vw; text-align:center;
}
[data-theme="dark"]  .s5-closing { background:radial-gradient(ellipse at center,#1a1208 0%,var(--bg) 70%); }
[data-theme="light"] .s5-closing { background:rgba(255,255,255,0.35); }

.s5-content { position:relative; z-index:1; max-width:560px; }
.s5-title { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(2.5rem,6vw,4rem); color:var(--gold-light); margin-bottom: clamp(0.6rem, 1.111vw, 1rem); }
.s5-sub   { font-size:1.1rem; color:var(--muted); line-height:1.7; margin-bottom: clamp(0.9rem, 1.667vw, 1.5rem); }
.s5-divider { width:80px; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); margin: 0 auto clamp(0.9rem, 1.667vw, 1.5rem); }
.s5-msg   { color:var(--muted); font-size:.95rem; line-height:1.8; margin-bottom: clamp(1.2rem, 2.222vw, 2rem); }
.s5-sig   { margin-bottom: clamp(0.9rem, 1.667vw, 1.5rem); }
.s5-sig p { color:var(--muted); font-size:.9rem; margin-bottom:.3rem; }
.s5-brand { font-family:'Playfair Display',serif; font-style:italic; font-size: clamp(1.26rem, 2.000vw, 1.8rem); color:var(--gold); }

/* Animated handwritten signature */
.s5-signature {
  display: flex; flex-direction: column; align-items: center;
  gap: .2rem; margin-bottom: clamp(1.08rem, 2.000vw, 1.8rem);
}
.s5-signature.fade-up { opacity: 0; transform: translateY(20px); }
.s5-signature.fade-up.visible { opacity: 1; transform: none; }
.sig-from {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}
.sig-name {
  font-family: 'Dancing Script', cursive;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: var(--gold);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
  white-space: nowrap; line-height: 1.2;
}
.s5-signature.visible .sig-name { clip-path: inset(0 0% 0 0); }
.sig-underline {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  width: 0;
  border-radius: 2px;
  transition: width 1s ease 0.9s;
  margin-top: .3rem;
}
.s5-signature.visible .sig-underline { width: 180px; }
.s5-replay-btn {
  background:transparent; border:1px solid var(--gold-dim); color:var(--gold);
  font-family:'Outfit',sans-serif; font-size:.9rem;
  padding: .7rem clamp(0.96rem, 1.778vw, 1.6rem); border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:all .3s;
}
.s5-replay-btn:hover { background:var(--gold-dim); border-color:var(--gold); transform:translateY(-2px); }

/* ── FLOATING ACTION BAR ── */
.fab-bar {
  position: fixed;
  bottom: 3vh; left: 50%; transform: translateX(-50%) translateY(120px);
  z-index: 400;
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  box-shadow: 0 8px 40px var(--shadow), 0 0 0 1px var(--gold-dim);
  padding: .35rem .5rem;
  transition: transform .6s cubic-bezier(.34,1.3,.64,1), opacity .4s;
  opacity: 0; pointer-events: none; visibility: hidden;
}
.fab-bar.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
.fab-btn {
  display: flex; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer;
  color: var(--gold); font-family: 'Outfit', sans-serif;
  font-size: .85rem; font-weight: 600;
  padding: .55rem clamp(0.66rem, 1.222vw, 1.1rem); border-radius: 999px;
  transition: background .25s, transform .2s;
  white-space: nowrap;
}
.fab-btn i { font-size: 1rem; }
.fab-btn:hover { background: var(--gold-dim); transform: translateY(-2px); }
.fab-divider { width: 1px; height: 22px; background: var(--border); margin: 0 .1rem; }

/* ── SHARE MODAL ── */
.share-modal-backdrop {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.65); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
.share-modal-backdrop.active { opacity: 1; pointer-events: auto; }
.share-modal {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: clamp(16px,3vw,24px); padding: clamp(1.4rem,3vh,2.4rem) clamp(1.2rem,3vw,2rem) clamp(1.1rem,2.5vh,2rem);
  width: 90vw; max-width: 420px; margin: clamp(0.6rem, 1.111vw, 1rem);
  box-shadow: 0 32px 80px var(--shadow), 0 0 0 1px var(--gold-dim);
  transform: translateY(30px) scale(.97);
  transition: transform .4s cubic-bezier(.34,1.3,.64,1);
  text-align: center;
}
.share-modal-backdrop.active .share-modal { transform: none; }
.share-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; transition: color .2s;
}
.share-modal-close:hover { color: var(--text); }
.share-modal-icon {
  width: 56px; height: 56px; margin: 0 auto clamp(0.6rem, 1.111vw, 1rem);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.12rem, 1.778vw, 1.6rem); color: #fff;
  box-shadow: 0 8px 24px var(--gold-glow);
}
.share-modal-title { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.05rem, 1.667vw, 1.5rem); color: var(--gold-light); margin-bottom: .5rem; }
.share-modal-sub   { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: clamp(0.84rem, 1.556vw, 1.4rem); }
.share-link-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: var(--gold-dim); border: 1px solid var(--border);
  border-radius: 12px; padding: .6rem .6rem .6rem clamp(0.6rem, 1.111vw, 1rem);
  margin-bottom: .5rem;
}
.share-link-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: 'Outfit', sans-serif;
  font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-copy-btn {
  flex-shrink: 0; width: 34px; height: 34px;
  background: var(--gold); border: none; border-radius: 8px;
  color: #fff; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.share-copy-btn:hover { background: var(--gold-light); transform: scale(1.08); }
.share-copy-hint { font-size: .78rem; min-height: 1.2em; margin-bottom: clamp(0.72rem, 1.333vw, 1.2rem); }
.share-actions { display: flex; justify-content: center; }
.share-wa-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem clamp(0.96rem, 1.778vw, 1.6rem); border-radius: 999px;
  background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.25);
  color: #25d366; font-family: 'Outfit', sans-serif;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: all .3s;
}
.share-wa-btn:hover { background: rgba(37,211,102,.22); transform: translateY(-2px); }

/* ── PRINT / PDF STYLES ── */
@media print {
  @page { margin: 0; }
  body { 
    margin: 0; 
    padding: 0; 
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact; 
    background-color: var(--bg);
  }

  /* Hide UI chrome */
  .theme-toggle, .order-overlay, .confetti-layer,
  .fab-bar, .share-modal-backdrop, .lightbox,
  .s1-scroll-hint, .s2-scroll-hint, .s5-replay-btn, .s2-label { display: none !important; }

  /* Reset scroll-driven envelope section for static display */
  .s2-scroll-track { height: auto !important; position: relative !important; overflow: visible !important; }
  .s2-sticky       { position: relative !important; height: auto !important; top: 0 !important; page-break-inside: avoid; display: block !important; }
  
  /* Show the letter content clearly in PDF */
  .pocket-mask     { overflow: visible !important; height: auto !important; padding: clamp(1.2rem, 2.222vw, 2rem) 0; }
  .letter-card     { 
    transform: scale(1) !important; 
    position: relative !important; 
    inset: auto !important;
    margin: 0 auto !important; 
    width: 90% !important; 
    min-height: auto !important; 
    box-shadow: 0 4px 20px var(--shadow) !important;
    border: 1px solid var(--border);
  }
  .envelope-group   { display: none !important; } /* Hide envelope flaps in PDF to focus on content */

  /* Make all fade-up elements visible */
  .fade-up { opacity: 1 !important; transform: none !important; visibility: visible !important; }

  /* Section spacing for PDF flow */
  section, .s3-photobooth, .s4-gallery, .s5-closing { 
    min-height: auto !important; 
    padding: clamp(1.8rem, 3.333vw, 3rem) 5% !important; 
    page-break-inside: avoid; 
    display: block !important;
  }
  .s1-hero { min-height: 50vh !important; display: flex !important; align-items: center; justify-content: center; }

  /* Photo grid: ensure 2 columns in print if needed */
  .s4-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: clamp(12px, 1.389vw, 20px) !important; 
  }
  .s4-photo { 
    transform: none !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,.1) !important; 
    page-break-inside: avoid;
  }

  /* Text colors for better print contrast if needed */
  .s3-quote { font-size: clamp(1.26rem, 2.000vw, 1.8rem) !important; }
  
  /* Film strip hidden in print (redundant with gallery) */
  .s3-right { display: none !important; }
  .s3-left  { max-width: 100% !important; flex: 0 0 100% !important; text-align: center !important; }
}