/* =====================================================
   RESET
===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #fff5f8;
    color: #633b4b;
    font-family: "Cormorant Garamond", serif;
    overflow-x: hidden;
}

button,
input {
    font-family: inherit;
}


/* =====================================================
   LOCK SCREEN
===================================================== */

#lockScreen {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at center,
            #fffafd 0%,
            #ffe3ed 45%,
            #e99ab7 100%
        );

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

#lockScreen.unlocked {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lock-container {
    text-align: center;
    padding: 25px;
    animation: lockAppear 1.2s ease;
}


/* LOCK */

.lock {
    position: relative;
    width: 105px;
    height: 120px;
    margin: auto;
}

.lock-shackle {
    position: absolute;

    width: 58px;
    height: 62px;

    left: 23px;
    top: 0;

    border: 10px solid #963e64;
    border-bottom: 0;

    border-radius: 35px 35px 0 0;
}

.lock-body {
    position: absolute;

    width: 82px;
    height: 68px;

    left: 11px;
    bottom: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #ce6d92,
            #963e64
        );

    box-shadow:
        0 15px 35px rgba(120,40,75,.3);
}

.keyhole {
    position: absolute;

    width: 15px;
    height: 15px;

    top: 17px;
    left: 33px;

    border-radius: 50%;
    background: #ffeaf1;
}

.keyhole::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 18px;

    top: 10px;
    left: 4px;

    background: #ffeaf1;
}


/* LOCK TEXT */

.lock-title {
    font-family: "Great Vibes", cursive;

    font-size: 65px;

    color: #963e64;

    margin-top: 20px;
}

.lock-subtitle {
    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    letter-spacing: 4px;
    text-transform: uppercase;

    opacity: .65;

    margin: 5px 0 30px;
}


/* CODE */

.code-input {
    width: 230px;

    padding: 15px;

    border: 1px solid #d99ab1;

    border-radius: 40px;

    outline: none;

    text-align: center;

    font-family: "Montserrat", sans-serif;

    font-size: 20px;

    letter-spacing: 7px;

    color: #71394f;

    background: rgba(255,255,255,.9);
}

.code-input:focus {
    box-shadow:
        0 0 25px rgba(190,80,120,.2);
}

.unlock-button {
    display: block;

    margin: 15px auto;

    padding: 14px 32px;

    border: none;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #a74369,
            #df789f
        );

    color: white;

    font-family: "Montserrat", sans-serif;

    cursor: pointer;

    transition: .3s;
}

.unlock-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(150,50,90,.3);
}

#error {
    min-height: 20px;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    color: #a92f5a;
}


/* =====================================================
   MUSIC BUTTON
===================================================== */

.music-control {
    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 52px;
    height: 52px;

    border: none;
    border-radius: 50%;

    background: rgba(150,62,100,.9);

    color: white;

    font-size: 21px;

    cursor: pointer;

    z-index: 5000;

    box-shadow:
        0 8px 25px rgba(80,20,50,.25);

    transition: .3s;
}

.music-control:hover {
    transform: scale(1.1);
}


/* =====================================================
   HERO
===================================================== */

.hero {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 30px 20px;

    position: relative;

    background:
        radial-gradient(
            circle at center,
            #fffafd 0%,
            #ffe4ed 40%,
            #f1aec6 100%
        );

    overflow: hidden;
}

.hero-small {
    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    letter-spacing: 5px;

    text-transform: uppercase;

    opacity: .65;
}

.hero h1 {
    font-family: "Great Vibes", cursive;

    font-size: clamp(70px, 13vw, 130px);

    color: #963e64;

    text-shadow:
        0 8px 25px rgba(150,62,100,.15);

    animation:
        floating 4s ease-in-out infinite;
}

.hero p {
    font-size: 22px;
}


/* =====================================================
   FLOWER CIRCLE
===================================================== */

.flower-circle {
    width: 410px;
    height: 410px;

    max-width: 90vw;
    max-height: 90vw;

    position: relative;

    margin: 5px 0 20px;
}

