/* =========================================================
   Dastur.Online — Wedding Invitation
   Visual theme: Kazakh ceremonial, olive-green botanical accents
   Palette: ivory/cream, warm wood, sage + deep olive green, ink
   Fonts: Marck Script (names) + Cormorant Garamond (headings)
          + PT Serif (Kazakh-safe body & labels)
   ========================================================= */

:root{
  --ivory:      #f7f1e6;
  --parchment:  #efe4d0;
  --card:       rgba(249,244,235,0.93);
  --card-solid: #f9f4eb;
  --wood:       #b98e5e;
  --wood-soft:  #cdab82;
  --burgundy:   #5d6a3a;   /* repurposed: deep olive (labels, date, heart) */
  --burgundy-d: #45512a;   /* darker olive */
  --gold:       #93a06a;   /* repurposed: sage (frames, dividers, thread) */
  --gold-lite:  #b6c08c;   /* light sage (shimmer) */
  --ink:        #2c2a22;
  --ink-soft:   #6b6553;
  --line:       rgba(110,121,74,0.50);
  --line-soft:  rgba(110,121,74,0.24);
  --shadow:     0 18px 50px -24px rgba(46,46,28,0.50);
  --script: 'ShelleyKz','AcademyKz',cursive;
  --display: 'AcademyKz','Cormorant Garamond','PT Serif',Georgia,serif;
  --body: 'PT Serif',Georgia,'Times New Roman',serif;
}

@font-face{
  font-family:'ShelleyKz';
  src:url('assets/AsylbekM02Shelley.kz.ttf') format('truetype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'AcademyKz';
  src:url('assets/Academy.kz Bold Italic.ttf') format('truetype');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  min-height:100%;
}

/* ---------- Fixed background (no parallax, no white gaps) ---------- */
.page-bg,
.page-veil{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.page-bg{
  background-image:url('assets/background-desktop.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:var(--ivory);
}
.page-veil{
  z-index:0;
  background:
    linear-gradient(180deg, rgba(247,241,230,0.20) 0%, rgba(247,241,230,0.30) 38%, rgba(244,236,222,0.42) 100%);
}
@media (max-width:768px){
  .page-bg{ background-image:url('assets/background-mobile.webp'); }
}

/* ---------- Layout shell ---------- */
.wrap{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:0 22px 160px;   /* keep platform RSVP/payment space */
}

/* ---------- Section primitives ---------- */
.section{
  margin:0 auto;
  padding:46px 0;
  opacity:1;
  transform:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .section:not(.in){ opacity:0; transform:translateY(26px); }
.section.is-hidden{ display:none !important; }

.card{
  position:relative;
  background:var(--card);
  border-radius:6px;
  padding:34px 30px;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  outline:1px solid var(--line-soft);
  outline-offset:7px;
  border:1px solid var(--line);
}
.card::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid var(--line-soft);
  border-radius:3px;
  pointer-events:none;
}

/* Eyebrow / section label */
.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.30em;
  font-size:.84rem;
  font-weight:600;
  color:var(--burgundy);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 22px;
  text-align:center;
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow::after{ background:linear-gradient(90deg,var(--gold),transparent); }

/* ---------- Ornamental divider (simple geometry, "draw" on view) ---------- */
.divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:6px 0;
  opacity:1;
  transition:opacity .8s ease;
}
.js .divider:not(.in){ opacity:0; }
.divider .bar{
  height:1px;
  width:0;
  background:linear-gradient(90deg,transparent,var(--gold));
  transition:width 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
.divider .bar.right{ background:linear-gradient(90deg,var(--gold),transparent); }
.divider.in .bar{ width:90px; }
.divider .lozenge{
  width:11px; height:11px;
  background:var(--burgundy);
  transform:rotate(45deg) scale(0);
  transition:transform .6s cubic-bezier(.2,.9,.2,1) .35s;
  box-shadow:0 0 0 4px rgba(93,106,58,0.12);
}
.divider.in .lozenge{ transform:rotate(45deg) scale(1); }
.divider .dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  opacity:0;
  transition:opacity .5s ease .45s;
}
.divider.in .dot{ opacity:1; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 22px;
  position:relative;
  z-index:1;
}
.hero-plate{
  position:relative;
  padding:52px 40px 46px;
  background:rgba(249,244,235,0.82);
  border:1px solid var(--line);
  outline:1px solid var(--line-soft);
  outline-offset:8px;
  border-radius:8px;
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  max-width:560px;
  width:100%;
}
.hero-plate::after{
  content:"";
  position:absolute; inset:7px;
  border:1px solid var(--line-soft);
  border-radius:5px; pointer-events:none;
}
.hero-title{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.82rem;
  color:var(--burgundy);
  margin:0 0 26px;
  font-weight:700;
}
.js .hero-title{ opacity:0; animation:fadeUp 1s ease .2s forwards; }
.hero-names{
  font-family:var(--script);
  font-weight:400;
  color:var(--ink);
  line-height:1.0;
  margin:0;
  font-size:clamp(3.2rem,13vw,5.4rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}
.hero-names .nm{
  display:inline-block;
  position:relative;
  background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--gold-lite) 50%,var(--ink) 62%,var(--ink) 100%);
  background-size:240% 100%;
  background-position:-40% 0;
  -webkit-background-clip:text;
  background-clip:text;
}
.js .hero-names .nm{
  opacity:0;
  transform:translateY(18px) scale(.97);
  background-position:120% 0;
  animation:nameIn 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-names .nm.groom{ animation-delay:.45s; }
.hero-names .nm.bride{ animation-delay:.85s; }
.hero-names .amp{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  color:var(--gold);
  font-size:.5em;
  margin:6px 0;
}
.js .hero-names .amp{ opacity:0; animation:fadeUp .9s ease 1.25s forwards; }
.hero-meta{
  margin-top:30px;
}
.js .hero-meta{ opacity:0; animation:fadeUp 1s ease 1.5s forwards; }
.hero-date{
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--burgundy);
  letter-spacing:.04em;
  margin:0;
}
.hero-rule{
  width:46px; height:1px; background:var(--gold);
  margin:14px auto;
}
.hero-time{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.85rem;
  color:var(--ink-soft);
  margin:0;
}
.hero-scroll{
  position:absolute;
  bottom:26px; left:50%; transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
}
.js .hero-scroll{ opacity:0; animation:fadeUp 1s ease 2s forwards; }
.hero-scroll .chev{
  display:block; width:9px; height:9px; margin:8px auto 0;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
  animation:bob 1.8s ease-in-out infinite;
}

/* =========================================================
   INVITATION TEXT
   ========================================================= */
.invite-text{
  font-size:1.06rem;
  color:var(--ink);
  text-align:center;
  white-space:pre-line;
  margin:0;
  line-height:1.85;
  text-wrap:pretty;
}
.invite-text .lead{
  display:block;
  font-family:var(--display);
  color:var(--burgundy);
  letter-spacing:.02em;
}

/* =========================================================
   CALENDAR  (Той күні)
   ========================================================= */
.cal{
  text-align:center;
}
.cal-month{
  font-family:var(--display);
  font-size:1.7rem;
  color:var(--ink);
  letter-spacing:.05em;
  margin:0 0 18px;
}
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  max-width:430px;
  margin:0 auto;
}
.cal-dow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
  padding:6px 0 10px;
}
.cal-cell{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.98rem;
  color:var(--ink);
  border-radius:4px;
  position:relative;
}
.cal-cell.empty{ visibility:hidden; }
.cal-cell.dim{ color:rgba(111,96,81,0.45); }

