/* ── RESET & ROOT ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#080808;--dark:#0f0f0f;--dark2:#181818;
  --cream:#f5f0e8;--cream2:#e8dfd0;
  --gold:#c9a96e;--gold-l:#e2c98a;--gold-d:#9a7a4a;
  --blush:#d4849c;--blush-l:#e8b4c6;
  --tp:#f0e8de;--ts:#9a8f82;--tm:#5c5550;
  --border:rgba(201,169,110,.15);--border-s:rgba(201,169,110,.3);
  --glass:rgba(15,15,15,.88);--gl:rgba(255,255,255,.04);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --r8:8px;--r16:16px;--r24:24px;--r100:100px;
  --tr:.3s cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--black);color:var(--tp);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:3px}

/* ── PETALS ── */
#petals{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.petal{position:absolute;top:-20px;width:7px;height:9px;background:var(--blush);opacity:.35;border-radius:50% 0 50% 0;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-20px) rotate(0deg);opacity:0}10%{opacity:.35}90%{opacity:.2}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ── NAV ── */
#navbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;transition:var(--tr)}
#navbar.scrolled{background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:14px 40px}
.nav-brand{font-family:var(--serif);font-size:1.15rem;color:var(--gold);letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--ts);text-decoration:none;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;transition:color var(--tr)}
.nav-links a:hover{color:var(--gold)}
.nav-private-btn{background:transparent;border:1px solid var(--gold-d);color:var(--gold);padding:8px 20px;border-radius:var(--r100);font-size:.78rem;letter-spacing:.08em;cursor:pointer;transition:all var(--tr);font-family:var(--sans);text-transform:uppercase}
.nav-private-btn:hover{background:var(--gold);color:var(--black)}
.nav-hamburger{display:none;background:none;border:none;color:var(--gold);font-size:1.4rem;cursor:pointer}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:block}
  #navbar{padding:16px 20px}
}
.mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;z-index:199;background:var(--glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);flex-direction:column;padding:20px;gap:16px}
.mobile-menu.open{display:flex}
.mobile-link{color:var(--ts);text-decoration:none;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid var(--border)}
.mobile-private-btn{background:transparent;border:1px solid var(--gold-d);color:var(--gold);padding:12px;border-radius:var(--r100);font-size:.85rem;cursor:pointer;font-family:var(--sans);margin-top:8px}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 20px 80px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(201,169,110,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(212,132,156,.06) 0%,transparent 50%)}
.hero-media-zone {
  position: absolute;
  top: 55%;
  right: 5%;
  transform: translateY(-50%);
  width: 500px;
  height: 700px;
  z-index: 1; /* Behind text (z-index 2) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%; /* Circular shape */
  /* Aggressive mask to hide corners */
  mask-image: radial-gradient(circle at center, white 20%, rgba(255,255,255,0.7) 45%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, white 20%, rgba(255,255,255,0.7) 45%, transparent 80%);
}
.noir-memory-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: brightness(1.1) contrast(1.05) sepia(0.12);
  animation: subtleBreath 8s infinite ease-in-out;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Deep circular vignette overlay */
  background: radial-gradient(circle at center, transparent 10%, rgba(8,8,8,0.4) 40%, var(--black) 85%);
  pointer-events: none;
}
@keyframes subtleBreath {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}
@media(max-width: 1024px) {
  .hero-media-zone { 
    width: 380px; 
    height: 550px; 
    right: -40px; 
    opacity: 0.4;
  }
}
@media(max-width: 768px) {
  .hero-media-zone { display: none; }
}
.hero-content{position:relative;z-index:2;max-width:800px;animation:heroIn 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.hero-ring{position:absolute;border-radius:50%;border:1px solid;pointer-events:none;top:50%;left:50%}
.hero-ring-1{width:500px;height:500px;border-color:rgba(201,169,110,.07);transform:translate(-50%,-50%);animation:spin 30s linear infinite}
.hero-ring-2{width:800px;height:800px;border-color:rgba(212,132,156,.05);transform:translate(-50%,-50%);animation:spin 50s linear infinite reverse}
.hero-ring-3{width:1100px;height:1100px;border-color:rgba(201,169,110,.03);transform:translate(-50%,-50%);animation:spin 70s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-pre{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;opacity:0;animation:fadeUp .8s .3s both}
.hero-title{font-family:var(--serif);font-size:clamp(3.2rem,8vw,7rem);font-weight:300;line-height:1.08;color:var(--cream);margin-bottom:24px;opacity:0;animation:fadeUp .8s .5s both}
.gold-text{color:var(--gold)}.italic{font-style:italic}
.hero-sub{font-size:1rem;color:var(--ts);max-width:480px;margin:0 auto 14px;font-weight:300;opacity:0;animation:fadeUp .8s .7s both}
.hero-from{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--blush-l);margin-bottom:44px;opacity:0;animation:fadeUp .8s .9s both}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .8s 1.1s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:var(--black);border:none;border-radius:var(--r100);font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all var(--tr);box-shadow:0 0 28px rgba(201,169,110,.18)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(201,169,110,.32)}
.btn-outline{display:inline-flex;align-items:center;padding:13px 30px;background:transparent;color:var(--cream);border:1px solid var(--border-s);border-radius:var(--r100);font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:all var(--tr)}
.btn-outline:hover{background:var(--gl);border-color:var(--gold);color:var(--gold)}

