/* Wedding site-specific styles (on top of colors_and_type.css) */

body{margin:0;background:var(--bg-page);color:var(--fg-1);font-family:var(--font-body);}
*{box-sizing:border-box;}

section{padding:96px 24px;position:relative;}
.container{max-width:1100px;margin:0 auto;}

.eyebrow{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-accent);}

.script{font-family:var(--font-script);color:var(--fg-accent);}
.serif{font-family:var(--font-display);}
.display-script{font-family:var(--font-display-script);color:var(--fg-accent);}

.paper-texture{
  background-color:var(--bg-paper);
  background-image:
    radial-gradient(rgba(238,216,176,.25) 1px,transparent 1px),
    radial-gradient(rgba(201,184,191,.1) 1px,transparent 1px);
  background-size:20px 20px,7px 7px;
}

/* Global animation keyframes */
@keyframes drift-up {
  0%{transform:translateY(0) rotate(0);opacity:0;}
  10%{opacity:.8;}
  90%{opacity:.8;}
  100%{transform:translateY(-120vh) rotate(25deg);opacity:0;}
}
@keyframes twinkle {
  0%,100%{opacity:.3;transform:scale(.8);}
  50%{opacity:1;transform:scale(1.2);}
}
@keyframes spin-slow {
  from{transform:rotate(0);}
  to{transform:rotate(360deg);}
}
@keyframes fadeup {
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.fadeup{animation:fadeup .8s cubic-bezier(.34,1.56,.64,1) both;}

/* ───────── Scroll-reveal animations ─────────
   Elements start hidden and animate in when their .reveal wrapper gains .in-view
   (toggled by an IntersectionObserver in index.html). Stagger via
   [data-delay="N"] (ms).
*/
@keyframes rv-fadeup {
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes rv-fadedown {
  from{opacity:0;transform:translateY(-32px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes rv-fadein {
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes rv-zoom {
  from{opacity:0;transform:scale(.88);}
  to{opacity:1;transform:scale(1);}
}
@keyframes rv-left {
  from{opacity:0;transform:translateX(-48px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes rv-right {
  from{opacity:0;transform:translateX(48px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes rv-polaroid {
  from{opacity:0;transform:translateY(36px) rotate(-8deg) scale(.9);}
  to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1);}
}
@keyframes rv-script {
  from{opacity:0;transform:translateY(12px) scale(.96);letter-spacing:-.04em;}
  to{opacity:1;transform:translateY(0) scale(1);letter-spacing:normal;}
}

.reveal{opacity:0;will-change:transform,opacity;}
.reveal.in-view{animation:rv-fadeup .9s cubic-bezier(.34,1.56,.64,1) both;}
.reveal[data-rv="fadedown"].in-view{animation-name:rv-fadedown;}
.reveal[data-rv="fadein"].in-view{animation:rv-fadein 1s ease-out both;}
.reveal[data-rv="zoom"].in-view{animation:rv-zoom .9s cubic-bezier(.34,1.56,.64,1) both;}
.reveal[data-rv="left"].in-view{animation:rv-left .9s cubic-bezier(.34,1.56,.64,1) both;}
.reveal[data-rv="right"].in-view{animation:rv-right .9s cubic-bezier(.34,1.56,.64,1) both;}
.reveal[data-rv="polaroid"].in-view{animation:rv-polaroid 1s cubic-bezier(.34,1.56,.64,1) both;}
.reveal[data-rv="script"].in-view{animation:rv-script 1.2s cubic-bezier(.2,.8,.2,1) both;}

/* Section headers always fade-up together with a subtle stagger child */
.sec-head.reveal.in-view .eyebrow{animation:rv-fadein .7s .1s ease-out both;}
.sec-head.reveal.in-view h2{animation:rv-fadeup .9s .25s cubic-bezier(.34,1.56,.64,1) both;}
.sec-head.reveal.in-view .sub{animation:rv-script 1s .55s cubic-bezier(.2,.8,.2,1) both;}

/* Auto-stagger children when the parent gets .in-view */
.stagger.in-view > *{opacity:0;animation:rv-fadeup .8s cubic-bezier(.34,1.56,.64,1) both;}
.stagger.in-view > *:nth-child(1){animation-delay:.05s;}
.stagger.in-view > *:nth-child(2){animation-delay:.15s;}
.stagger.in-view > *:nth-child(3){animation-delay:.25s;}
.stagger.in-view > *:nth-child(4){animation-delay:.35s;}
.stagger.in-view > *:nth-child(5){animation-delay:.45s;}
.stagger.in-view > *:nth-child(6){animation-delay:.55s;}
.stagger.in-view > *:nth-child(7){animation-delay:.65s;}
.stagger.in-view > *:nth-child(8){animation-delay:.75s;}

/* Polaroid-specific stagger preserves each card's own rotation via --rot */
.stagger-polaroid.in-view > *{opacity:0;animation:rv-polaroid 1s cubic-bezier(.34,1.56,.64,1) both;}
.stagger-polaroid.in-view > *:nth-child(1){animation-delay:.05s;}
.stagger-polaroid.in-view > *:nth-child(2){animation-delay:.2s;}
.stagger-polaroid.in-view > *:nth-child(3){animation-delay:.35s;}
.stagger-polaroid.in-view > *:nth-child(4){animation-delay:.5s;}
.stagger-polaroid.in-view > *:nth-child(5){animation-delay:.65s;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in-view,
  .stagger.in-view > *, .stagger-polaroid.in-view > *,
  .sec-head.reveal.in-view .eyebrow,
  .sec-head.reveal.in-view h2,
  .sec-head.reveal.in-view .sub{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
}

/* Section backgrounds alternating */
.sec-cream{background:var(--cream-100);}
.sec-blush{background:var(--pink-100);}
.sec-gradient{background:linear-gradient(180deg,var(--cream-100) 0%,var(--pink-100) 100%);}

/* Scallop top edge */
.scallop-top{--s:40px;mask:radial-gradient(var(--s) at 50% 100%,#000 98%,#0000) 0 0/calc(2*var(--s)) 100% repeat-x;}

/* Buttons */
.btn{font-family:var(--font-ui);font-weight:600;font-size:15px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s cubic-bezier(.34,1.56,.64,1);text-decoration:none;}
.btn-primary{background:var(--pink-500);color:var(--cream-50);padding:14px 28px;border-radius:var(--r-pill);box-shadow:var(--shadow-md);}
.btn-primary:hover{background:var(--pink-600);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-primary:active{transform:scale(.97);}
.btn-secondary{background:var(--cream-50);color:var(--pink-700);padding:13px 26px;border-radius:var(--r-pill);border:1.5px solid var(--pink-300);}
.btn-secondary:hover{background:var(--pink-100);}
.btn-gold{background:linear-gradient(180deg,#EBC981,#D8A84E);color:var(--ink-900);padding:14px 28px;border-radius:var(--r-pill);box-shadow:var(--shadow-md);border:1px solid var(--gold-500);}

/* Cards */
.card{background:var(--cream-50);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-md);border:1px solid var(--border-rose);}
.card-gold{border:2px dashed var(--gold-400);background:linear-gradient(180deg,var(--cream-50) 0%,var(--cream-200) 100%);}

/* Inputs */
.input{width:100%;padding:14px 18px;border-radius:var(--r-md);border:1.5px solid var(--border-rose);background:var(--cream-50);font-family:var(--font-ui);font-size:15px;color:var(--ink-900);box-shadow:var(--shadow-inset-soft);transition:all .2s;font-weight:500;}
.input:focus{outline:none;border-color:var(--pink-500);box-shadow:var(--shadow-glow-pink);}
.input::placeholder{color:var(--ink-500);font-style:italic;}
textarea.input{resize:vertical;min-height:100px;font-family:var(--font-body);}
.field-label{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-accent);display:block;margin-bottom:8px;}

/* Polaroid */
.polaroid{background:var(--cream-50);padding:14px 14px 56px;box-shadow:var(--shadow-polaroid);position:relative;display:inline-block;}
.polaroid .photo{width:100%;background:linear-gradient(135deg,var(--pink-200),var(--peach-300),var(--lilac-300));display:flex;align-items:center;justify-content:center;font-family:var(--font-script);color:var(--pink-700);font-size:64px;}
.polaroid .caption{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--font-script);font-size:22px;color:var(--ink-700);}

/* Divider */
.divider{display:flex;align-items:center;gap:14px;font-family:var(--font-ui);font-size:11px;letter-spacing:.22em;color:var(--fg-3);text-transform:uppercase;justify-content:center;margin:48px 0;}
.divider::before,.divider::after{content:'';flex:1;max-width:80px;height:1px;background:var(--ink-300);}

/* Section header */
.sec-head{text-align:center;margin-bottom:56px;}
.sec-head .eyebrow{display:block;margin-bottom:12px;}
.sec-head h2{font-family:var(--font-display);font-size:48px;font-weight:400;margin:0;font-style:italic;color:var(--ink-900);line-height:1.05;}
.sec-head .sub{font-family:var(--font-script);font-size:28px;color:var(--fg-accent);margin-top:8px;}

@media (max-width:720px){
  section{padding:64px 20px;}
  .sec-head h2{font-size:34px;}
}