/* ============================================================
   JERA & JIMSON — Anniversary Website
   Palette: White · Baby Pink · Blush · Rose
   Fonts: Great Vibes · Cormorant Garamond · Montserrat
============================================================ */
:root {
  --white:       #ffffff;
  --off-white:   #fffafc;
  --cream:       #fff5f8;
  --blush-light: #ffe9ee;
  --blush:       #ffd1da;
  --baby-pink:   #ffb6c1;
  --rose:        #f2909f;
  --mauve:       #c4748e;
  --deep-rose:   #a0506a;
  --dark:        #3d1a28;
  --text:        #5a3040;
  --text-light:  #9a7585;
  --sh-sm:       0 2px 14px rgba(200,110,140,.09);
  --sh-md:       0 6px 30px rgba(200,110,140,.14);
  --sh-lg:       0 14px 50px rgba(160,80,106,.2);
  --font-script: 'Great Vibes', cursive;
  --font-head:   'Cormorant Garamond', Georgia, serif;
  --font-body:   'Montserrat', system-ui, sans-serif;
  --nav-h:       68px;
  --r:           14px;
  --r-lg:        22px;
  --ease:        all .3s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; scrollbar-gutter:stable }
body { font-family:var(--font-body); background:var(--off-white); color:var(--text); overflow-x:hidden; line-height:1.75 }
img  { max-width:100%; display:block }
a    { text-decoration:none; color:inherit }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--blush-light) }
::-webkit-scrollbar-thumb { background:var(--baby-pink); border-radius:10px }

/* ── Layout ─────────────────────────────────────────────── */
.section      { padding:96px 6%; position:relative }
.section-full { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 6%; position:relative; text-align:center; overflow:hidden }
.section-alt  { background:var(--cream) }
.section-header { text-align:center; margin-bottom:56px }
.section-title  { font-family:var(--font-script); font-size:clamp(3rem,7vw,5rem); color:var(--dark); font-weight:400; margin-bottom:10px; line-height:1.1 }
.section-sub    { font-size:.72rem; color:var(--text-light); font-weight:400; letter-spacing:2px; text-transform:uppercase }
.fa-solid,.fa-regular { color:var(--baby-pink) }
.fa-brands { color:var(--baby-pink) }

/* ── Floating Hearts ─────────────────────────────────────── */
.floating-hearts-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0 }
.float-heart { position:absolute; color:var(--baby-pink); animation:floatUp linear infinite; opacity:0; user-select:none }
@keyframes floatUp {
  0%   { transform:translateY(110%) scale(.6) rotate(0deg); opacity:0 }
  10%  { opacity:.45 }
  90%  { opacity:.1 }
  100% { transform:translateY(-8%) scale(1.1) rotate(12deg); opacity:0 }
}

/* ── Reveal Animations ───────────────────────────────────── */
.reveal,.reveal-left,.reveal-right,.fade-in { opacity:0; transform:translateY(36px); transition:opacity .7s ease,transform .7s ease }
.reveal-left  { transform:translateX(-48px) }
.reveal-right { transform:translateX(48px) }
.fade-in      { transform:translateY(18px) }
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.fade-in.visible { opacity:1; transform:translate(0,0); transition-delay:var(--delay,0s) }

