/* =========================================================
   Тілек — "Ribbon & Torn Paper" invitation template
   Dastur.Online — structural template, distinct visual system
   ========================================================= */

@font-face {
  font-family: 'Shelley Script';
  src: url('assets/ShelleyScript.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --cream:        #F5F2EC;
  --cream-deep:   #ECE7DD;
  --ink:          #2E2622;
  --ink-soft:     #6E5F5B;
  --wine:         #6F5358;
  --wine-bright:  #8C6B70;
  --wine-deep:    #4F3A3E;
  --charcoal:     #55524F;
  --charcoal-lt:  #9A9691;
  --gold-line:    rgba(111,83,88,.35); /* kept name for shared script.js/markup compat */
  --card-bg:      rgba(245,242,236,.86);
  --shadow-warm:  rgba(47,38,34,.24);

  --font-script: 'Shelley Script', 'Brush Script MT', cursive;
  --font-head:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  padding-bottom: 160px;
  overflow-x: hidden;
}

/* ---------- fixed background layer ---------- */
.fixed-background{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('assets/background-mobile.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--cream-deep);
}
@media (min-width: 600px){
  .fixed-background{
    background-image: url('assets/background-desktop.webp');
    background-size: contain;
    background-position: center center;
    background-color: var(--cream-deep);
  }
}

/* ---------- layout shell ---------- */
.stage{
  max-width: 560px;
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
}
section{ position: relative; }

/* ---------- reveal-on-scroll base ---------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition: opacity .4s ease; transform: none; }
}

/* spotlight-less soft sheen sweep, plays once when a card enters view */
.glint{ position: relative; overflow: hidden; }
.glint::after{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,252,249,.5), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.glint.in-view::after{ animation: sweep 1.3s ease-out .15s 1; }
@keyframes sweep{
  0%{ left: -60%; opacity: 0; }
  15%{ opacity: .85; }
  100%{ left: 130%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .glint.in-view::after{ animation: none; }
}

/* ---------- ribbon bow ornament (pure CSS, no SVG) ---------- */
.sparkle{
  position: relative;
  display: inline-block;
  width: 20px; height: 14px;
  flex: none;
  background: radial-gradient(circle, var(--wine-deep) 32%, transparent 33%);
  background-size: 7px 7px;
  background-position: center;
  background-repeat: no-repeat;
}
.sparkle::before, .sparkle::after{
  content: '';
  position: absolute;
  top: 1px;
  width: 9px; height: 12px;
  background: var(--wine);
}
.sparkle::before{ left: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.sparkle::after{ right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sparkle.spin{ animation: flutter 3s ease-in-out infinite; }
@keyframes flutter{
  0%, 100%{ transform: scale(.92) rotate(-3deg); opacity: .8; }
  50%{ transform: scale(1.08) rotate(3deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .sparkle.spin{ animation: none; opacity: .9; }
}

/* ================= HERO ================= */
.hero{
  padding: 76px 0 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__glow{
  position: absolute;
  top: 4%;
  left: 50%;
  width: 320px; height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(140,107,112,.22), rgba(140,107,112,0) 68%);
  pointer-events: none;
  z-index: -1;
}
.hero__eyebrow{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--wine-deep);
  font-weight: 600;
}
.hero__title{
  font-family: var(--font-script);
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 400;
}
.hero__name{
  font-family: var(--font-script);
  font-size: 74px;
  line-height: 1.05;
  color: var(--wine-deep);
  margin: 0;
  font-weight: 400;
}
.hero__divider{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 220px;
  margin: 4px 0;
}
.hero__divider .line{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.hero__divider .line.right{ background: linear-gradient(90deg, var(--gold-line), transparent); }
.hero__meta{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.hero__meta .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--wine); flex: none; }

/* ================= CARD (torn paper) ================= */
.card{
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-line);
  border-top: none;
  border-radius: 2px;
  padding: 52px 26px 36px;
  margin: 30px 0 22px;
  box-shadow: 0 18px 40px -22px var(--shadow-warm);
  position: relative;
  clip-path: polygon(
    0% 5%, 5% 1%, 10% 4%, 16% 0%, 22% 3%, 28% 0.5%, 34% 4%, 40% 0%,
    46% 3%, 52% 0.5%, 58% 4%, 64% 0%, 70% 3%, 76% 0.5%, 82% 4%,
    88% 0%, 94% 3%, 100% 1%, 100% 100%, 0% 100%
  );
}
.card__corner{ display: none; }

.section-heading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
  text-align: center;
}

/* ---------- invitation text ---------- */
.invitation-text{
  font-family: var(--font-head);
  font-size: 19px;
  line-height: 1.7;
  text-align: center;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  white-space: pre-line;
}
.invitation-text .addressee{
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--wine-deep);
  margin-bottom: 14px;
}

/* ---------- hosts ---------- */
.hosts{ text-align: center; }
.hosts__label{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wine-deep);
  font-weight: 600;
  margin: 0 0 12px;
}
.hosts__names{
  font-family: var(--font-head);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

/* ================= TIMELINE (ribbon) ================= */
.timeline{ padding: 8px 0 0; }
.timeline__list{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
}
.timeline__list::before{
  content: '';
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--wine-bright), var(--wine) 45%, var(--wine-deep));
  box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}
.timeline__item{
  position: relative;
  padding: 0 0 30px 0;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .6s ease, transform .6s ease;
}
.timeline__item.in-view{ opacity: 1; transform: translateX(0); }
.timeline__item:last-child{ padding-bottom: 0; }
.timeline__dot{
  position: absolute;
  left: -34px; top: 3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dedede, var(--charcoal-lt) 55%, var(--charcoal));
  box-shadow: 0 0 0 4px var(--cream);
}
.timeline__item.in-view .timeline__dot{ animation: dot-glint 2.6s ease-in-out .3s infinite; }
@keyframes dot-glint{
  0%, 100%{ box-shadow: 0 0 0 4px var(--cream), 0 0 0 rgba(140,107,112,0); }
  50%{ box-shadow: 0 0 0 4px var(--cream), 0 0 9px 2px rgba(140,107,112,.5); }
}
@media (prefers-reduced-motion: reduce){
  .timeline__item.in-view .timeline__dot{ animation: none; }
}
.timeline__time{
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--wine-deep);
  font-weight: 600;
  margin: 0 0 3px;
}
.timeline__title{
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--ink);
  margin: 0;
}