.flower {
    position: absolute;

    width: 65px;
    height: 65px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%,-50%)
        rotate(var(--angle))
        translateY(-155px);

    animation:
        orbit 22s linear infinite;
}

.flower-inner {
    width: 100%;
    height: 100%;

    animation:
        reverseOrbit 22s linear infinite;
}

.petal {
    position: absolute;

    width: 28px;
    height: 42px;

    top: 2px;
    left: 18px;

    border-radius:
        50% 50% 45% 45%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f39bbb
        );

    transform-origin: 50% 100%;

    box-shadow:
        0 0 12px rgba(255,160,190,.35);
}

.petal:nth-child(1) {
    transform: rotate(0deg);
}

.petal:nth-child(2) {
    transform: rotate(72deg);
}

.petal:nth-child(3) {
    transform: rotate(144deg);
}

.petal:nth-child(4) {
    transform: rotate(216deg);
}

.petal:nth-child(5) {
    transform: rotate(288deg);
}

.flower-center {
    position: absolute;

    width: 20px;
    height: 20px;

    top: 23px;
    left: 23px;

    border-radius: 50%;

    background: #f2bd63;

    box-shadow:
        0 0 18px #ffd98a;
}

.center-heart {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%,-50%);

    font-size: 68px;

    filter:
        drop-shadow(
            0 8px 15px
            rgba(180,50,90,.2)
        );

    animation:
        heartbeat 1.8s infinite;
}


/* =====================================================
   SECTIONS
===================================================== */

section {
    padding: 100px 20px;
}

.section-label {
    text-align: center;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    letter-spacing: 4px;

    text-transform: uppercase;

    opacity: .6;
}

.section-title {
    text-align: center;

    font-family: "Great Vibes", cursive;

    font-size: 68px;

    color: #963e64;

    margin-bottom: 45px;
}


/* =====================================================
   STORY
===================================================== */

.story {
    max-width: 720px;

    margin: auto;

    text-align: center;

    font-size: 22px;

    line-height: 1.85;
}

.story-date {
    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    letter-spacing: 3px;

    color: #a8466c;

    margin-bottom: 15px;
}

.story-heart {
    font-size: 35px;

    margin: 20px 0;
}


/* =====================================================
   MEMORIES
===================================================== */

.memories {
    background:
        linear-gradient(
            180deg,
            #fff,
            #fff5f8
        );
}

.memory-intro {
    max-width: 650px;

    margin:
        -25px auto 40px;

    text-align: center;

    font-size: 20px;
}


/* =====================================================
   PHOTO SLIDER
===================================================== */

.slider {
    position: relative;

    width: 100%;
    max-width: 900px;

    margin: auto;

    overflow: hidden;

    border-radius: 25px;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            #ffe9f0,
            #fff
        );

    box-shadow:
        0 25px 70px
        rgba(100,40,60,.15);
}

.slides {
    display: flex;

    width: 100%;

    transition:
        transform .8s
        cubic-bezier(.77,0,.18,1);
}

.slide {
    min-width: 100%;
    width: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 10px 40px;
}


/* =====================================================
   PHOTO
===================================================== */

.single-photo {
    width: min(650px, 85vw);

    padding:
        15px 15px 25px;

    background: #ffffff;

    box-shadow:
        0 20px 50px
        rgba(100,40,60,.18);

    border-radius: 5px;

    overflow: hidden;

    transform: rotate(-1.5deg);

    transition: .5s;
}

.slide:nth-child(even)
.single-photo {
    transform: rotate(1.5deg);
}

.single-photo:hover {
    transform:
        rotate(0deg)
        scale(1.015);
}


/* THIS IS THE IMPORTANT PHOTO PART */

.single-photo img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height: 650px;

    object-fit: contain;

    margin: 0 auto;

    background: #f8e8ee;
}


/* IF IMAGE FAILS */

.photo-error {
    display: none;

    padding: 50px 20px;

    text-align: center;

    font-family: "Montserrat", sans-serif;

    color: #963e64;

    font-size: 14px;
}

