*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#1a1714;
  --dark:#2d2926;
  --mid:#6b6560;
  --light:#a09890;
  --pale:#d5cec5;
  --cream:#ede8e1;
  --milk:#f6f3ef;
  --white:#fdfcfa;
  --gold:#b09060;
  --gold-h:#c8a878;
  --sage:#7a8e6c;
  --sage-d:#5a6e4c;
  --sage-l:#a8bca0;
  --rose:#c4917b;
  --rose-l:#e8c4b8;
  --blush:#f0d8d0;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Raleway','Helvetica Neue',sans-serif;
  --cursive:'Cormorant Garamond',Georgia,serif;
}
html{scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior:none}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--dark);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

/* ===== PEARL TEXTURE OVERLAY ===== */
.pearl-tex{position:relative;overflow:hidden}
.pearl-tex::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:url('assets/pearl-texture.jpg') center/cover no-repeat;
  opacity:.45;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  pointer-events:none;
}
.pearl-tex>.sec-inner,
.pearl-tex .heart-divider,
.pearl-tex .coverflow-stage,
.pearl-tex .cf-nav,
.pearl-tex .cf-dots{position:relative;z-index:4}
/* .timeline.pearl-tex::before{
  inset:0;
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
} */

/* ===== PROGRESS BAR ===== */
.progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--sage),var(--rose));z-index:10001;width:0;transition:none;border-radius:0 2px 2px 0}

/* ===== ENVELOPE PRELOADER ===== */
.envelope-loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--dark);
  display:flex;
  align-items:center;justify-content:center;flex-direction:column;
  cursor:pointer;
  transition:opacity .8s ease;
  touch-action:none;overscroll-behavior:none;
}
.envelope-loader.done{opacity:0;pointer-events:none}
#envBgCanvas{position:absolute;inset:0;pointer-events:none;opacity:.5}

/* envelope wrapper */
.env-wrap{
  position:relative;
  width:clamp(220px,45vw,340px);
  height:clamp(150px,30vw,220px);
  animation:env-float 3s ease-in-out infinite;
}
.envelope-loader.opened .env-wrap{animation:none}
@keyframes env-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* envelope body — the front V-shape pocket */
.env-body{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
}
.env-body::before,.env-body::after{
  content:'';position:absolute;bottom:0;width:0;height:0;
}
.env-body::before{
  left:0;
  border-left:var(--env-hw) solid #e2dbd2;
  border-top:var(--env-hh) solid transparent;
  border-bottom:var(--env-hh) solid #e2dbd2;
}
.env-body::after{
  right:0;
  border-right:var(--env-hw) solid #d8d0c6;
  border-top:var(--env-hh) solid transparent;
  border-bottom:var(--env-hh) solid #d8d0c6;
}
/* bottom rectangle behind triangles */
.env-base{
  position:absolute;inset:0;
  background:linear-gradient(170deg,#e8e2da 0%,#ddd6cc 100%);
  border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  border:1px solid rgba(176,144,96,.2);
  z-index:0;
}
/* the letter card inside — starts hidden behind pocket */
.env-letter{
  position:absolute;
  top:25%;left:15%;right:15%;
  height:70%;
  background:#fdfcfa;
  border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px;
  transition:transform 1s cubic-bezier(.4,0,.2,1) .8s;
}
.envelope-loader.opened .env-letter{
  transform:translateY(-75%);
}
.env-letter-names{
  font-family:var(--serif);font-size:clamp(13px,2.5vw,20px);
  color:var(--gold);letter-spacing:1px;
}
.env-letter-sub{
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(10px,1.6vw,14px);
  color:#5a5048;margin-top:4px;
}
.env-letter-date{
  font-family:var(--sans);font-size:clamp(9px,1.2vw,12px);
  color:var(--gold);letter-spacing:2px;margin-top:6px;
}

/* flap — two layers for front/back of triangular lid */
.env-lid{
  position:absolute;top:0;left:0;
  width:0;height:0;
  border-left:var(--env-hw) solid transparent;
  border-right:var(--env-hw) solid transparent;
  transform-origin:top center;
  transition:transform .6s ease;
}
.env-lid-front{
  border-top:var(--env-hh) solid #d5cec5;
  z-index:5;
  transition-delay:.6s;
}
.env-lid-back{
  border-top:var(--env-hh) solid #c8c0b5;
  z-index:2;
  transform:rotateX(90deg);
  transition-delay:.4s;
}
.envelope-loader.opened .env-lid-front{
  transform:rotateX(90deg);
  transition-delay:0s;
}
.envelope-loader.opened .env-lid-back{
  transform:rotateX(180deg);
  transition-delay:.3s;
  z-index:-1;
}

/* wax seal */
.env-seal{
  position:absolute;
  left:50%;top:0;
  transform:translate(-50%, calc(var(--env-hh) - 20px));
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#d4b882 0%,#c8a878 25%,#b09060 55%,#8a6e40 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.15);
  z-index:6;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;
  font-family:var(--cursive);font-weight:300;font-size:11px;color:var(--cream);
  letter-spacing:1px;line-height:1;
  transition:opacity .3s ease,transform .3s ease;
}
.env-seal-heart{
  width:10px;height:10px;fill:var(--cream);opacity:.7;margin-bottom:1px;
}
.env-seal-initials{
  font-size:12px;letter-spacing:2px;
}
.env-seal::after{
  content:'';position:absolute;inset:4px;
  border-radius:50%;border:1px solid rgba(237,232,225,.25);
}
.envelope-loader.opened .env-seal{
  opacity:0;transform:translate(-50%, calc(var(--env-hh) - 20px)) scale(1.5);
}

.loader-hint{
  color:var(--pale);
  font-family:var(--sans);
  font-size:clamp(11px,1.5vw,14px);
  letter-spacing:3px;
  text-transform:uppercase;
  margin-top:30px;
  animation:pulse-hint 2s ease-in-out infinite;
  transition:opacity .3s ease;
}
.envelope-loader.opened .loader-hint{opacity:0}
@keyframes pulse-hint{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== ENVELOPE ENHANCEMENTS ===== */

/* Dark vignette for depth */
.envelope-loader::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,.55) 100%);
  pointer-events:none;z-index:1;
}

/* Pre-title: "Вам пришло приглашение" */
.env-pretitle{
  font-family:var(--cursive);
  font-style:italic;
  font-size:clamp(15px,2.8vw,22px);
  color:var(--gold-h);
  letter-spacing:5px;
  margin-bottom:32px;
  opacity:0;
  position:relative;z-index:2;
  text-align:center;
  animation:env-text-in 1.4s ease .4s forwards;
}

/* Pre-title hides when envelope opens — animation:none removes forwards fill override */
.envelope-loader.opened .env-pretitle{
  animation:none;
  opacity:0;transform:translateY(-20px);
  transition:opacity .5s ease,transform .5s ease;
}

/* Ornamental line under pre-title */
.env-pretitle::after{
  content:'';display:block;
  width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:14px auto 0;
  opacity:0;
  animation:env-text-in 1s ease .9s forwards;
}