/* ── SECTIONS ── */
.section{position:relative;z-index:1;padding:100px 40px}
@media(max-width:768px){.section{padding:70px 20px}}
.section-header{text-align:center;max-width:600px;margin:0 auto 56px}
.section-tag{display:inline-block;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;padding:5px 14px;border:1px solid var(--border);border-radius:var(--r100)}
.section-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--cream);margin-bottom:14px;line-height:1.2}
.section-header p{color:var(--ts);font-size:.92rem;font-weight:300}

/* ── UPLOAD ── */
.upload-section{background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.upload-zone{max-width:580px;margin:0 auto;border:1.5px dashed var(--border-s);border-radius:var(--r24);padding:56px 36px;text-align:center;cursor:pointer;transition:all var(--tr);background:var(--gl)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--gold);background:rgba(201,169,110,.04);transform:scale(1.01)}
.upload-icon{font-size:2.2rem;color:var(--gold);display:block;margin-bottom:18px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.upload-main-text{font-family:var(--serif);font-size:1.35rem;color:var(--cream);margin-bottom:6px}
.upload-sub-text{color:var(--tm);font-size:.86rem;margin-bottom:24px}
.upload-trigger-btn{pointer-events:none}
.upload-zone:hover .upload-trigger-btn{pointer-events:auto}
.upload-queue{max-width:580px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
.upload-item{background:var(--dark2);border:1px solid var(--border);border-radius:var(--r16);padding:14px 18px;display:flex;align-items:center;gap:14px}
.upload-item-thumb{width:44px;height:44px;border-radius:var(--r8);object-fit:cover;background:var(--dark)}
.upload-item-info{flex:1}
.upload-item-name{font-size:.84rem;color:var(--cream);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.upload-progress-bar{height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.upload-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:2px;transition:width .3s}
.upload-item-status{font-size:.75rem;color:var(--ts);margin-top:4px}
.upload-item-done{color:var(--gold)}
.firebase-banner{max-width:580px;margin:16px auto 0;padding:10px 16px;border-radius:var(--r8);background:var(--dark2);border:1px solid var(--border);font-size:.8rem;color:var(--ts);text-align:center;transition:all var(--tr)}
.firebase-banner.ok{border-color:rgba(100,200,100,.3);color:#7dcc88}
.firebase-banner.error{border-color:rgba(200,100,100,.3);color:#cc7d7d}

/* ── GALLERY ── */
.gallery-section{background:var(--black)}
.gallery-filters{display:flex;justify-content:center;gap:10px;margin-bottom:40px;flex-wrap:wrap}
.filter-btn{background:transparent;border:1px solid var(--border);color:var(--ts);padding:8px 22px;border-radius:var(--r100);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all var(--tr);font-family:var(--sans)}
.filter-btn.active,.filter-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.06)}
.gallery-grid {
  column-count: 3;
  column-gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
@media(max-width: 900px) {
  .gallery-grid { column-count: 2; column-gap: 20px; }
}
@media(max-width: 500px) {
  .gallery-grid { column-count: 2; column-gap: 12px; }
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 32px;
  position: relative;
  border-radius: var(--r16);
  overflow: hidden;
  cursor: pointer;
  background: var(--dark2);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease;
}
@media(max-width: 768px) {
  .gallery-item { margin-bottom: 20px; }
}
.gallery-item img, .gallery-item video {
  width: 100%;
  display: block;
  border-radius: var(--r16);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--tr);
  border-radius: var(--r16);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-type { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.video-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:var(--r8);padding:3px 8px;font-size:.72rem;backdrop-filter:blur(6px)}
.gallery-item-delete{position:absolute;top:10px;left:10px;background:rgba(204,125,125,.85);color:#fff;border:none;border-radius:var(--r8);width:32px;height:32px;font-size:1.2rem;line-height:1;cursor:pointer;backdrop-filter:blur(6px);opacity:0.75;transition:all var(--tr);display:flex;align-items:center;justify-content:center;z-index:10;font-family:var(--sans)}
.gallery-item:hover .gallery-item-delete{opacity:1}
.gallery-item-delete:hover{background:rgba(220,50,50,1);transform:scale(1.1)}
.gallery-empty{text-align:center;padding:80px 20px;color:var(--tm);grid-column:1/-1}
.gallery-empty-icon{font-size:2.5rem;color:var(--gold-d);margin-bottom:14px}
.spinner{width:36px;height:36px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin2 .8s linear infinite;margin:0 auto}
@keyframes spin2{to{transform:rotate(360deg)}}
.gallery-loader{text-align:center;padding:40px}

/* ── QR SECTION ── */
.qr-section{background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.qr-card{max-width:420px;margin:0 auto;text-align:center;padding:56px 40px;background:var(--dark2);border:1px solid var(--border);border-radius:var(--r24)}
.qr-card h3{font-family:var(--serif);font-size:1.8rem;font-weight:300;color:var(--cream);margin:14px 0 10px}
.qr-card p{color:var(--ts);font-size:.9rem;margin-bottom:28px;font-weight:300}
.qr-wrapper{background:#fff;border-radius:var(--r16);padding:16px;display:inline-block;margin-bottom:20px}
.qr-wrapper canvas,.qr-wrapper img{display:block}
.qr-url{font-size:.75rem;color:var(--tm);margin-bottom:20px;word-break:break-all}

/* ── UNLOCK TEASER ── */
.unlock-teaser-section{background:var(--black)}
.unlock-teaser-card{max-width:500px;margin:0 auto;text-align:center;padding:70px 40px;background:var(--dark2);border:1px solid var(--border);border-radius:var(--r24);position:relative;overflow:hidden}
.unlock-teaser-card::before{content:'';position:absolute;inset:-1px;border-radius:var(--r24);background:linear-gradient(135deg,rgba(201,169,110,.2),transparent,rgba(212,132,156,.15));z-index:0;pointer-events:none}
.lock-glow{position:relative;z-index:1;font-size:2.8rem;color:var(--blush-l);margin-bottom:20px;animation:heartbeat 2s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.unlock-teaser-card h3{position:relative;z-index:1;font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--cream);margin-bottom:12px}
.unlock-teaser-card p{position:relative;z-index:1;color:var(--ts);font-size:.92rem;margin-bottom:32px;font-weight:300}

/* ── HOMESCREEN SECTION ── */
.homescreen-section {
  background: var(--black);
  padding: 40px 20px 100px;
}
.homescreen-card {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--r24);
  padding: 50px 40px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.homescreen-icon {
  font-size: 2.8rem;
  margin-bottom: 20px;
  display: block;
  animation: float 4s infinite ease-in-out;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.homescreen-card h3 {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--cream);
  margin-bottom: 12px;
}
.homescreen-card p {
  color: var(--ts);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 30px;
}
.instruction-box {
  background: rgba(0,0,0,0.3);
  border-radius: 16px;
  padding: 20px;
  font-size: 0.85rem;
  color: var(--gold-l);
  text-align: left;
  border-left: 3px solid var(--gold);
}
.instruction-box b { color: var(--cream); display: block; margin-bottom: 4px; }

/* ── FOOTER ── */
.footer{text-align:center;padding:40px 20px;border-top:1px solid var(--border);color:var(--tm);font-size:.82rem;letter-spacing:.06em}

/* ── PASSWORD MODAL ── */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--dark2);border:1px solid var(--border-s);border-radius:var(--r24);padding:48px 40px;max-width:420px;width:100%;text-align:center;position:relative;animation:slideUp .4s cubic-bezier(.4,0,.2,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--ts);font-size:1.1rem;cursor:pointer;transition:color var(--tr)}
.modal-close:hover{color:var(--cream)}
.modal-heart{font-size:2.5rem;color:var(--blush-l);margin-bottom:18px;animation:heartbeat 2s ease-in-out infinite}
.modal-title{font-family:var(--serif);font-size:1.7rem;font-weight:300;color:var(--cream);margin-bottom:8px}
.modal-sub{color:var(--ts);font-size:.88rem;margin-bottom:28px;font-weight:300}
.input-group{display:flex;flex-direction:column;gap:12px}
.input-group input{background:var(--dark);border:1px solid var(--border-s);border-radius:var(--r100);padding:14px 22px;color:var(--cream);font-family:var(--sans);font-size:.92rem;outline:none;transition:border-color var(--tr);text-align:center}
.input-group input:focus{border-color:var(--gold)}
.input-group input::placeholder{color:var(--tm)}
.password-error{margin-top:12px;font-size:.82rem;color:#cc7d7d;min-height:18px}

/* ── PRIVATE ZONE ── */
#private-zone{background:var(--black);min-height:100vh;position:relative;z-index:1;animation:fadeIn .6s both}
.private-hero{text-align:center;padding:120px 40px 70px;position:relative;overflow:hidden}
.private-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(212,132,156,.1) 0%,transparent 60%)}
.private-hero-content{position:relative;z-index:2;max-width:700px;margin:0 auto}
.private-tag{display:inline-block;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--blush);margin-bottom:18px;padding:5px 16px;border-radius:var(--r100)}
.private-hero h1{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);font-weight:300;color:var(--cream);margin-bottom:20px;line-height:1.1}
.private-hero .blush-text{color:var(--blush-l);font-style:italic}
.private-close-btn{margin-top:32px;background:transparent;border:1px solid rgba(212,132,156,.3);color:var(--blush-l);padding:10px 24px;border-radius:var(--r100);font-size:.8rem;cursor:pointer;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;transition:all var(--tr)}
.private-close-btn:hover{background:rgba(212,132,156,.1)}

/* Letter section */
.letter-section{padding:0 40px 100px;max-width:780px;margin:0 auto}
.letter-card{background:var(--dark2);border:1px solid rgba(212,132,156,.15);border-radius:var(--r24);padding:60px 56px;position:relative;overflow:hidden}
.letter-card::after{content:'';position:absolute;inset:0;background:url('https://res.cloudinary.com/dwoau4g1j/image/upload/v1778445468/v9fth4lzpvyudfpiqwwi.jpg') center/cover no-repeat;opacity:0.2;filter:contrast(110%) brightness(0.7);mix-blend-mode:luminosity;pointer-events:none;z-index:0;animation:imageGlow 8s infinite ease-in-out alternate}
@keyframes imageGlow {
  0% { opacity: 0.1; filter: contrast(110%) brightness(0.6); }
  100% { opacity: 0.28; filter: contrast(120%) brightness(1.0); }
}
.letter-card > * { position: relative; z-index: 1; }
@media(max-width:600px){.letter-card{padding:40px 28px}}
.letter-card::before{content:'';position:absolute;top:-20px;right:30px;font-size:8rem;color:rgba(212,132,156,.04);pointer-events:none;line-height:1}
.letter-header{margin-bottom:40px}
.letter-date{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blush);margin-bottom:10px}
.letter-greeting{font-family:var(--serif);font-size:1.8rem;font-weight:300;font-style:italic;color:var(--cream)}
.letter-body p{font-size:1.02rem;color:rgba(255,255,255,0.85);line-height:1.9;margin-bottom:22px;font-weight:300}
.letter-body p:last-child{margin-bottom:0}
.letter-body strong{color:var(--cream);font-weight:400}
.letter-signature{margin-top:40px;text-align:right}
.letter-sign-name{font-family:var(--serif);font-size:1.6rem;font-style:italic;color:var(--gold)}
.letter-sign-sub{font-size:.8rem;color:var(--tm);margin-top:-8px;margin-right:-8px;letter-spacing:.08em}

/* Memories section */
.memories-section{padding:0 40px 100px}
.memories-header{text-align:center;max-width:600px;margin:0 auto 56px}
.memories-header h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--cream);margin-bottom:12px}
.memories-header p{color:var(--ts);font-size:.9rem;font-weight:300}
.memories-timeline{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.memory-item{display:flex;gap:28px;padding-bottom:50px;position:relative}
.memory-item:not(:last-child)::after{content:'';position:absolute;left:17px;top:36px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--border-s),transparent)}
.memory-dot{width:36px;height:36px;border-radius:50%;border:1px solid var(--border-s);background:var(--dark2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);font-size:.9rem;margin-top:2px}
.memory-content{flex:1;padding-top:0}
.memory-date{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blush);margin-bottom:6px}
.memory-title{font-family:var(--serif);font-size:1.25rem;font-weight:400;color:var(--cream);margin-bottom:8px}
.memory-desc{font-size:.9rem;color:var(--ts);line-height:1.75;font-weight:300}

