/*
Theme Name: Petra i Marko
Theme URI: https://verena-invitations.hr
Author: Verena Invitations
Author URI: https://verena-invitations.hr
Description: Digitalna pozivnica za vjenčanje Petra & Marko (1.8.2027). Tema s otvarajućom kovertom, animacijom ruža, countdown-om, ovčicama i potvrdom dolaska.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: petra-marko
Tags: wedding, invitation, custom-colors, custom-menu, full-width-template
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --sage:#c44758;--sage-light:#e88a96;--sage-dark:#7a1f2e;
  --env:#a83344;--env-dark:#7a1f2e;--env-crease:#52121d;
  --cream:#fdf6f7;--warm:#f0d4d8;--gold:#c9a373;--gold-light:#e8c79a;
  --text:#2d1a1d;--text-light:#6d4248;
  --wax:#8a1f2d;--wax-hi:#b83348;
}
html,body{width:100%;height:100%;overflow:hidden;}
body{font-family:'Jost',sans-serif;background:var(--cream);color:var(--text);}

/* ═══════════════════════════════════════
   ENVELOPE — fills entire viewport
═══════════════════════════════════════ */
#env-screen{
  position:fixed;inset:0;z-index:1000;
  background:var(--env);
  cursor:pointer;
  overflow:hidden;
  transition:opacity 1s ease, transform 1s ease;
}
#env-screen.exit{
  opacity:0;
  transform:scale(1.08) translateY(-30px);
  pointer-events:none;
}

/* Linen texture overlay */
#env-screen::before{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,   transparent, transparent 3px, rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px),
    repeating-linear-gradient(90deg,  transparent, transparent 3px, rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px);
  pointer-events:none;z-index:1;
}

/* Vignette */
#env-screen::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events:none;z-index:2;
}

/* ── TOP FLAP ── */
.env-flap-top{
  position:absolute;top:0;left:0;right:0;
  height:50%;
  background:var(--env-dark);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 0.9s cubic-bezier(0.4,0,0.2,1);
  z-index:10;
  overflow:hidden;
}
.env-flap-top::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px),
             repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,0.02) 3px,rgba(0,0,0,0.02) 4px);
}
/* Crease line on flap */
.env-flap-top::before{
  content:'';position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:2px;height:60%;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.15));
}
#env-screen.open .env-flap-top{
  transform:perspective(1200px) rotateX(-175deg);
}

/* ── SIDE TRIANGLES (left / right) ── */
.env-tri-left{
  position:absolute;top:0;bottom:0;left:0;
  width:50%;
  background:var(--env-crease);
  clip-path:polygon(0 0, 0 100%, 100% 50%);
  opacity:0.45;z-index:5;
  pointer-events:none;
}
.env-tri-right{
  position:absolute;top:0;bottom:0;right:0;
  width:50%;
  background:var(--env-crease);
  clip-path:polygon(100% 0, 100% 100%, 0 50%);
  opacity:0.3;z-index:5;
  pointer-events:none;
}

/* ── BOTTOM TRIANGLE ── */
.env-tri-bottom{
  position:absolute;bottom:0;left:0;right:0;
  height:50%;
  background:var(--env-crease);
  clip-path:polygon(0 100%, 100% 100%, 50% 0);
  opacity:0.55;z-index:5;
  pointer-events:none;
}

/* ── WAX SEAL ── */
.wax-wrap{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:20;
  transition:transform 0.5s ease, opacity 0.5s ease;
}
#env-screen.open .wax-wrap{
  transform:translate(-50%,-50%) scale(0.7);
  opacity:0.5;
}
.wax-outer{
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--wax-hi), var(--wax) 55%, #8a4a10);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3), inset 0 3px 6px rgba(255,255,255,0.15);
  position:relative;overflow:hidden;
  animation:waxFloat 3s ease-in-out infinite;
}
@keyframes waxFloat{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3),inset 0 3px 6px rgba(255,255,255,0.15);}
  50%{box-shadow:0 16px 48px rgba(0,0,0,0.45),0 4px 16px rgba(0,0,0,0.25),inset 0 3px 6px rgba(255,255,255,0.15);}
}
.wax-outer::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 30% 22%, rgba(255,255,255,0.22), transparent 55%);
}
/* Wax drip effect */
.wax-outer::after{
  content:'';position:absolute;
  bottom:-6px;left:50%;transform:translateX(-50%);
  width:20px;height:14px;
  background:var(--wax);
  border-radius:0 0 50% 50%;
  opacity:0.7;
}
.wax-text{
  font-family:'Great Vibes',cursive;
  font-size:40px;color:rgba(255,240,200,0.92);
  text-shadow:0 2px 6px rgba(0,0,0,0.4);
  position:relative;z-index:1;
  letter-spacing:-1px;
}