/* Staggered entrance — envelope wrap */
.envelope-loader:not(.opened):not(.done) .env-wrap{
  opacity:0;
  animation:env-entrance 1.4s cubic-bezier(.23,1,.32,1) .7s forwards,
            env-float 3s ease-in-out 2.1s infinite;
}
@keyframes env-entrance{
  from{opacity:0;transform:translateY(40px) scale(.88)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Seal: golden glow pulse */
.envelope-loader:not(.opened) .env-seal{
  animation:seal-glow 2.8s ease-in-out 1.8s infinite;
}
@keyframes seal-glow{
  0%,100%{box-shadow:0 2px 6px rgba(0,0,0,.3),0 0 12px rgba(176,144,96,.2)}
  50%{box-shadow:0 2px 6px rgba(0,0,0,.3),0 0 28px rgba(200,168,120,.55),0 0 56px rgba(176,144,96,.18)}
}

/* Envelope base: subtle golden edge glow */
.envelope-loader:not(.opened) .env-base{
  box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 60px rgba(176,144,96,.08);
}

/* Hint: delayed entrance — 'both' fill hides it during delay, reveals after */
.envelope-loader:not(.opened) .loader-hint{
  animation:env-hint-in 1s ease 1.8s both,pulse-hint 2s ease-in-out 2.8s infinite !important;
}
@keyframes env-hint-in{
  0%{opacity:0;transform:translateY(12px)}
  100%{opacity:.85;transform:translateY(0)}
}

@keyframes env-text-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* Opening: golden flash overlay */
.envelope-loader.opened::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at center,rgba(237,232,225,.7) 0%,transparent 70%);
  z-index:10;pointer-events:none;
  opacity:0;
  animation:env-flash .8s ease .6s forwards;
}
@keyframes env-flash{
  0%{opacity:0;transform:scale(.6)}
  40%{opacity:.6}
  100%{opacity:0;transform:scale(2.5)}
}

/* ===== MUSIC BTN ===== */
.music-btn{
  position:fixed;bottom:24px;right:24px;z-index:10000;
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);
  background:rgba(246,243,239,.9);backdrop-filter:blur(10px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;color:var(--gold);
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.music-btn:hover{background:var(--gold);color:var(--white);transform:scale(1.08)}
.music-btn svg{width:20px;height:20px}
.music-icon-on{display:none}
.music-icon-off{display:block}
.music-btn.playing .music-icon-on{display:block}
.music-btn.playing .music-icon-off{display:none}


/* ===== NAV DOTS ===== */
.nav-dots{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:10000;
  display:flex;flex-direction:column;gap:12px;
}
.nav-dot{
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--gold);background:transparent;
  cursor:pointer;transition:all .3s ease;position:relative;
}
.nav-dot.active{background:var(--gold);transform:scale(1.3)}
.nav-dot::after{
  content:attr(data-label);
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:11px;font-family:var(--sans);color:var(--gold);
  white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;
  letter-spacing:1px;text-transform:uppercase;
}
.nav-dot:hover::after{opacity:1}
@media(max-width:768px){.nav-dots{display:none}}
/* hide nav-dots while envelope is visible */
.nav-dots{opacity:0;pointer-events:none;transition:opacity .6s ease}
.nav-dots.show{opacity:1;pointer-events:auto}

/* ===== GLOBAL SECTIONS ===== */
section{
  position:relative;
  padding:clamp(60px,10vw,120px) clamp(16px,5vw,60px);
  overflow:hidden;
}
.sec-inner{
  max-width:900px;margin:0 auto;position:relative;z-index:2;
}

/* ===== REVEAL SYSTEM ===== */
[data-r]{opacity:0;transition:opacity .9s ease,transform .9s ease}
[data-r="u"]{transform:translateY(60px)}
[data-r="d"]{transform:translateY(-60px)}
[data-r="l"]{transform:translateX(-60px)}
[data-r="r"]{transform:translateX(60px)}
[data-r="s"]{transform:scale(.85)}
[data-r="f"]{filter:blur(10px);transform:scale(1.02)}
[data-r].vis{opacity:1;transform:none;filter:none}

/* ===== DECORATIVE LINE ===== */
.decor-line{
  width:60px;height:1px;background:var(--gold);margin:20px auto;
  position:relative;
}
.decor-line::before,.decor-line::after{
  content:'';position:absolute;top:-3px;width:7px;height:7px;
  border:1px solid var(--gold);border-radius:50%;
}
.decor-line::before{left:-10px}
.decor-line::after{right:-10px}

/* ===== SECTION TITLES ===== */
.sec-title{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,48px);
  font-weight:400;
  text-align:center;
  letter-spacing:2px;
  color:var(--dark);
  margin-bottom:12px;
}
.sec-subtitle{
  font-family:var(--cursive);
  font-style:italic;
  font-size:clamp(16px,2.5vw,22px);
  text-align:center;
  color:var(--light);
  font-weight:300;
  margin-bottom:40px;
}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--milk);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:1;
}
.hero-bg::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:25%;z-index:2;
  background:linear-gradient(to bottom, transparent, var(--milk));
  pointer-events:none;
}
#silk-canvas{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero-pattern{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(176,144,96,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(122,142,108,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(196,145,123,.04) 0%, transparent 60%);
}
#hero-particles{position:absolute;inset:0;z-index:1}

/* --- Hero Top Label --- */
.hero-top-label{
  position:relative;z-index:2;
  font-family:var(--sans);font-size:clamp(12px,1.8vw,16px);
  letter-spacing:clamp(4px,1.2vw,12px);text-transform:uppercase;
  color:rgba(90,84,78,.65);margin-bottom:clamp(20px, 7vh, 70px);
  font-weight:400;
}

/* --- Polaroid Row --- */
.hero-polaroids{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,6vw,100px);
  margin-bottom:clamp(20px,4vh,50px);
  width:100%;max-width:900px;
  padding:0 20px;
}
.polaroid{
  background:#fff;
  padding:clamp(8px,1.2vw,14px);
  padding-bottom:clamp(30px,5vw,60px);
  box-shadow:0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  position:relative;
  flex-shrink:0;
}
.polaroid--left{transform:rotate(-5deg)}
.polaroid--right{transform:rotate(3deg)}
.polaroid--left.vis{transform:rotate(-5deg)!important}
.polaroid--right.vis{transform:rotate(3deg)!important}
.polaroid-img{
  width:clamp(140px,22vw,280px);
  aspect-ratio:1;
  background:var(--cream);
  overflow:hidden;
}
.polaroid-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.polaroid-img svg{width:40px;height:40px;stroke:var(--light);fill:none;stroke-width:1.5}
.polaroid-caption{
  position:absolute;bottom:clamp(4px,1vw,10px);left:8px;right:8px;
  font-family:var(--cursive);font-style:italic;font-weight:300;
  font-size:clamp(12px,1.8vw,15px);
  color:var(--mid);text-align:center;line-height:1.3;
}
.polaroid--right .polaroid-caption{
  bottom:clamp(14px,2.5vw,24px);
}

/* --- Date Deco (between polaroids) --- */
.hero-date-deco{
  display:flex;flex-direction:column;align-items:center;
  line-height:.8;
  font-family:var(--cursive);font-style:italic;font-weight:300;
  font-size:clamp(50px,8vw,120px);
  color:rgba(90,84,78,.65);
  pointer-events:none;user-select:none;
  letter-spacing:-0.02em;
  opacity:0;animation:deco-fade 2s ease 1s forwards;
  flex-shrink:0;
}
@keyframes deco-fade{to{opacity:1}}
.hero-date-deco span{display:block}

/* --- Hero Names (bottom) --- */
.hero-names-row{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,6vw,110px);
  margin-top:clamp(13px,1.5vw,16px);
  padding-left:clamp(20px,7.5vw,75px);
}
.hero-names-row span{
  font-family:var(--serif);
  font-size:clamp(36px,7vw,80px);
  font-weight:400;
  color:rgba(90,84,78,.85);
  min-width:0;
  text-align:center;
}
.hero-names-row .hero-sparkle{
  display:flex;align-items:center;
  flex-shrink:0;
}
.hero-names-row .hero-sparkle svg{
  width:clamp(28px,4.5vw,55px);height:clamp(28px,4.5vw,55px);
  fill:none;stroke:var(--gold);stroke-width:1.5;
}

