/* =========================================================
   ІГОР — 50 · Editorial Birthday Invitation
   Design tokens
   ========================================================= */
:root{
  /* -- palette : warm autumn paper, restrained gold, deep green + chocolate as accents only -- */
  --paper:        #FAF6EC;
  --ivory:        #F4EDDD;
  --cream:        #EEE4CC;
  --sage:         #7C8767;
  --sage-deep:    #4B5A3D;
  --green-deep:   #2B3524;
  --taupe:        #A88F6C;
  --choco:        #48311F;
  --choco-soft:   #6B4B30;
  --gold:         #B08A4E;
  --gold-soft:    #D8BE8A;
  --ink:          #241F17;
  --ink-soft:     #574E3F;
  --white:        #FFFFFF;

  --font-display: 'Fraunces', 'Iowan Old Style', serif;
  --font-body:    'Manrope', -apple-system, sans-serif;

  --edge: clamp(24px, 6vw, 96px);
  --section-pad: clamp(72px, 11vw, 168px);

  --ease: cubic-bezier(.16,.8,.24,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

/* =========================================================
   Shared type + structure
   ========================================================= */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 20px;
  font-weight: 600;
}

.section{
  position: relative;
  width: 100%;
}

.spread{
  padding: var(--section-pad) 0;
}

.spread__grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 110px);
  padding: 0 var(--edge);
  max-width: 1720px;
  margin: 0 auto;
}
.spread__grid--image-first{ grid-template-columns: 0.95fr 1.05fr; }

.spread__col--text{ max-width: 620px; }
.spread__col--visual{ display:flex; justify-content: flex-end; }
.spread__grid--image-first .spread__col--visual{ order:1; justify-content: flex-start; }
.spread__grid--image-first .spread__col--text{ order:2; }
.spread__grid--calendar-first .spread__col--visual{ justify-content: flex-start; }

.spread__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  margin: 0 0 26px;
  color: var(--choco);
}

.spread__paragraph{
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 52ch;
}
.spread__paragraph--lead{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  color: var(--choco);
  line-height: 1.5;
}
.spread__paragraph--emph{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sage-deep);
  font-size: 1.2rem;
}
.spread__note{
  font-size: 0.92rem;
  color: var(--ink-soft);
  opacity: 0.75;
  margin-top: 8px;
}
.spread__address{
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 36px;
}

/* buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 1px solid var(--choco);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--choco);
  font-weight: 600;
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.btn svg{ transition: transform .5s var(--ease); }
.btn:hover{
  background: var(--choco);
  color: var(--paper);
  transform: translateY(-2px);
}
.btn:hover svg{ transform: translate(2px,-2px); }
.btn--outline{ border-color: var(--sage-deep); color: var(--sage-deep); }
.btn--outline:hover{ background: var(--sage-deep); color: var(--paper); }

/* reveal-on-scroll */
[data-reveal], [data-reveal-img]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal-img]{ transform: translateY(0) scale(1.04); }
[data-reveal].is-visible, [data-reveal-img].is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-reveal-img]{ opacity:1; transform:none; transition:none; }
}

/* tilt image frames */
.tilt-image{
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
}
.tilt-image--tall{ aspect-ratio: 3 / 4.4; max-width: 480px; }
.tilt-image--portrait{ aspect-ratio: 3 / 4; max-width: 600px; }
.tilt-image img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease);
}
.tilt-image:hover img{ transform: scale(1.055); }
.tilt-image::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(72,49,31,0.08);
  pointer-events:none;
}

/* =========================================================
   Scroll jewel — signature micro-interaction
   ========================================================= */
.scroll-jewel{
  position: fixed;
  right: clamp(16px, 2.4vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  height: 42vh;
  width: 14px;
  z-index: 60;
  pointer-events: none;
}
.scroll-jewel__track{
  position:absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, rgba(72,49,31,0), rgba(72,49,31,0.25) 15%, rgba(72,49,31,0.25) 85%, rgba(72,49,31,0));
  transform: translateX(-50%);
}
.scroll-jewel__gem{
  position:absolute;
  left:50%; top:0;
  width:8px; height:8px;
  background: var(--gold);
  transform: translate(-50%,-50%) rotate(45deg);
  box-shadow: 0 0 0 3px var(--paper), 0 0 10px rgba(176,138,78,0.5);
  transition: top .12s linear;
}
@media (max-width: 860px){
  .scroll-jewel{ display:none; }
}

/* =========================================================
   Grain / ambient overlay
   ========================================================= */
