/* =========================================================
   Premium layer — loaded after style.css
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

:root{
  --gold-grad:linear-gradient(135deg,#f7e3a6 0%,#d9b25a 38%,#b8892d 62%,#f1d58e 100%);
  --velvet:radial-gradient(120% 80% at 50% 0%, #6d1424 0%, #4a0b17 45%, #2a050c 100%);
  --hair:rgba(231,197,119,.35);
}

/* ---------- page shell ---------- */
html,body{ background:#1c0408; }
.page-backdrop{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(201,162,39,.12), transparent 70%),
    linear-gradient(180deg, rgba(28,4,8,.78), rgba(28,4,8,.92)),
    url('../images/design/backdrop.jpg') center/cover no-repeat;
  filter:saturate(.9);
}
.stage{ box-shadow:0 0 0 1px rgba(231,197,119,.18), 0 0 80px rgba(0,0,0,.6); }

/* ---------- content protection (deterrent) ---------- */
img, video, canvas{
  -webkit-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
}
.card-body img{ pointer-events:auto; }
video::-internal-media-controls-download-button{ display:none; }
video::-webkit-media-controls-enclosure{ overflow:hidden; }

/* ---------- gate: lock the page until the date is revealed ---------- */
.after-reveal{ display:none; }
body.is-unlocked .after-reveal{ display:block; animation:afterIn 1s ease both; }
@keyframes afterIn{ from{ opacity:0; } to{ opacity:1; } }
/* until the opening video finishes, the page underneath must not scroll */
body.is-opening{ overflow:hidden; height:100vh; }

/* ---------- shared type ---------- */
.script-title{
  font-family:'Pinyon Script', cursive;
  font-size:3rem; line-height:1.1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  margin:.2rem 0 .3rem;
}
.eyebrow.light{ color:var(--gold-light); }
.section-title{ font-size:1.18rem; letter-spacing:2.5px; }
.rule{
  width:120px; height:14px; margin:1rem auto 1.2rem;
  background:
    radial-gradient(circle, var(--gold) 2.5px, transparent 3px) center/14px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 40%, transparent 46%, transparent 54%, var(--gold) 60%, transparent) center/100% 1px no-repeat;
}
.rule.light{
  background:
    radial-gradient(circle, var(--gold-light) 2.5px, transparent 3px) center/14px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gold-light) 40%, transparent 46%, transparent 54%, var(--gold-light) 60%, transparent) center/100% 1px no-repeat;
}
section{ padding:3.8rem 1.5rem; }
.card-body{
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(201,162,39,.08), transparent 70%),
    linear-gradient(var(--cream), var(--cream));
}

/* ---------- Ganesh panel scroll cue ---------- */
#sec-ganesh{ position:relative; }
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  text-decoration:none; color:var(--gold-pale);
  font-family:'Cinzel', serif; font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
  opacity:0; transition:opacity 1s ease .6s;
}
body.is-ready .scroll-cue{ opacity:1; }
.scroll-cue span{ background:rgba(28,4,8,.45); padding:.4rem .9rem; border-radius:30px; border:1px solid var(--hair); backdrop-filter:blur(3px); }
.scroll-cue-chevron{
  width:14px; height:14px; border-right:2px solid var(--gold-light); border-bottom:2px solid var(--gold-light);
  transform:rotate(45deg); animation:cueBob 1.6s ease-in-out infinite;
}
@keyframes cueBob{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:.5; } 50%{ transform:translateY(7px) rotate(45deg); opacity:1; } }

/* ---------- SCRATCH STAGE (gate) ---------- */
.scratch-stage{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--velvet); color:var(--cream);
  overflow:hidden; padding:3rem 1.4rem 3.2rem;
}
.scratch-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 15%, rgba(247,220,151,.10), transparent 30%),
    radial-gradient(circle at 80% 85%, rgba(247,220,151,.08), transparent 35%);
}
.frame-ornament{
  position:absolute; inset:14px; pointer-events:none;
  border:1px solid var(--hair); border-radius:18px;
}
.frame-ornament::before, .frame-ornament::after{
  content:"✦"; position:absolute; left:50%; transform:translateX(-50%);
  color:var(--gold-light); font-size:.9rem; background:#4a0b17; padding:0 .5rem;
}
.frame-ornament::before{ top:-.7rem; }
.frame-ornament::after{ bottom:-.7rem; background:#2d060d; }
.scratch-lede{ font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--gold-pale); font-size:1.05rem; opacity:.9; }