/* ── Heartbeat ───────────────────────────────────────────── */
@keyframes hb { 0%,100%{transform:scale(1)} 15%{transform:scale(1.16)} 30%{transform:scale(1)} 45%{transform:scale(1.08)} 60%{transform:scale(1)} }
@keyframes popIn { from{opacity:0;transform:scale(.82) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }
.heart-pulse { color:var(--rose); display:inline-block; vertical-align:middle; line-height:1; will-change:transform; animation:hb 1.8s ease-in-out infinite }
.big-heart,.countdown-heart-icon,.closing-icon,.pw-icon { will-change:transform }

/* ── Button ──────────────────────────────────────────────── */
.btn-primary { display:inline-flex; align-items:center; gap:8px; padding:13px 40px; background:linear-gradient(135deg,var(--baby-pink),var(--mauve)); color:#fff; border-radius:50px; font-size:.72rem; font-weight:700; font-family:var(--font-body); letter-spacing:2px; text-transform:uppercase; border:none; cursor:pointer; transition:var(--ease); box-shadow:var(--sh-md); margin-top:28px }
.btn-primary:hover { transform:translateY(-3px); box-shadow:var(--sh-lg); background:linear-gradient(135deg,var(--rose),var(--deep-rose)) }
.btn-primary .fa-solid { color:#fff !important }

/* ── Password ────────────────────────────────────────────── */
#password-overlay { position:fixed; inset:0; height:100vh; height:100dvh; background:linear-gradient(150deg,#fff5f7,#ffdce4 55%,#ffb6c1); display:flex; align-items:center; justify-content:center; z-index:10000; overflow:hidden; transition:opacity .5s ease }
#password-overlay.hidden { opacity:0; pointer-events:none }
.password-box { background:rgba(255,255,255,.9); backdrop-filter:blur(24px); border:1px solid rgba(255,182,193,.35); border-radius:28px; padding:56px 44px; text-align:center; max-width:400px; width:92%; box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.6); position:relative; z-index:1; animation:popIn .6s cubic-bezier(.34,1.56,.64,1) forwards }
.pw-icon  { font-size:2rem; margin-bottom:16px; animation:hb 1.8s ease-in-out infinite }
.pw-icon .fa-solid { color:var(--rose) }
.pw-title { font-family:var(--font-script); font-size:3rem; color:var(--dark); margin-bottom:8px; font-weight:400; line-height:1.1; word-spacing:0.2em; letter-spacing:0.02em }
.pw-sub   { color:var(--text-light); font-size:.72rem; margin-bottom:30px; letter-spacing:1.5px; text-transform:uppercase }
.pw-input-wrap { display:flex; gap:10px; justify-content:center }
.pw-input-wrap input { width:68%; padding:13px 20px; border:1.5px solid var(--blush); border-radius:50px; font-size:1.1rem; font-family:var(--font-body); background:#fff; color:var(--dark); outline:none; transition:var(--ease); text-align:center; letter-spacing:6px }
.pw-input-wrap input:focus { border-color:var(--rose); box-shadow:0 0 0 4px rgba(242,144,159,.15) }
.pw-input-wrap button { width:50px; height:50px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--rose),var(--mauve)); color:#fff; font-size:.9rem; cursor:pointer; transition:var(--ease); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm) }
.pw-input-wrap button .fa-solid { color:#fff !important }
.pw-input-wrap button:hover { transform:scale(1.1) }
.pw-error { color:#c0304e; font-size:.78rem; margin-top:14px; font-weight:500; display:none; letter-spacing:.3px }
.pw-error.show { display:block; animation:shake .4s ease }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* ── Navbar ──────────────────────────────────────────────── */
#navbar { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:0 5%; height:var(--nav-h); background:rgba(255,255,255,.88); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,182,193,.18); box-shadow:0 2px 16px rgba(200,110,140,.05); transition:var(--ease) }
#navbar.scrolled { background:rgba(255,255,255,.97); box-shadow:0 4px 26px rgba(200,110,140,.1) }
.nav-brand { font-family:var(--font-head); font-size:1.45rem; font-weight:700; font-style:italic; color:var(--dark); flex-shrink:0; letter-spacing:.3px; white-space:nowrap }
.nav-brand span { color:var(--rose); padding:0 .12em }
.nav-links { display:flex; list-style:none; flex-wrap:nowrap }
.nav-links a { display:flex; align-items:center; padding:6px 9px; font-size:.6rem; font-weight:600; color:var(--text-light); transition:color .25s ease; white-space:nowrap; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; position:relative }
.nav-links a::after { content:''; position:absolute; bottom:0; left:50%; right:50%; height:2px; background:linear-gradient(to right,var(--baby-pink),var(--rose)); border-radius:2px; transition:left .25s ease,right .25s ease; }
.nav-links a:hover { color:var(--deep-rose) }
.nav-links a:hover::after { left:10%; right:10% }
.nav-toggle { display:none; background:none; border:none; font-size:1.2rem; color:var(--dark); cursor:pointer; padding:8px; border-radius:8px; transition:var(--ease) }
.nav-toggle .fa-solid { color:var(--dark) !important }

/* ── Home ────────────────────────────────────────────────── */
#home { background:linear-gradient(155deg,#fff5f7,#ffdce4 45%,#ffb6c1) }
.home-content { position:relative; z-index:1; max-width:780px }
.home-pre   { font-size:.68rem; font-weight:700; color:var(--mauve); margin-bottom:16px; text-transform:uppercase; letter-spacing:5px }
.home-title { font-family:var(--font-script); font-size:clamp(4rem,10vw,8rem); color:var(--dark); font-weight:400; line-height:1.02; margin-bottom:26px }
.home-quote { font-family:var(--font-head); font-size:clamp(.95rem,2.2vw,1.18rem); color:var(--text); font-style:italic; max-width:520px; margin:0 auto 14px; line-height:1.72; font-weight:300 }
.home-date  { font-size:.68rem; color:var(--text-light); letter-spacing:4px; text-transform:uppercase; font-weight:600 }
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:1 }
.scroll-dot { width:20px; height:36px; border:1.5px solid var(--mauve); border-radius:20px; position:relative; opacity:.5 }
.scroll-dot::after { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:3px; height:7px; background:var(--mauve); border-radius:4px; animation:sd 1.5s ease-in-out infinite }
@keyframes sd { 0%{top:5px;opacity:1} 100%{top:17px;opacity:0} }

/* ── Profile ─────────────────────────────────────────────── */
#profile { background:var(--white) }
.profiles-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:start; max-width:1060px; margin:0 auto }
.profile-card { background:var(--off-white); border:1px solid var(--blush); border-radius:var(--r-lg); padding:40px 28px; text-align:center; box-shadow:var(--sh-md); transition:var(--ease) }
.profile-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg) }
.profile-img-wrap { position:relative; display:inline-block; margin-bottom:22px }
.profile-img  { width:170px; height:170px; border-radius:50%; background:var(--blush-light); box-shadow:var(--sh-md); object-fit:cover; margin:0 auto; position:relative; z-index:1 }
.profile-ring { position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--baby-pink); z-index:0; opacity:.7 }
.profile-badge { position:absolute; bottom:8px; right:-6px; background:linear-gradient(135deg,var(--baby-pink),var(--mauve)); color:#fff; font-size:.65rem; font-weight:700; padding:3px 12px; border-radius:50px; box-shadow:var(--sh-sm); letter-spacing:1.5px; text-transform:uppercase; z-index:2 }
.profile-info h3 { font-family:var(--font-script); font-size:2.6rem; color:var(--dark); margin-bottom:2px; font-weight:400; line-height:1.1 }
.profile-role   { color:var(--mauve); font-size:.65rem; font-weight:700; margin-bottom:20px; letter-spacing:2.5px; text-transform:uppercase }
.profile-details { text-align:left; margin-bottom:20px }
.profile-detail  { display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color:var(--text); margin-bottom:8px; line-height:1.5; font-weight:300 }
.profile-detail .fa-solid { color:var(--baby-pink) !important; margin-top:3px; flex-shrink:0; width:14px }
.profile-quote   { font-family:var(--font-head); font-size:.94rem; color:var(--mauve); font-style:italic; border-top:1px solid var(--blush); padding-top:16px; line-height:1.72 }
.profile-divider { text-align:center; color:var(--text-light); font-size:.65rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding-top:60px }
.big-heart { font-size:2.6rem; margin-bottom:10px; display:block; animation:hb 2s ease-in-out infinite }
.big-heart .fa-solid { color:var(--baby-pink) !important }

/* ── Memories ────────────────────────────────────────────── */
.memories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; max-width:1060px; margin:0 auto 24px }
.memory-card { border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-sm); cursor:pointer; transition:var(--ease); background:var(--white) }
.memory-card:hover { transform:translateY(-5px) scale(1.018); box-shadow:var(--sh-lg) }
.memory-img-wrap { position:relative; overflow:hidden; aspect-ratio:1/1 }
.memory-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.memory-card:hover .memory-img-wrap img { transform:scale(1.07) }
.memory-overlay { position:absolute; inset:0; background:rgba(160,80,106,.3); display:flex; align-items:center; justify-content:center; opacity:0; transition:var(--ease) }
.memory-card:hover .memory-overlay { opacity:1 }
.memory-overlay .fa-solid { font-size:2rem; color:#fff !important }
.memory-caption { padding:12px 14px; font-family:var(--font-head); font-size:.98rem; font-style:italic; color:var(--text) }

/* ── Love Letter ─────────────────────────────────────────── */
#love-letter { background:var(--white) }
.letter-wrap { max-width:700px; margin:0 auto }
.letter { background:#fffdf9; border:1px solid rgba(255,182,193,.38); border-radius:4px; padding:58px 56px; position:relative; box-shadow:var(--sh-md),5px 5px 0 var(--blush); background-image:repeating-linear-gradient(transparent,transparent 31px,rgba(255,182,193,.1) 31px,rgba(255,182,193,.1) 32px) }
.letter-stamp { position:absolute; top:18px; right:18px; font-size:1.3rem; background:var(--blush-light); border:1px solid var(--blush); width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:4px }
.letter-stamp .fa-solid { color:var(--baby-pink) !important }
.letter-date    { font-family:var(--font-head); font-size:.86rem; color:var(--text-light); margin-bottom:24px; text-align:right; font-style:italic }
.letter-greeting { font-family:var(--font-script); font-size:2.2rem; color:var(--dark); margin-bottom:22px; font-weight:400 }
.letter-content p { font-size:.94rem; color:var(--text); margin-bottom:18px; line-height:2; font-weight:300 }
.letter-closing   { font-family:var(--font-head); font-style:italic; color:var(--dark); margin-top:28px; margin-bottom:0 !important; font-size:1.02rem }
.letter-signature { font-family:var(--font-script); font-size:2.8rem; display:block; margin-top:4px; color:var(--deep-rose); font-weight:400 }
.letter-footer-deco { text-align:center; margin-top:28px; font-size:1.4rem; letter-spacing:16px; color:var(--baby-pink); opacity:.5 }

/* ── Timeline ────────────────────────────────────────────── */
.timeline { max-width:860px; margin:0 auto; position:relative; padding:0 20px }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,var(--blush),var(--baby-pink),var(--rose),var(--blush)); transform:translateX(-50%) }
.timeline-item { display:flex; width:50%; padding-bottom:46px; position:relative }
.timeline-item.left  { justify-content:flex-end; padding-right:48px }
.timeline-item.right { margin-left:50%; padding-left:48px }
.timeline-dot { position:absolute; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--white); border:1.5px solid var(--baby-pink); border-radius:50%; box-shadow:var(--sh-sm); z-index:2 }
.timeline-dot .fa-solid { color:var(--baby-pink) !important; font-size:.78rem }
.timeline-item.left  .timeline-dot { right:-19px; top:18px }
.timeline-item.right .timeline-dot { left:-19px;  top:18px }
.timeline-card { background:var(--white); border:1px solid var(--blush); border-radius:var(--r); padding:22px; box-shadow:var(--sh-sm); max-width:380px }
.tl-date { font-size:.65rem; color:var(--mauve); text-transform:uppercase; letter-spacing:2.5px; font-weight:700; margin-bottom:6px }
.timeline-card h3 { font-family:var(--font-head); font-size:1.2rem; color:var(--dark); font-weight:600; margin-bottom:8px }
.timeline-card p  { font-size:.82rem; color:var(--text); line-height:1.75; font-weight:300 }