/* Private gallery section */
.private-gallery-section{padding:0 40px 100px}
.private-gallery-header{text-align:center;max-width:600px;margin:0 auto 40px}
.private-gallery-header .private-tag{margin-bottom:12px}
.private-gallery-header h2{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--cream);margin-bottom:10px}
.private-gallery-header p{color:var(--ts);font-size:.88rem}
.private-gallery-grid{columns:2 200px;gap:14px;max-width:900px;margin:0 auto}
.private-gallery-grid .gallery-item{margin-bottom:14px}

/* ── LIGHTBOX ── */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.96);display:flex;align-items:center;justify-content:center;animation:fadeIn .25s both}
.lightbox-close{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.08);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:1.1rem;cursor:pointer;transition:background var(--tr)}
.lightbox-close:hover{background:rgba(255,255,255,.18)}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:none;color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.8rem;cursor:pointer;transition:background var(--tr);display:flex;align-items:center;justify-content:center}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.18)}
.lightbox-media-wrapper{max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center}
.lightbox-media-wrapper img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:var(--r8)}
.lightbox-media-wrapper video{max-width:90vw;max-height:80vh;border-radius:var(--r8)}
.lightbox-bar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px}
.lightbox-counter{font-size:.8rem;color:rgba(255,255,255,.6);letter-spacing:.08em}
.lightbox-download-btn{background:rgba(255,255,255,.08);border:none;color:#fff;padding:8px 18px;border-radius:var(--r100);font-size:.78rem;cursor:pointer;transition:background var(--tr);font-family:var(--sans);letter-spacing:.06em}
.lightbox-download-btn:hover{background:rgba(255,255,255,.18)}

/* ── UTILITIES ── */
.hidden{display:none!important}

/* ── ANIMATIONS ── */
.shining-lock {
  display: inline-block;
  animation: shineLock 2.5s infinite ease-in-out;
  filter: drop-shadow(0 0 2px rgba(255,215,0,0.3));
}
@keyframes shineLock {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(201,169,110,0.4)) brightness(1); }
  50% { transform: scale(1.15) rotate(8deg); filter: drop-shadow(0 0 12px rgba(201,169,110,1)) brightness(1.3); }
}

