index.html - master - 3199/Wedding

index.html
713 строк32 KB
3199
Create: index.html
10 июл 2026, 11:53
10 июл 2026, 11:53780abea
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Айгиз &amp; Диляра — 6 сентября 2026</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Beau+Rivage&display=swap" rel="stylesheet">
<style>
  /* If you own a licensed copy of "Indenture English Penman", drop the webfont files into
     assets/fonts/ and this @font-face will pick it up automatically for all couple names.
     Until then, the site falls back to "Beau Rivage" (a free elegant script from Google Fonts). */
  @font-face{
    font-family:'Indenture English Penman';
    src:url('assets/fonts/IndentureEnglishPenman.woff2') format('woff2'),
        url('assets/fonts/IndentureEnglishPenman.woff') format('woff'),
        url('assets/fonts/IndentureEnglishPenman.ttf') format('truetype');
    font-display:swap;
  }

  :root{
    --ivory:#F6F1E7;
    --paper:#FBF8F2;
    --white:#FFFFFF;
    --graphite:#26221D;
    --ink:#2E2A24;
    --stone:#6B5F4E;
    --hairline:#E4DCCB;
    --beige:#C7B79C;
    --max-w:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --font-head:'Oswald', sans-serif;
    --font-script:'Indenture English Penman','Beau Rivage', cursive;
    --font-body:'Nunito Sans', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{ background:var(--graphite); color:var(--paper); }
  a{ color:inherit; }
  img{ display:block; max-width:100%; }
  button{ font-family:inherit; }

  .eyebrow{
    font-family:var(--font-head);
    font-size:13px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--stone);
    font-weight:500;
  }
  .eyebrow.on-dark{ color:rgba(247,243,236,0.65); }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.12s; }
  .reveal-delay-2{ transition-delay:.24s; }
  .reveal-delay-3{ transition-delay:.36s; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:none; opacity:1; transform:none; }
    .kenburns{ animation:none !important; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:580px;
    width:100%;
    overflow:hidden;
    background:var(--graphite);
  }
  .hero-media{ position:absolute; inset:0; overflow:hidden; }
  .hero-media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 38%;
    transform:scale(1.02);
    animation:kenburns 28s ease-in-out infinite alternate;
    filter:brightness(0.84);
  }
  @keyframes kenburns{
    0%{ transform:scale(1.02) translate3d(0,0,0); }
    100%{ transform:scale(1.12) translate3d(-1.2%, -1%, 0); }
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(18,16,14,0.42) 0%, rgba(18,16,14,0.12) 30%, rgba(18,16,14,0.22) 62%, rgba(18,16,14,0.7) 100%);
  }
  .hero-content{
    position:relative; height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:space-between;
    text-align:center; color:var(--paper);
    padding:64px 28px 84px;
  }
  .hero-top{ display:flex; flex-direction:column; align-items:center; }
  .hero-bottom{ display:flex; flex-direction:column; align-items:center; }
  .hero-message{
    font-family:var(--font-body);
    font-weight:400; font-style:italic;
    font-size:clamp(19px, 2.6vw, 28px);
    line-height:1.55;
    max-width:640px;
    color:rgba(251,248,242,0.94);
    margin-bottom:44px;
    text-shadow:0 2px 18px rgba(0,0,0,0.3);
  }
  .hero-date{
    display:inline-block;
    font-family:var(--font-head);
    font-size:13px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--paper);
    background:rgba(18,16,14,0.42);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border:1px solid rgba(247,243,236,0.25);
    padding:10px 24px;
    border-radius:999px;
    margin-bottom:32px;
  }
  .hero-names{
    font-family:var(--font-script);
    font-weight:400;
    font-size:clamp(58px, 12vw, 132px);
    line-height:1.15;
  }
  .hero-amp{ font-style:italic; font-weight:300; opacity:0.82; display:block; font-size:0.5em; margin:6px 0; }
  .scroll-cue{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
    width:1px; height:44px;
    background:linear-gradient(180deg, rgba(247,243,236,0.65), rgba(247,243,236,0));
  }
  .scroll-cue::after{
    content:''; position:absolute; left:-2px; top:0;
    width:5px; height:5px; border-radius:50%;
    background:rgba(247,243,236,0.9);
    animation:cue 2.8s ease-in-out infinite;
  }
  @keyframes cue{ 0%{ top:0; opacity:1; } 85%{ opacity:0; } 100%{ top:38px; opacity:0; } }

  section{ position:relative; }
  .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 32px; }

  /* ---------- INVITATION / STORY (split) ---------- */
  .split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; background:var(--ivory); }
  .split-media{ position:relative; overflow:hidden; min-height:520px; }
  .split-media img{
    width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
    transition:transform 1.8s var(--ease);
  }
  .split:hover .split-media img{ transform:scale(1.045); }
  .split-text{ display:flex; flex-direction:column; justify-content:center; padding:88px 74px; background:var(--ivory); }
  .split-text .eyebrow{ margin-bottom:22px; }
  .split-title{
    font-family:var(--font-head); font-weight:500;
    font-size:clamp(28px, 2.9vw, 40px);
    line-height:1.26; margin-bottom:22px; color:var(--graphite);
  }
  .split-body{ font-size:16px; line-height:1.9; color:var(--ink); font-weight:300; max-width:440px; }
  .split.reverse{ direction:rtl; }
  .split.reverse > *{ direction:ltr; }

  /* poem styling (legacy, kept for possible reuse) */
  .poem{ font-family:var(--font-body); font-style:italic; font-weight:400; font-size:16.5px; line-height:1.85; color:var(--ink); max-width:440px; }
  .poem p{ margin-bottom:20px; }
  .poem-sign{ margin-top:8px; font-style:normal; font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); }

  /* ---------- OUR STORY (text only) ---------- */
  .story{ background:var(--ivory); padding:90px 0 80px; }
  .story-wrap{ max-width:720px; text-align:center; }
  .story-wrap .eyebrow{ margin-bottom:22px; }
  .story-wrap .split-title{ margin-bottom:40px; }
  .story-text{ font-size:16.5px; line-height:1.95; color:var(--ink); font-weight:400; text-align:left; }
  .story-text p{ margin-bottom:24px; }
  .story-text .story-lead{ text-align:center; font-family:var(--font-head); font-size:19px; color:var(--graphite); margin:36px 0 30px; }
  .story-text .story-poem{
    font-style:italic; text-align:center; color:var(--graphite);
    font-size:17px; line-height:1.85; max-width:420px; margin:0 auto;
  }

  /* ---------- COUNTDOWN ---------- */
  .countdown{ background:var(--graphite); color:var(--paper); padding:130px 0; text-align:center; }
  .countdown .eyebrow{ margin-bottom:40px; }
  .countdown-grid{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; }
  .countdown-item{ min-width:84px; }
  .countdown-number{
    font-family:var(--font-head); font-weight:600;
    font-size:clamp(44px, 6.6vw, 72px); line-height:1;
    font-variant-numeric:tabular-nums; color:var(--paper);
  }
  .countdown-label{ margin-top:14px; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(247,243,236,0.65); }

  /* ---------- GALLERY DUO ---------- */
  .gallery-duo{ display:flex; min-height:64vh; background:var(--graphite); }
  .gallery-duo .gallery-item{ flex:1; position:relative; overflow:hidden; min-height:64vh; }
  .gallery-duo .gallery-item img{
    width:100%; height:100%; object-fit:cover; object-position:50% 30%;
    transform:scale(1.02); animation:kenburns 30s ease-in-out infinite alternate; opacity:.95;
  }

  /* ---------- MONOGRAM DIVIDER ---------- */
  .divider{ padding:60px 0; display:flex; flex-direction:column; align-items:center; background:var(--ivory); }
  .divider-line{ width:1px; height:64px; background:var(--hairline); margin-bottom:22px; }
  .monogram{ font-family:var(--font-script); font-weight:400; font-size:44px; color:var(--graphite); }
  .monogram .amp{ color:var(--stone); padding:0 .3em; font-style:normal; }

  /* ---------- THE DAY / RIBBON TIMELINE ---------- */
  .theday{ background:var(--paper); padding:90px 0 90px; }
  .theday-head{ text-align:center; margin-bottom:10px; }
  .theday-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(28px, 3vw, 40px); color:var(--graphite); margin-top:18px; }
  .ribbon-wrap{ position:relative; max-width:560px; margin:60px auto 0; }
  .ribbon-svg{ width:100%; height:auto; display:block; }
  .ribbon-path{ fill:none; stroke:var(--beige); stroke-width:2; stroke-linecap:round; }
  .ribbon-events{ position:absolute; inset:0; }
  .ribbon-event{
    position:absolute; width:35%;
    opacity:0; transform:translateY(14px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .ribbon-event.in{ opacity:1; transform:translateY(0); }
  .ribbon-dots{ position:absolute; inset:0; pointer-events:none; }
  .ribbon-dot{
    position:absolute; width:9px; height:9px; border-radius:50%;
    background:var(--graphite); transform:translate(-50%,-50%);
    opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .ribbon-dot.in{ opacity:1; }
  .ribbon-heart{
    position:absolute; width:16px; height:16px;
    transform:translate(-50%,-50%); opacity:0;
    transition:opacity .5s var(--ease);
    pointer-events:none;
  }
  .ribbon-heart svg{ width:100%; height:100%; display:block; overflow:visible; }
  .ribbon-heart svg path{ fill:var(--graphite); }
  .ribbon-heart.in{ opacity:1; }
  .ribbon-event.align-left{ left:0; text-align:right; padding-right:24px; }
  .ribbon-event.align-right{ right:0; text-align:left; padding-left:24px; }
  .ribbon-event-time{ font-family:var(--font-head); font-weight:600; font-size:19px; color:var(--graphite); margin-bottom:5px; }
  .ribbon-event-title{ font-family:var(--font-head); font-size:20px; color:var(--graphite); margin-bottom:6px; }
  .ribbon-event-desc{ font-size:15.5px; color:var(--ink); line-height:1.65; }

  /* ---------- LOCATION ---------- */
  .location{ background:var(--ivory); padding:0; }
  .location-media{ position:relative; height:52vh; min-height:400px; overflow:hidden; }
  .location-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
  .location-body{ max-width:640px; margin:0 auto; text-align:center; padding:86px 32px 100px; }
  .location-body .eyebrow{ margin-bottom:20px; }
  .location-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(28px,3vw,40px); color:var(--graphite); margin-bottom:18px; }
  .location-address{ font-size:16px; color:var(--stone); line-height:1.8; margin-bottom:40px; }
  .location-address strong{ font-family:var(--font-head); font-weight:500; color:var(--graphite); font-size:20px; display:block; margin-bottom:6px; }
  .map-frame{ width:100%; border:1px solid var(--hairline); margin-bottom:36px; height:320px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
    text-decoration:none; padding:17px 38px;
    border:1px solid var(--graphite); color:var(--graphite);
    transition:background .5s var(--ease), color .5s var(--ease), transform .4s var(--ease);
    background:transparent; cursor:pointer;
  }
  .btn:hover{ background:var(--graphite); color:var(--paper); transform:translateY(-2px); }
  .btn:focus-visible{ outline:2px solid var(--graphite); outline-offset:3px; }
  .btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; }

  /* ---------- RSVP ---------- */
  .rsvp{ background:var(--graphite); padding:0 0 70px; display:flex; justify-content:center; }
  .rsvp-card{
    background:var(--white); max-width:520px; width:calc(100% - 48px);
    margin-top:-80px; padding:56px 40px 40px;
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.35);
    text-align:center;
  }
  .rsvp-card .eyebrow{ margin-bottom:16px; }
  .rsvp-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(22px, 2.4vw, 28px); color:var(--graphite); margin-bottom:30px; line-height:1.35; }
  .rsvp-gform{ width:100%; border:none; display:block; }
  .rsvp-note{
    font-style:italic; font-size:14.5px; line-height:1.75; color:var(--ink);
    max-width:400px; margin:0 auto 30px;
  }
  .rsvp-datetime{
    font-family:var(--font-head); font-size:13px; letter-spacing:0.08em;
    color:var(--stone); background:var(--ivory); border:1px solid var(--hairline);
    padding:14px 16px; margin-bottom:30px; border-radius:2px;
  }

  /* ---------- CLOSING ---------- */
  .closing{ position:relative; height:92vh; min-height:560px; overflow:hidden; background:var(--graphite); }
  .closing img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:brightness(0.86); }
  .closing-scrim{ position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(18,16,14,0.5) 0%, rgba(18,16,14,0.05) 35%, rgba(18,16,14,0.55) 100%); }
  .closing-content{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; color:var(--paper); padding:64px 28px 84px; }
  .closing-top{ display:flex; flex-direction:column; align-items:center; }
  .closing-bottom{ display:flex; flex-direction:column; align-items:center; }
  .closing-line{ font-family:var(--font-head); font-weight:500; font-size:clamp(24px,3.2vw,34px); margin-bottom:10px; }
  .closing-date{
    display:inline-block;
    font-family:var(--font-head);
    font-size:13px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--paper);
    background:rgba(18,16,14,0.42);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border:1px solid rgba(247,243,236,0.25);
    padding:10px 24px;
    border-radius:999px;
    margin-bottom:34px;
  }
  .closing-names{ font-family:var(--font-script); font-weight:400; font-size:clamp(40px, 6vw, 76px); }
  .closing-amp{ font-style:italic; opacity:.85; padding:0 .2em; }

  /* ---------- CONTACT FOOTER ---------- */
  .contact-footer{ background:var(--ivory); text-align:center; padding:80px 32px 50px; }
  .contact-footer p{ font-size:15px; color:var(--stone); margin-bottom:14px; }
  .contact-footer a{ font-family:var(--font-head); font-size:19px; color:var(--graphite); text-decoration:none; }
  .contact-footer a:hover{ color:var(--stone); }

  .footer-meta{
    display:flex; justify-content:space-between;
    font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--stone); padding:30px 32px;
    max-width:var(--max-w); margin:0 auto;
    border-top:1px solid var(--hairline);
  }

  /* ---------- BACK TO TOP ---------- */
  .to-top{
    position:fixed; right:22px; bottom:22px; z-index:50;
    width:46px; height:46px; border-radius:50%;
    background:var(--graphite); color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-size:17px;
    opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
    box-shadow:0 10px 26px -10px rgba(0,0,0,0.45);
  }
  .to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .to-top:hover{ background:var(--ink); }
  .to-top:focus-visible{ outline:2px solid var(--graphite); outline-offset:3px; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 860px){
    .hero-media img{ object-position:22% 38%; }
    .split{ grid-template-columns:1fr; }
    .split-media{ min-height:64vw; }
    .split-text{ padding:60px 26px; }
    .split.reverse{ direction:ltr; }
    .split.reverse .split-media{ order:-1; }
    .countdown-grid{ gap:30px; }
    .countdown{ padding:100px 0; }
    .theday{ padding:70px 0 60px; }
    .story{ padding:70px 0 60px; }
    .divider{ padding:44px 0; }
    .rsvp{ padding:0 0 50px; }
    .gallery-duo{ flex-direction:column; }
    .gallery-duo .gallery-item{ min-height:52vw; }
    .location-body{ padding:64px 22px 84px; }
    .rsvp-card{ padding:44px 24px 34px; margin-top:-64px; }
    .footer-meta{ flex-direction:column; gap:10px; text-align:center; padding:26px 24px; }
    .ribbon-event{ width:42%; }
  }
  @media (max-width: 480px){
    .wrap{ padding:0 20px; }
    .ribbon-event-time,.ribbon-event-title{ font-size:16px; }
    .ribbon-event-desc{ font-size:14px; }
    .to-top{ width:44px; height:44px; right:16px; bottom:16px; }
    .rsvp-gform{ height:1085px; }
  }