/* --- Scroll --- */
.hero-scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:8px;cursor:pointer;
}
.hero-scroll span{
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--light);font-family:var(--sans);
}
.scroll-arrow{
  width:20px;height:20px;border-right:1.5px solid var(--light);
  border-bottom:1.5px solid var(--light);transform:rotate(45deg);
  animation:bounce-arrow 2s ease-in-out infinite;
}
@keyframes bounce-arrow{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.3}50%{transform:rotate(45deg) translate(4px,4px);opacity:1}}

/* ===== INVITATION TEXT ===== */
.invite{background:var(--milk);text-align:center}
.invite-text{
  font-family:var(--cursive);
  font-size:clamp(18px,2.5vw,26px);
  line-height:1.9;color:var(--mid);
  font-weight:300;max-width:700px;margin:0 auto;
}
.invite-text strong{color:var(--gold);font-weight:600}
.invite-verse{
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(15px,2vw,20px);
  color:var(--light);
  margin-top:40px;
  padding-top:30px;
  border-top:1px solid var(--pale);
  max-width:500px;margin-left:auto;margin-right:auto;
  line-height:1.8;
}

/* ===== PHOTO PLACEHOLDER ===== */
.photo-sec{background:linear-gradient(to bottom, var(--milk), var(--cream) 20%, var(--cream) 80%, var(--milk));padding:clamp(40px,8vw,80px) clamp(16px,5vw,60px)}
.coverflow-stage{
  position:relative;
  width:100%;max-width:1100px;margin:0 auto;
  height:clamp(350px,50vw,520px);
  perspective:1200px;
}
.cf-card{
  position:absolute;top:50%;left:50%;
  width:clamp(260px,35vw,380px);
  aspect-ratio:3/4;
  border-radius:14px;overflow:hidden;
  background:var(--pale);
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  transition:all .6s cubic-bezier(.25,.8,.25,1);
  cursor:pointer;
}
.cf-card.cf-active{
  transform:translate(-50%,-50%) scale(1) rotateY(0deg);
  z-index:10;
}
.cf-card.cf-left{
  transform:translate(calc(-50% - clamp(200px,22vw,320px)),-50%) scale(0.72) rotateY(8deg);
  z-index:5;filter:blur(2px);opacity:.6;
}
.cf-card.cf-right{
  transform:translate(calc(-50% + clamp(200px,22vw,320px)),-50%) scale(0.72) rotateY(-8deg);
  z-index:5;filter:blur(2px);opacity:.6;
}
.cf-card.cf-hidden-left{
  transform:translate(calc(-50% - clamp(400px,44vw,640px)),-50%) scale(0.6) rotateY(12deg);
  z-index:1;opacity:0;pointer-events:none;
}
.cf-card.cf-hidden-right{
  transform:translate(calc(-50% + clamp(400px,44vw,640px)),-50%) scale(0.6) rotateY(-12deg);
  z-index:1;opacity:0;pointer-events:none;
}
.cf-card img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;
}
.cf-card-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:var(--mid);
}
.cf-card-inner svg{width:40px;height:40px;stroke:var(--light);fill:none;stroke-width:1.5}
.cf-card-inner span{font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase}
.cf-date{
  text-align:center;margin-top:14px;
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(14px,1.8vw,18px);color:var(--dark);
  opacity:0;transition:opacity .4s;
}
.cf-card.cf-active .cf-date{opacity:1}
.cf-date{
  position:absolute;bottom:-36px;left:0;right:0;
}
.cf-dots{
  display:flex;justify-content:center;gap:8px;
  margin-top:20px;
}
.cf-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--light);
  transition:all .3s;
}
.cf-dot.active{background:var(--gold);transform:scale(1.3)}

/* ===== OUR STORY ===== */
.story{background:var(--milk)}
.story-cards{display:flex;flex-direction:column;gap:60px;max-width:700px;margin:0 auto}
.story-card{
  display:grid;grid-template-columns:100px 1fr;gap:24px;
  align-items:start;
}
.story-card:nth-child(even){direction:rtl}
.story-card:nth-child(even) .story-card-body{direction:ltr}
.story-card:nth-child(even) .story-year{direction:ltr}
.story-year{
  font-family:var(--serif);font-size:18px;color:var(--gold);
  text-align:center;padding-top:4px;
  position:relative;white-space:nowrap;
}
.story-year::after{
  content:'';position:absolute;left:50%;top:calc(100% + 8px);
  width:1px;height:40px;background:var(--pale);
}
.story-card-body h3{
  font-family:var(--serif);font-size:clamp(18px,2.5vw,22px);
  font-weight:500;margin-bottom:8px;color:var(--dark);
}
.story-card-body p{
  font-family:var(--cursive);font-size:clamp(15px,2vw,18px);
  color:var(--mid);line-height:1.7;font-weight:300;
}

/* ===== LOVE IN NUMBERS ===== */
.numbers{
  background:var(--dark);color:var(--white);
  text-align:center;
  position:relative;overflow:hidden;
}
.numbers::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.15'/%3E%3C/svg%3E");
  opacity:.7;
  pointer-events:none;
}
.numbers>.sec-inner{position:relative;z-index:1}
.numbers .sec-title{color:var(--white)}
.numbers .sec-subtitle{color:var(--pale)}
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:30px;max-width:900px;margin:0 auto;
}
.num-card{
  padding:30px 20px;border:1px solid rgba(176,144,96,.2);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
  transition:transform .4s ease,border-color .4s ease;
}
.num-card:hover{transform:translateY(-6px);border-color:var(--gold)}
.num-value{
  font-family:var(--serif);font-size:clamp(36px,5vw,52px);
  color:var(--gold);display:block;
  font-weight:400;
}
.num-label{
  font-family:var(--sans);font-size:clamp(11px,1.3vw,13px);
  letter-spacing:2px;text-transform:uppercase;
  color:var(--pale);margin-top:8px;display:block;
}
.num-icon{
  display:block;margin:0 auto 12px;
  width:32px;height:32px;
  stroke:var(--gold);fill:none;stroke-width:1.5;
}

/* ===== COUNTDOWN ===== */
.countdown{background:linear-gradient(to bottom, var(--milk), var(--cream) 20%, var(--cream) 80%, var(--milk));text-align:center}