/* selected day = pulsing CSS heart with number on top */
.cal-cell.sel{ color:#fff; font-weight:700; }
.cal-heart{
  position:absolute;
  width:40px; height:36px;
  top:50%; left:50%;
  transform:translate(-50%,-54%);
  z-index:0;
  filter:drop-shadow(0 6px 10px rgba(93,106,58,0.32));
  animation:heartPulse 2.4s ease-in-out infinite;
}
.cal-heart::before,
.cal-heart::after{
  content:"";
  position:absolute;
  top:0; left:20px;
  width:20px; height:32px;
  background:linear-gradient(160deg,var(--burgundy) 0%,var(--burgundy-d) 100%);
  border-radius:20px 20px 0 0;
  transform:rotate(-45deg);
  transform-origin:0 100%;
}
.cal-heart::after{
  left:0;
  transform:rotate(45deg);
  transform-origin:100% 100%;
}
.cal-cell.sel .cal-num{ position:relative; z-index:1; }
.cal-time{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--burgundy);
  letter-spacing:.06em;
}
.cal-time::before,
.cal-time::after{ content:""; width:18px; height:1px; background:var(--gold); }

/* =========================================================
   HOSTS  (Той иелері)
   ========================================================= */
.hosts-line{
  font-family:var(--display);
  font-size:clamp(1.5rem,5.5vw,2.1rem);
  color:var(--ink);
  text-align:center;
  margin:0;
  letter-spacing:.02em;
}

/* =========================================================
   PROGRAM  (Той бағдарламасы) — gold-thread vertical timeline
   ========================================================= */