</style>
</head>
<body>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-media"><img src="assets/hero-nikah.jpg" alt="Айгиз и Диляра"></div>
    <div class="hero-scrim"></div>
    <div class="hero-content">
      <div class="hero-top">
        <p class="hero-message">С радостью приглашаем Вас стать частью самого важного дня Нашей семьи.</p>
        <div class="hero-date">06 сентября 2026</div>
      </div>
      <div class="hero-bottom">
        <div class="hero-names">Айгиз<span class="hero-amp">&amp;</span>Диляра</div>
      </div>
    </div>
    <div class="scroll-cue"></div>
  </section>

  <!-- INVITATION -->
  <section class="split">
    <div class="split-media">
      <img src="assets/mosque.jpg" alt="Мечеть" loading="lazy">
    </div>
    <div class="split-text">
      <div class="eyebrow reveal">Дорогие родные и друзья</div>
      <h2 class="split-title reveal reveal-delay-1">Мы будем счастливы<br>разделить с Вами этот день.</h2>
      <p class="split-body reveal reveal-delay-2">
        Мы будем счастливы разделить с Вами радость Нашего никаха.
        Ваше присутствие станет для Нас самым ценным подарком
        и сделает этот день ещё теплее.
      </p>
    </div>
  </section>

  <!-- COUNTDOWN -->
  <section class="countdown">
    <div class="wrap">
      <div class="eyebrow on-dark reveal">До торжества осталось</div>
      <div class="countdown-grid reveal reveal-delay-1">
        <div class="countdown-item"><div class="countdown-number" id="cd-days">00</div><div class="countdown-label">дней</div></div>
        <div class="countdown-item"><div class="countdown-number" id="cd-hours">00</div><div class="countdown-label">часов</div></div>
        <div class="countdown-item"><div class="countdown-number" id="cd-min">00</div><div class="countdown-label">минут</div></div>
        <div class="countdown-item"><div class="countdown-number" id="cd-sec">00</div><div class="countdown-label">секунд</div></div>
      </div>
    </div>
  </section>

  <!-- GALLERY DUO -->
  <div class="gallery-duo">
    <div class="gallery-item"><img src="assets/gallery-palm.jpg" alt="Айгиз и Диляра" loading="lazy"></div>
    <div class="gallery-item"><img src="assets/gallery-tatar.jpg" alt="Айгиз и Диляра" loading="lazy"></div>
  </div>

  <!-- OUR STORY -->
  <section class="story">
    <div class="wrap story-wrap">
      <div class="eyebrow reveal">Наша история</div>
      <h2 class="split-title reveal reveal-delay-1" style="text-align:center;">Немного слов от Нас</h2>
      <div class="story-text reveal reveal-delay-2">
        <p>Давайте представим все вместе тот день, когда Мы с Вами только познакомились.
        Кого-то Мы знаем пару месяцев, кого-то пару лет, а кто-то с Нами уже
        на протяжении всей жизни.</p>

        <p>Удивительно, как быстро течёт время: вот только, вроде, Мы родились,
        только прогремел Наш первый «Первый класс», а вот Мы уже приглашаем
        Вас к Нашему алтарю.</p>

        <p>Но что же всё это объединяет? Вы — Наши дорогие родственники и друзья —
        были рядом на протяжении всего этого пути, и многие воспоминания связаны
        в первую очередь именно с Вами.</p>

        <p>Поэтому Мы хотели бы пригласить Вас стать частью этого важного для Нас
        события — ведь человек жив ровно до тех пор, пока жив последний,
        кто его помнит.</p>

        <p class="story-lead">А что же до Нас?</p>

        <p class="story-poem">
          Вы лишь представьте, что этот «праздник»<br>
          Нам всё же довелось свершить,<br>
          Прожив всё это, ещё не верим,<br>
          Ведь такова судьба — любить!
        </p>
      </div>
    </div>
  </section>

  <!-- MONOGRAM DIVIDER -->
  <div class="divider">
    <div class="divider-line reveal"></div>
    <div class="monogram reveal">А<span class="amp">&amp;</span>Д</div>
  </div>

  <!-- THE DAY : SIGNATURE RIBBON TIMELINE -->
  <section class="theday">
    <div class="theday-head wrap">
      <div class="eyebrow reveal">Как пройдёт этот вечер</div>
      <h2 class="theday-title reveal reveal-delay-1">Этот вечер</h2>
    </div>

    <div class="ribbon-wrap" id="ribbon-wrap">
      <svg class="ribbon-svg" viewBox="0 0 320 1080" preserveAspectRatio="xMidYMin meet">
        <path id="ribbonPath" class="ribbon-path"
          d="M150,50
             C185,110 195,140 190,246
             C185,352 125,372 130,442
             C135,512 197,532 192,638
             C187,744 123,764 128,834
             C133,904 193,924 188,1030" />
      </svg>
      <div class="ribbon-events">
        <div class="ribbon-event align-left" style="top:4.6%;">
          <div class="ribbon-event-time">15:30</div>
          <div class="ribbon-event-title">Сбор гостей</div>
          <div class="ribbon-event-desc">Встречаемся, обнимаемся и успеваем сделать первые общие фото</div>
        </div>
        <div class="ribbon-event align-right" style="top:22.8%;">
          <div class="ribbon-event-time">16:00</div>
          <div class="ribbon-event-title">Начало праздничного вечера</div>
          <div class="ribbon-event-desc">Первые тёплые слова и тосты от самых близких</div>
        </div>
        <div class="ribbon-event align-left" style="top:41%;">
          <div class="ribbon-event-title">Поздравления</div>
          <div class="ribbon-event-desc">Ваши искренние пожелания молодым</div>
        </div>
        <div class="ribbon-event align-right" style="top:59%;">
          <div class="ribbon-event-title">Праздничный ужин</div>
          <div class="ribbon-event-desc">Общий стол, музыка и танцы для всех гостей</div>
        </div>
        <div class="ribbon-event align-left" style="top:77%;">
          <div class="ribbon-event-title">Торт</div>
          <div class="ribbon-event-desc">Разрезаем торт — самый сладкий момент вечера</div>
        </div>
        <div class="ribbon-event align-right" style="top:95%;">
          <div class="ribbon-event-title">Завершение вечера</div>
          <div class="ribbon-event-desc">Тёплые объятия и слова на прощание</div>
        </div>
      </div>
      <div class="ribbon-dots" id="ribbon-dots">
        <span class="ribbon-dot" style="left:46.875%; top:4.63%;"></span>
        <span class="ribbon-dot" style="left:59.375%; top:22.78%;"></span>
        <span class="ribbon-dot" style="left:40.625%; top:40.93%;"></span>
        <span class="ribbon-dot" style="left:60%; top:59.07%;"></span>
        <span class="ribbon-dot" style="left:40%; top:77.22%;"></span>
        <span class="ribbon-dot" style="left:58.75%; top:95.37%;"></span>
      </div>
      <div class="ribbon-heart" id="ribbon-heart"><svg viewBox="0 0 32 29" xmlns="http://www.w3.org/2000/svg"><path d="M16 28.4C9.6 23.6 1 16.7 1 9.2 1 4.4 4.7 1 9.2 1c2.7 0 5.1 1.3 6.8 3.6C17.7 2.3 20.1 1 22.8 1 27.3 1 31 4.4 31 9.2c0 7.5-8.6 14.4-15 19.2z"/></svg></div>
    </div>
  </section>

  <!-- LOCATION -->
  <section class="location">
    <div class="location-media">
      <img src="assets/banquet.jpg" alt="Банкетный зал «Затлы»" loading="lazy">
    </div>
    <div class="location-body">
      <div class="eyebrow reveal">Ждём Вас</div>
      <h2 class="location-title reveal reveal-delay-1">«Затлы»</h2>
      <p class="location-address reveal reveal-delay-2">
        <strong>ул. Четаева, 58Г</strong>
        Казань
      </p>
      <iframe class="map-frame reveal reveal-delay-2"
        src="https://yandex.ru/map-widget/v1/?ll=49.114277%2C55.823440&z=16&pt=49.114277,55.823440,pm2rdl"
        loading="lazy" title="Карта — банкетный зал Затлы"></iframe>
      <a class="btn reveal reveal-delay-3" href="https://yandex.ru/maps/?rtext=~55.823440,49.114277&rtt=auto" target="_blank" rel="noopener">Построить маршрут</a>
    </div>
  </section>

  <!-- RSVP -->
  <section class="rsvp">
    <div class="rsvp-card reveal">
      <div class="eyebrow">RSVP</div>
      <h2 class="rsvp-title">Будете ли Вы<br>с Нами в этот день?</h2>
      <div class="rsvp-datetime">06 сентября 2026 · сбор гостей 15:30 · начало в 16:00</div>
      <p class="rsvp-note">Мы будем рады видеть Вас на Нашем празднике! Пожалуйста, обратите внимание, что формат Нашего мероприятия — только для взрослых.</p>
      <iframe class="rsvp-gform" src="https://docs.google.com/forms/d/e/1FAIpQLSe3Od2w3Yxvvz625ubnrHU6bo8IvJczg8haBgWVxoZa10SRgQ/viewform?embedded=true" width="100%" height="950" frameborder="0" marginheight="0" marginwidth="0">Загрузка…</iframe>
    </div>
  </section>

  <!-- CLOSING -->
  <section class="closing">
    <img src="assets/closing-car.jpg" alt="Айгиз и Диляра" loading="lazy">
    <div class="closing-scrim"></div>
    <div class="closing-content">
      <div class="closing-top">
        <div class="closing-line reveal">До встречи</div>
        <div class="closing-date reveal reveal-delay-1">6 сентября 2026 года</div>
      </div>
      <div class="closing-bottom">
        <div class="closing-names reveal reveal-delay-2">Айгиз<span class="closing-amp">&amp;</span>Диляра</div>
      </div>
    </div>
  </section>

  <!-- CONTACT -->
  <div class="contact-footer">
    <p>Если у Вас остались вопросы, Вы можете написать Нам</p>
    <a href="tel:+79872644880">+7 987 264-48-80</a>
  </div>

  <div class="footer-meta">
    <span>Казань, 2026</span>
    <span>Айгиз &amp; Диляра</span>
  </div>

  <a href="#top" class="to-top" id="toTop" aria-label="Наверх">↑</a>