/* Calendar */
.cd-calendar{
  max-width:380px;margin:0 auto 30px;
  background:var(--white);border-radius:16px;
  padding:clamp(20px,4vw,32px);
  overflow:visible;position:relative;z-index:4;
}
.cd-cal-header{
  font-family:var(--serif);font-size:clamp(20px,3vw,28px);
  color:var(--dark);margin-bottom:16px;font-weight:500;
}
.cd-cal-weekdays{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  margin-bottom:8px;
}
.cd-cal-weekdays span{
  font-family:var(--sans);font-size:clamp(10px,1.2vw,12px);
  color:var(--light);text-transform:uppercase;letter-spacing:1px;
  padding:4px 0;
}
.cd-cal-days{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cd-cal-days span{
  font-family:var(--serif);font-size:clamp(14px,1.8vw,17px);
  color:var(--mid);padding:clamp(6px,1vw,10px) 0;
  border-radius:50%;
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
}
.cd-cal-days span:empty{visibility:hidden}
.cd-cal-wedding{
  background:transparent!important;
  color:var(--gold)!important;
  font-weight:600;
  position:relative;
  z-index:1;
  overflow:visible!important;
}
.cd-cal-wedding::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:130%;height:130%;
  transform:translate(-50%,-46%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 108 98'%3E%3Cpath d='M50,85 C25,65 0,50 0,30 C0,13 13,0 30,0 C40,0 48,7 50,15 C52,7 60,0 70,0 C87,0 100,13 100,30 C100,50 75,65 50,85Z' fill='none' stroke='%23b09060' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  z-index:-1;
  pointer-events:none;
}

/* Inline timer */
.cd-inline{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(6px,1.5vw,14px);
  flex-wrap:wrap;
  margin-top:10px;
  position:relative;z-index:4;
}
.cd-inline-item{
  font-family:var(--cursive);font-size:clamp(14px,1.8vw,18px);
  color:var(--mid);font-weight:300;
}
.cd-inline-num{
  font-family:var(--serif);font-size:clamp(20px,3vw,30px);
  color:var(--dark);font-weight:500;
}
.cd-inline-sep{
  font-size:clamp(16px,2vw,22px);color:var(--light);
}

/* ===== MARQUEE ===== */
.marquee-wrap{
  overflow:hidden;padding:30px 0;
  background:linear-gradient(90deg,var(--cream),var(--milk),var(--cream));
  border-top:1px solid var(--pale);border-bottom:1px solid var(--pale);
}
.marquee-track{
  display:flex;gap:60px;
  animation:marquee-scroll 30s linear infinite;
  white-space:nowrap;width:max-content;
}
.marquee-item{
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(18px,2.5vw,28px);
  color:var(--light);
  display:flex;align-items:center;gap:20px;
  flex-shrink:0;
}
.marquee-item svg{width:20px;height:20px;fill:var(--rose-l);flex-shrink:0}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== VENUE ===== */
.venue{
  background:var(--dark);color:var(--white);
  position:relative;overflow:hidden;
}
.venue::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/marble-texture.jpg') center/cover no-repeat;
  opacity:.15;mix-blend-mode:overlay;
  pointer-events:none;
}
.venue>.sec-inner{position:relative;z-index:1}
.venue .sec-title{color:var(--white)}
.venue .sec-subtitle{color:var(--pale)}
/* Light venue variant */
.venue-light{background:var(--milk);color:var(--dark)}
.venue-light::before{display:none}
.venue-light .sec-title{color:var(--dark)}
.venue-light .sec-subtitle{color:var(--mid)}
.venue-light .venue-hero{box-shadow:0 16px 50px rgba(0,0,0,.1)}
.venue-light .venue-desc{color:var(--mid)}
.venue-light .venue-map-btn{
  color:var(--gold);border-color:var(--gold);
  background:transparent;backdrop-filter:none;
}
.venue-light .venue-map-btn:hover{
  border-color:var(--gold);
}
/* venue hero photo */
.venue-hero{
  position:relative;max-width:700px;margin:0 auto 0;
  border-radius:20px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.venue-hero>img:first-child{
  width:100%;height:clamp(250px,40vw,420px);
  object-fit:cover;display:block;
}
.venue-badge{
  position:absolute;top:0;right:0;
  width:clamp(50px,8vw,75px);height:auto!important;
  z-index:2;
  object-fit:contain!important;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.venue-hero-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:clamp(20px,4vw,40px) clamp(20px,4vw,36px);
  background:linear-gradient(transparent, rgba(0,0,0,.65));
}
.venue-hero-name{
  font-family:var(--serif);font-size:clamp(22px,3.5vw,34px);
  color:var(--white);font-weight:500;margin-bottom:6px;
}
.venue-hero-addr{
  font-family:var(--sans);font-size:clamp(12px,1.6vw,15px);
  color:rgba(255,255,255,.75);
  display:flex;align-items:center;gap:6px;
  letter-spacing:.5px;
}
.venue-hero-addr svg{flex-shrink:0;stroke:var(--gold)}

/* venue description */
.venue-desc{
  max-width:500px;margin:clamp(20px,3vw,32px) auto 0;
  font-family:var(--cursive);font-size:clamp(15px,2vw,18px);
  color:var(--pale);line-height:1.7;font-weight:300;
  text-align:center;font-style:italic;
}

/* map button */
.venue-map-btn{
  display:flex;align-items:center;gap:10px;width:fit-content;
  margin:clamp(20px,3vw,32px) auto 0;
  padding:14px 32px;
  border:1.5px solid rgba(176,144,96,.4);border-radius:50px;
  color:var(--gold);font-family:var(--sans);font-size:clamp(12px,1.4vw,14px);
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  transition:box-shadow .4s ease,transform .3s ease,border-color .3s ease;
  backdrop-filter:blur(4px);background:rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.venue-map-btn::after{
  content:'';position:absolute;
  top:-50%;left:-80%;width:50%;height:200%;
  background:linear-gradient(105deg,transparent 38%,rgba(176,144,96,.18) 44%,rgba(176,144,96,.3) 50%,rgba(176,144,96,.18) 56%,transparent 62%);
  pointer-events:none;
}
.venue-map-btn:hover{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(176,144,96,.25),0 0 40px rgba(176,144,96,.1);
  transform:translateY(-2px);
}
.venue-map-btn:hover::after{animation:btn-shimmer .8s ease}
.venue-map-btn svg{stroke:currentColor;flex-shrink:0}

.venue-info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;max-width:800px;margin:0 auto;
}
.venue-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(176,144,96,.15);
  border-radius:12px;padding:clamp(24px,4vw,40px);
  text-align:center;
  backdrop-filter:blur(6px);
  transition:transform .4s ease,border-color .4s ease;
}
.venue-card:hover{transform:translateY(-6px);border-color:var(--gold)}
.venue-card svg{
  width:36px;height:36px;stroke:var(--gold);fill:none;stroke-width:1.5;
  margin-bottom:16px;
}
.venue-card h3{
  font-family:var(--serif);font-size:clamp(18px,2.5vw,22px);
  margin-bottom:8px;font-weight:500;
}
.venue-card p{
  font-family:var(--cursive);font-size:clamp(15px,2vw,18px);
  color:var(--pale);line-height:1.6;font-weight:300;
}

/* ===== TIMELINE ===== */
.timeline{background:linear-gradient(to bottom, var(--milk) 5%, var(--cream) 30%, var(--cream) 70%, var(--milk) 95%)}
.tl-container{
  position:relative;max-width:800px;margin:0 auto;
  padding:0 20px;
}
/* центральная линия */
.tl-line{
  position:absolute;left:50%;top:13px;width:2px;height:calc(100% - 13px);
  background:var(--pale);transform:translateX(-50%);
}
/* заполнение — тот же цвет, жирнее */
.tl-line-fill{
  position:absolute;left:-1px;top:0;width:4px;height:0;
  background:var(--gold);
  transition:height .15s linear;
  border-radius:2px;
}
/* элемент — лесенка */
.tl-item{
  position:relative;padding:0 0 60px;
  width:calc(50% - 30px);
}
.tl-item:last-child{padding-bottom:0}
.tl-item:nth-child(odd){
  margin-left:0;margin-right:auto;
  text-align:right;
}
.tl-item:nth-child(even){
  margin-left:auto;margin-right:0;
  text-align:left;
}
/* контейнер точек — независимый слой на линии */
.tl-dots{
  position:absolute;left:50%;top:0;height:100%;
  width:0;z-index:3;
}
/* точка — строго на центральной линии */
.tl-dot{
  position:absolute;top:3px;
  width:18px;height:18px;border-radius:50%;
  border:3px solid var(--pale);background:var(--milk);
  z-index:2;
  transition:border-color .4s,background .4s,transform .4s,box-shadow .4s;
}
.tl-item:nth-child(odd) .tl-dot{right:-39px;left:auto}
.tl-item:nth-child(even) .tl-dot{left:-39px;right:auto}
/* активная точка */
.tl-item.active .tl-dot{
  border-color:var(--gold);
  background:var(--gold);
  transform:scale(1.2);
  box-shadow:0 0 0 4px rgba(176,144,96,.2);
}
.tl-time{
  font-family:var(--serif);font-size:clamp(16px,2vw,20px);
  color:var(--gold);margin-bottom:4px;
}
.tl-title{
  font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);
  font-weight:500;margin-bottom:6px;
}
.tl-desc{
  font-family:var(--cursive);font-size:clamp(14px,1.8vw,17px);
  color:var(--mid);line-height:1.6;font-weight:300;
}