.name-glow {
  display: inline-block;
  animation: sweetFloatGlow 4s infinite ease-in-out;
  transform-origin: center;
}
@keyframes sweetFloatGlow {
  0%, 100% { transform: translateY(0px) scale(1); text-shadow: 0 0 10px rgba(201,169,110,0.2); color: var(--gold); }
  50% { transform: translateY(-3px) scale(1.02); text-shadow: 0 0 25px rgba(212,132,156,0.6); color: var(--blush-l); }
}
.static-glow {
  display: inline-block;
  animation: pureGlow 4s infinite ease-in-out;
}
@keyframes pureGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(201,169,110,0.2); color: var(--gold); }
  50% { text-shadow: 0 0 25px rgba(212,132,156,0.6); color: var(--blush-l); }
}

.animated-tag {
  animation: gentlePulse 3s infinite ease-in-out;
}
@keyframes gentlePulse {
  0%, 100% { opacity: 0.8; transform: scale(1); filter: drop-shadow(0 0 2px rgba(212,132,156,0.2)); }
  50% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 12px rgba(212,132,156,0.7)); border-color: rgba(212,132,156,0.6); }
}

/* ── LETTER HIGHLIGHTS ── */
.highlight-text {
  color: var(--cream);
  font-weight: 500;
  text-shadow: 0 0 10px rgba(201,169,110,0.3);
  transition: all var(--tr);
}
.highlight-text:hover {
  text-shadow: 0 0 15px rgba(201,169,110,0.7);
}