/* Falling rose petals */
.petal{
  position:absolute;
  border-radius:50% 50% 50% 0;
  animation:petalFall linear infinite;
  pointer-events:none;
  z-index:3;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,0.15);
}
@keyframes petalFall{
  0%{opacity:0;transform:translateY(-30px) rotate(0deg) translateX(0);}
  15%{opacity:0.7;}
  85%{opacity:0.4;}
  100%{opacity:0;transform:translateY(105vh) rotate(540deg) translateX(var(--dx,20px));}
}

/* Sparkle dots */
.sp{
  position:absolute;border-radius:50%;
  background:var(--gold-light);
  animation:spAnim 2.2s ease-in-out infinite;
}
@keyframes spAnim{0%,100%{opacity:0.2;transform:scale(0.6);}50%{opacity:1;transform:scale(1);}}

/* ── CARD RISING ── */
.card-peek{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%) translateY(100%);
  width:min(420px, 80vw);
  background:var(--cream);
  border-radius:2px 2px 0 0;
  padding:48px 40px 40px;
  text-align:center;
  z-index:8;
  box-shadow:0 -8px 40px rgba(0,0,0,0.2);
  transition:transform 0.9s cubic-bezier(0.34,1.02,0.64,1) 0.3s;
}
#env-screen.open .card-peek{
  transform:translateX(-50%) translateY(0%);
}

/* Greenery on card */



.card-together{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--text-light);margin-bottom:12px;}
.card-name{font-family:'Great Vibes',cursive;font-size:clamp(52px,10vw,80px);color:var(--text);line-height:1.05;}
.card-amp{font-family:'Great Vibes',cursive;font-size:clamp(34px,7vw,52px);color:var(--sage);line-height:0.8;margin:4px 0;}
.card-date{
  display:flex;align-items:center;gap:16px;
  margin:20px auto 0;justify-content:center;
}
.card-date::before,.card-date::after{content:'';width:40px;height:1px;background:var(--sage-light);}
.card-date span{font-size:12px;letter-spacing:5px;color:var(--text-light);}
.card-loc{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--text-light);margin-top:8px;}

/* ── HINT TEXT ── */
.env-hint{
  position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);
  text-align:center;z-index:20;
  animation:hintAnim 2s ease-in-out infinite;
  transition:opacity 0.4s;
}
#env-screen.open .env-hint{opacity:0;pointer-events:none;}
@keyframes hintAnim{0%,100%{opacity:0.5;transform:translateX(-50%) translateY(0);}50%{opacity:1;transform:translateX(-50%) translateY(-6px);}}
.env-hint p{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:rgba(181,196,168,0.8);}

/* ── OPEN BUTTON ── */
.open-btn{
  position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);
  z-index:25;
  padding:14px 40px;
  background:transparent;
  border:1px solid rgba(201,169,110,0.5);
  border-radius:1px;
  color:rgba(232,201,138,0.85);
  font-family:'Jost',sans-serif;
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  cursor:pointer;
  transition:all 0.3s ease;
  animation:btnGlow 2.5s ease-in-out infinite;
}
.open-btn:hover{
  background:rgba(201,169,110,0.12);
  border-color:rgba(201,169,110,0.9);
  color:var(--gold-light);
  transform:translateX(-50%) translateY(-2px);
}
@keyframes btnGlow{
  0%,100%{box-shadow:0 0 0 rgba(201,169,110,0);}
  50%{box-shadow:0 0 20px rgba(201,169,110,0.2);}
}
#env-screen.open .open-btn{display:none;}



/* ════════════════════════════════
   MAIN CONTENT
════════════════════════════════ */
#main{
  position:fixed;inset:0;
  overflow-y:auto;overflow-x:hidden;
  opacity:0;pointer-events:none;
  transition:opacity 0.8s ease 0.3s;
}
#main.on{opacity:1;pointer-events:auto;}

/* NAV */
.nav-dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;}