/* ===== DRESSCODE ===== */
.dresscode{background:var(--milk);text-align:center}
.dc-palette{
  display:flex;justify-content:center;gap:clamp(16px,3vw,24px);
  flex-wrap:wrap;margin:30px auto;max-width:560px;
}
.dc-swatch{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transform:translateY(20px) scale(.8);
  animation:dc-pop .5s ease forwards;
}
.dc-swatch:nth-child(1){animation-delay:.1s}
.dc-swatch:nth-child(2){animation-delay:.18s}
.dc-swatch:nth-child(3){animation-delay:.26s}
.dc-swatch:nth-child(4){animation-delay:.34s}
.dc-swatch:nth-child(5){animation-delay:.42s}
.dc-swatch:nth-child(6){animation-delay:.5s}
.dc-swatch:nth-child(7){animation-delay:.58s}
.dc-swatch:nth-child(8){animation-delay:.66s}
.dc-swatch:nth-child(9){animation-delay:.74s}
.dc-swatch:nth-child(10){animation-delay:.82s}
.dc-swatch:nth-child(11){animation-delay:.9s}
@keyframes dc-pop{
  0%{opacity:0;transform:translateY(20px) scale(.8)}
  60%{transform:translateY(-4px) scale(1.05)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.dc-circle{
  width:clamp(48px,8vw,64px);height:clamp(48px,8vw,64px);
  border-radius:50%;border:3px solid var(--white);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transition:transform .3s ease, box-shadow .3s;
  cursor:pointer;
}
.dc-label{
  font-family:var(--cursive);font-size:clamp(10px,1.5vw,12px);
  color:var(--mid);font-style:italic;white-space:nowrap;
}
.dc-note{
  font-family:var(--cursive);font-size:clamp(15px,2vw,18px);
  color:var(--mid);line-height:1.7;max-width:500px;
  margin:30px auto 0;font-weight:300;
}

/* ===== WISHES ===== */
.wishes{background:linear-gradient(to bottom, var(--milk), var(--cream) 20%, var(--cream) 80%, var(--milk));text-align:center}
.wishes-text{
  font-family:var(--cursive);font-size:clamp(16px,2.2vw,22px);
  color:var(--mid);line-height:1.8;font-weight:300;
  max-width:600px;margin:0 auto;
}
.wish-icons{
  display:flex;justify-content:center;gap:clamp(16px,3vw,30px);
  margin-top:40px;flex-wrap:wrap;
}
.wish-icon{
  width:clamp(50px,8vw,70px);height:clamp(50px,8vw,70px);
  border-radius:50%;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:transform .4s ease;cursor:pointer;
}
.wish-icon svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.5}
.wish-icon--crossed{position:relative}
.wish-icon--crossed::after{
  content:'';position:absolute;top:50%;left:10%;right:10%;
  height:2px;background:var(--gold);
  transform:translateY(-50%) rotate(-45deg);border-radius:1px;
}

/* ===== GALLERY CAROUSEL ===== */
.gallery{
  background:var(--dark);
  padding:clamp(60px,10vw,100px) 0;overflow:hidden;
}
.dark-pearl{position:relative}
.dark-pearl::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:url('assets/pearl-texture.jpg') center/cover no-repeat;
  opacity:.12;
  pointer-events:none;
}
.dark-pearl>.gallery-title-wrap,
.dark-pearl>.gallery-track{position:relative;z-index:1}
.gallery .sec-title{color:var(--white)}
.gallery .sec-subtitle{color:var(--pale)}
.gallery-title-wrap{padding:0 clamp(16px,5vw,60px);margin-bottom:40px}
.gallery-track{
  display:flex;gap:20px;padding:0 clamp(16px,5vw,60px);
  cursor:grab;user-select:none;
  transition:transform .1s ease-out;
}
.gallery-track.grabbing{cursor:grabbing}
.gallery-slide{
  flex:0 0 clamp(250px,40vw,380px);
  aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:var(--mid);position:relative;
  transition:transform .5s ease;
}
.gallery-slide:hover{transform:scale(1.03)}
.gallery-slide .photo-placeholder{color:var(--pale)}
.gallery-slide .photo-placeholder svg{stroke:var(--pale)}

/* ===== CONTACTS ===== */
.contacts{background:var(--milk);text-align:center}
.contacts-text{
  font-family:var(--cursive);font-size:clamp(15px,2.2vw,18px);
  color:var(--mid);line-height:1.7;font-weight:300;font-style:italic;
  max-width:480px;margin:0 auto clamp(16px,2vw,24px);
}
.contact-cards-row{
  display:flex;justify-content:center;gap:clamp(24px,5vw,48px);
  flex-wrap:wrap;
}
.contact-card{
  text-align:center;
}
.contact-name{
  font-family:var(--cursive);font-size:clamp(22px,3.5vw,30px);
  font-weight:400;color:var(--dark);margin-bottom:2px;
}
.contact-role{
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(14px,2vw,17px);color:var(--light);
  margin-bottom:8px;
}
.contact-phone{
  font-family:var(--cursive);font-size:clamp(14px,2vw,17px);
  color:var(--gold);text-decoration:none;transition:color .3s;
}
.contact-phone:hover{color:var(--sage)}
.contact-phone{
  font-family:var(--sans);font-size:clamp(15px,2vw,18px);
  color:var(--gold);text-decoration:none;
  letter-spacing:1px;
  transition:color .3s;
}
.contact-phone:hover{color:var(--sage)}

/* ===== RSVP ===== */
.rsvp{
  background:linear-gradient(to bottom, var(--milk), var(--cream) 20%, var(--cream) 80%, var(--milk));
  text-align:center;
}
.rsvp-form{
  max-width:500px;margin:0 auto;
  display:flex;flex-direction:column;gap:16px;
}
.rsvp-field{
  position:relative;
}
.rsvp-input,.rsvp-select,.rsvp-textarea{
  width:100%;padding:16px 20px;
  font-family:var(--sans);font-size:14px;
  border:1px solid var(--pale);border-radius:8px;
  background:var(--white);color:var(--dark);
  transition:border-color .3s ease,box-shadow .3s ease;
  outline:none;
}
.rsvp-input:focus,.rsvp-select:focus,.rsvp-textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,144,96,.12);
}
.rsvp-textarea{resize:vertical;min-height:100px}
.rsvp-btn{
  padding:16px 40px;
  font-family:var(--sans);font-size:13px;
  letter-spacing:3px;text-transform:uppercase;
  border:2px solid var(--gold);
  background:transparent;color:var(--gold);
  border-radius:8px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:box-shadow .4s ease,transform .3s ease,border-color .3s ease;
}
/* shimmer streak */
.rsvp-btn::after{
  content:'';position:absolute;
  top:-50%;left:-80%;width:50%;height:200%;
  background:linear-gradient(105deg,transparent 38%,rgba(176,144,96,.18) 44%,rgba(176,144,96,.3) 50%,rgba(176,144,96,.18) 56%,transparent 62%);
  pointer-events:none;z-index:1;
}
.rsvp-btn span{position:relative;z-index:2}
.rsvp-btn:hover{
  box-shadow:0 0 18px rgba(176,144,96,.25),0 0 40px rgba(176,144,96,.1);
  transform:translateY(-2px);
}
.rsvp-btn:hover::after{animation:btn-shimmer .8s ease}
@keyframes btn-shimmer{from{left:-80%}to{left:120%}}
.rsvp-already{
  text-align:center;padding:clamp(30px,5vw,50px) 20px;
}