/* ── Countdown ───────────────────────────────────────────── */
.countdown-container { max-width:860px; margin:0 auto; text-align:center }
.countdown-header { margin-bottom:36px }
.countdown-heart-icon { font-size:2rem; color:var(--rose) !important; display:block; margin:0 auto 14px; animation:hb 1.8s ease-in-out infinite }
.countdown-label { font-size:.72rem; color:var(--text-light); letter-spacing:3px; text-transform:uppercase; font-weight:600 }
.countdown-grid { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:32px }
.countdown-box    { min-width:88px; padding:18px 12px; background:var(--white); border:1px solid var(--blush); border-radius:var(--r); box-shadow:var(--sh-sm); text-align:center }
.countdown-number { font-family:var(--font-head); font-size:2.4rem; font-weight:700; color:var(--dark); line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums; min-width:2.5ch; text-align:center }
.countdown-unit   { font-size:.62rem; color:var(--text-light); text-transform:uppercase; letter-spacing:2px; font-weight:600 }
.countdown-sep    { font-family:var(--font-head); font-size:1.6rem; color:var(--baby-pink); font-weight:700; padding-bottom:16px }
.countdown-footer { font-size:.82rem; color:var(--text); text-align:center }
.countdown-since  { margin-top:6px; font-size:.7rem; color:var(--text-light) }
.countdown-note   { margin-top:10px; font-size:.75rem; color:var(--mauve); font-weight:600 }