/* MOBILE MENU */
.mobile-burger{
  display:none;
  position:fixed;
  top:18px;right:18px;
  width:46px;height:46px;
  background:rgba(250,243,244,0.95);
  backdrop-filter:blur(8px);
  border-radius:50%;
  border:1px solid rgba(168,112,124,0.2);
  z-index:200;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  transition:all 0.3s;
}
.mobile-burger:hover{transform:scale(1.05);}
.mobile-burger span{
  display:block;
  width:18px;height:1.5px;
  background:var(--text);
  border-radius:2px;
  transition:all 0.3s;
}
.mobile-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.mobile-burger.open span:nth-child(2){opacity:0;}
.mobile-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  top:0;right:-100%;
  width:75%;max-width:340px;
  height:100vh;
  background:var(--cream);
  z-index:150;
  padding:64px 28px 24px;
  display:flex;
  flex-direction:column;
  gap:0;
  transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-10px 0 40px rgba(0,0,0,0.15);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{right:0;}
.mobile-menu-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  z-index:120;
  transition:opacity 0.3s;
}
.mobile-menu-overlay.show{opacity:1;pointer-events:auto;}

.mm-item{
  display:block;
  padding:13px 6px;
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  color:var(--text);
  border-bottom:1px solid rgba(168,112,124,0.15);
  cursor:pointer;
  background:none;
  border-left:none;border-right:none;border-top:none;
  text-align:left;
  width:100%;
  transition:padding-left 0.3s, color 0.3s;
}
.mm-item:hover, .mm-item:active{
  padding-left:18px;
  color:var(--sage-dark);
}
.mm-decor{
  font-family:'Great Vibes',cursive;
  font-size:28px;
  color:var(--sage);
  text-align:center;
  margin-top:auto;
  padding-top:18px;
  letter-spacing:2px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sage-light);cursor:pointer;transition:all 0.3s;border:none;padding:0;}
.dot.active{background:var(--sage-dark);transform:scale(1.4);}

section{min-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 40px;position:relative;}

/* COVER */
#cover{background:var(--cream);text-align:center;overflow:visible;position:relative;min-height:90vh;padding:60px 40px;}

/* Petals — contained within hero/cover section */
.page-petals{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  opacity:0;
  transition:opacity 1s ease;
}
.page-petals.on{opacity:1;}
#cover > *:not(.page-petals){position:relative;z-index:2;}

/* Scroll to top button */
.scroll-top{
  position:fixed;
  bottom:24px;right:24px;
  width:48px;height:48px;
  background:var(--sage-dark);
  color:var(--cream);
  border:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:90;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 6px 20px rgba(122,31,46,0.3);
}
.scroll-top:hover{
  background:var(--wax);
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 10px 28px rgba(122,31,46,0.4);
}
.scroll-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.scroll-top svg{width:18px;height:18px;}
@media(max-width:600px){
  .scroll-top{bottom:18px;right:18px;width:42px;height:42px;}
  .scroll-top svg{width:16px;height:16px;}
}
.hero-petal{
  position:absolute;
  border-radius:50% 50% 50% 0;
  animation:heroPetalFall linear infinite;
  pointer-events:none;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,0.12);
  top:-30px;
}
@keyframes heroPetalFall{
  0%{opacity:0;transform:translateY(0) rotate(0deg) translateX(0);}
  10%{opacity:0.55;}
  85%{opacity:0.4;}
  100%{opacity:0;transform:translateY(95vh) rotate(720deg) translateX(var(--dx,20px));}
}

.gl{position:absolute;border-radius:50% 50% 50% 0;opacity:0;animation:glIn 0.7s ease forwards;}
@keyframes glIn{from{opacity:0;transform:scale(0.4) var(--t);}to{opacity:var(--o,.7);transform:scale(1) var(--t);}}
.together{font-size:11px;letter-spacing:5px;text-transform:uppercase;color:var(--text-light);margin-bottom:16px;opacity:0;animation:fadeUp 0.8s ease 1.2s forwards;}
.cover-eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--sage-dark);
  margin-bottom:20px;
  opacity:0;
  animation:fadeUp 0.8s ease 1s forwards;
}
.name-s{font-family:'Great Vibes',cursive;font-size:clamp(72px,16vw,108px);color:var(--text);line-height:1.05;opacity:0;animation:fadeUp 0.8s ease 1.2s forwards;}
.name-s:nth-of-type(2){animation-delay:1.6s;}
.amp{font-family:'Great Vibes',cursive;font-size:clamp(44px,10vw,66px);color:var(--sage);display:block;line-height:0.85;margin:6px 0;opacity:0;animation:fadeUp 0.8s ease 1.6s forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.date-b{display:flex;align-items:center;gap:20px;margin-top:32px;margin-bottom:6px;opacity:0;animation:fadeUp 0.8s ease 2s forwards;}
.date-b::before,.date-b::after{content:'';width:50px;height:1px;background:var(--sage-light);}
.date-b span{font-size:13px;letter-spacing:6px;color:var(--text-light);}
.loc-i{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--text-light);opacity:0;animation:fadeUp 0.8s ease 2.2s forwards;}
.rec-l{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--sage);margin-top:10px;opacity:0;animation:fadeUp 0.8s ease 2.4s forwards;}
@keyframes fadeIn{from{opacity:0;}to{opacity:.6;}}