.memory-caption {
    text-align: center;

    font-family: "Great Vibes", cursive;

    font-size: 30px;

    color: #963e64;

    padding-top: 15px;
}


/* =====================================================
   SLIDER BUTTONS
===================================================== */

.slider-button {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.95);

    color: #963e64;

    font-size: 28px;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 5px 20px
        rgba(100,30,60,.12);

    transition: .3s;
}

.slider-button:hover {
    transform:
        translateY(-50%)
        scale(1.1);
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}


/* DOTS */

.dots {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 20px;
}

.dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #dba5b9;

    cursor: pointer;

    transition: .3s;
}

.dot.active {
    background: #963e64;

    transform: scale(1.5);
}


/* =====================================================
   LOVE LETTER
===================================================== */

.letter-section {
    background:
        linear-gradient(
            135deg,
            #fff5f8,
            #fbd8e5
        );
}

.letter {
    max-width: 760px;

    margin: auto;

    padding: 60px;

    position: relative;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 25px 65px
        rgba(100,30,60,.12);

    border-radius: 5px;
}

.letter::before {
    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px solid
        rgba(170,70,100,.2);

    pointer-events: none;
}

.letter h3 {
    text-align: center;

    font-family:
        "Great Vibes",
        cursive;

    font-size: 62px;

    color: #963e64;

    margin-bottom: 30px;
}

.letter p {
    font-size: 20px;

    line-height: 1.9;

    margin-bottom: 18px;
}

.letter-opening {
    font-family:
        "Great Vibes",
        cursive;

    font-size:
        34px !important;

    color: #963e64;
}

.signature {
    text-align: right;

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        44px !important;

    color: #963e64;

    margin-top: 30px;
}


/* =====================================================
   FINAL
===================================================== */

.final {
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 80px 25px;

    background:
        radial-gradient(
            circle at center,
            #fff0f5,
            #e9a2ba
        );

    position: relative;

    overflow: hidden;
}

.final-heart {
    font-size: 75px;

    animation:
        heartbeatFinal 1.5s infinite;
}

.final h2 {
    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(70px,11vw,125px);

    color: #963e64;

    margin: 10px 0;
}

.infinity {
    font-size: 75px;

    color: #963e64;

    margin: 5px 0 20px;

    animation:
        infinityGlow 3s
        ease-in-out infinite;
}

.final-message {
    max-width: 720px;

    font-size: 24px;

    line-height: 1.8;
}

.final-signature {
    font-family:
        "Great Vibes",
        cursive;

    font-size: 46px;

    color: #963e64;

    margin-top: 30px;
}

.final-date {
    margin-top: 30px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    opacity: .6;
}


/* =====================================================
   FLOATING HEARTS
===================================================== */