/* ── Verses ──────────────────────────────────────────────── */
.verses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; max-width:1060px; margin:0 auto }
.verse-wrapper { }
.verse-card  { perspective:600px; height:200px; cursor:pointer }
.verse-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1) }
.verse-card.flipped .verse-inner { transform:rotateY(180deg) }
.verse-front,.verse-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--r); border:1px solid var(--blush); padding:24px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--white); box-shadow:var(--sh-sm) }
.verse-back  { transform:rotateY(180deg); background:linear-gradient(135deg,var(--blush-light),var(--white)) }
.verse-icon-wrap { font-size:1.6rem; margin-bottom:12px }
.verse-icon-wrap .fa-solid { color:var(--baby-pink) !important }
.verse-ref      { font-family:var(--font-head); font-size:.94rem; color:var(--dark); font-style:italic; font-weight:600; margin-bottom:6px }
.verse-hint     { font-size:.66rem; color:var(--text-light); letter-spacing:1.5px; text-transform:uppercase }
.verse-back p   { font-family:var(--font-head); font-size:.9rem; color:var(--text); font-style:italic; line-height:1.72; margin-bottom:12px }
.verse-ref-back { font-size:.7rem; color:var(--mauve); font-weight:700; letter-spacing:.5px }

/* ── Kiss Canvas ─────────────────────────────────────────── */
.kiss-container { max-width:860px; margin:0 auto }
#kiss-canvas { width:100%; height:380px; border-radius:var(--r-lg); border:1px solid var(--blush); box-shadow:var(--sh-sm); background:var(--white); display:block; cursor:crosshair }
.kiss-controls  { display:flex; align-items:center; justify-content:center; gap:18px; margin:18px 0 10px; flex-wrap:wrap }
.kiss-colors    { display:flex; gap:8px }
.kiss-color     { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:var(--ease); flex-shrink:0 }
.kiss-color.active,.kiss-color:hover { border-color:var(--dark); transform:scale(1.12) }
.btn-clear { display:flex; align-items:center; gap:6px; padding:8px 18px; border-radius:50px; border:1px solid var(--blush); background:var(--blush-light); color:var(--mauve); font-size:.72rem; font-weight:700; cursor:pointer; transition:var(--ease); letter-spacing:.5px }
.btn-clear .fa-solid { color:var(--mauve) !important }
.btn-clear:hover { background:var(--baby-pink); color:var(--dark); border-color:var(--baby-pink) }
.kiss-count { margin-top:14px; font-family:var(--font-head); font-size:1rem; color:var(--mauve); font-style:italic; text-align:center }