/* STORY */
#story{background:var(--warm);text-align:center;}
.inner-story{max-width:480px;opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s;}
#story.v .inner-story{opacity:1;transform:none;}

/* COUNTDOWN */
#countdown{background:var(--cream);text-align:center;padding:90px 32px;}
.cd-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;max-width:560px;width:100%;margin:0 auto;
}
.cd-cell{
  padding:24px 8px;
  background:var(--warm);
  border-radius:4px;
  border:1px solid rgba(184,89,104,0.15);
  position:relative;
  overflow:hidden;
}
.cd-cell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--sage-light),transparent);
}
.cd-num{
  font-family:'Great Vibes',cursive;
  font-size:clamp(42px,7vw,64px);
  color:var(--sage-dark);
  line-height:1;
  margin-bottom:6px;
}
.cd-lbl{
  font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:var(--text-light);
}
.cd-msg{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:17px;color:var(--text-light);
  margin-top:24px;
}
@media(max-width:480px){
  .cd-grid{gap:8px;}
  .cd-cell{padding:18px 4px;}
  .cd-num{font-size:38px;}
  .cd-lbl{font-size:8px;letter-spacing:2px;}
}

/* DETAILS */
#details{background:var(--cream);}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;max-width:480px;width:100%;margin-top:12px;}
@media(max-width:480px){.det-grid{grid-template-columns:1fr;gap:24px;}}
.det-item{text-align:center;opacity:0;transform:translateY(30px) scale(.95);transition:opacity .7s,transform .7s;}
#details.v .det-item:nth-child(1){opacity:1;transform:none;transition-delay:.1s;}
#details.v .det-item:nth-child(2){opacity:1;transform:none;transition-delay:.25s;}
#details.v .det-item:nth-child(3){opacity:1;transform:none;transition-delay:.4s;}
#details.v .det-item:nth-child(4){opacity:1;transform:none;transition-delay:.55s;}
.det-icon{width:44px;height:44px;border:1px solid var(--sage-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;transition:transform .3s,background .3s;}
.det-item:hover .det-icon{transform:scale(1.1) rotate(5deg);background:var(--warm);}
.det-icon svg{width:18px;height:18px;stroke:var(--sage);fill:none;stroke-width:1.5;}
.det-lbl{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--sage);margin-bottom:6px;}
.det-val{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--text);line-height:1.4;}
.det-sub{font-size:11px;color:var(--text-light);margin-top:4px;letter-spacing:1px;}

/* PROGRAM */
#program{background:var(--warm);}
.tl{max-width:380px;width:100%;position:relative;margin-top:12px;}
.tl::before{content:'';position:absolute;left:76px;top:6px;bottom:6px;width:1px;background:var(--sage-light);}
.tl-r{display:flex;align-items:flex-start;gap:22px;margin-bottom:30px;position:relative;opacity:0;transform:translateX(-20px);transition:opacity .6s,transform .6s;}
.tl-r:last-child{margin-bottom:0;}
#program.v .tl-r:nth-child(1){opacity:1;transform:none;transition-delay:.05s;}
#program.v .tl-r:nth-child(2){opacity:1;transform:none;transition-delay:.15s;}
#program.v .tl-r:nth-child(3){opacity:1;transform:none;transition-delay:.25s;}
#program.v .tl-r:nth-child(4){opacity:1;transform:none;transition-delay:.35s;}
#program.v .tl-r:nth-child(5){opacity:1;transform:none;transition-delay:.45s;}
#program.v .tl-r:nth-child(6){opacity:1;transform:none;transition-delay:.55s;}
.tl-t{font-size:12px;letter-spacing:1px;color:var(--text-light);min-width:54px;text-align:right;padding-top:3px;}
.tl-d{width:9px;height:9px;border-radius:50%;background:var(--sage);margin-top:4px;flex-shrink:0;z-index:1;transition:transform .3s,box-shadow .3s;}
.tl-r:hover .tl-d{transform:scale(1.5);box-shadow:0 0 0 4px rgba(122,140,110,.2);}
.tl-tt{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--text);}
.tl-dd{font-size:12px;color:var(--text-light);margin-top:2px;}