.scratch-shell{ position:relative; width:280px; height:244px; margin:1.8rem auto 0; }
.scratch-glow{
  position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(circle, rgba(247,220,151,.35), transparent 65%);
  animation:glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.45; transform:scale(.95);} 50%{ opacity:.9; transform:scale(1.05);} }
.scratch-shell .scratch-heart-wrap{ margin:0; position:absolute; inset:0; }
.scratch-date-reveal{
  background:radial-gradient(ellipse at 50% 40%, #fffaf0 0%, #f6e6bf 70%, #e9cf8d 100%);
}
.scratch-date{
  display:flex; flex-direction:column; align-items:center; line-height:1;
  font-style:normal; padding:0; margin-top:-14px;
}
.sd-day{ font-family:'Cinzel', serif; font-size:.72rem; letter-spacing:3px; text-transform:uppercase; color:var(--maroon-light); }
.sd-num{ font-family:'Cinzel', serif; font-size:3.6rem; font-weight:700; color:var(--maroon); margin:.25rem 0 .1rem; }
.sd-month{ font-family:'Pinyon Script', cursive; font-size:1.7rem; color:var(--maroon); }

/* animated "how to scratch" finger */
.scratch-demo{ position:absolute; inset:0; pointer-events:none; z-index:3; transition:opacity .5s ease; }
.scratch-demo.hidden{ opacity:0; }
.scratch-demo-trail{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.scratch-demo-trail path{
  fill:none; stroke:rgba(255,248,236,.85); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520;
  filter:drop-shadow(0 0 6px rgba(247,220,151,.9));
  animation:trailDraw 3.2s ease-in-out infinite;
}
@keyframes trailDraw{
  0%{ stroke-dashoffset:520; opacity:0; }
  10%{ opacity:1; }
  70%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
.scratch-hand{
  position:absolute; left:0; top:0; width:46px; height:46px;
  offset-path:path('M70 92 C110 70 150 120 190 92 S 230 120 200 150 S 120 140 100 170 S 150 190 170 175');
  offset-rotate:0deg; offset-anchor:30% 8%;
  animation:handMove 3.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.scratch-hand svg{ width:100%; height:100%; }
@keyframes handMove{
  0%{ offset-distance:0%; opacity:0; transform:scale(1.15); }
  10%{ opacity:1; transform:scale(1); }
  70%{ offset-distance:100%; opacity:1; }
  85%,100%{ offset-distance:100%; opacity:0; }
}

.scratch-hint{
  color:var(--gold-pale); font-size:1.02rem; margin-top:1.6rem;
  display:flex; align-items:center; gap:.55rem; justify-content:center;
}
.hint-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold-light); box-shadow:0 0 0 0 rgba(247,220,151,.7); animation:ping 1.6s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(247,220,151,.7);} 100%{ box-shadow:0 0 0 12px rgba(247,220,151,0);} }
.scratch-progress{ width:160px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); margin:.9rem auto 0; overflow:hidden; }
.scratch-progress span{ display:block; height:100%; width:0; background:var(--gold-grad); transition:width .3s ease; }

.reveal-after{
  max-height:0; opacity:0; overflow:hidden; transform:translateY(12px);
  transition:max-height .8s ease, opacity .8s ease .2s, transform .8s ease .2s;
}
.scratch-stage.revealed .reveal-after{ max-height:220px; opacity:1; transform:none; }
.scratch-stage.revealed .scratch-hint,
.scratch-stage.revealed .scratch-progress{ display:none; }
.reveal-time{ font-family:'Cormorant Garamond', serif; font-size:1.08rem; color:var(--gold-pale); margin-top:1.4rem; }