/* ── Voice ───────────────────────────────────────────────── */
#voice { background:var(--cream) }
.voice-container { max-width:700px; margin:0 auto }
.voice-recorder { text-align:center; background:var(--white); border:1px solid var(--blush); border-radius:var(--r-lg); padding:48px 36px 40px; box-shadow:var(--sh-sm); margin-bottom:28px }
.voice-wave { display:flex; align-items:center; justify-content:center; gap:5px; height:48px; margin-bottom:32px }
.wave-bar { width:5px; border-radius:8px; background:var(--blush); height:8px; transition:height .15s ease }
.voice-wave.active .wave-bar { background:var(--rose); animation:wavePulse .6s ease-in-out infinite }
.voice-wave.active .wave-bar:nth-child(1){animation-delay:0s}
.voice-wave.active .wave-bar:nth-child(2){animation-delay:.1s}
.voice-wave.active .wave-bar:nth-child(3){animation-delay:.2s}
.voice-wave.active .wave-bar:nth-child(4){animation-delay:.3s}
.voice-wave.active .wave-bar:nth-child(5){animation-delay:.2s}
.voice-wave.active .wave-bar:nth-child(6){animation-delay:.1s}
.voice-wave.active .wave-bar:nth-child(7){animation-delay:.2s}
.voice-wave.active .wave-bar:nth-child(8){animation-delay:.05s}
@keyframes wavePulse { 0%,100%{height:8px} 50%{height:36px} }
.record-btn   { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; margin:0 auto 20px; width:110px; height:110px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--baby-pink),var(--mauve)); color:#fff; cursor:pointer; transition:var(--ease); box-shadow:0 6px 24px rgba(196,116,142,.35); font-family:var(--font-body); padding:0 }
.record-btn .fa-solid { font-size:1.6rem; color:#fff !important }
.record-label { font-size:.56rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#fff }
.record-btn:hover { transform:scale(1.06) }
.record-btn.recording { background:linear-gradient(135deg,#e75480,#c0304e); animation:recordPulse 1.2s ease-in-out infinite }
@keyframes recordPulse { 0%,100%{box-shadow:0 0 0 0 rgba(231,84,128,.5)} 50%{box-shadow:0 0 0 14px rgba(231,84,128,0)} }
.voice-timer { font-family:var(--font-head); font-size:2rem; font-weight:600; color:var(--dark); margin-bottom:12px; letter-spacing:2px }
.voice-hint  { font-size:.68rem; color:var(--text-light); letter-spacing:.5px; text-transform:uppercase }
.voice-list  { display:flex; flex-direction:column; gap:12px }
.voice-empty { text-align:center; color:var(--text-light); font-size:.82rem; font-style:italic; font-family:var(--font-head); padding:28px; background:var(--white); border:1px solid var(--blush); border-radius:var(--r) }
.voice-msg-card { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--blush); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-sm); transition:var(--ease) }
.voice-msg-card:hover { box-shadow:var(--sh-md) }
.vm-play-btn { width:42px; height:42px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--baby-pink),var(--mauve)); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:var(--ease) }
.vm-play-btn .fa-solid { color:#fff !important; font-size:.8rem }
.vm-play-btn.playing { background:linear-gradient(135deg,var(--rose),var(--deep-rose)) }
.vm-play-btn:hover { transform:scale(1.08) }
.vm-info { flex:1; min-width:0 }
.vm-waveform { display:flex; align-items:center; gap:3px; margin-bottom:6px; height:26px }
.vm-bar  { border-radius:4px; background:var(--blush); flex-shrink:0; width:4px }
.vm-meta { display:flex; justify-content:space-between; align-items:center }
.vm-time { font-size:.7rem; color:var(--text-light) }
.vm-dur  { font-size:.7rem; color:var(--mauve); font-weight:700; letter-spacing:1px }
.vm-del-btn { background:none; border:none; color:var(--text-light); cursor:pointer; padding:6px; border-radius:8px; transition:var(--ease); flex-shrink:0 }
.vm-del-btn .fa-solid { color:var(--text-light) !important; font-size:.8rem }
.vm-del-btn:hover { background:var(--blush-light) }
.vm-del-btn:hover .fa-solid { color:var(--deep-rose) !important }

/* ── Music Section ───────────────────────────────────────── */
#music { background:var(--white) }
.music-cards { display:flex; flex-direction:column; gap:22px; max-width:920px; margin:0 auto }
.music-card  { display:grid; grid-template-columns:210px 1fr; border:1px solid var(--blush); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:var(--ease); background:var(--white) }
.music-card:hover { box-shadow:var(--sh-lg); transform:translateY(-3px) }
.music-card-art  { position:relative; display:flex; align-items:center; justify-content:center; min-height:220px }
.art-0 { background:linear-gradient(145deg,#ffd1da,#f2909f,#a0506a) }
.art-1 { background:linear-gradient(145deg,#ffdde5,#f5a8ba,#d4607e) }
.art-2 { background:linear-gradient(145deg,#ffe9ee,#ffb6c1,#e87fa0) }
.music-art-note  { position:absolute; font-size:4.5rem; opacity:.18; color:#fff !important }
.music-card-play { position:absolute; width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.18); transition:var(--ease); z-index:1 }
.music-card-play:hover { transform:scale(1.1) }
.music-card-play.playing { background:linear-gradient(135deg,var(--baby-pink),var(--mauve)) }
.music-card-play .fa-solid { color:var(--deep-rose) !important; font-size:1.1rem; margin-left:2px }
.music-card-play.playing .fa-solid { color:#fff !important; margin-left:0 }
.music-card-body   { padding:26px 28px; display:flex; flex-direction:column; gap:16px; justify-content:center }
.music-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.music-card-title  { font-family:var(--font-head); font-size:1.5rem; color:var(--dark); font-style:italic; font-weight:600; line-height:1.2; margin-bottom:4px }
.music-card-artist { font-size:.65rem; color:var(--mauve); text-transform:uppercase; letter-spacing:2.5px; font-weight:700 }
.music-card-num    { font-family:var(--font-head); font-size:2.2rem; color:var(--blush); font-weight:700; flex-shrink:0; line-height:1; font-style:italic }
.music-progress-wrap { display:flex; flex-direction:column; gap:6px }
.music-progress-bar  { width:100%; height:4px; background:var(--blush); border-radius:8px; cursor:pointer; position:relative; overflow:hidden }
.music-progress-bar:hover { height:6px }
.music-progress-fill { height:100%; background:linear-gradient(to right,var(--baby-pink),var(--mauve)); border-radius:8px; pointer-events:none; transition:width .4s linear }
.music-time  { display:flex; justify-content:space-between; font-size:.66rem; color:var(--text-light); font-weight:500 }
.music-message { background:var(--cream); border-left:3px solid var(--baby-pink); border-radius:0 var(--r) var(--r) 0; padding:14px 18px }
.music-message .fa-solid { color:var(--baby-pink) !important; font-size:.75rem; margin-bottom:8px; display:block }
.music-message p { font-family:var(--font-head); font-size:.9rem; color:var(--text); font-style:italic; line-height:1.75; font-weight:300 }

/* ── Floating Music Player ───────────────────────────────── */
#music-player { position:fixed; bottom:22px; right:22px; z-index:999; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); border:1px solid var(--blush); border-radius:50px; padding:7px 16px 7px 7px; box-shadow:var(--sh-md); animation:popIn .5s ease }
#music-btn { width:40px; height:40px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--baby-pink),var(--mauve)); color:#fff; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--ease); flex-shrink:0 }
#music-btn .fa-solid { color:#fff !important }
#music-btn:hover { transform:scale(1.08) }
#music-btn.playing { animation:pulse 1s ease-in-out infinite }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,182,193,.5)} 50%{box-shadow:0 0 0 10px rgba(255,182,193,0)} }
.music-info   { display:flex; flex-direction:column; line-height:1.3 }
.music-title  { font-size:.76rem; font-weight:700; color:var(--dark); letter-spacing:.3px }
.music-artist { font-size:.66rem; color:var(--text-light); font-weight:300 }

/* ── Credits ─────────────────────────────────────────────── */
.credits-category  { max-width:1060px; margin:0 auto 52px }
.credits-cat-title { font-family:var(--font-head); font-size:1.6rem; color:var(--dark); font-style:italic; margin-bottom:24px; display:flex; align-items:center; gap:10px; font-weight:600 }
.credits-cat-title .fa-brands,.credits-cat-title .fa-solid { color:var(--baby-pink) !important; font-size:1.3rem }
.credits-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px }
.credit-card  { background:var(--white); border:1px solid var(--blush); border-radius:var(--r); padding:24px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:var(--sh-sm); transition:var(--ease) }
.credit-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.credit-avatar-img      { width:66px; height:66px; border-radius:50%; object-fit:cover; margin-bottom:14px; border:2px solid var(--blush) }
.credit-avatar-fallback { width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg,var(--blush-light),var(--blush)); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.5rem; border:2px solid var(--blush) }
.credit-avatar-tiktok { width:66px; height:66px; border-radius:50%; background:#010101; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.6rem; border:2px solid rgba(105,201,208,.4) }
.credit-avatar-tiktok .fa-brands { color:#69C9D0 !important }
.credit-avatar-w3 { width:66px; height:66px; border-radius:50%; background:linear-gradient(135deg,#04AA6D,#028a57); display:flex; align-items:center; justify-content:center; margin-bottom:14px; border:2px solid rgba(4,170,109,.35) }
.credit-avatar-w3 span { color:#fff; font-family:var(--font-body); font-size:1.1rem; font-weight:800; letter-spacing:-1px }
.credit-info h4 { font-family:var(--font-head); font-size:1.08rem; color:var(--dark); font-style:italic; margin-bottom:7px; font-weight:600 }
.credit-info p  { font-size:.78rem; color:var(--text-light); line-height:1.65; margin-bottom:14px; font-weight:300 }
.credit-link { display:inline-flex; align-items:center; gap:5px; padding:6px 16px; border-radius:50px; font-size:.68rem; font-weight:700; transition:var(--ease); letter-spacing:.5px; background:var(--blush-light); color:var(--deep-rose); border:1px solid var(--blush) }
.credit-link .fa-brands,.credit-link .fa-solid { color:var(--deep-rose) !important; font-size:.68rem }
.credit-link:hover { background:var(--baby-pink); color:var(--dark); border-color:var(--baby-pink) }
.credit-link.tiktok-link { background:#f5f5f5; color:#010101; border-color:rgba(0,0,0,.08) }
.credit-link.tiktok-link .fa-brands { color:#010101 !important }
.credit-link.tiktok-link:hover { background:#010101; color:#69C9D0 }

/* ── Closing ─────────────────────────────────────────────── */
.section-closing { background:linear-gradient(155deg,#fff5f7,#ffdce4 55%,#ffb6c1); overflow:hidden }
.closing-content { position:relative; z-index:1; max-width:640px }
.closing-icon    { font-size:2.8rem; margin-bottom:20px; animation:hb 2s ease-in-out infinite }
.closing-icon .fa-solid { color:var(--rose) !important }
.closing-title   { font-family:var(--font-script); font-size:clamp(3.5rem,8vw,6rem); color:var(--dark); font-weight:400; margin-bottom:12px; line-height:1.05; word-spacing:.18em; letter-spacing:.02em }
.closing-tagline { font-family:var(--font-head); font-size:1.18rem; color:var(--mauve); margin-bottom:26px; font-style:italic; font-weight:300 }
.closing-message { font-size:.9rem; color:var(--text); line-height:2; margin-bottom:28px; font-weight:300 }
.closing-deco    { font-size:1.4rem; letter-spacing:20px; margin-bottom:40px; color:var(--baby-pink); opacity:.55 }
.closing-socials { margin-bottom:40px }
.socials-label   { font-size:.62rem; color:var(--text-light); text-transform:uppercase; letter-spacing:3.5px; margin-bottom:20px; font-weight:600 }
.social-icons    { display:flex; justify-content:center; gap:14px; flex-wrap:wrap }
.social-icon     { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:var(--ease); box-shadow:var(--sh-sm) }
.social-icon .fa-brands { color:#fff !important }
.social-icon:hover { transform:translateY(-5px) scale(1.1); box-shadow:var(--sh-lg) }
.social-icon.github    { background:linear-gradient(135deg,#333,#111) }
.social-icon.instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888) }
.social-icon.facebook  { background:linear-gradient(135deg,#1877F2,#0D5FCC) }
.social-icon.tiktok    { background:linear-gradient(135deg,#010101,#69C9D0) }
.closing-credit { font-family:var(--font-head); font-size:1.02rem; color:var(--mauve); font-style:italic; font-weight:300 }
.closing-credit.small { font-size:.7rem; color:var(--text-light); font-family:var(--font-body); font-style:normal; margin-top:5px; font-weight:300 }

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:960px){
  .nav-links { display:none; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(20px); padding:12px; border-bottom:1px solid var(--blush); box-shadow:var(--sh-md); z-index:999 }
  .nav-links.open { display:flex }
  .nav-links a { padding:10px 14px; border-radius:var(--r); font-size:.75rem }
  .nav-toggle { display:flex; align-items:center; justify-content:center }
  .profiles-grid { grid-template-columns:1fr }
  .profile-divider { padding:10px 0 }
  .timeline::before { left:18px }
  .timeline-item,.timeline-item.left { width:100%; padding-left:54px; padding-right:0; justify-content:flex-start; margin-left:0 }
  .timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot { left:0; right:auto; top:18px }
  .timeline-card { max-width:100% }
  .countdown-box { min-width:68px; padding:12px 8px }
  .countdown-number { font-size:1.7rem }
  .letter { padding:28px 20px }
  .section { padding:76px 5% }
  .voice-recorder { padding:36px 24px 32px }
}
@media(max-width:760px){
  .music-card { grid-template-columns:1fr }
  .music-card-art { min-height:180px }
  .music-card-body { padding:20px }
}
@media(max-width:500px){
  .countdown-sep { display:none }
  .countdown-grid { gap:8px }
  .countdown-box { min-width:76px }
  #music-player { bottom:14px; right:14px }
  .letter { padding:22px 14px }
  .record-btn { width:96px; height:96px }
}