/* ================================================================
   ee.love — WARM ROMANTIC STYLE v3
   Warm crimson, rose gold, burgundy & champagne tones
   Handwriting aesthetic + 100% Mobile Responsive
================================================================ */

/* ─── RESET & TOKENS ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Palette: Warm burgundy, deep ruby, rose gold, soft peach, champagne */
  --bg-deep:     #17060f;
  --bg-section:  #1f0814;
  --bg-card:     rgba(45, 14, 28, 0.75);
  --bg-glass:    rgba(45, 14, 28, 0.55);

  --c-primary:   #ff8fa3;   /* rose pink */
  --c-secondary: #ffc2d1;   /* soft blush pink */
  --c-accent:    #ff4d6d;   /* passionate crimson/ruby */
  --c-warm:      #ffe5ec;   /* champagne white */
  --c-gold:      #ffd166;   /* warm gold */

  --c-text:      #fff0f3;
  --c-text-dim:  rgba(255, 240, 243, 0.7);
  --c-text-bright:#ffffff;

  --font-display:'Dancing Script', cursive;
  --font-script: 'Caveat', cursive;
  --font-body:   'Quicksand', sans-serif;
  --font-ui:     'Quicksand', sans-serif;

  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  background:var(--bg-deep);
  color:var(--c-text);
  font-size: 16px;
}

body{
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background: radial-gradient(circle at 50% 30%, #2a081a 0%, var(--bg-deep) 100%);
}

/* ─── CUSTOM CURSOR (Only on Desktop) ──────────────── */
.cur-dot{
  position:fixed;pointer-events:none;z-index:99999;
  width:8px;height:8px;border-radius:50%;
  background:var(--c-accent);
  transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .15s;
  box-shadow: 0 0 10px var(--c-accent);
}
.cur-ring{
  position:fixed;pointer-events:none;z-index:99998;
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(255, 143, 163, 0.4);
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease-out-expo),height .25s var(--ease-out-expo),border-color .2s;
}
body.cursor-hover .cur-dot{width:12px;height:12px;background:var(--c-gold)}
body.cursor-hover .cur-ring{width:56px;height:56px;border-color:rgba(255, 209, 102, 0.6);background:rgba(255, 77, 109, 0.05)}

/* ─── CLICK RIPPLE ───────────────────────────────── */
.click-ripple{
  position:fixed;pointer-events:none;z-index:99997;
  width:0;height:0;border-radius:50%;
  border:2px solid var(--c-primary);
  transform:translate(-50%,-50%);
  animation:ripple-expand .6s ease-out forwards;
}
@keyframes ripple-expand{
  to{width:90px;height:90px;opacity:0}
}

/* ═══════════════════════════════════════════════════
   LOCK SCREEN
═══════════════════════════════════════════════════ */
#lock{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-deep);
  transition:opacity 1s ease, transform 1s var(--ease-out-expo);
}
#lock.exit{opacity:0;transform:scale(1.08);pointer-events:none}

.lock-bg-anim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255, 77, 109, 0.15), transparent),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(255, 194, 209, 0.12), transparent),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(255, 209, 102, 0.08), transparent);
  animation:lock-pulse 8s ease-in-out infinite alternate;
}
@keyframes lock-pulse{
  0%{transform: scale(1); opacity: 0.8;}
  100%{transform: scale(1.1); opacity: 1;}
}

.lock-stars, #lock-hearts-canvas{position:absolute;inset:0;overflow:hidden;pointer-events:none;}

.lock-content{
  position:relative;z-index:2;
  text-align:center;
  padding:2rem;
  width: min(90vw, 400px);
  background: rgba(35, 9, 20, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 143, 163, 0.2);
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 30px rgba(255, 77, 109, 0.15);
}

.lock-heart-icon{
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  color: var(--c-accent);
  filter: drop-shadow(0 0 15px var(--c-accent));
  animation: heart-beat 1.5s ease-in-out infinite;
}
@keyframes heart-beat{
  0%, 100%{transform: scale(1);}
  15%{transform: scale(1.15);}
  30%{transform: scale(1);}
  45%{transform: scale(1.15);}
}

.lock-tagline{
  font-family:var(--font-script);
  font-size:clamp(1.3rem,5vw,1.6rem);
  color:var(--c-secondary);
  letter-spacing:.05em;
  margin-bottom:2rem;
}

.lock-input-wrap{
  display:flex;justify-content:center;margin-bottom:1.5rem;
}