.heart {
    position: fixed;

    bottom: -40px;

    pointer-events: none;

    z-index: 1000;

    animation:
        rise linear forwards;
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes lockAppear {
    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(.95);
    }

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

@keyframes orbit {
    from {
        transform:
            translate(-50%,-50%)
            rotate(var(--angle))
            translateY(-155px);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(
                calc(var(--angle) + 360deg)
            )
            translateY(-155px);
    }
}

@keyframes reverseOrbit {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes heartbeat {
    0%,100% {
        transform:
            translate(-50%,-50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%,-50%)
            scale(1.18);
    }
}

@keyframes heartbeatFinal {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes floating {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes infinityGlow {
    0%,100% {
        opacity: .65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes rise {
    from {
        transform:
            translateY(0)
            rotate(0deg);

        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    to {
        transform:
            translateY(-110vh)
            rotate(30deg);

        opacity: 0;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px) {

    .lock-title {
        font-size: 55px;
    }

    .hero h1 {
        font-size: 72px;
    }

    .hero p {
        font-size: 19px;
    }

    .flower-circle {
        width: 330px;
        height: 330px;
    }

    .flower {
        transform:
            translate(-50%,-50%)
            rotate(var(--angle))
            translateY(-120px);
    }

    .section-title {
        font-size: 53px;
    }

    section {
        padding: 80px 15px;
    }

    .story {
        font-size: 19px;
    }

    .slider {
        padding: 10px;
    }

    .slide {
        padding:
            20px 35px;
    }

    .single-photo {
        width: 82vw;

        padding:
            10px 10px 18px;
    }

    .single-photo img {
        max-height: 500px;
    }

    .memory-caption {
        font-size: 24px;
    }

    .slider-button {
        width: 40px;
        height: 40px;

        font-size: 23px;
    }

    .prev {
        left: 8px;
    }

    .next {
        right: 8px;
    }

    .letter {
        padding:
            45px 25px;
    }

    .letter h3 {
        font-size: 50px;
    }

    .letter p {
        font-size: 18px;
    }

    .signature {
        font-size:
            38px !important;
    }
        font-size: 19px;
    }

    .final-message {
        font-size: 20px;
    }

    .final-signature {
        font-size: 40px;
    }

    .music-control {
        width: 46px;
        height: 46px;

        right: 15px;
        bottom: 15px;
    }
}


    .love-timer {
      padding: 28px 20px 34px;
      text-align: center;
    }
    .timer-inner {
      max-width: 900px;
      margin: 0 auto;
      padding: 28px 20px;
      border-radius: 28px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 12px 40px rgba(0,0,0,.12);
      backdrop-filter: blur(10px);
    }
    .timer-kicker {
      margin: 0 0 8px;
      opacity: .8;
      font-size: .95rem;
    }
    .love-timer h2 {
      margin: 0 0 22px;
    }
    .timer-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }
    .timer-unit {
      padding: 14px 8px;
      border-radius: 18px;
      background: rgba(255,255,255,.08);
    }
    .timer-unit span {
      display: block;
      font-size: clamp(1.5rem, 4vw, 2.4rem);
      line-height: 1;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .timer-unit small {
      display: block;
      margin-top: 7px;
      opacity: .75;
      font-size: .78rem;
    }
    .timer-start {
      margin: 18px 0 0;
      opacity: .65;
      font-size: .82rem;
    }
    @media (max-width: 640px) {
      .timer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .timer-unit:last-child {
        grid-column: 1 / -1;
      }
    }

/* --- Улучшения таймера --- */
.love-timer .timer-inner {
  overflow: hidden;
}

.love-timer .timer-grid {
  align-items: stretch;
}

.love-timer .timer-unit {
  position: relative;
  min-width: 0;
  padding: 18px 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(8px);
}

.love-timer .timer-unit span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55em;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.love-timer .timer-unit small {
  margin-top: 9px;
}

/* --- Anniversary additions --- */
img {
  max-width: 100%;
  height: auto;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  .love-timer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .love-timer .timer-inner {
    padding: 22px 12px;
    border-radius: 22px;
  }

  .love-timer .timer-grid {
    gap: 8px;
  }

  .love-timer .timer-unit {
    padding: 13px 7px 12px;
    border-radius: 16px;
  }

  .love-timer .timer-unit span {
    padding: 7px 4px;
    border-radius: 11px;
  }
}



/* =====================================================
   ANNIVERSARY REDESIGN
===================================================== */

:root {
    --wine: #963e64;
    --wine-dark: #71334f;
    --rose: #df789f;
    --cream: #fff8fb;
    --ink: #633b4b;
    --line: rgba(150, 62, 100, .16);
}

html {
    scroll-padding-top: 20px;
}

body {
    background: var(--cream);
}

/* Music */
.music-control {
    transition: transform .3s, box-shadow .3s, background .3s;
}

.music-control.is-playing {
    box-shadow: 0 0 0 7px rgba(150,62,100,.08), 0 8px 25px rgba(80,20,50,.25);
    animation: musicPulse 2s ease-in-out infinite;
}

.music-status {
    position: fixed;
    right: 82px;
    bottom: 28px;
    z-index: 4999;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 25px rgba(80,20,50,.12);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--wine);
    opacity: .82;
    pointer-events: none;
}

/* Hero */
.hero {
    min-height: 100vh;
    padding-bottom: 80px;
}

.hero-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--wine);
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .65;
    transition: .3s;
}

.hero-scroll:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.scroll-arrow {
    font-size: 18px;
    animation: scrollBounce 1.8s ease-in-out infinite;
}

/* Timer */
.love-timer {
    position: relative;
    padding: 110px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.95), transparent 35%),
        linear-gradient(135deg, #f7c4d5, #e99ab7 55%, #fbdde7);
}

.love-timer::before,
.love-timer::after {
    content: "♡";
    position: absolute;
    font-family: "Great Vibes", cursive;
    font-size: 190px;
    color: rgba(255,255,255,.25);
    pointer-events: none;
}

.love-timer::before { left: -35px; top: 15px; transform: rotate(-15deg); }
.love-timer::after { right: -25px; bottom: -30px; transform: rotate(15deg); }

.timer-inner {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 35px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 35px;
    background: rgba(255,255,255,.22);
    box-shadow: 0 25px 70px rgba(100,40,60,.13);
    backdrop-filter: blur(16px);
}

.timer-kicker {
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .65;
}

.love-timer h2 {
    margin: 0;
    font-family: "Great Vibes", cursive;
    font-size: clamp(50px, 7vw, 78px);
    color: var(--wine);
}

.anniversary-number {
    margin: -3px 0 20px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(50px, 8vw, 85px);
    font-weight: 600;
    color: var(--wine);
    line-height: 1;
}

.anniversary-number span {
    font-size: .32em;
    font-weight: 400;
    letter-spacing: 2px;
}

.timer-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    max-width: 850px;
    margin: 25px auto 0;
}

.timer-unit {
    padding: 18px 10px 14px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 20px;
    background: rgba(255,255,255,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.timer-unit span {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.8rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wine-dark);
}

.timer-unit small {
    display: block;
    margin-top: 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .65;
}

.timer-start {
    margin: 22px 0 0;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    opacity: .6;
}

.timer-note {
    margin: 22px auto 0;
    font-family: "Great Vibes", cursive;
    font-size: 31px;
    color: var(--wine);
}

/* Common section intro */
.section-intro {
    max-width: 680px;
    margin: -25px auto 50px;
    text-align: center;
    font-size: 21px;
    line-height: 1.7;
    opacity: .8;
}

/* Timeline */
.timeline-section {
    background: linear-gradient(180deg, #fffafd, #fff2f7);
}

.timeline {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line) 10%, var(--line) 90%, transparent);
}

.timeline-item {
    position: relative;
    display: flex;
    width: 50%;
    padding: 18px 50px 18px 0;
}

.timeline-item:nth-child(even) {
    margin-left: 50%;
    padding: 18px 0 18px 50px;
}

.timeline-dot {
    position: absolute;
    z-index: 2;
    top: 35px;
    right: -19px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 5px solid #fff7fa;
    border-radius: 50%;
    background: var(--wine);
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    box-shadow: 0 5px 18px rgba(150,62,100,.2);
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -19px;
    right: auto;
}

.timeline-card {
    width: 100%;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 15px 45px rgba(100,40,60,.08);
    transition: transform .35s, box-shadow .35s;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(100,40,60,.13);
}

.timeline-date {
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--wine);
    opacity: .7;
}

.timeline-card h3 {
    margin: 7px 0 10px;
    font-family: "Great Vibes", cursive;
    font-size: 40px;
    font-weight: 400;
    color: var(--wine);
}

.timeline-card p {
    font-size: 18px;
    line-height: 1.65;
}

/* Memories */
.memories {
    padding-top: 110px;
}

.slider-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 12px;
    padding: 0 8px;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--wine);
    opacity: .65;
}