/* ===== FOOTER ===== */
.footer{
  background:var(--dark);color:var(--pale);
  padding:clamp(40px,6vw,60px) clamp(16px,5vw,60px);
  text-align:center;
  position:relative;overflow:hidden;
}
.footer::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E");
  opacity:.6;pointer-events:none;
}
.footer>*{position:relative;z-index:1}
.footer-names{
  font-family:var(--serif);
  font-size:clamp(28px,4vw,42px);
  color:var(--white);margin-bottom:8px;
}
.footer-date{
  font-family:var(--cursive);font-style:italic;
  font-size:clamp(16px,2.2vw,22px);color:var(--gold);
  margin-bottom:20px;
}
.footer-hearts{
  display:flex;justify-content:center;gap:8px;margin-bottom:16px;
}
.footer-heart{
  width:14px;height:14px;fill:var(--rose);
  animation:footer-beat 1.5s ease-in-out infinite;
}
.footer-heart:nth-child(2){animation-delay:.2s}
.footer-heart:nth-child(3){animation-delay:.4s}
@keyframes footer-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.footer-note{
  font-family:var(--sans);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--mid);margin-bottom:12px;
}
.footer-countdown{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(6px,1.5vw,12px);flex-wrap:wrap;
}
.fc-item{
  font-family:var(--cursive);font-size:clamp(13px,1.6vw,16px);
  color:var(--pale);font-weight:300;
}
.fc-num{
  font-family:var(--serif);font-size:clamp(18px,2.5vw,26px);
  color:var(--white);font-weight:500;
}
.fc-sep{
  font-size:clamp(14px,1.8vw,18px);color:var(--mid);
}

/* ===== SVG HEART DIVIDER ===== */
.heart-divider{
  display:flex;justify-content:center;padding:20px 0;
  position:relative;z-index:2;
}
.heart-divider svg{width:clamp(50px,8vw,80px);height:auto}
.heart-path{
  fill:none;stroke:var(--rose);stroke-width:2;
  stroke-dasharray:300;stroke-dashoffset:300;
  transition:stroke-dashoffset 1.5s ease;
}
.heart-divider.vis .heart-path{stroke-dashoffset:0}

/* ===== FALLING PETALS CANVAS ===== */
#petals-canvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:9998;
}

/* ===== CONFETTI ===== */
.confetti-piece{
  position:fixed;
  width:8px;height:8px;
  border-radius:1px;
  z-index:99999;
  pointer-events:none;
  animation:confetti-fall 2.5s ease-in forwards;
}
@keyframes confetti-fall{
  0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg) scale(0);opacity:0}
}

/* ===== RINGS SVG ===== */
.rings-divider{
  display:flex;justify-content:center;padding:10px 0 30px;
}
.rings-svg{width:clamp(60px,10vw,100px);height:auto}
.ring-path{
  fill:none;stroke:var(--gold);stroke-width:2;
  stroke-dasharray:160;stroke-dashoffset:160;
  transition:stroke-dashoffset 1.2s ease;
}
.rings-divider.vis .ring-path{stroke-dashoffset:0}
.ring-path:nth-child(2){transition-delay:.3s}

/* ===== 21. CRYSTAL BALL ===== */
.crystal-ball{background:var(--milk);text-align:center}
.cb-wrap{display:flex;flex-direction:column;align-items:center;margin-top:clamp(24px,4vw,40px)}
.cb-orb{
  width:clamp(220px,50vw,320px);height:clamp(220px,50vw,320px);
  border-radius:50%;position:relative;cursor:pointer;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0%, rgba(220,215,208,.4) 40%, rgba(180,174,166,.25) 70%, rgba(160,152,144,.15) 100%);
  box-shadow:0 12px 50px rgba(0,0,0,.12), inset 0 -30px 50px rgba(0,0,0,.06), inset 0 30px 50px rgba(255,255,255,.5);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  transition:box-shadow .6s, transform .3s;
}
.cb-orb:hover{transform:scale(1.02);box-shadow:0 12px 60px rgba(176,144,96,.2), inset 0 -30px 50px rgba(0,0,0,.06), inset 0 30px 50px rgba(255,255,255,.6)}
.cb-active{box-shadow:0 0 80px rgba(176,144,96,.35), inset 0 -30px 50px rgba(0,0,0,.06), inset 0 30px 50px rgba(255,255,255,.6)!important}
.cb-shine{
  position:absolute;top:8%;left:15%;width:35%;height:25%;
  background:radial-gradient(ellipse, rgba(255,255,255,.7) 0%, transparent 70%);
  border-radius:50%;pointer-events:none;transform:rotate(-20deg);
}
.cb-fog{
  position:absolute;inset:5%;border-radius:50%;
  background:radial-gradient(circle, rgba(214,207,198,.7) 0%, transparent 65%);
  animation:cb-swirl 6s ease-in-out infinite;
  transition:opacity 1.2s ease;
}
.cb-fog-2{animation-delay:-3s;animation-direction:reverse;opacity:.6}
.cb-fog-clear{opacity:0!important}
@keyframes cb-swirl{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(8px,-8px) scale(1.04)}
  50%{transform:translate(-4px,8px) scale(.96)}
  75%{transform:translate(-8px,-4px) scale(1.02)}
}
.cb-inner{position:relative;z-index:2;padding:clamp(16px,4vw,28px)}
.cb-text{
  font-family:var(--cursive);font-size:clamp(16px,3vw,21px);
  color:var(--dark);font-style:italic;line-height:1.6;margin:0;
}
.cb-hint{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--light);font-family:var(--cursive);font-size:15px;font-style:italic;
}
.cb-hint svg{opacity:.4;animation:cb-pulse 2s ease-in-out infinite}
@keyframes cb-pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.6}}
.cb-base{
  width:clamp(100px,24vw,160px);height:clamp(16px,2.5vw,24px);
  background:linear-gradient(to bottom, var(--pale), var(--light));
  border-radius:0 0 50% 50%/0 0 100% 100%;margin-top:-4px;
}
.cb-again{
  margin-top:20px;padding:10px 28px;
  font-family:var(--cursive);font-size:16px;
  background:none;border:1px solid var(--gold);color:var(--gold);
  border-radius:30px;cursor:pointer;transition:all .3s;
}
.cb-again:hover{background:var(--gold);color:var(--white)}

/* ===== 24. MAGIC CARD ===== */
.magic-card-sec{background:linear-gradient(to bottom, var(--milk), var(--cream) 30%, var(--cream) 70%, var(--milk));text-align:center;overflow:hidden}
.mc-scene{
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(260px,45vw,380px);position:relative;
  margin-top:clamp(16px,3vw,30px);padding:20px 0;
}
.mc-branch{flex:0 0 auto;width:clamp(70px,18vw,110px)}
.mc-branch svg{width:100%;height:auto;display:block}
.mc-fl{opacity:0;transform:scale(0);transition:all .9s cubic-bezier(.34,1.56,.64,1)}
.mc-bloom .mc-fl{opacity:1;transform:scale(1)}
.mc-bloom .mc-fl-1{transition-delay:.3s}
.mc-bloom .mc-fl-2{transition-delay:.6s}
.mc-bloom .mc-fl-3{transition-delay:.9s}
.mc-bloom .mc-fl-4{transition-delay:1.2s}
.mc-center{
  flex:1;max-width:420px;padding:0 clamp(12px,3vw,24px);
  opacity:0;transform:translateY(24px);transition:opacity 1.2s ease .8s, transform 1.2s ease .8s;
}
.mc-show{opacity:1;transform:translateY(0)}
.mc-text{
  font-family:var(--cursive);font-size:clamp(17px,3vw,24px);
  font-style:italic;color:var(--dark);line-height:1.7;
}