.shimmer-text {
  display: inline-block;
  color: var(--cream);
  background: linear-gradient(120deg, var(--cream) 20%, var(--gold-l) 40%, var(--blush-l) 50%, var(--gold-l) 60%, var(--cream) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4.5s linear infinite;
  font-style: italic;
  font-weight: 500;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

.sparkle-title {
  display: inline-block;
  animation: sparkleGlow 3s infinite ease-in-out alternate;
}
@keyframes sparkleGlow {
  0% { text-shadow: 0 0 10px rgba(255,255,255,0.1), 0 0 20px rgba(201,169,110,0.1); }
  100% { text-shadow: 0 0 15px rgba(255,255,255,0.4), 0 0 30px rgba(201,169,110,0.7); }
}

.forever-glow {
  display: inline-block;
  color: var(--gold-l);
  animation: foreverBreathe 4s infinite ease-in-out alternate;
  font-style: italic;
}
@keyframes foreverBreathe {
  0% { text-shadow: 0 0 5px rgba(226, 201, 138, 0.2); transform: scale(1); }
  100% { text-shadow: 0 0 20px rgba(226, 201, 138, 0.8), 0 0 30px rgba(212, 132, 156, 0.4); transform: scale(1.05); }
}

.saturn-emote {
  display: inline-block;
  animation: saturnSpin 4s infinite ease-in-out alternate;
}
@keyframes saturnSpin {
  0% { transform: rotate(-5deg) scale(1); filter: drop-shadow(0 0 5px rgba(201,169,110,0.3)); }
  100% { transform: rotate(10deg) scale(1.1); filter: drop-shadow(0 0 15px rgba(201,169,110,0.8)); }
}

.brand-animate {
  animation: brandShimmer 5s infinite ease-in-out;
}
@keyframes brandShimmer {
  0%, 100% { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.2); transform: scale(1); }
  50% { color: var(--gold-l); text-shadow: 0 0 15px rgba(201,169,110,0.6); transform: scale(1.03); }
}

/* ── NIGHT SKY NAV BUTTON ── */
.nav-starmap-btn {
  background: transparent;
  border: 1px solid rgba(150,180,255,0.25);
  color: rgba(180,210,255,0.75);
  padding: 8px 18px;
  border-radius: var(--r100);
  font-size: .78rem;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all var(--tr);
  font-family: var(--sans);
  text-transform: uppercase;
}
.nav-starmap-btn:hover { background: rgba(150,180,255,0.08); border-color: rgba(150,180,255,0.5); color: #b4d4ff; }
.mobile-starmap-btn {
  background: transparent;
  border: 1px solid rgba(150,180,255,0.25);
  color: rgba(180,210,255,0.75);
  padding: 12px;
  border-radius: var(--r100);
  font-size: .85rem;
  cursor: pointer;
  font-family: var(--sans);
  margin-top: 4px;
}

/* ── AGE COUNTER PILL ── */
.age-counter-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001; /* Above lightbox and everything */
  background: rgba(10,10,18,0.82);
  border: 1px solid rgba(212,132,156,0.18);
  border-radius: 40px;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(12px);
  gap: 1px;
  pointer-events: none;
  animation: counterFadeIn 2s 1.5s both;
}
@keyframes counterFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.age-counter-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(150,180,255,0.5);
  font-family: var(--sans);
}
.age-counter-time {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(200,220,255,0.8);
  font-family: var(--sans);
  font-weight: 400;
}

/* ── GALLERY WATERMARK ── */
.gallery-watermark {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,132,156,0.2);
  
  /* Shimmer effect similar to private letter */
  background: linear-gradient(120deg, rgba(255,255,255,0.8) 20%, var(--gold-l) 40%, var(--blush-l) 50%, var(--gold-l) 60%, rgba(255,255,255,0.8) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
  text-shadow: 0 0 15px rgba(212,132,156,0.3);
}

.lightbox-media-wrapper .gallery-watermark {
  bottom: 24px;
  right: 24px;
  font-size: 0.85rem;
  padding: 6px 14px;
}