#lock-input{
  width:180px;padding:.8rem 1.2rem;
  font-family:var(--font-ui);font-size:1.5rem;font-weight:700;
  text-align:center;letter-spacing:.55em;
  background:rgba(255, 255, 255, 0.05);
  border:1.5px solid rgba(255, 143, 163, 0.3);
  border-radius:14px;color:var(--c-text-bright);
  outline:none;
  transition:all .3s;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
}
#lock-input:focus{
  border-color:var(--c-accent);
  background:rgba(255, 255, 255, 0.08);
  box-shadow:0 0 0 3px rgba(255, 77, 109, 0.25), 0 0 25px rgba(255, 77, 109, 0.2);
}

.lock-submit{
  display:block;margin:0 auto;
  padding:.7rem 3.2rem;
  font-family:var(--font-ui);font-size:.9rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--c-text-bright);
  background:linear-gradient(135deg, var(--c-accent), #c9184a);
  border:none;
  border-radius:30px;cursor:pointer;
  transition:all .3s;
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.4);
}
.lock-submit:hover, .lock-submit:active{
  background:linear-gradient(135deg, #ff708a, var(--c-accent));
  box-shadow:0 8px 25px rgba(255, 77, 109, 0.6);
  transform:translateY(-2px);
}

#lock-error{
  margin-top:1rem;
  font-family:var(--font-ui);font-size:.85rem;font-weight:600;
  color:#ff4d4d;
  opacity:0;transition:opacity .3s;
}
#lock-error.visible{opacity:1}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-10px)}
  40%,80%{transform:translateX(10px)}
}
.shake{animation:shake .4s ease}

/* ═══════════════════════════════════════════════════
   MAIN EXPERIENCE
═══════════════════════════════════════════════════ */
#experience{
  opacity:0;pointer-events:none;
  transition:opacity 1.2s ease;
}
#experience.visible{opacity:1;pointer-events:auto}

#particle-canvas{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}

/* ─── SECTIONS (common) ──────────────────────────── */
.section{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  padding:5rem 1.5rem;
  overflow:hidden;
  z-index: 2;
}

/* ─── REVEAL ANIMATION ───────────────────────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
[data-reveal].revealed{
  opacity:1;transform:translateY(0);
}

/* ═══════════════════════════════════════════════════
   HERO — VIDEO BACKGROUND + 3D TEXT
═══════════════════════════════════════════════════ */
#hero{
  background:var(--bg-deep);
  padding: 2rem 1.5rem;
}

.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  filter:brightness(0.4) saturate(1.2) contrast(1.1);
}

.hero-video-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(23,6,15,0.6) 0%, rgba(23,6,15,0.25) 40%, rgba(23,6,15,0.85) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(255,77,109,0.15), transparent 70%);
}

.hero-content{
  position:relative;z-index:2;
  text-align:center;
  max-width:850px;
  padding:1.5rem;
  width: 100%;
}

.hero-eyebrow{
  font-family:var(--font-script);
  font-size:clamp(1.3rem,4vw,1.8rem);
  font-weight:500;
  color:var(--c-secondary);
  margin-bottom:0.5rem;
  text-shadow:0 0 15px rgba(255,143,163,0.5);
}

.hero-name-wrap{
  perspective:1000px;
  margin-bottom:0.5rem;
}

/* 3D TEXT EFFECT */
.hero-name{
  font-family:var(--font-display);
  font-size:clamp(4.2rem,15vw,9rem);
  font-weight:700;
  line-height:1.1;
  display:inline-block;
  position:relative;
}

.hero-3d{
  background:linear-gradient(135deg, #ffffff, var(--c-secondary), var(--c-primary), var(--c-gold));
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 6s ease-in-out infinite;
  filter:drop-shadow(0 4px 15px rgba(255,77,109,0.4))
         drop-shadow(0 8px 30px rgba(0,0,0,0.6));
  transform-style:preserve-3d;
  transition:transform .4s var(--ease-out-expo);
}
.hero-3d:hover{
  transform:scale(1.03);
}

@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.hero-3d::before{
  content:attr(data-text);
  position:absolute;inset:0;
  z-index:-1;
  background:linear-gradient(135deg, rgba(255,77,109,0.5), rgba(255,209,102,0.3));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transform:translateZ(-15px) translateY(4px);
  filter:blur(8px);
}

.hero-subtitle{
  font-family:var(--font-script);
  font-size:clamp(1.4rem,4.5vw,2.2rem);
  font-weight:500;
  color:var(--c-warm);
  margin-top:0;
  text-shadow:0 2px 15px rgba(0,0,0,0.7);
}

.ornament{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:1.5rem 0;
}
.ornament-line{
  width:min(80px, 20vw);height:1.5px;
  background:linear-gradient(90deg,transparent, var(--c-primary), transparent);
}
.ornament-gem{
  width:8px;height:8px;
  background:var(--c-accent);
  border-radius:50%;
  box-shadow:0 0 12px var(--c-accent), 0 0 20px var(--c-primary);
  animation:gem-pulse 2s ease-in-out infinite;
}
@keyframes gem-pulse{
  0%,100%{box-shadow:0 0 8px var(--c-accent);transform:scale(1)}
  50%{box-shadow:0 0 20px var(--c-accent), 0 0 35px rgba(255,77,109,0.6);transform:scale(1.3)}
}

.hero-quote{
  font-family:var(--font-body);
  font-size:clamp(1rem,2.8vw,1.2rem);
  font-weight:400;
  color:var(--c-text);
  max-width:480px;
  margin:0 auto;
  line-height:1.8;
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
  background: rgba(23,6,15,0.4);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,143,163,0.15);
}