/* ================= PHOTO ================= */
.photo-section{ text-align: center; }
.photo-frame{
  position: relative;
  display: inline-block;
  padding: 14px;
  background: var(--cream);
  border-radius: 2px;
  box-shadow: 0 24px 48px -20px var(--shadow-warm);
  transform: rotate(-2deg);
  max-width: 100%;
  clip-path: polygon(
    0% 3%, 6% 0%, 12% 2.5%, 18% 0%, 24% 2%, 30% 0.5%, 36% 2.5%, 42% 0%,
    48% 2%, 54% 0.5%, 60% 2.5%, 66% 0%, 72% 2%, 78% 0.5%, 84% 2.5%,
    90% 0%, 96% 2%, 100% 0.5%, 100% 100%, 0% 100%
  );
}
.photo-frame__inner{
  position: relative;
  border: 1px solid var(--gold-line);
  overflow: hidden;
  border-radius: 1px;
}
.photo-frame__inner img{ display: block; width: 100%; max-width: 340px; height: auto; }
.photo-frame__sticker{
  position: absolute;
  top: -14px; right: -10px;
  width: 34px; height: 24px;
  transform: rotate(12deg);
}
.photo-frame__sticker .sparkle{ width: 100%; height: 100%; }
.photo-frame__caption{
  margin: 22px 0 0;
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--wine-deep);
}

/* ================= VENUE ================= */
.venue{ text-align: center; }
.venue__pin{ width: 0; height: 0; margin: 0 auto 14px; position: relative; }
.venue__pin::before{
  content: '';
  display: block;
  width: 16px; height: 16px;
  border-radius: 50% 50% 50% 0;
  background: var(--wine);
  transform: rotate(-45deg);
  margin: 0 auto;
}
.venue__hall{ font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.venue__address{ font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); margin: 0 0 24px; line-height: 1.6; }
.venue__button{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  background: linear-gradient(135deg, var(--wine-bright), var(--wine-deep));
  border: none;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 26px -10px var(--shadow-warm);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.venue__button:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -10px var(--shadow-warm); }
.venue__button::after{
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
}
.venue__button:hover::after{ animation: sweep .9s ease-out; }

/* ================= FOOTER ================= */
.footer{ padding: 46px 0 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer__ornament{ display: flex; align-items: center; gap: 10px; width: 160px; }
.footer__ornament .line{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.footer__note{ font-family: var(--font-script); font-size: 24px; color: var(--wine-deep); margin: 0; }

/* ================= AUDIO FAB (mirror-ball facet, monochrome) ================= */
.audio-fab{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.3) 0deg 6deg, rgba(40,40,40,.25) 6deg 12deg),
    radial-gradient(circle at 35% 30%, var(--charcoal-lt), var(--charcoal) 70%);
  box-shadow: 0 12px 26px -8px var(--shadow-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.audio-fab__icon{
  width: 0; height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--cream);
  margin-left: 3px;
}
.audio-fab.playing .audio-fab__icon{
  width: 12px; height: 16px;
  border-style: none;
  margin-left: 0;
  background:
    linear-gradient(var(--cream), var(--cream)) left / 4px 100% no-repeat,
    linear-gradient(var(--cream), var(--cream)) right / 4px 100% no-repeat;
}

/* ---------- hide sections cleanly when data missing ---------- */
[data-empty="true"]{ display: none !important; }

/* ---------- responsive ---------- */
@media (min-width: 600px){
  .hero{ padding-top: 96px; }
  .hero__title{ font-size: 28px; }
  .hero__name{ font-size: 86px; }
  .card{ padding: 58px 40px 40px; }
}