<script>
  /* ---------- reveal on scroll ---------- */
  (function(){
    var els = document.querySelectorAll('.reveal');
    if(!('IntersectionObserver' in window)){
      els.forEach(function(el){ el.classList.add('in'); });
      return;
    }
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if(entry.isIntersecting){
          entry.target.classList.add('in');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.16, rootMargin: '0px 0px -6% 0px' });
    els.forEach(function(el){ io.observe(el); });
  })();

  /* ---------- countdown ---------- */
  (function(){
    var target = new Date("2026-09-06T16:00:00+03:00").getTime();
    function tick(){
      var now = Date.now();
      var diff = Math.max(0, target - now);
      var d = Math.floor(diff / 86400000);
      var h = Math.floor((diff % 86400000) / 3600000);
      var m = Math.floor((diff % 3600000) / 60000);
      var s = Math.floor((diff % 60000) / 1000);
      var pad = function(n){ return String(n).padStart(2,'0'); };
      document.getElementById('cd-days').textContent = pad(d);
      document.getElementById('cd-hours').textContent = pad(h);
      document.getElementById('cd-min').textContent = pad(m);
      document.getElementById('cd-sec').textContent = pad(s);
    }
    tick();
    setInterval(tick, 1000);
  })();

  /* ---------- ribbon timeline draw-on-scroll ---------- */
  (function(){
    var path = document.getElementById('ribbonPath');
    var wrap = document.getElementById('ribbon-wrap');
    var heart = document.getElementById('ribbon-heart');
    if(!path || !wrap) return;
    var len = path.getTotalLength();
    path.style.strokeDasharray = len;
    path.style.strokeDashoffset = len;

    var events = Array.prototype.slice.call(document.querySelectorAll('.ribbon-event'));
    var dots = Array.prototype.slice.call(document.querySelectorAll('.ribbon-dot'));
    var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if(reduced){
      path.style.strokeDashoffset = 0;
      events.forEach(function(ev){ ev.classList.add('in'); });
      dots.forEach(function(d){ d.classList.add('in'); });
      if(heart){
        var end = path.getPointAtLength(len);
        heart.style.left = (end.x / 320 * 100) + '%';
        heart.style.top = (end.y / 1080 * 100) + '%';
        heart.classList.add('in');
      }
      return;
    }

    function update(){
      var rect = wrap.getBoundingClientRect();
      var vh = window.innerHeight;
      var total = rect.height + vh * 0.32;
      var passed = vh - rect.top;
      var progress = Math.min(1, Math.max(0, passed / total));
      path.style.strokeDashoffset = len * (1 - progress);

      events.forEach(function(ev, i){
        var threshold = (i / (events.length - 1)) * 0.94;
        if(progress > threshold){ ev.classList.add('in'); }
      });
      dots.forEach(function(d, i){
        var threshold = (i / (dots.length - 1)) * 0.94;
        if(progress > threshold){ d.classList.add('in'); } else { d.classList.remove('in'); }
      });

      if(heart){
        if(progress > 0.005){
          var point = path.getPointAtLength(len * progress);
          heart.style.left = (point.x / 320 * 100) + '%';
          heart.style.top = (point.y / 1080 * 100) + '%';
          heart.classList.add('in');
        } else {
          heart.classList.remove('in');
        }
      }
    }
    var ticking = false;
    window.addEventListener('scroll', function(){
      if(!ticking){
        requestAnimationFrame(function(){ update(); ticking = false; });
        ticking = true;
      }
    }, { passive:true });
    window.addEventListener('resize', update);
    update();
  })();

  /* ---------- back to top ---------- */
  (function(){
    var btn = document.getElementById('toTop');
    window.addEventListener('scroll', function(){
      if(window.scrollY > 700){ btn.classList.add('show'); }
      else{ btn.classList.remove('show'); }
    }, { passive:true });
  })();
</script>

</body>
</html>