.slider-heading strong {
    font-weight: 500;
}

/* Reasons */
.reasons-section {
    background: linear-gradient(135deg, #fdf0f5, #fff);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}

.reason-card {
    position: relative;
    min-height: 250px;
    padding: 30px 24px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 25px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 15px 45px rgba(100,40,60,.07);
    overflow: hidden;
    transition: transform .35s, box-shadow .35s;
}

.reason-card::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -60px;
    bottom: -60px;
    border-radius: 50%;
    background: rgba(223,120,159,.08);
}

.reason-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 60px rgba(100,40,60,.12);
}

.reason-card > span {
    position: absolute;
    left: 18px;
    top: 15px;
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    opacity: .4;
}

.reason-card > div {
    margin: 12px 0 8px;
    font-size: 32px;
}

.reason-card h3 {
    margin-bottom: 8px;
    font-family: "Great Vibes", cursive;
    font-size: 38px;
    font-weight: 400;
    color: var(--wine);
}

.reason-card p {
    font-size: 17px;
    line-height: 1.55;
    opacity: .8;
}

/* Secret */
.secret-section {
    padding: 110px 20px;
    background:
        radial-gradient(circle at center, #fff, #ffe9f1);
}

.secret-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 35px;
    text-align: center;
    border: 1px solid rgba(150,62,100,.13);
    border-radius: 35px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 25px 75px rgba(100,40,60,.1);
}