/* ===== 25. ROULETTE ===== */
.roulette-sec{background:var(--milk);text-align:center}
.rl-wrap{display:flex;flex-direction:column;align-items:center;margin-top:clamp(24px,4vw,40px)}
.rl-wheel-box{position:relative;display:inline-block}
.rl-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:3;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.rl-pointer svg{width:20px;height:28px}
.rl-canvas{
  width:clamp(260px,65vw,340px);height:clamp(260px,65vw,340px);
  border-radius:50%;
  box-shadow:0 4px 30px rgba(0,0,0,.1), 0 0 0 4px var(--gold), 0 0 0 12px var(--pale);
}
.rl-spin-btn{
  margin-top:clamp(20px,3vw,30px);padding:14px 40px;
  font-family:var(--cursive);font-size:18px;font-weight:500;
  background:var(--gold);color:var(--white);border:none;
  border-radius:30px;cursor:pointer;letter-spacing:1px;
  position:relative;overflow:hidden;
  transition:box-shadow .4s ease,transform .3s ease;
}
.rl-spin-btn::after{
  content:'';position:absolute;
  top:-50%;left:-80%;width:50%;height:200%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.2) 44%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.2) 56%,transparent 62%);
  pointer-events:none;
}
.rl-spin-btn:hover{
  box-shadow:0 0 18px rgba(176,144,96,.3),0 0 40px rgba(176,144,96,.12);
  transform:translateY(-2px);
}
.rl-spin-btn:hover::after{animation:btn-shimmer .8s ease}
.rl-spin-btn:disabled{opacity:.5;cursor:wait;transform:none}
.rl-result{
  margin-top:20px;padding:18px 28px;
  background:var(--white);border:1px solid var(--pale);border-radius:16px;
  max-width:360px;box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.rl-result-text{
  font-family:var(--cursive);font-size:clamp(16px,2.5vw,20px);
  color:var(--dark);font-style:italic;line-height:1.6;
}

/* ===== 28. CHEMISTRY ===== */
.chemistry-sec{background:linear-gradient(to bottom, var(--milk), var(--cream) 30%, var(--cream) 70%, var(--milk));text-align:center}
.ch-wrap{margin-top:clamp(24px,4vw,40px);min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ch-elements{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px)}
.ch-el{
  width:clamp(130px,28vw,170px);padding:clamp(14px,2.5vw,24px);
  border:2px solid var(--pale);border-radius:12px;cursor:pointer;
  background:var(--white);transition:all .4s ease;position:relative;
}
.ch-el:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 8px 24px rgba(176,144,96,.15)}
.ch-number{font-family:var(--sans);font-size:12px;color:var(--light);text-align:right;margin-bottom:2px}
.ch-symbol{font-family:var(--serif);font-size:clamp(40px,8vw,64px);color:var(--gold);font-weight:600;line-height:1}
.ch-name{font-family:var(--cursive);font-size:clamp(13px,2.2vw,16px);color:var(--mid);font-style:italic;margin-top:4px}
.ch-detail{font-family:var(--sans);font-size:11px;color:var(--light);margin-top:6px}
.ch-plus{font-family:var(--serif);font-size:clamp(28px,5vw,40px);color:var(--gold)}
.ch-molecule{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 0}
.ch-orbits{
  position:relative;width:120px;height:120px;margin-bottom:8px;
}
.ch-orbit{
  position:absolute;inset:0;border:1.5px solid var(--gold);border-radius:50%;opacity:.3;
}
.ch-orbit-1{animation:ch-spin 6s linear infinite}
.ch-orbit-2{inset:15px;animation:ch-spin 4s linear infinite reverse}
@keyframes ch-spin{to{transform:rotate(360deg)}}
.ch-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;gap:2px;font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold);
}
.ch-formula{font-family:var(--serif);font-size:clamp(28px,5vw,40px);color:var(--gold);font-weight:600}
.ch-formula sub{font-size:.6em}
.ch-result-name{font-family:var(--cursive);font-size:clamp(20px,3.5vw,28px);color:var(--dark);font-style:italic}
.ch-result-desc{
  font-family:var(--cursive);font-size:clamp(14px,2.2vw,18px);
  color:var(--mid);max-width:400px;margin:4px auto 0;line-height:1.6;font-style:italic;
}
.ch-reset{
  margin-top:16px;padding:8px 24px;font-family:var(--cursive);font-size:14px;
  background:none;border:1px solid var(--pale);color:var(--mid);
  border-radius:20px;cursor:pointer;transition:all .3s;
}
.ch-reset:hover{border-color:var(--gold);color:var(--gold)}
.ch-tap{font-family:var(--cursive);font-size:14px;color:var(--light);font-style:italic;margin-top:16px}

/* ===== 30. CIPHER ===== */
/* ===== LOTTERY ===== */
.lottery-sec{background:var(--milk);text-align:center}
.lot-wrap{
  margin-top:clamp(20px,3vw,32px);
  display:flex;flex-direction:column;align-items:center;
}
.lot-desc{
  font-family:var(--cursive);font-size:clamp(15px,2.2vw,18px);
  color:var(--dark);line-height:1.7;font-style:italic;
  margin-bottom:clamp(24px,4vw,40px);max-width:420px;
}
.lot-ticket{
  width:clamp(200px,40vw,280px);height:clamp(130px,26vw,180px);
  perspective:800px;cursor:pointer;
  margin-bottom:clamp(20px,3vw,32px);
}
.lot-ticket-inner{
  position:relative;width:100%;height:100%;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  transform-style:preserve-3d;
}
.lot-ticket.flipped .lot-ticket-inner{transform:rotateY(180deg)}
.lot-ticket.spinning .lot-ticket-inner{
  animation:lot-spin 1.2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes lot-spin{
  0%{transform:rotateY(0)}
  40%{transform:rotateY(720deg)}
  100%{transform:rotateY(900deg)}
}
.lot-ticket-front,.lot-ticket-back{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lot-ticket-front{
  background:linear-gradient(145deg,var(--white) 0%,var(--cream) 100%);
  border:2px solid var(--gold);
  box-shadow:0 4px 20px rgba(176,144,96,.12);
  transition:box-shadow .3s ease;
}
.lot-ticket-front::before,.lot-ticket-front::after{
  content:'';position:absolute;top:10px;bottom:10px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--gold) 0,var(--gold) 4px,transparent 4px,transparent 8px);
  opacity:.4;
}
.lot-ticket-front::before{left:12px}
.lot-ticket-front::after{right:12px}
.lot-ticket-q{
  font-family:var(--serif);font-size:clamp(48px,10vw,72px);
  color:var(--gold);font-weight:600;line-height:1;
  animation:lot-pulse 2s ease-in-out infinite;
}
@keyframes lot-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.lot-ticket-back{
  background:linear-gradient(145deg,var(--gold) 0%,#c8a878 50%,var(--gold) 100%);
  border:2px solid var(--gold-h);
  box-shadow:0 4px 24px rgba(176,144,96,.25);
  transform:rotateY(180deg);gap:4px;
}
.lot-ticket-back::before,.lot-ticket-back::after{
  content:'';position:absolute;top:10px;bottom:10px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--cream) 0,var(--cream) 4px,transparent 4px,transparent 8px);
  opacity:.3;
}
.lot-ticket-back::before{left:12px}
.lot-ticket-back::after{right:12px}
.lot-ticket-label{
  font-family:var(--sans);font-size:clamp(10px,1.4vw,12px);
  color:var(--cream);letter-spacing:3px;text-transform:uppercase;opacity:.8;
}
.lot-ticket-number{
  font-family:var(--serif);font-size:clamp(40px,9vw,64px);
  color:var(--white);font-weight:600;line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.15);
}
.lot-ticket-luck{
  font-family:var(--cursive);font-size:clamp(12px,1.8vw,16px);
  color:var(--cream);font-style:italic;opacity:.7;
}
.lot-ticket:not(.flipped):hover .lot-ticket-front{
  box-shadow:0 0 24px rgba(176,144,96,.3),0 4px 20px rgba(176,144,96,.12);
}
.lot-result{
  font-family:var(--serif);font-size:clamp(18px,3vw,24px);
  color:var(--dark);font-weight:500;
}
.lot-result strong{color:var(--gold)}
.lot-hint{
  font-family:var(--cursive);font-size:clamp(13px,2vw,16px);
  color:var(--light);font-style:italic;margin-top:8px;
}

