/* =========================================================
   Анимации. Идея — «стикербук»: страница собирается,
   будто кто-то наклеивает на неё картинки и скотч.
   Всё скрытое прячется только при включённом JS (.js).
   ========================================================= */
:root {
  --ease-stick: cubic-bezier(0.2, 1.45, 0.4, 1);
  --ease-settle: cubic-bezier(0.22, 1.25, 0.36, 1);
}

/* ---------- Общее появление при прокрутке ---------- */
.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 1. Сборка обложки ---------- */
.js .hero .bunting { animation: bunting-drop 900ms var(--ease-settle) both, sway 5s ease-in-out 1s infinite; transform-origin: 50% 0; }
.js .rainbow-text span {
  animation:
    letter-pop 520ms var(--ease-stick) calc(250ms + var(--i) * 70ms) both,
    bob 2.4s ease-in-out calc(1.4s + var(--i) * 120ms) infinite;
}
.js .hero__photo { animation: photo-land 800ms var(--ease-settle) 450ms both; }
.js .hero .name-card { animation: note-slide 800ms var(--ease-settle) 850ms both; }
.js .hero .washi { animation: tape-pull 450ms var(--ease-out) 1450ms both; }
.js .hero .washi--right { animation-delay: 1600ms; }
.js .names-heart { animation: pop-in 500ms var(--ease-stick) 1700ms both, heartbeat 1.6s ease-in-out 2.4s infinite; }
.hero .name-card .sticker-svg { --base: 1.9s; }
.js .countdown > div { animation: pop-in 500ms var(--ease-stick) both; }
.js .countdown > div:nth-child(1) { animation-delay: 1800ms; }
.js .countdown > div:nth-child(2) { animation-delay: 1880ms; }
.js .countdown > div:nth-child(3) { animation-delay: 1960ms; }
.js .countdown > div:nth-child(4) { animation-delay: 2040ms; }
.js .countdown > div:nth-child(5) { animation-delay: 2120ms; }
.js .scroll-down { animation: pop-in 500ms var(--ease-stick) 2400ms both, nudge 2.2s ease-in-out 3s infinite; }

/* Тик таймера: цифра подпрыгивает при смене */
.countdown .is-tick b { animation: tick 420ms var(--ease-stick); }

/* ---------- Стикеры «прилипают» ---------- */
.hero .sticker-svg { --base: 1.1s; }
.js .sticker-layer .sticker-svg { opacity: 0; }
.js .sticker-layer.is-visible .sticker-svg { opacity: 1; }
.js .sticker-layer.is-visible .sticker-svg--float {
  animation:
    stick-on 560ms var(--ease-stick) calc(var(--base, 0.15s) + min(var(--k) * 70ms, 1400ms)) both,
    sticker-float 5s ease-in-out calc(var(--d) + 2s) infinite;
}
.js .sticker-layer.is-visible .sticker-svg--twinkle {
  animation:
    stick-on 560ms var(--ease-stick) calc(var(--base, 0.15s) + min(var(--k) * 70ms, 1400ms)) both,
    sticker-twinkle 2.6s ease-in-out calc(var(--d) + 2s) infinite;
}
.sticker-layer .sticker-svg { pointer-events: auto; cursor: pointer; }
.js .sticker-layer.is-visible .sticker-svg.is-poked { animation: poke 520ms var(--ease-stick); }

/* ---------- Полароиды падают на страницу ---------- */
.js .polaroid-card.reveal {
  transform: translateY(-80px) rotate(-14deg) scale(1.08);
  transition: opacity 500ms var(--ease-out), transform 1000ms var(--ease-settle), rotate 400ms var(--ease-out), translate 400ms var(--ease-out);
}
.js .polaroid-card--bride.reveal { transform: translateY(-80px) rotate(14deg) scale(1.08); transition-delay: 160ms, 160ms, 0ms, 0ms; }
.js .polaroid-card.reveal.is-visible { transform: none; }
.js .polaroid-card .washi--top { clip-path: inset(0 100% 0 0); transition: clip-path 450ms var(--ease-out) 900ms; }
.js .polaroid-card.is-visible .washi--top { clip-path: inset(0); }
.js .polaroid-card__crown { scale: 0; transition: scale 500ms var(--ease-stick) 1100ms; }
.js .polaroid-card.is-visible .polaroid-card__crown { scale: 1; }
.js .couple-squiggle { clip-path: inset(0 100% 0 0); }
.js .couple-quote.is-visible + .couple-squiggle { animation: squiggle-draw 900ms var(--ease-out) 400ms both; }

/* ---------- Скрапбук локации разъезжается ---------- */
.js .scrapbook .lined-note, .js .scrapbook .polaroid {
  opacity: 0; transition: opacity 600ms var(--ease-out), translate 900ms var(--ease-settle);
}
.js .scrapbook .lined-note { translate: -60px 20px; }
.js .scrapbook .polaroid { translate: 60px -20px; transition-delay: 150ms; }
.js .scrapbook.is-visible .lined-note, .js .scrapbook.is-visible .polaroid { opacity: 1; translate: 0 0; }

/* ---------- Торт ---------- */
.cake { width: min(300px, 100%); height: 210px; }
.cake__art { display: block; width: 200px; height: 200px; margin: 0 auto; transform-origin: 50% 100%; }
.js .cake.is-visible .cake__art { animation: cake-wobble 900ms var(--ease-settle) 200ms both; }