/* Scroll CTA */
.scroll-cta{
  margin-top:2.5rem;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:pointer;
  transition: transform 0.3s;
}
.scroll-cta:hover{transform: translateY(3px);}
.scroll-cta span{
  font-family:var(--font-ui);font-size:.75rem;font-weight:600;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--c-secondary);
  opacity:.8;
}
.scroll-arrow{
  width:2px;height:32px;
  background:linear-gradient(180deg,var(--c-accent),transparent);
  animation:scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce{
  0%,100%{transform:translateY(0);opacity:.8}
  50%{transform:translateY(10px);opacity:.3}
}

/* ═══════════════════════════════════════════════════
   SECTION 2: REASONS I LOVE YOU (Interactive Cards)
═══════════════════════════════════════════════════ */
#reasons{
  background: radial-gradient(circle at 80% 20%, #2b0b1a 0%, var(--bg-section) 100%);
}

.section-label{
  font-family:var(--font-script);
  font-size:clamp(1.1rem,3vw,1.4rem);
  color:var(--c-primary);
  text-shadow:0 0 15px rgba(255,143,163,0.4);
  margin-bottom:.2rem;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,7vw,3.5rem);
  font-weight:700;
  color: var(--c-text-bright);
  margin-bottom:.4rem;
  line-height: 1.2;
}
.section-subtitle{
  font-family:var(--font-body);
  font-size:clamp(.95rem,2.5vw,1.1rem);
  color:var(--c-text-dim);
  font-weight:300;
}

.reasons-header{text-align:center;margin-bottom:3rem;width: 100%;}

.reasons-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  width: min(950px, 100%);
  padding: 0 0.5rem;
}

.reason-card{
  background: var(--bg-glass);
  border: 1px solid rgba(255,143,163,0.2);
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transition: all 0.4s var(--ease-out-expo);
  cursor: pointer;
}

.reason-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  opacity: 0.7;
  transition: opacity 0.3s, height 0.3s;
}

.reason-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,143,163,0.5);
  box-shadow: 0 15px 35px rgba(255,77,109,0.2), 0 0 20px rgba(255,143,163,0.1);
  background: rgba(55, 18, 35, 0.85);
}
.reason-card:hover::before{
  opacity: 1;
  height: 4px;
}

.reason-front{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  transition: opacity 0.3s, transform 0.3s;
}
.reason-number{
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--c-gold);
  line-height: 1;
  opacity: 0.9;
}
.reason-icon{
  width: 36px; height: 36px;
  color: var(--c-primary);
  filter: drop-shadow(0 0 8px rgba(255,143,163,0.5));
}

.reason-back{
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--c-text);
  line-height: 1.6;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   LETTER SECTION
═══════════════════════════════════════════════════ */
#letter{
  background: radial-gradient(circle at 20% 80%, #2a0b1c 0%, var(--bg-section) 100%);
}

.letter-header{text-align:center;margin-bottom:2.5rem;width:100%;}

.letter-wrap{
  width:min(640px,100%);
}

.letter-card{
  background:rgba(255, 245, 248, 0.06);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,143,163,0.25);
  border-radius:24px;
  padding:clamp(1.8rem,6vw,3rem);
  box-shadow:
    0 15px 35px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 0 40px rgba(255,77,109,0.08);
  transition:transform .4s var(--ease-out-expo), box-shadow .4s;
  position: relative;
}
.letter-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 20px 45px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 50px rgba(255,77,109,0.15);
}