.grain-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* decorative floating particles */
.particles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.particle{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(216,190,138,0.9), rgba(216,190,138,0.15) 70%);
  opacity:0.55;
  animation: drift linear infinite;
}
@keyframes drift{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(14px,-26px); }
  100%{ transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .particle{ animation: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height: 100svh;
  display:flex;
  align-items: center;
  padding: clamp(120px, 14vh, 180px) 0 80px;
  background:
    radial-gradient(ellipse at 85% 8%, rgba(216,190,138,0.18), transparent 55%),
    linear-gradient(180deg, var(--ivory), var(--paper) 70%);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: clamp(24px, 4vw, 72px);
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--edge);
  width:100%;
}
.hero__text{ max-width: 640px; justify-self: start; }
.hero__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.2rem, 10vw, 9.4rem);
  line-height: 0.86;
  margin: 6px 0 34px;
  color: var(--choco);
  display:flex;
  align-items: flex-start;
  gap: clamp(10px, 1.6vw, 22px);
  letter-spacing: -0.01em;
}
.hero__title-num{
  font-style: italic;
  color: var(--sage-deep);
  font-size: 0.42em;
  align-self: center;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 0.08em;
}
.hero__lede{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  line-height: 1.42;
  color: var(--ink);
  margin: 0 0 42px;
  max-width: 20ch;
}
.hero__meta{
  display:flex;
  align-items:center;
  gap: 18px;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.hero__meta-divider{
  width: 26px; height:1px; background: var(--gold);
}
.hero__image{ display:flex; justify-content:flex-end; }
.hero__image-frame{
  position:relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 4/5.1;
  border-radius: 4px;
  overflow:hidden;
  box-shadow: 0 40px 80px -30px rgba(36,25,15,0.35);
}
.hero__image-frame img{
  width:100%; height:100%; object-fit: cover;
  transform: scale(1.01);
}
.hero__image-frame::before{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(255,255,255,0.18);
  z-index:2;
}

.scroll-cue{
  position:absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 54px;
  z-index:2;
}
.scroll-cue span{
  display:block; width:1px; height: 100%;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: cue 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue{
  0%{ transform: scaleY(0); opacity:0; }
  40%{ transform: scaleY(1); opacity:1; }
  100%{ transform: scaleY(1); opacity:0; }
}

/* =========================================================
   INTRO + CALENDAR
   ========================================================= */
#intro{ background: var(--paper); }
.spread__grid--calendar-first .spread__col--visual{ justify-content:flex-start; }

.calendar-card{
  background: var(--ivory);
  border: 1px solid rgba(72,49,31,0.1);
  border-radius: 6px;
  padding: clamp(28px, 3vw, 46px);
  max-width: 480px;
  width:100%;
}
.calendar-card__script{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--sage-deep);
  margin: 0 0 26px;
}
.calendar__weekdays, .calendar__days{
  display:grid;
  grid-template-columns: repeat(7,1fr);
  gap: 6px;
}
.calendar__weekdays span{
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity:0.65;
  text-align:center;
  padding-bottom: 10px;
  font-weight: 600;
}
.calendar__days{ margin-top: 4px; }
.calendar__days span{
  aspect-ratio: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 0.92rem;
  color: var(--ink);
  border-radius: 50%;
}
.calendar__days span.is-muted{ opacity: 0.28; }
.calendar__days span.is-highlight{
  background: var(--choco);
  color: var(--paper);
  font-weight: 700;
  position: relative;
  box-shadow: 0 6px 18px -6px rgba(72,49,31,0.55);
}

/* =========================================================
   TIMING list
   ========================================================= */
.timing-list{ margin-top: 8px; }
.timing-list__row{
  display:flex;
  align-items:baseline;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 22px 0;
  border-bottom: 1px solid rgba(72,49,31,0.14);
  transition: padding-left .5s var(--ease), border-color .5s var(--ease);
  cursor: default;
}
.timing-list__row:first-child{ padding-top: 0; }
.timing-list__row:hover{
  padding-left: 14px;
  border-color: var(--gold);
}
.timing-list__time{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 500;
  color: var(--choco);
  min-width: 5ch;
  transition: color .5s var(--ease);
}
.timing-list__row:hover .timing-list__time{ color: var(--sage-deep); }
.timing-list__label{
  font-size: 1.02rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* =========================================================
   DRESS CODE
   ========================================================= */
.palette-label{
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 18px;
  font-weight: 600;
}
.palette-swatches{
  display:flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.palette-swatches li{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.swatch{
  width: 15px; height:15px;
  border-radius:50%;
  display:inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.swatch--green{ background: var(--sage-deep); }
.swatch--choco{ background: var(--choco); }
.swatch--beige{ background: var(--cream); }
.swatch--gold{ background: var(--gold); }
.swatch--black{ background: #1b1712; }
.swatch--white{ background: #fff; }

/* =========================================================
   CINEMATIC PHOTO SCROLL
   ========================================================= */
.cinema{
  background: linear-gradient(180deg, var(--paper) 0%, var(--ivory) 50%, var(--paper) 100%);
  padding: clamp(60px, 9vh, 100px) 0;
  /* no overflow:hidden here — it would break position:sticky on .cinema__anchor;
     horizontal clipping is instead handled by overflow-x:hidden on body */
}
.cinema__inner{
  position: relative;
  height: 220vh;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.cinema__anchor{
  position: sticky;
  top: 38vh;
  z-index: 5;
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
  pointer-events:none;
}
.cinema__anchor .eyebrow{ text-align:center; }
.cinema__anchor-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  color: var(--choco);
  line-height: 1.25;
  margin:0;
}
.cinema__layer{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-width: 150px;
  max-width: 340px;
  will-change: transform;
  z-index: 2;
}
.cinema__layer img{
  width:100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 30px 60px -25px rgba(36,25,15,0.4);
  display:block;
}

@media (max-width: 860px){
  .cinema__inner{ height: 165vh; }
  .cinema__layer{ max-width: 220px; }
}

/* =========================================================
   COUNTDOWN
   ========================================================= */
#countdown .spread__grid{ align-items:start; }
.countdown{
  display:flex;
  gap: clamp(18px, 2.6vw, 40px);
  margin: 10px 0 26px;
}
.countdown__unit{ display:flex; flex-direction:column; align-items:flex-start; }
.countdown__number{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 6vw, 5.6rem);
  line-height: 1;
  color: var(--choco);
  font-variant-numeric: tabular-nums;
}
.countdown__label{
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.countdown__date{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--sage-deep);
  margin: 4px 0 0;
}
.spread__col--request{ padding-top: 4px; }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp{
  background: var(--choco);
  color: var(--paper);
  padding: clamp(90px, 13vh, 140px) var(--edge);
}
.rsvp__inner{
  max-width: 640px;
  margin: 0 auto;
  text-align:center;
}
.rsvp .eyebrow{ color: var(--gold-soft); text-align:center; }
.rsvp__text{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.55;
  margin: 0 0 40px;
  color: var(--paper);
  font-weight: 400;
}
.rsvp .btn--outline{ border-color: var(--gold-soft); color: var(--paper); }
.rsvp .btn--outline:hover{ background: var(--gold-soft); color: var(--choco); }

/* =========================================================
   FINALE
   ========================================================= */
.finale{
  background: linear-gradient(180deg, var(--ivory), var(--paper));
  padding: clamp(90px, 13vh, 150px) 0 70px;
  position: relative;
}
.finale__grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items:center;
  gap: clamp(32px, 5vw, 90px);
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 var(--edge);
}
.finale__image{ display:flex; justify-content:flex-start; }
.finale__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  line-height: 1.08;
  color: var(--choco);
  margin: 0 0 22px;
}
.finale__sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  color: var(--sage-deep);
  margin:0;
}
.finale__footer{
  text-align:center;
  margin: 90px 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
}

/* =========================================================
   RESPONSIVE — stack on smaller screens
   ========================================================= */
@media (max-width: 980px){
  .hero__grid,
  .spread__grid,
  .spread__grid--image-first,
  .finale__grid{
    grid-template-columns: 1fr;
  }
  .hero__grid{
    gap: 48px;
    text-align:left;
  }
  .hero{ padding-top: 130px; min-height: auto; }
  .hero__image{ order: -1; }
  .hero__image-frame{ max-width: 380px; margin: 0 auto; }
  .hero__text{ max-width: 100%; }

  .spread__grid--image-first .spread__col--visual,
  .spread__grid--image-first .spread__col--text{ order: initial; }
  .spread__col--text{ max-width: 100%; }
  .tilt-image, .tilt-image--tall, .tilt-image--portrait{ max-width: 100%; margin: 0 auto; }

  .finale__image{ order: -1; }
  .finale__text{ text-align:center; }
}

@media (max-width: 640px){
  .hero__title{ font-size: clamp(3.2rem, 15vw, 5rem); }
  .countdown{ flex-wrap: wrap; gap: 26px 32px; }
  .cinema__inner{ height: 145vh; }
  .cinema__layer{ max-width: 42vw; min-width: 120px; }
}