/* ---------- Карточка «Примечание» ---------- */
.js .doodle-frame.reveal { transform: translateY(30px) rotate(-6deg) scale(0.9); transition: opacity 700ms var(--ease-out), transform 1000ms var(--ease-settle); }
.js .doodle-frame.reveal.is-visible { transform: none; }

/* ---------- Календарь: сердце на дате ---------- */
.js .calendar .calendar__day--active::before { animation: none; scale: 0; }
.js .calendar.is-visible .calendar__day--active::before {
  scale: 1;
  animation: heart-pop 700ms var(--ease-stick) 500ms both, pulse 1.6s ease-in-out 1.4s infinite;
}
.calendar__day--active { cursor: pointer; }

/* ---------- Палитра дресс-кода ---------- */
.js .palette.reveal { transform: none; }
.js .palette .palette__swatch { scale: 0; }
.js .palette.is-visible .palette__swatch { animation: swatch-pop 560ms var(--ease-stick) both; scale: 1; }
.palette__swatch:nth-child(2) { animation-delay: 80ms; }
.palette__swatch:nth-child(3) { animation-delay: 160ms; }
.palette__swatch:nth-child(4) { animation-delay: 240ms; }
.palette__swatch:nth-child(5) { animation-delay: 320ms; }
.palette__swatch:nth-child(6) { animation-delay: 400ms; }
.palette__swatch:nth-child(7) { animation-delay: 480ms; }

/* ---------- Флажки качаются ---------- */
.bunting polygon { transform-box: fill-box; transform-origin: 50% 0; animation: flag-swing 3s ease-in-out infinite; }
.bunting polygon:nth-child(even) { animation-delay: -1.5s; }
.bunting polygon:nth-child(3n) { animation-duration: 3.6s; }

/* ---------- Расписание ---------- */
.js .timeline__item.is-visible .timeline__icon svg { animation: icon-pop 700ms var(--ease-stick) 200ms both; }
.js .timeline__item.is-visible .timeline__dot { animation: pop-in 400ms var(--ease-stick) 100ms both; }
@supports (animation-timeline: view()) {
  .timeline { view-timeline-name: --day; }
  .timeline::before {
    transform-origin: 50% 0;
    animation: line-draw linear both;
    animation-timeline: --day;
    animation-range: entry 10% cover 75%;
  }
}

/* ---------- Кнопка «Подтвердить»: блик ---------- */
.btn-confirm { position: relative; overflow: hidden; isolation: isolate; }
.btn-confirm::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  translate: -120% 0; animation: shine 4.5s ease-in-out 1s infinite;
}

/* ---------- Конфетти ---------- */
.confetti { position: fixed; z-index: 100; pointer-events: none; filter: drop-shadow(0 2px 1px rgba(110, 70, 60, 0.2)); }

/* ---------- Ключевые кадры ---------- */
@keyframes bunting-drop { from { opacity: 0; translate: 0 -50px; rotate: -6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.5deg; } }
@keyframes flag-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes letter-pop { from { opacity: 0; scale: 0.2; translate: 0 20px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes photo-land { from { opacity: 0; scale: 0.82; rotate: -5deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes note-slide { from { opacity: 0; translate: 0 70px; rotate: -12deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes tape-pull { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes pop-in { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes stick-on {
  0% { opacity: 0; scale: 1.9; filter: drop-shadow(0 14px 10px rgba(110, 70, 60, 0.25)); }
  55% { opacity: 1; scale: 0.88; }
  100% { opacity: 1; scale: 1; filter: drop-shadow(0 3px 2px rgba(110, 70, 60, 0.18)); }
}
@keyframes poke { 0% { scale: 1; } 30% { scale: 1.35; rotate: calc(var(--r) - 18deg); } 60% { scale: 0.9; rotate: calc(var(--r) + 12deg); } 100% { scale: 1; rotate: var(--r); } }
@keyframes tick { 0% { transform: translateY(0); } 35% { transform: translateY(-5px) scale(1.12); } 100% { transform: none; } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes squiggle-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cake-wobble { 0% { opacity: 0; transform: scale(0.6, 0.4); } 45% { opacity: 1; transform: scale(1.06, 1.12); } 70% { transform: scale(0.97, 0.95); } 100% { transform: none; } }
@keyframes heart-pop { 0% { scale: 0; rotate: -30deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes swatch-pop { from { scale: 0; rotate: -90deg; } to { scale: 1; rotate: 0deg; } }
@keyframes icon-pop { from { opacity: 0; scale: 0.3; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes line-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes shine { 0%, 60% { translate: -120% 0; } 100% { translate: 120% 0; } }

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .polaroid-card.reveal, .js .doodle-frame.reveal { transform: none; transition: opacity 500ms linear; }
  .js .hero *, .js .sticker-layer .sticker-svg, .js .scroll-down,
  .bunting polygon, .btn-confirm::after, .cake__art, .timeline__icon svg, .timeline__dot,
  .palette__swatch, .calendar__day--active::before, .countdown .is-tick b { animation: none !important; }
  .js .sticker-layer .sticker-svg, .js .palette .palette__swatch, .js .polaroid-card__crown,
  .js .calendar .calendar__day--active::before { opacity: 1; scale: 1; }
  .js .scrapbook .lined-note, .js .scrapbook .polaroid { translate: 0 0; }
  .js .polaroid-card .washi--top { clip-path: none; }
  .btn-confirm::after { display: none; }
}