.letter-card-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:1.5rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,143,163,0.2);
}
.letter-from{
  font-family:var(--font-script);font-size:1.4rem;
  color:var(--c-gold);
}
.letter-seal{font-size:1.5rem;color:var(--c-accent);filter:drop-shadow(0 0 8px var(--c-accent));}

.letter-to{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,5vw,2.4rem);
  font-weight:700;
  color:var(--c-text-bright);
  margin-bottom:1.2rem;
}

.letter-text{
  font-family:var(--font-body);
  font-size:clamp(1rem,2.8vw,1.15rem);
  color:var(--c-text);
  line-height:1.9;
  font-weight: 400;
}
.letter-text p{margin-bottom:1.2rem}
.letter-text p:last-child{margin-bottom:0}

.letter-signature{
  margin-top:2rem;
  text-align:right;
  font-family:var(--font-display);
  font-size:clamp(1.8rem,5vw,2.3rem);
  color:var(--c-primary);
  text-shadow: 0 0 10px rgba(255,143,163,0.3);
}

/* ═══════════════════════════════════════════════════
   PHOTOS SECTION
═══════════════════════════════════════════════════ */
#photos{
  background:var(--bg-section);
}

.photos-header{text-align:center;margin-bottom:3rem;width:100%;}

.photos-grid{
  display:flex;gap:clamp(2rem,6vw,4rem);
  flex-wrap:wrap;justify-content:center;
  align-items: center;
  width: 100%;
  padding:0 0.5rem;
}

.polaroid{
  background:rgba(255, 245, 248, 0.95);
  border-radius:12px;
  padding:12px 12px 0;
  width:clamp(220px,75vw,290px);
  transform:rotate(var(--tilt,0deg));
  transition:transform .55s var(--ease-out-expo), box-shadow .4s;
  box-shadow:0 15px 35px rgba(0,0,0,0.5), 0 0 25px rgba(255,77,109,0.15);
  color: #2a081a;
  cursor: pointer;
}
.polaroid:hover{
  box-shadow:0 20px 45px rgba(0,0,0,0.6), 0 0 35px rgba(255,77,109,0.3);
  transform: rotate(0deg) scale(1.04) !important;
  z-index: 10;
}

.polaroid-img-wrap{
  position:relative;
  aspect-ratio:3/4;
  border-radius:6px;
  overflow:hidden;
  background:#1a0812;
}
.polaroid-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out-expo);
}
.polaroid:hover .polaroid-img-wrap img{
  transform:scale(1.08);
}

.polaroid-placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
  background:linear-gradient(135deg, rgba(255,77,109,0.1), rgba(255,209,102,0.1));
}
.polaroid-img-wrap.no-img .polaroid-placeholder{display:flex}
.polaroid-img-wrap:not(.no-img) .polaroid-placeholder{display:none}

.polaroid-caption{
  padding:1rem .5rem;
  font-family:var(--font-script);
  font-size:1.4rem;
  font-weight: 600;
  color:#4a1525;
  text-align:center;
}

/* ═══════════════════════════════════════════════════
   COUNTDOWN SECTION
═══════════════════════════════════════════════════ */
#countdown{
  background: radial-gradient(circle at 50% 50%, #2d0c1d 0%, var(--bg-section) 100%);
}

.countdown-wrap{text-align:center;width:100%;max-width: 800px;}

.countdown-subtitle{
  font-family:var(--font-body);
  font-size:1.1rem;
  color:var(--c-text-dim);
  margin-bottom:2.5rem;
}

.countdown-rings{
  display:flex;gap:clamp(1rem,4vw,2.5rem);
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:2.5rem;
}

.ring-item{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  min-width: 70px;
}
.ring-svg{
  width:clamp(75px,18vw,110px);
  height:clamp(75px,18vw,110px);
  transform:rotate(-90deg);
  filter:drop-shadow(0 0 10px rgba(255,77,109,0.25));
}
.ring-bg{
  fill:none;stroke:rgba(255,255,255,0.08);stroke-width:5;
}
.ring-fill{
  fill:none;stroke-width:5;
  stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease-out-expo);
  filter:drop-shadow(0 0 6px currentColor);
}
.ring-value{
  fill:var(--c-text-bright);
  font-family:var(--font-ui);font-size:1.5rem;font-weight:700;
  text-anchor:middle;dominant-baseline:central;
  transform:rotate(90deg);
  transform-origin:50% 50%;
}
.ring-label{
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--c-secondary);
}

.countdown-message{
  font-family:var(--font-script);
  font-size:clamp(1.3rem,4vw,1.7rem);
  color:var(--c-gold);
  text-shadow: 0 0 15px rgba(255,209,102,0.3);
}