.timeline{
  position:relative;
  max-width:520px;
  margin:6px auto 0;
  padding-left:10px;
}
.timeline::before{
  content:"";
  position:absolute;
  left:13px; top:6px; bottom:6px;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent);
}
.tl-item{
  position:relative;
  padding:0 0 26px 44px;
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .tl-item:not(.in){ opacity:0; transform:translateY(16px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item .node{
  position:absolute;
  left:6px; top:4px;
  width:16px; height:16px;
  background:var(--card-solid);
  border:1.5px solid var(--gold);
  transform:rotate(45deg);
  box-shadow:0 0 0 4px rgba(110,121,74,0.14);
}
.tl-item .node::after{
  content:"";
  position:absolute; inset:4px;
  background:var(--burgundy);
}
.tl-time{
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--burgundy);
  letter-spacing:.04em;
  line-height:1.1;
}
.tl-title{
  font-size:1rem;
  color:var(--ink);
  margin-top:2px;
}

/* =========================================================
   PHOTO  (Фотосурет) — ornament-framed photograph
   ========================================================= */
.photo-frame{
  position:relative;
  max-width:420px;
  margin:0 auto;
  padding:14px;
  background:linear-gradient(160deg,#e4e4c8,#c8cd9f);
  border-radius:8px;
  box-shadow:var(--shadow);
}
.photo-frame::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid rgba(93,106,58,0.40);
  border-radius:5px;
  pointer-events:none;
  z-index:2;
}
.photo-frame img{
  display:block;
  width:100%;
  height:auto;
  border-radius:3px;
  position:relative;
  z-index:1;
}
.photo-frame .corner{
  position:absolute;
  width:18px; height:18px;
  border:1.5px solid var(--burgundy);
  z-index:3;
}
.photo-frame .corner.tl{ top:9px; left:9px; border-right:0; border-bottom:0; }
.photo-frame .corner.tr{ top:9px; right:9px; border-left:0; border-bottom:0; }
.photo-frame .corner.bl{ bottom:9px; left:9px; border-right:0; border-top:0; }
.photo-frame .corner.br{ bottom:9px; right:9px; border-left:0; border-top:0; }

/* =========================================================
   VENUE  (Тойдың өтетін орны)
   ========================================================= */
.venue{ text-align:center; }
.venue-hall{
  font-family:var(--display);
  font-size:1.5rem;
  color:var(--ink);
  margin:0 0 6px;
}
.venue-city,
.venue-street{
  font-size:1rem;
  color:var(--ink-soft);
  margin:2px 0;
}
.venue-map{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  padding:13px 28px;
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.8rem;
  color:var(--burgundy);
  text-decoration:none;
  background:transparent;
  border:1px solid var(--burgundy);
  border-radius:4px;
  transition:background .35s ease, color .35s ease, transform .2s ease;
}
.venue-map::before{
  content:"";
  width:9px; height:9px;
  border:1.5px solid currentColor;
  border-radius:50% 50% 50% 0;
  transform:rotate(45deg);
}
.venue-map:hover{
  background:var(--burgundy);
  color:#fff;
  transform:translateY(-2px);
}

/* =========================================================
   FLOATING AUDIO PLAYER — gold medallion
   ========================================================= */
.audio-btn{
  position:fixed;
  right:18px; bottom:96px;
  z-index:60;
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:radial-gradient(circle at 32% 28%,#cdd3a3,#9aa86a 60%,#717f48);
  box-shadow:0 10px 26px -8px rgba(58,36,20,0.6), inset 0 0 0 3px rgba(255,255,255,0.18);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.audio-btn .ico{
  width:0; height:0;
  border-left:13px solid #45512a;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  margin-left:3px;
}
.audio-btn.playing .ico{
  width:13px; height:14px; border:0; margin:0;
  background:
    linear-gradient(#45512a,#45512a) left/4px 100% no-repeat,
    linear-gradient(#45512a,#45512a) right/4px 100% no-repeat;
}
.audio-btn.playing{ animation:spinPulse 6s linear infinite; }

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes fadeUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
@keyframes nameIn{
  0%{ opacity:0; transform:translateY(18px) scale(.97); background-position:120% 0; }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0) scale(1); background-position:-40% 0; }
}
@keyframes heartPulse{
  0%,100%{ transform:translate(-50%,-54%) scale(1); }
  50%{ transform:translate(-50%,-54%) scale(1.1); }
}
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(3px,3px); } }
@keyframes spinPulse{ 0%{ box-shadow:0 10px 26px -8px rgba(58,36,20,0.6), inset 0 0 0 3px rgba(255,255,255,0.18);} 50%{ box-shadow:0 10px 30px -6px rgba(93,106,58,0.50), inset 0 0 0 3px rgba(255,255,255,0.30);} 100%{ box-shadow:0 10px 26px -8px rgba(58,36,20,0.6), inset 0 0 0 3px rgba(255,255,255,0.18);} }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:480px){
  .wrap{ padding:0 16px 160px; }
  .card{ padding:28px 20px; }
  .hero-plate{ padding:40px 24px 36px; }
  .invite-text{ font-size:1rem; }
  .cal-grid{ gap:4px; }
  .cal-cell{ font-size:.9rem; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .section,.divider,.tl-item{ opacity:1 !important; transform:none !important; }
  .divider .bar{ width:90px !important; }
  .divider .lozenge{ transform:rotate(45deg) scale(1) !important; }
  .hero-title,.hero-names .nm,.hero-names .amp,.hero-meta,.hero-scroll{ opacity:1 !important; transform:none !important; }
  .hero-names .nm{ -webkit-text-fill-color:var(--ink); }
}