.secret-icon {
    font-size: 52px;
    margin-bottom: 12px;
}

.secret-kicker {
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .6;
}

.secret-card h2 {
    margin: 8px 0 24px;
    font-family: "Great Vibes", cursive;
    font-size: 62px;
    font-weight: 400;
    color: var(--wine);
}

.secret-button {
    border: 0;
    border-radius: 40px;
    padding: 14px 30px;
    background: linear-gradient(135deg, var(--wine), var(--rose));
    color: white;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(150,62,100,.2);
    transition: transform .3s, box-shadow .3s;
}

.secret-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(150,62,100,.25);
}

.secret-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: .8s ease;
    opacity: 0;
}

.secret-content > * {
    overflow: hidden;
}

.secret-card.opened .secret-content {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 28px;
}

.secret-content p,
.secret-content strong {
    font-size: 19px;
    line-height: 1.7;
}

.secret-content strong {
    display: block;
    margin: 10px 0;
    font-family: "Great Vibes", cursive;
    font-size: 42px;
    font-weight: 400;
    color: var(--wine);
}

/* Final */
.final {
    min-height: 100vh;
    padding: 100px 25px;
}

.final-overline {
    max-width: 700px;
    margin: 12px auto 0;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .55;
}

.final h2 {
    position: relative;
    z-index: 1;
}

.final-message {
    position: relative;
    z-index: 1;
}

.final-date {
    position: relative;
    z-index: 1;
}

.next-chapter {
    margin-top: 55px;
    font-family: "Great Vibes", cursive;
    font-size: 34px;
    color: var(--wine);
    opacity: .85;
}

/* Animations */
@keyframes musicPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes scrollBounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* Mobile */
@media (max-width: 700px) {
    .music-status {
        display: none;
    }

    .hero-scroll {
        font-size: 9px;
    }

    .timer-inner {
        padding: 40px 15px;
    }

    .timer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timer-unit:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 6px);
        justify-self: center;
        width: 100%;
    }

    .timer-note {
        font-size: 26px;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        width: 100%;
        margin-left: 0;
        padding: 18px 0 18px 55px;
    }

    .timeline-dot,
    .timeline-item:nth-child(even) .timeline-dot {
        left: 0;
        right: auto;
    }

    .timeline-card {
        padding: 23px 20px;
    }

    .timeline-card h3 {
        font-size: 34px;
    }

    .timeline-card p {
        font-size: 17px;
    }

    .reasons-grid {
        grid-template-columns: 1fr;
        max-width: 430px;
    }

    .reason-card {
        min-height: 0;
    }

    .secret-card {
        padding: 45px 20px;
    }

    .secret-card h2 {
        font-size: 50px;
    }

    .next-chapter {
        font-size: 28px;
    }
}

@media (max-width: 600px) {
    .love-timer {
        padding: 80px 12px;
    }

    .timer-grid {
        gap: 8px;
    }

    .timer-unit {
        padding: 14px 7px 12px;
    }

    .slider-heading {
        font-size: 9px;
    }
}