.btn-royal{
  position:relative; margin-top:1.2rem; padding:1rem 2.1rem; border-radius:50px; overflow:hidden;
  background:var(--gold-grad); color:var(--maroon-deep);
  font-family:'Cinzel', serif; font-weight:700; font-size:.88rem; letter-spacing:2px; text-transform:uppercase;
  box-shadow:0 10px 30px rgba(201,162,39,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-royal::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation:shine 2.6s ease-in-out infinite;
}
@keyframes shine{ 0%{ left:-60%; } 60%,100%{ left:130%; } }
.btn-royal:active{ transform:scale(.97); }

/* ---------- HERO + countdown ---------- */
.hero{ background:var(--ivory); padding-bottom:3rem !important; }
.hero-greeting-under{ font-size:1.25rem; margin-top:1.4rem; }
.countdown-panel{
  margin:1.6rem 1.2rem 0; padding:1.6rem 1rem 1.4rem;
  border-radius:22px; background:var(--velvet); position:relative;
  box-shadow:0 18px 40px rgba(58,8,16,.35);
}
.countdown-panel::before{ content:""; position:absolute; inset:8px; border:1px solid var(--hair); border-radius:16px; pointer-events:none; }
.countdown-panel .countdown-label{ color:var(--gold-light); margin-top:0; }
.countdown{ gap:.55rem; margin-top:1.1rem; flex-wrap:nowrap; }
.cd-box{
  width:auto; height:auto; flex:1; max-width:88px; aspect-ratio:3/4;
  border-radius:14px; border:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.cd-box::after{ display:none; }
.cd-num{ font-size:1.8rem; background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-label{ color:var(--gold-pale); opacity:.8; }
.days-to-go{ margin:1.3rem 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--hair); }
.days-to-go img{ width:100%; }

/* ---------- STORY ---------- */
.story-section{ background:var(--velvet); }
.story-portrait{
  width:min(78%, 320px); margin:1.4rem auto .6rem; padding:8px;
  border-radius:200px 200px 18px 18px;
  background:var(--gold-grad);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.story-portrait img{ border-radius:192px 192px 12px 12px; width:100%; aspect-ratio:985/1600; object-fit:cover; }

/* ---------- FILMS ---------- */
.films-section{ background:var(--ivory); }
.film-player{
  position:relative; margin-top:1.3rem; border-radius:18px; overflow:hidden; background:#000;
  box-shadow:0 18px 40px rgba(58,8,16,.28);
  outline:1px solid var(--gold-light); outline-offset:4px;
}
.film-player video{ width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.film-wide{ aspect-ratio:16/9; }
.film-small{ margin-top:1.6rem; }
.film-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,3,8,.75));
  transition:opacity .35s ease;
}
.film-play span{
  width:68px; height:68px; border-radius:50%;
  background:rgba(255,248,236,.18); backdrop-filter:blur(6px);
  border:1.5px solid rgba(247,220,151,.85);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(247,220,151,.5); animation:ping 2s infinite;
}
.film-play span::after{
  content:""; margin-left:5px;
  border-left:18px solid #f7e3a6; border-top:11px solid transparent; border-bottom:11px solid transparent;
}
.film-caption{
  position:absolute; left:14px; bottom:12px; text-align:left; color:#fff; pointer-events:none;
  transition:opacity .35s ease; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.film-caption b{ display:block; font-family:'Cinzel', serif; font-size:.92rem; letter-spacing:1px; }
.film-caption small{ font-size:.78rem; color:var(--gold-pale); }
.film-player.playing .film-play, .film-player.playing .film-caption{ opacity:0; pointer-events:none; }

/* ---------- ENGAGEMENT FLIPBOOK ---------- */
.album-section{ background:var(--velvet); color:var(--cream); padding-left:.9rem; padding-right:.9rem; }
.album-sub{ font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--gold-pale); }
.album-stage{ position:relative; margin-top:1.6rem; perspective:1600px; }
.album-closed{
  position:relative; display:block; width:min(86%, 340px); aspect-ratio:3/2; margin:0 auto;
  transform:rotateX(14deg) rotateZ(-2deg); transform-style:preserve-3d;
  transition:transform .6s ease; animation:bookFloat 4s ease-in-out infinite;
}
@keyframes bookFloat{ 0%,100%{ transform:rotateX(14deg) rotateZ(-2deg) translateY(0);} 50%{ transform:rotateX(14deg) rotateZ(-2deg) translateY(-8px);} }
.album-spine{ position:absolute; left:-10px; top:3px; bottom:3px; width:14px; border-radius:6px 0 0 6px; background:linear-gradient(90deg,#2a050c,#5e0f1c); }
.album-cover-face, .fb-cover-inner{
  position:absolute; inset:0; border-radius:6px 12px 12px 6px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #7a1626, #4a0b17 60%, #2a050c);
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(247,220,151,.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  color:var(--gold-pale); overflow:hidden;
}
.ac-border{ position:absolute; inset:10px; border:1.5px solid rgba(231,197,119,.75); border-radius:6px; }
.ac-border::after{ content:""; position:absolute; inset:4px; border:1px solid rgba(231,197,119,.35); border-radius:4px; }
.ac-mono{
  font-family:'Cinzel', serif; font-size:2.1rem; font-weight:700; letter-spacing:3px;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ac-mono i{ font-family:'Pinyon Script', cursive; font-style:normal; font-weight:400; }
.ac-mono.small{ font-size:1.2rem; }
.ac-title{ font-family:'Pinyon Script', cursive; font-size:1.7rem; color:var(--gold-light); }
.ac-date{ font-family:'Cinzel', serif; font-size:.62rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold-pale); opacity:.85; }
.ac-cta{
  margin-top:.5rem; font-family:'Cinzel', serif; font-size:.62rem; letter-spacing:2px; text-transform:uppercase;
  padding:.35rem .9rem; border:1px solid var(--hair); border-radius:20px; animation:tapPulse 1.8s ease-in-out infinite;
}
.album-stage.opening-book .album-closed{ animation:none; transform:rotateY(-80deg) scale(.9); opacity:0; transition:transform .8s ease, opacity .8s ease; transform-origin:left center; }
.flipbook-wrap{ position:relative; }
.flipbook{ margin:0 auto; }
.fb-page{ background:#fffaf0; overflow:hidden; }
.fb-page img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .4s ease; }
.fb-page img.loaded{ opacity:1; }
.fb-num{ position:absolute; bottom:6px; right:10px; font-size:.62rem; color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,0,0,.6); }
.fb-hard{ background:transparent; }
.fb-cover-inner{ border-radius:4px; }
.album-controls{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.3rem; }
.album-btn{
  width:42px; height:42px; border-radius:50%; color:var(--gold-light);
  border:1px solid var(--hair); background:rgba(255,255,255,.06);
}
.album-btn:active{ background:rgba(255,255,255,.18); }
.album-count{ min-width:96px; font-family:'Cinzel', serif; font-size:.75rem; letter-spacing:1.5px; color:var(--gold-pale); }

/* ---------- EVENTS ---------- */
.events-list{ gap:1rem; }
.event-card{
  padding:1rem 1rem 1rem 1.1rem; border-radius:18px; align-items:center;
  background:linear-gradient(180deg, #fffdf8, var(--ivory));
  box-shadow:0 12px 30px rgba(58,8,16,.12);
}
.event-card::before{ width:4px; }
.event-datechip{
  position:absolute; top:10px; right:12px; text-align:center; line-height:1;
  font-family:'Cinzel', serif; color:var(--maroon);
}
.edc-day{ display:block; font-size:1.15rem; font-weight:700; }
.edc-mon{ font-size:.58rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.event-body{ padding-right:2.4rem; }
.event-icon{ height:64px; }

/* ---------- misc ---------- */
.btn-outline{
  display:inline-block; margin-top:1rem; padding:.7rem 1.4rem; border-radius:40px;
  border:1px solid var(--gold); color:var(--maroon); text-decoration:none;
  font-family:'Cinzel', serif; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase;
}
.final-section{ background:linear-gradient(180deg, var(--cream), var(--gold-pale)); }
.final-portrait{
  width:min(80%, 320px); margin:0 auto 1.6rem; padding:7px; border-radius:18px;
  background:var(--gold-grad); box-shadow:0 20px 50px rgba(58,8,16,.3); transform:rotate(-2deg);
}
.final-portrait img{ border-radius:12px; aspect-ratio:4/5; object-fit:cover; width:100%; }
.lightbox img{ max-height:84vh; }
.music-toggle{ border:1px solid var(--gold-light); background:var(--velvet); }
body:not(.is-ready) .music-toggle{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .scratch-hand, .scratch-demo-trail path, .album-closed, .btn-royal::after, .scratch-glow{ animation:none !important; }
}
@media (max-width:360px){
  .scratch-shell{ transform:scale(.9); }
  .sd-num{ font-size:3rem; }
  .cd-num{ font-size:1.5rem; }
}

/* ---------- fixes after preview ---------- */
.scroll-cue span{ white-space:nowrap; }
.films-more{
  display:flex; justify-content:space-between; align-items:baseline; margin:2rem .2rem .2rem;
  font-family:'Cinzel', serif; font-size:.82rem; letter-spacing:2px; text-transform:uppercase; color:var(--maroon);
}
.films-more span{ font-family:'Cormorant Garamond', serif; font-style:italic; text-transform:none; letter-spacing:0; color:var(--muted); font-size:.92rem; }
.film-row{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -1.5rem; padding:.9rem 1.5rem 1rem; scrollbar-width:none;
}
.film-row::-webkit-scrollbar{ display:none; }
.film-card{ flex:0 0 82%; aspect-ratio:16/9; margin-top:0; scroll-snap-align:center; }
.film-card .film-play span{ width:54px; height:54px; }
.album-controls[hidden], .flipbook-wrap[hidden], .days-to-go[hidden]{ display:none !important; }
.share-btn{ text-decoration:none; display:inline-flex; align-items:center; }

.films-section .film-wide + .film-wide{ margin-top:1.8rem; }

/* ---------- WISHES — card slider ---------- */
.wishes-slider{ margin-top:1.6rem; }
.wishes-track{
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  margin:0 -1.5rem; padding:.8rem 1.5rem 1.2rem; scrollbar-width:none;
}
.wishes-track::-webkit-scrollbar{ display:none; }
.wishes-track .wish-card{
  flex:0 0 84%; scroll-snap-align:center; position:relative;
  flex-direction:column; align-items:center; text-align:center; gap:.7rem;
  padding:1.8rem 1.3rem 1.4rem; min-height:200px;
  border-radius:20px; background:linear-gradient(180deg, #fffdf8, var(--ivory));
  border:1px solid var(--gold-light);
  box-shadow:0 14px 30px rgba(58,8,16,.14);
}
.wishes-track .wish-card::before{
  content:"\201C"; position:absolute; top:-.2rem; left:.9rem;
  font-family:'Cormorant Garamond', serif; font-size:4.2rem; line-height:1; color:var(--gold-light); opacity:.7;
}
.wishes-track .wish-card::after{
  content:""; position:absolute; inset:7px; border:1px dashed rgba(201,162,39,.28); border-radius:15px; pointer-events:none;
}
.wishes-track .wish-initial{ width:46px; height:46px; font-size:1.1rem; box-shadow:0 0 0 4px rgba(231,197,119,.25); }
.wishes-track .wish-body{ display:flex; flex-direction:column; flex:1; justify-content:space-between; gap:.6rem; width:100%; }
.wishes-track .wish-text{ font-size:1.08rem; line-height:1.6; overflow-wrap:anywhere; }
.wishes-track .wish-from{ font-family:'Cinzel', serif; font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--maroon); margin-top:0; }
.wishes-track .wishes-empty{ flex:1; text-align:center; }
.wish-card.wish-new{ animation:wishIn .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes wishIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }
.wishes-nav{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:.4rem; }
.wishes-nav[hidden]{ display:none; }
.wishes-nav .album-btn{ color:var(--maroon); border-color:var(--gold-light); background:var(--ivory); }
.wishes-count{ min-width:70px; font-family:'Cinzel', serif; font-size:.78rem; letter-spacing:1.5px; color:var(--maroon); }