/* ═══════════════════════════════════════════════════
   FINALE SECTION (Enhanced & Super Romantic)
═══════════════════════════════════════════════════ */
#finale{
  background: radial-gradient(circle at 50% 100%, #3a0d22 0%, var(--bg-deep) 100%);
  position: relative;
}

#finale-hearts-canvas{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}

.finale-content{
  text-align:center;
  position: relative;
  z-index: 2;
  max-width: 750px;
  background: rgba(35, 9, 20, 0.65);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 30px;
  border: 1px solid rgba(255,143,163,0.3);
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 40px rgba(255,77,109,0.2);
  width: min(100%, 700px);
}

.finale-heartbeat{
  width: 70px; height: 70px;
  margin: 0 auto 1.5rem;
  color: var(--c-accent);
  filter: drop-shadow(0 0 20px var(--c-accent));
  animation: heart-beat 1.3s ease-in-out infinite;
}

.finale-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,8vw,4rem);
  font-weight:700;
  line-height:1.2;
  background:linear-gradient(135deg, #ffffff, var(--c-secondary), var(--c-gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1.8rem;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}

.finale-message{
  font-family:var(--font-body);
  font-size:clamp(1.05rem,3vw,1.3rem);
  color:var(--c-text);
  line-height:1.9;
  margin-bottom:2rem;
  font-weight: 400;
}

.finale-wish{
  position: relative;
  margin: 2rem 0;
  padding: 1.2rem;
  border-radius: 16px;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 143, 163, 0.25);
}
.wish-glow{
  position: absolute; inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(255, 77, 109, 0.2);
  pointer-events: none;
}
.wish-text{
  font-family:var(--font-script);
  font-size:clamp(1.4rem,4.5vw,1.9rem);
  color:var(--c-gold);
  margin: 0;
}

.finale-ornament{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin: 2rem 0 1.5rem;
}

.finale-sign{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: var(--c-primary);
  margin-top: 1rem;
}

.finale-floats{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;z-index: 1;
}
.finale-float{
  position:absolute;
  opacity:0;
  animation:float-up linear infinite;
}
@keyframes float-up{
  0%{transform:translateY(0) scale(0.8);opacity:0}
  15%{opacity:.8}
  85%{opacity:.6}
  100%{transform:translateY(-100vh) scale(1.2);opacity:0}
}

/* ═══════════════════════════════════════════════════
   PROGRESS NAV (Desktop & Tablet)
═══════════════════════════════════════════════════ */
#progress-nav{
  position:fixed;right:20px;top:50%;
  transform:translateY(-50%);
  z-index:8000;
  display:flex;flex-direction:column;gap:14px;
  opacity:0;pointer-events:none;
  transition:opacity .5s;
}
#progress-nav.visible{opacity:1;pointer-events:auto}

.progress-dot{
  width:12px;height:12px;border-radius:50%;
  background:rgba(255,143,163,0.25);
  border:1.5px solid rgba(255,143,163,0.4);
  cursor:pointer;
  transition:all .3s;
  padding:0;
}
.progress-dot.active{
  background:var(--c-accent);
  border-color: var(--c-text-bright);
  box-shadow:0 0 15px var(--c-accent);
  transform:scale(1.35);
}
.progress-dot:hover{
  background:rgba(255,143,163,0.6);
  transform:scale(1.2);
}

/* ═══════════════════════════════════════════════════
   MOBILE RESPONSIVENESS (100% Adapted)
═══════════════════════════════════════════════════ */
@media(max-width:768px){
  .section{padding:4rem 1.2rem;}
  .hero-3d{font-size:clamp(3.5rem,16vw,6rem);}
  #progress-nav{display: none;} /* Hide dot nav on mobile for clean touch experience */
  
  .reasons-grid{
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .reason-card{
    min-height: 140px;
    padding: 1.5rem 1.2rem;
  }
  
  .photos-grid{flex-direction:column;gap: 2.5rem;}
  .polaroid{width:min(300px,88vw); transform: rotate(0deg) !important;}
  
  .countdown-rings{gap: 1rem;}
  .ring-item{min-width: 65px;}
  .ring-svg{width: 70px; height: 70px;}
  .ring-value{font-size: 1.3rem;}
  
  .letter-card{padding: 1.8rem 1.2rem;}
  .finale-content{padding: 2.2rem 1.2rem;}
}

@media(max-width:480px){
  .hero-quote{padding: 0.8rem 1rem;}
  .lock-content{padding: 1.8rem 1.2rem;}
  #lock-input{width: 160px; font-size: 1.3rem;}
}