/* FAQ */
#faq{background:var(--cream);}
.faq-w{max-width:560px;width:100%;margin-top:8px;}
.faq-i{border-bottom:1px solid var(--warm);padding:16px 0;opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
#faq.v .faq-i:nth-child(1){opacity:1;transform:none;transition-delay:.05s;}
#faq.v .faq-i:nth-child(2){opacity:1;transform:none;transition-delay:.15s;}
#faq.v .faq-i:nth-child(3){opacity:1;transform:none;transition-delay:.25s;}
#faq.v .faq-i:nth-child(4){opacity:1;transform:none;transition-delay:.35s;}
#faq.v .faq-i:nth-child(5){opacity:1;transform:none;transition-delay:.45s;}
.faq-q{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;user-select:none;transition:color .2s;}
.faq-q:hover{color:var(--sage-dark);}
.faq-q::after{content:'+';font-size:20px;color:var(--sage);flex-shrink:0;transition:transform .3s;}
.faq-i.open .faq-q::after{transform:rotate(45deg);}
.faq-a{font-size:14px;color:var(--text-light);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .4s,padding .3s;}
.faq-i.open .faq-a{max-height:300px;padding-top:10px;}

/* RSVP */
#rsvp{background:var(--sage-dark);}
.rp{position:absolute;border-radius:50%;background:rgba(181,196,168,.25);animation:rpFloat linear infinite;pointer-events:none;}
@keyframes rpFloat{0%{opacity:0;transform:translateY(100vh) translateX(0);}10%{opacity:1;}90%{opacity:.4;}100%{opacity:0;transform:translateY(-10vh) translateX(var(--dx,20px));}}
.s-lbl{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--sage-light);margin-bottom:10px;}
.r-title{font-family:'Great Vibes',cursive;font-size:64px;color:var(--cream);margin-bottom:28px;}
.r-form{max-width:440px;width:100%;}
.f-g{margin-bottom:20px;}
.f-l{display:block;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--sage-light);margin-bottom:8px;}
.f-in{width:100%;padding:13px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:2px;color:var(--cream);font-family:'Jost',sans-serif;font-size:14px;font-weight:300;outline:none;transition:border-color .3s,background .3s;-webkit-appearance:none;}
.f-in::placeholder{color:rgba(250,248,243,.28);}
.f-in:focus{border-color:var(--sage-light);background:rgba(255,255,255,.11);}
.btn-row{display:flex;gap:10px;}
.cb{flex:1;padding:12px 8px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:2px;color:rgba(250,248,243,.55);font-family:'Jost',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .25s;}
.cb:hover{border-color:var(--sage-light);color:var(--cream);}
.cb.on{background:var(--sage);border-color:var(--sage);color:var(--cream);}
.sub-btn{width:100%;padding:16px;background:var(--gold);border:none;border-radius:2px;color:#3a3530;font-family:'Jost',sans-serif;font-size:11px;font-weight:400;letter-spacing:5px;text-transform:uppercase;cursor:pointer;margin-top:10px;transition:opacity .25s,transform .2s;}
.sub-btn:hover{opacity:.85;transform:translateY(-1px);}
.sub-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.r-dl{text-align:center;font-size:11px;letter-spacing:2px;color:rgba(250,248,243,.35);margin-top:20px;text-transform:uppercase;}
.err{color:#f0a0a0;font-size:12px;margin-top:6px;display:none;}
.suc-box{display:none;text-align:center;padding:20px;}
.suc-c{width:60px;height:60px;border:1px solid var(--sage-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:sucPop .5s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes sucPop{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}
.suc-c svg{width:26px;height:26px;stroke:var(--sage-light);fill:none;stroke-width:1.5;}
.suc-box h3{font-family:'Great Vibes',cursive;font-size:52px;color:var(--cream);margin-bottom:12px;}
.suc-box p{font-size:14px;color:var(--sage-light);letter-spacing:1px;line-height:1.8;}
/* ERROR BOX */
.err-box{
  display:none;max-width:440px;width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(240,160,160,0.4);
  border-radius:4px;padding:20px 24px;margin-top:16px;
  animation:errShake 0.4s ease;
}
@keyframes errShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(5px);}
}
.err-box-icon{
  width:36px;height:36px;border:1px solid rgba(240,160,160,0.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.err-box-icon svg{width:16px;height:16px;stroke:#f0a0a0;fill:none;stroke-width:1.5;}
.err-box-title{font-family:'Cormorant Garamond',serif;font-size:18px;color:#f0c0c0;text-align:center;margin-bottom:8px;}
.err-box-msg{font-size:13px;color:rgba(240,192,192,0.8);text-align:center;line-height:1.7;margin-bottom:16px;}
.err-box-actions{display:flex;flex-direction:column;gap:8px;}
.err-retry-btn{
  width:100%;padding:12px;background:transparent;
  border:1px solid rgba(240,160,160,0.4);border-radius:2px;
  color:rgba(240,192,192,0.85);font-family:'Jost',sans-serif;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:all 0.25s;
}
.err-retry-btn:hover{background:rgba(240,160,160,0.1);border-color:rgba(240,160,160,0.7);}
.err-backup-msg{
  font-size:11px;color:rgba(181,196,168,0.7);text-align:center;
  letter-spacing:1px;line-height:1.6;padding:10px;
  border-top:1px solid rgba(255,255,255,0.08);margin-top:4px;
}
.err-backup-msg a{color:var(--sage-light);text-decoration:underline;}

/* SHARED */
.s-lbl2{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--sage);margin-bottom:10px;}
.s-script{font-family:'Great Vibes',cursive;font-size:clamp(40px,9vw,56px);color:var(--text);margin-bottom:8px;}
.divider{width:50px;height:1px;background:var(--sage-light);margin:16px auto;}
.story-b{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;line-height:1.85;color:var(--text-light);max-width:440px;text-align:center;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s;}
.reveal.in{opacity:1;transform:none;}

/* FOOTER */
#footer{min-height:auto;padding:48px 30px;background:var(--cream);text-align:center;}
.f-mono{font-family:'Great Vibes',cursive;font-size:40px;color:var(--sage);}
.f-sub{font-size:10px;letter-spacing:4px;color:var(--text-light);text-transform:uppercase;margin-top:8px;}

/* CURSOR */
.cspark{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;animation:csFade .6s ease forwards;}
@keyframes csFade{0%{opacity:1;transform:scale(1) translateY(0);}100%{opacity:0;transform:scale(0) translateY(-20px);}}

@media(max-width:600px){
  section{padding:40px 24px;}
  .nav-dots{display:none;}
  .mobile-burger{display:flex;}
  .card-peek{padding:36px 28px 32px;}
}

/* Rose petal confetti animation */
@keyframes roseConfettiFall{
  0%{
    opacity:0;
    transform:translateY(-30px) translateX(0) rotate(0deg);
  }
  10%{opacity:1;}
  90%{opacity:0.8;}
  100%{
    opacity:0;
    transform:translateY(110vh) translateX(var(--dx,0)) rotate(var(--rot,720deg));
  }
}

/* ═══════════════════════════════════════════
   SHEEP & GRASS SCENE 🐑🌿
═══════════════════════════════════════════ */
.meadow{
  position:relative;
  width:100%;
  height:50px;
  overflow:hidden;
  margin-top:24px;
  background:transparent;
}
.meadow-ground{
  display:none;
}
/* Wispy soft grass blades — slim and tall */
.grass{
  position:absolute;
  bottom:0;
  width:1px;
  background:linear-gradient(to top,
    #5a7548 0%,
    #7a9a5e 40%,
    rgba(168,201,140,0.6) 100%);
  border-radius:0;
  transform-origin:bottom center;
  animation:grassSway 4s ease-in-out infinite;
  filter:blur(0.3px);
}
/* Tiny grass — half-blurred for depth */
.grass.tiny{
  width:0.8px;
  opacity:0.7;
  filter:blur(0.5px);
}
.grass::after{
  /* tiny wispy tip */
  content:'';
  position:absolute;
  top:-3px;
  left:-1.5px;
  width:4px;
  height:5px;
  background:radial-gradient(ellipse at center bottom, rgba(168,201,140,0.5), transparent 70%);
  border-radius:50% 50% 0 0;
}
@keyframes grassSway{
  0%,100%{transform:rotate(-5deg) scaleY(1);}
  50%{transform:rotate(5deg) scaleY(1.05);}
}
/* Some grass patches stronger swaying */
.grass.tall{
  width:1.5px;
  animation-duration:5s;
}
.grass.tall::after{
  top:-5px;
  width:6px;
  height:8px;
}

/* Sheep — pure CSS, ENHANCED CONTRAST */
.sheep{
  position:absolute;
  bottom:0;
  width:42px;
  height:28px;
  z-index:2;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,0.25));
}
/* Body — fluffy cloud shape via box-shadow with stronger white */
.sheep-body{
  position:absolute;
  bottom:6px;
  left:6px;
  width:30px;
  height:20px;
  background:#ffffff;
  border-radius:50%;
  box-shadow:
    -3px -3px 0 #ffffff,
    -8px -1px 0 #ffffff,
    3px -4px 0 #ffffff,
    8px -1px 0 #ffffff,
    -6px 3px 0 #ffffff,
    6px 3px 0 #ffffff,
    inset -2px -2px 4px rgba(0,0,0,0.08),
    0 0 0 0.5px rgba(58,82,48,0.15);
}
/* Head — animated eating */
.sheep-head{
  position:absolute;
  bottom:7px;
  right:0;
  width:13px;
  height:15px;
  background:#1a0d08;
  border-radius:50% 50% 45% 50%;
  transform-origin:bottom left;
  animation:sheepGraze 2.4s ease-in-out infinite;
  z-index:3;
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.sheep-head::before{
  /* ear */
  content:'';
  position:absolute;
  top:-1px;
  left:1px;
  width:6px;
  height:7px;
  background:#1a0d08;
  border-radius:50%;
  transform:rotate(-20deg);
}
.sheep-head::after{
  /* eye - bigger and whiter */
  content:'';
  position:absolute;
  top:5px;
  right:2.5px;
  width:2px;
  height:2px;
  background:#ffffff;
  border-radius:50%;
  box-shadow:0 0 0 0.5px rgba(0,0,0,0.4);
}
@keyframes sheepGraze{
  0%,15%{transform:rotate(0deg);}
  35%,55%{transform:rotate(45deg) translateY(2px);}
  75%,100%{transform:rotate(0deg);}
}
/* Legs - thicker for visibility */
.sheep-legs{
  position:absolute;
  bottom:0;
  left:10px;
  width:20px;
  height:7px;
}
.sheep-legs::before,
.sheep-legs::after{
  content:'';
  position:absolute;
  bottom:0;
  width:3px;
  height:7px;
  background:#1a0d08;
  border-radius:0 0 1px 1px;
}
.sheep-legs::before{left:0;}
.sheep-legs::after{right:0;}

/* Walking sheep — moves left to right */
.sheep.walk{
  animation:sheepWalk 30s linear infinite;
}
@keyframes sheepWalk{
  0%{transform:translateX(-50px);}
  100%{transform:translateX(calc(100% + 100px));}
}

/* Sheep variations */
.sheep.s2 .sheep-head{animation-delay:0.6s;}
.sheep.s3 .sheep-head{animation-delay:1.2s;}
.sheep.s4 .sheep-head{animation-delay:0.3s;}

/* Different sheep colors — DARK = solid black for contrast */
.sheep.dark .sheep-body{
  background:#1a1015;
  box-shadow:
    -3px -3px 0 #1a1015,
    -8px -1px 0 #1a1015,
    3px -4px 0 #1a1015,
    8px -1px 0 #1a1015,
    -6px 3px 0 #1a1015,
    6px 3px 0 #1a1015,
    inset -2px -2px 4px rgba(0,0,0,0.4);
}
.sheep.dark .sheep-head{background:#0a0508;}
.sheep.dark .sheep-head::before{background:#0a0508;}
.sheep.dark .sheep-head::after{background:#faf3f4;}

/* In mobile menu — smaller scale, darker meadow */
.mobile-menu .meadow{
  height:42px;
  margin-top:12px;
  background:transparent;
}
.mobile-menu .meadow .sheep{
  transform:scale(0.85);
  transform-origin:bottom left;
}
.mobile-menu .meadow .sheep.walk{
  animation:sheepWalkSmall 25s linear infinite;
}
@keyframes sheepWalkSmall{
  0%{transform:translateX(-40px) scale(0.85);}
  100%{transform:translateX(calc(100% + 80px)) scale(0.85);}
}

/* ═══════════════════════════════════════════
   THANK YOU CARDS (Yes / No responses)
═══════════════════════════════════════════ */
.thanks-card{
  display:none;
  max-width:480px;
  width:100%;
  margin:0 auto;
  padding:48px 32px 40px;
  text-align:center;
  border-radius:4px;
  position:relative;
  animation:thanksPop 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes thanksPop{
  0%{opacity:0;transform:scale(0.85) translateY(20px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* YES — happy thanks card */
.thanks-yes{
  background:linear-gradient(135deg,
    rgba(232,90,110,0.12) 0%,
    rgba(184,37,58,0.18) 100%);
  border:1px solid rgba(232,138,150,0.3);
}
.thanks-yes .thanks-icon{
  width:72px;height:72px;
  border:1px solid rgba(232,138,150,0.5);
  border-radius:50%;
  margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(232,90,110,0.1);
  position:relative;
}
.thanks-yes .thanks-icon::before{
  content:'';position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(232,138,150,0.2);
  animation:ringPulseY 2s ease-in-out infinite;
}
@keyframes ringPulseY{
  0%,100%{transform:scale(1);opacity:0.6;}
  50%{transform:scale(1.1);opacity:1;}
}
.thanks-yes .thanks-icon svg{
  width:34px;height:34px;
  stroke:#e85a6e;fill:none;stroke-width:1.2;
}
.thanks-yes .thanks-h{
  font-family:'Great Vibes',cursive;
  font-size:64px;
  color:#e85a6e;
  line-height:1;
  margin-bottom:12px;
}
.thanks-yes .thanks-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:22px;
  color:var(--cream);
  margin-bottom:24px;
}
.thanks-yes .thanks-msg{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;
  color:rgba(250,243,244,0.85);
  line-height:1.7;
  margin-bottom:28px;
}
.thanks-yes .thanks-date{
  display:inline-block;
  padding:14px 28px;
  background:rgba(232,90,110,0.15);
  border:1px solid rgba(232,138,150,0.4);
  border-radius:2px;
  font-family:'Italiana',serif;
  font-size:13px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#e88a96;
  margin-bottom:24px;
}
.thanks-yes .thanks-date strong{
  display:block;
  font-family:'Great Vibes',cursive;
  font-size:36px;
  color:#e85a6e;
  letter-spacing:0;
  margin-top:4px;
  text-transform:none;
}
.thanks-yes .thanks-foot{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:rgba(250,243,244,0.6);
  font-size:15px;
}
.thanks-yes .thanks-hearts{
  margin-top:16px;
  font-size:20px;
  letter-spacing:8px;
}

/* NO — heartfelt sad card */
.thanks-no{
  background:linear-gradient(135deg,
    rgba(58,42,46,0.5) 0%,
    rgba(74,26,32,0.4) 100%);
  border:1px solid rgba(232,138,150,0.2);
}
.thanks-no .thanks-icon{
  width:72px;height:72px;
  border:1px solid rgba(232,138,150,0.3);
  border-radius:50%;
  margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
}
.thanks-no .thanks-icon svg{
  width:32px;height:32px;
  stroke:rgba(232,138,150,0.7);fill:none;stroke-width:1.2;
}
.thanks-no .thanks-h{
  font-family:'Great Vibes',cursive;
  font-size:54px;
  color:rgba(250,243,244,0.85);
  line-height:1;
  margin-bottom:12px;
}
.thanks-no .thanks-name{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:20px;
  color:rgba(232,138,150,0.85);
  margin-bottom:24px;
}
.thanks-no .thanks-msg{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:18px;
  color:rgba(250,243,244,0.75);
  line-height:1.8;
  margin-bottom:24px;
}
.thanks-no .thanks-foot{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  color:rgba(232,138,150,0.6);
  font-size:14px;
  letter-spacing:2px;
}

/* Spotify embed wrapper */
.spotify-wrap{
  margin-top:28px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,0.2);
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.08);
}
.spotify-wrap iframe{
  display:block;
  width:100%;
  border:none;
  border-radius:12px;
}
.spotify-label{
  font-size:10px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(232,138,150,0.7);
  margin-top:18px;
  margin-bottom:6px;
  font-family:'Jost',sans-serif;
}