/* Self-hosted Google Fonts (Caveat, Comfortaa) */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Caveat-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Caveat-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Caveat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Caveat-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Caveat-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Caveat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Comfortaa-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Comfortaa-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Comfortaa-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Comfortaa-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Comfortaa-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Comfortaa-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Comfortaa-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Comfortaa-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Comfortaa-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Comfortaa-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Comfortaa-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Comfortaa-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
      --pink: #ff6b9d;
      --pink-deep: #e84a8a;
      --lavender: #a78bfa;
      --gold: #f7c948;
      --ink: #3d2c4e;
      --card: rgba(255, 255, 255, .75);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Comfortaa', system-ui, sans-serif;
      color: var(--ink);
      background: linear-gradient(-45deg, #ffe0f0, #f3e7ff, #e0f2ff, #fff0e0);
      background-size: 400% 400%;
      animation: bgShift 18s ease infinite;
      overflow-x: hidden;
      min-height: 100vh;
    }

    @keyframes bgShift {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    #hearts {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none
    }

    #confetti {
      position: fixed;
      inset: 0;
      z-index: 60;
      pointer-events: none
    }

    .blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(70px);
      opacity: .5;
      z-index: 0;
      animation: blobFloat 14s ease-in-out infinite alternate;
    }

    .blob.b1 {
      width: 420px;
      height: 420px;
      background: #ffb3d1;
      top: -120px;
      left: -120px
    }

    .blob.b2 {
      width: 380px;
      height: 380px;
      background: #c9b6ff;
      bottom: -100px;
      right: -100px;
      animation-delay: -5s
    }

    .blob.b3 {
      width: 300px;
      height: 300px;
      background: #ffe29a;
      top: 40%;
      right: 8%;
      animation-delay: -9s
    }

    @keyframes blobFloat {
      from {
        transform: translate(0, 0) scale(1)
      }

      to {
        transform: translate(40px, -30px) scale(1.12)
      }
    }

    .wrap {
      position: relative;
      z-index: 1
    }

    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 24px;
      position: relative;
    }

    .crown {
      font-size: 64px;
      animation: bounce 2.4s ease-in-out infinite;
      filter: drop-shadow(0 6px 12px rgba(232, 74, 138, .35))
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0) rotate(-6deg)
      }

      50% {
        transform: translateY(-14px) rotate(6deg)
      }
    }

    .hero-pre {
      font-family: 'Caveat', cursive;
      font-size: clamp(22px, 3.4vw, 32px);
      color: var(--pink-deep);
      margin: 14px 0 6px;
      letter-spacing: .5px;
    }

    h1 {
      font-size: clamp(42px, 8.5vw, 96px);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -.5px;
    }

    .name {
      background: linear-gradient(90deg, #ff6b9d, #a78bfa, #f7c948, #ff6b9d);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: shine 6s linear infinite;
      font-family: 'Caveat', cursive;
      font-size: clamp(56px, 11vw, 128px);
      font-weight: 700;
    }

    @keyframes shine {
      to {
        background-position: 300% 0
      }
    }

    .hero-sub {
      max-width: 620px;
      margin: 22px auto 0;
      font-size: clamp(15px, 2vw, 19px);
      line-height: 1.7;
      color: #6b5580;
    }

    .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 34px
    }

    .btn {
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-weight: 700;
      font-size: 16px;
      padding: 16px 30px;
      border-radius: 999px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: transform .25s, box-shadow .25s;
    }

    .btn.primary {
      background: linear-gradient(135deg, var(--pink), var(--lavender));
      color: #fff;
      box-shadow: 0 10px 26px rgba(232, 74, 138, .4);
    }

    .btn.primary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 16px 34px rgba(232, 74, 138, .5)
    }

    .btn.ghost {
      background: rgba(255, 255, 255, .7);
      color: var(--pink-deep);
      border: 2px solid #ffc2da;
    }

    .btn.ghost:hover {
      transform: translateY(-3px);
      background: #fff
    }

    .scroll-hint {
      position: absolute;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 26px;
      animation: hint 1.6s ease-in-out infinite;
      color: var(--pink-deep);
    }

    @keyframes hint {

      0%,
      100% {
        transform: translate(-50%, 0)
      }

      50% {
        transform: translate(-50%, 10px)
      }
    }

    .ribbon {
      overflow: hidden;
      background: linear-gradient(90deg, var(--pink), var(--lavender));
      padding: 12px 0;
      transform: rotate(-1.2deg) scale(1.02);
      box-shadow: 0 8px 24px rgba(167, 139, 250, .35);
    }

    .ribbon-track {
      display: flex;
      gap: 0;
      white-space: nowrap;
      animation: marquee 22s linear infinite;
      width: max-content
    }

    .ribbon span {
      color: #fff;
      font-family: 'Caveat', cursive;
      font-size: 26px;
      padding: 0 18px;
      letter-spacing: 1px;
    }

    @keyframes marquee {
      to {
        transform: translateX(-50%)
      }
    }

    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 90px 24px;
      text-align: center
    }

    h2 {
      font-size: clamp(30px, 5vw, 48px);
      font-weight: 700;
      margin-bottom: 10px
    }

    .section-sub {
      color: #6b5580;
      font-size: 17px;
      margin-bottom: 48px;
      line-height: 1.6
    }

    .section h2 .accent {
      font-family: 'Caveat', cursive;
      color: var(--pink-deep)
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 34px 26px;
      justify-items: center;
    }

    .polaroid {
      background: #fff;
      padding: 14px;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 12px 32px rgba(61, 44, 78, .16);
      transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
      width: 100%;
      max-width: 300px;
      opacity: 0;
      transform: translateY(40px) rotate(var(--tilt, 0deg)) scale(.96);
    }

    .polaroid.visible {
      opacity: 1;
      transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1)
    }

    .polaroid:hover {
      transform: translateY(-10px) rotate(0deg) scale(1.04) !important;
      box-shadow: 0 24px 48px rgba(61, 44, 78, .28);
      z-index: 2
    }

    .polaroid:nth-child(odd) {
      --tilt: -2.5deg
    }

    .polaroid:nth-child(even) {
      --tilt: 2.5deg
    }

    .polaroid .ph {
      aspect-ratio: 3/4;
      overflow: hidden;
      border-radius: 4px;
      background: #f3e7f5;
    }

    .polaroid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .6s
    }

    .polaroid:hover img {
      transform: scale(1.07)
    }

    .tape {
      width: 90px;
      height: 26px;
      background: rgba(247, 201, 72, .75);
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%) rotate(-4deg);
      border-radius: 2px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }

    .wish-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 22px;
    }

    .wish {
      background: var(--card);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 24px;
      padding: 30px 26px;
      text-align: left;
      box-shadow: 0 10px 30px rgba(61, 44, 78, .1);
      transition: transform .3s, box-shadow .3s;
      opacity: 0;
      transform: translateY(30px);
    }

    .wish.visible {
      opacity: 1;
      transform: none;
      transition: opacity .7s, transform .7s, box-shadow .3s
    }

    .wish:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 20px 40px rgba(61, 44, 78, .18)
    }

    .wish .ico {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 28px;
      margin-bottom: 16px;
      background: linear-gradient(135deg, #ffe0f0, #e9dcff);
    }

    .wish h3 {
      font-size: 19px;
      margin-bottom: 8px
    }

    .wish p {
      font-size: 14.5px;
      line-height: 1.65;
      color: #6b5580
    }

    .final {
      padding-bottom: 60px
    }

    .final p {
      max-width: 640px;
      margin: 0 auto 36px;
      font-size: clamp(16px, 2.2vw, 20px);
      line-height: 1.8;
      color: #5a4470
    }

    .big-heart {
      font-size: 70px;
      display: inline-block;
      animation: beat 1.4s ease-in-out infinite;
      margin-bottom: 10px
    }

    @keyframes beat {

      0%,
      100% {
        transform: scale(1)
      }

      25% {
        transform: scale(1.15)
      }

      40% {
        transform: scale(1)
      }

      55% {
        transform: scale(1.12)
      }
    }

    footer {
      text-align: center;
      padding: 34px 20px 44px;
      color: #8a76a0;
      font-size: 14px;
      position: relative;
      z-index: 1;
    }

    footer .h {
      color: var(--pink-deep)
    }

    #lightbox {
      position: fixed;
      inset: 0;
      background: rgba(30, 18, 40, .9);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 70;
      padding: 20px;
    }

    #lightbox.open {
      display: flex
    }

    #lightbox img {
      max-width: min(92vw, 560px);
      max-height: 86vh;
      border-radius: 14px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
      animation: pop .35s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes pop {
      from {
        transform: scale(.85);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    .lb-btn {
      position: fixed;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .3);
      color: #fff;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      font-size: 22px;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .25s;
      user-select: none;
    }

    .lb-btn:hover {
      background: rgba(255, 255, 255, .3)
    }

    .lb-close {
      top: 22px;
      right: 22px
    }

    .lb-prev {
      left: 18px;
      top: 50%;
      transform: translateY(-50%)
    }

    .lb-next {
      right: 18px;
      top: 50%;
      transform: translateY(-50%)
    }

    .reveal {
      opacity: 0;
      transform: translateY(34px);
      transition: opacity .9s ease, transform .9s ease
    }

    .reveal.visible {
      opacity: 1;
      transform: none
    }

    @media (max-width:560px) {
      .gallery {
        gap: 26px 16px
      }

      .btn {
        padding: 14px 24px;
        font-size: 15px
      }
    }