/* ===== 33. MAGIC ENVELOPE ===== */
.magic-env-sec{background:linear-gradient(to bottom, var(--milk), var(--cream) 30%, var(--cream) 70%, var(--milk));text-align:center}
.me-wrap{display:flex;flex-direction:column;align-items:center;margin-top:clamp(24px,4vw,40px)}
.me-envelope{
  width:clamp(240px,55vw,320px);height:clamp(160px,38vw,220px);
  position:relative;cursor:pointer;
}
.me-back{
  position:absolute;inset:0;
  background:var(--cream);border:2px solid var(--pale);border-radius:8px;
  z-index:1;
}
.me-front{
  position:absolute;bottom:0;left:0;right:0;height:70%;
  background:var(--white);border:2px solid var(--pale);border-top:none;
  border-radius:0 0 8px 8px;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s ease;
}
.me-front svg{color:var(--pale);transition:color .3s}
.me-envelope:hover .me-front svg{color:var(--gold)}
.me-opened .me-front{transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .5s ease, opacity .4s ease .2s}
.me-flap{
  position:absolute;top:0;left:0;right:0;height:55%;z-index:4;
  background:linear-gradient(to bottom, var(--cream), var(--white));
  border:2px solid var(--pale);border-bottom:none;
  clip-path:polygon(0 0, 50% 100%, 100% 0);
  transform-origin:top center;transition:transform .6s ease;
}
.me-flap-open{transform:rotateX(180deg)}
.me-letter-inner{
  position:absolute;top:10%;left:8%;right:8%;bottom:35%;
  background:var(--white);border:1px solid var(--pale);border-radius:8px;
  padding:clamp(14px,3vw,22px);z-index:2;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.me-text{
  font-family:var(--cursive);font-size:clamp(15px,2.5vw,19px);
  color:var(--dark);font-style:italic;line-height:1.6;
}
.me-visits{font-family:var(--sans);font-size:12px;color:var(--light);margin-top:8px}
.me-hint{font-family:var(--cursive);font-size:14px;color:var(--light);font-style:italic;margin-top:14px}

/* ===== RESPONSIVE ===== */
@media(min-width:769px){
  .story-card{grid-template-columns:100px 1fr;gap:30px}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){

  .venue-info{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero{justify-content:space-between;padding-top:clamp(30px,5vh,50px);padding-bottom:0}
  .hero-top-label{margin-bottom:0;font-size:11px;letter-spacing:6px;flex-shrink:0}
  .hero-polaroids{
    flex-direction:column;align-items:stretch;
    gap:0;padding:0 20px;max-width:100%;
    margin:auto 0;margin-top:clamp(10px, 6.5vh, 70px);
  }
  .polaroid--left{
    align-self:flex-start;margin-left:5%;
    transform:rotate(-4deg)!important;z-index:3;
  }
  .polaroid--left.vis{transform:rotate(-4deg)!important}
  .polaroid--right{
    align-self:flex-end;margin-right:5%;margin-top:-20px;
    transform:rotate(3deg)!important;z-index:2;
  }
  .polaroid--right.vis{transform:rotate(3deg)!important}
  .polaroid-img{width:clamp(160px,52vw,260px)}
  .polaroid--left .polaroid-caption{bottom:0;line-height:1.15}
  .polaroid--right .polaroid-caption{bottom:8px}
  .hero-date-deco{
    position:absolute;right:8%;top:8%;
    transform:none;
    font-size:clamp(48px,13vw,75px);
    z-index:1;
  }
  .hero-names-row{
    flex-direction:column;gap:0;
    align-items:flex-start;
    padding-left:5%;padding-right:20px;
    margin-top:10px;margin-bottom:clamp(60px,12vh,100px);
  }
  .hero-names-row span{
    font-size:clamp(48px,14vw,76px);
    line-height:1;
  }
  .hero-names-row span:first-child::after{
    content:' &';
    font-family:var(--serif);
    font-weight:300;
  }
  .hero-names-row .hero-sparkle{display:none}
  .hero-scroll{display:none}

  /* --- Numbers grid --- */
  .numbers-grid{
    grid-template-columns:repeat(2,1fr)!important;
    gap:16px;max-width:100%;
  }
  .num-card{padding:20px 12px}
  .num-value{font-size:clamp(28px,8vw,40px)}
  .num-icon{width:28px;height:28px}

  /* --- Coverflow carousel --- */
  .coverflow-stage{height:clamp(280px,70vw,380px)}
  .cf-card{
    width:clamp(200px,55vw,280px);
    border-radius:10px;
  }
  .cf-card.cf-left{
    transform:translate(calc(-50% - 28vw),-50%) scale(0.7) rotateY(6deg);
  }
  .cf-card.cf-right{
    transform:translate(calc(-50% + 28vw),-50%) scale(0.7) rotateY(-6deg);
  }
  .cf-dots{margin-top:30px}

  /* --- Countdown --- */
  .cd-calendar{max-width:320px;padding:16px}
  .cd-inline{gap:4px}
  .cd-inline-sep{font-size:14px}

  /* --- Story cards --- */
  .story-cards{gap:40px}
  .story-card{grid-template-columns:60px 1fr;gap:14px}
  .story-year{font-size:18px}

  /* --- Venue --- */
  .venue-info{grid-template-columns:1fr;gap:16px}
  .venue-card{padding:20px 16px}

  /* --- Timeline: лесенка на мобиле --- */
  .tl-container{padding:0 8px}
  .tl-item{width:calc(50% - 20px);padding-bottom:40px}
  .tl-dot{width:14px;height:14px;border-width:2px;top:5px}
  .tl-item:nth-child(odd) .tl-dot{right:-27px}
  .tl-item:nth-child(even) .tl-dot{left:-27px}
  .tl-line-fill{width:3px}

  /* --- Dresscode --- */
  .dc-palette{gap:12px 14px}
  .dc-circle{width:42px;height:42px}

  /* --- Gallery --- */
  .gallery-slide{flex:0 0 clamp(200px,60vw,300px)}
  .gallery-track{gap:14px;padding:0 12px}

  /* --- RSVP --- */
  .rsvp-form{padding:0 10px}
  .rsvp-btn{padding:14px 24px;width:100%}
  .rsvp-input,.rsvp-form select,.rsvp-form textarea{padding:14px 16px;font-size:15px}

  /* --- Contacts --- */
  .contact-cards-row{gap:20px}

  /* --- Footer --- */
  .footer-names{font-size:clamp(24px,7vw,36px)}

  /* --- Общие отступы секций --- */
  .sec-inner{padding:0 16px}
  .sec-title{font-size:clamp(28px,8vw,48px)}
  .sec-subtitle{font-size:clamp(13px,3.5vw,16px)}
}