/* ============================================================
   Gouri & Yash — Dreamy Pastel Romance
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --cream:      #FFF7F3;
  --blush-50:   #FFF0F6;
  --blush-100:  #FFE5F0;
  --blush-200:  #FFD3E5;
  --blush-400:  #FF9EC7;
  --blush-500:  #FF7FB6;
  --blush-600:  #F2609E;
  --lav-200:    #E4DAFF;
  --lav-400:    #B79CFF;
  --lav-500:    #9B7BFF;
  --peach-200:  #FFE0CC;
  --gold:       #FFC978;

  --ink:        #4B3550;
  --ink-soft:   #7A6483;
  --ink-faint:  #A493AC;

  --grad-warm:  linear-gradient(120deg, var(--blush-500) 0%, var(--lav-500) 100%);
  --grad-soft:  linear-gradient(120deg, var(--blush-200) 0%, var(--lav-200) 100%);

  --shadow-sm:  0 2px 10px rgba(160, 90, 140, .07);
  --shadow-md:  0 18px 44px -18px rgba(160, 90, 140, .34), 0 2px 8px rgba(160, 90, 140, .07);
  --shadow-lg:  0 30px 64px -22px rgba(160, 90, 140, .42), 0 4px 14px rgba(160, 90, 140, .09);

  --radius:     28px;
  --radius-sm:  16px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-script:  "Caveat", "Segoe Script", cursive;
  --font-body:    "Quicksand", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden;
  background-color: var(--cream);
  background-image:
    radial-gradient(1100px 780px at  8% -8%, #FFE3F1 0%, rgba(255,227,241,0) 58%),
    radial-gradient(1000px 720px at 94%  2%, #E9E0FF 0%, rgba(233,224,255,0) 58%),
    radial-gradient( 900px 900px at 50% 104%, #FFEBDC 0%, rgba(255,235,220,0) 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; }
p { margin: 0; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--lav-400);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ============================================================
   Floating petals / hearts
   ============================================================ */
.petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.petal {
  position: absolute;
  bottom: -8vh;
  will-change: transform, opacity;
  animation: drift linear infinite;
  opacity: 0;
  user-select: none;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);            opacity: 0; }
  10%  {                                                          opacity: var(--peak, .7); }
  90%  {                                                          opacity: var(--peak, .7); }
  100% { transform: translate3d(var(--sway, 40px), -112vh, 0) rotate(var(--spin, 220deg)); opacity: 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 5rem var(--gutter) 3.5rem;
  text-align: center;
}

.hero__inner { max-width: 46rem; }

/* Two portraits as overlapping circles. The circle frame is what lets a
   transparent cutout (her) and a solid square photo (him) sit together
   and read as one matched pair. */
.hero__pair {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.6rem;
}

.hero__pair[hidden] { display: none; }

.hero__avatar {
  position: relative;
  width: clamp(98px, 27vw, 140px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grad-soft);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .88),
    0 16px 36px -12px rgba(160, 90, 140, .5);
  animation: bobble 6.5s ease-in-out infinite;
}

.hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Per-photo framing: the two sources crop to different sweet spots, and
     need different zoom to make both faces read at the same size.
     Nudge --focus / --zoom if you swap the pictures. */
  object-position: center var(--focus, 50%);
  transform: scale(var(--zoom, 1)) translateY(var(--lift, 0));
}

/* she overlaps him slightly, and they bob out of step */
.hero__avatar--her { --focus: 72%; --zoom: 1;    z-index: 2; margin-right: -20px; }
.hero__avatar--him { --focus: 50%; --zoom: 1.16; --lift: -3%; z-index: 1; animation-delay: -3.2s; }

@keyframes bobble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.hero__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 3.4vw, 1.55rem);
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin-bottom: .35rem;
}

.hero__title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.5rem, 2.5vw, 1.25rem);
  font-size: clamp(2.9rem, 11.5vw, 6.5rem);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.02em;
}

.hero__name {
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .08em;   /* stop descenders clipping */
}

/* the tappable heart */
.hero__heart {
  --size: clamp(2rem, 7vw, 3.4rem);
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  animation: beat 1.9s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.hero__heart svg { width: 100%; height: 100%; fill: var(--blush-500); filter: drop-shadow(0 4px 12px rgba(255, 127, 182, .55)); }
.hero__heart:hover { transform: scale(1.18); }
.hero__heart:active { transform: scale(.9); }

@keyframes beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.13); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.09); }
  56%      { transform: scale(1); }
}

.hero__script {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 4.6vw, 2.1rem);
  color: var(--ink-soft);
  margin-top: .6rem;
  text-wrap: balance;   /* if it wraps on a phone, wrap it evenly */
}

/* day counter */
.counter {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: 2.4rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-md);
}

.counter__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 700;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.counter__label {
  font-size: clamp(.95rem, 2.6vw, 1.1rem);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

.counter__sub {
  margin-top: .8rem;
  font-size: .95rem;
  color: var(--ink-faint);
  letter-spacing: .01em;
}

.hero__cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin-top: 3.2rem;
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .25s ease;
}
.hero__cue:hover { color: var(--blush-600); }
.hero__cue-arrow { font-size: 1.1rem; animation: bob 1.9s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ============================================================
   Timeline
   ============================================================ */
.timeline {
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 7vw, 5rem) var(--gutter) clamp(4rem, 10vw, 7rem);
  max-width: 68rem;
  margin: 0 auto;
}

.timeline__heading {
  text-align: center;
  font-size: clamp(2rem, 6.5vw, 3.2rem);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin-bottom: clamp(3rem, 8vw, 5rem);
  color: var(--ink);
}

.timeline__heading-script {
  display: block;
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.15em;
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  row-gap: clamp(2.5rem, 6vw, 4rem);
}

/* the spine */
.spine {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 22px;
  width: 4px;
  margin-left: -2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blush-100), var(--lav-200));
  overflow: hidden;
}

/* Scaled rather than resized: this updates on every scroll frame, and
   animating height would force a layout pass each time. scaleY is
   compositor-only, and the gradient scales with the box so it looks
   identical to growing the height. */
.spine__fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blush-400) 0%, var(--lav-400) 100%);
  box-shadow: 0 0 14px rgba(183, 156, 255, .7);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .12s linear;
  will-change: transform;
}

/* ---------- a memory ---------- */
.memory {
  display: contents;
}

.memory__marker {
  grid-column: 1;
  justify-self: center;
  align-self: start;
  padding-top: 34px;
  position: relative;
  z-index: 2;
}

.memory__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--blush-400);
  box-shadow: 0 0 0 5px rgba(255, 158, 199, .18), var(--shadow-sm);
  transform: scale(.4);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s ease, border-color .4s ease;
}

.memory.is-visible .memory__dot {
  transform: scale(1);
  opacity: 1;
}

.memory--right .memory__dot {
  border-color: var(--lav-400);
  box-shadow: 0 0 0 5px rgba(183, 156, 255, .18), var(--shadow-sm);
}

/* Dashed connector from the spine out to the card.
   It lives on the marker, not the card — the card is overflow:hidden
   (to keep the gradient hairline inside its radius) and would clip it. */
.memory__marker::before {
  content: "";
  position: absolute;
  top: 44px;            /* lines up with the dot's centre */
  left: 100%;
  width: 11px;
  height: 2px;
  background-image: linear-gradient(90deg, var(--blush-200) 55%, transparent 55%);
  background-size: 6px 2px;
  opacity: 0;
  transition: opacity .5s ease .15s;
}

.memory.is-visible .memory__marker::before { opacity: 1; }

/* ---------- the card ---------- */
.memory__card {
  grid-column: 2;
  position: relative;
  padding: clamp(1.4rem, 4vw, 2rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-md);
  overflow: hidden;

  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.memory.is-visible .memory__card { opacity: 1; transform: none; }

/* gradient hairline along the top */
.memory__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad-warm);
}

.memory--right .memory__card::before {
  background: linear-gradient(120deg, var(--lav-500) 0%, var(--blush-500) 100%);
}

/* the :hover rule must out-specify `.memory.is-visible .memory__card` */
@media (hover: hover) {
  .memory.is-visible .memory__card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
}

/* card header */
.memory__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.memory__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: var(--grad-soft);
  color: #6C3F63;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.memory__emoji {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(160, 90, 140, .22));
}

.memory__title {
  font-size: clamp(1.4rem, 4.2vw, 1.85rem);
  font-variation-settings: "SOFT" 50, "WONK" 1;
  margin-bottom: .9rem;
  color: var(--ink);
}

/* photo */
.memory__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--blush-50), var(--lav-200));
}

.memory__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
  .memory__card:hover .memory__photo img { transform: scale(1.05); }
}

/* No photo yet? Stay decorative instead of leaving a big blank block. */
.memory__photo--empty {
  aspect-ratio: 16 / 6;
  display: grid;
  place-content: center;
  gap: .35rem;
  text-align: center;
  border: 2px dashed rgba(255, 158, 199, .55);
  color: var(--ink-faint);
  background: linear-gradient(135deg, var(--blush-50), var(--lav-200) 55%, var(--peach-200));
}

.memory__photo--empty span { font-size: 1.6rem; line-height: 1; }
.memory__photo--empty small {
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--ink-faint);
}

.memory__story {
  color: var(--ink-soft);
  font-size: clamp(.98rem, 2.6vw, 1.05rem);
}

/* chips */
.memory__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.memory__chip {
  padding: .38rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--blush-100);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), border-color .25s ease;
}

@media (hover: hover) {
  .memory__chip:hover { transform: translateY(-2px); border-color: var(--blush-400); }
}

/* ============================================================
   "more coming soon"
   ============================================================ */
.soon {
  position: relative;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0 44px;
  padding-top: 2.5rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.soon.is-visible { opacity: 1; transform: none; }

/* dashed connector continuing from the spine */
.soon::before {
  content: "";
  position: absolute;
  top: 0;
  left: -22px;
  width: 2px;
  height: 2.5rem;
  background-image: linear-gradient(180deg, var(--lav-200) 55%, transparent 55%);
  background-size: 2px 7px;
}

.soon__card {
  text-align: center;
  padding: clamp(1.8rem, 5vw, 2.6rem);
  border-radius: var(--radius);
  border: 2px dashed rgba(183, 156, 255, .55);
  background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.soon__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.soon__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lav-400);
  animation: pulse 1.5s ease-in-out infinite;
}
.soon__dots i:nth-child(2) { animation-delay: .22s; background: var(--blush-400); }
.soon__dots i:nth-child(3) { animation-delay: .44s; }

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

.soon__title {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  background: var(--grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .5rem;
  line-height: 1.2;
}

.soon__text { color: var(--ink-faint); font-size: .98rem; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--gutter) clamp(2.5rem, 7vw, 4rem);
}

.footer__line {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: var(--ink-faint);
}

.footer__heart {
  color: var(--blush-500);
  display: inline-block;
  animation: beat 1.9s ease-in-out infinite;
}

/* ============================================================
   Desktop — alternating layout
   ============================================================ */
@media (min-width: 768px) {
  .timeline__track { grid-template-columns: 1fr 72px 1fr; }

  .spine { left: 50%; }

  .memory__marker { grid-column: 2; }

  /* odd cards on the left, even cards on the right */
  .memory--left  .memory__card { grid-column: 1; }
  .memory--right .memory__card { grid-column: 3; }

  /* connector now reaches out to whichever side the card is on */
  .memory--left  .memory__marker::before { left: auto; right: 100%; width: 25px; }
  .memory--right .memory__marker::before { left: 100%; right: auto; width: 25px; }

  /* slide in from their own side */
  .memory--left  .memory__card { transform: translateY(28px) translateX(-14px); }
  .memory--right .memory__card { transform: translateY(28px) translateX(14px); }
  .memory.is-visible .memory__card { transform: none; }

  @media (hover: hover) {
    .memory.is-visible .memory__card:hover { transform: translateY(-5px); }
  }

  .soon { margin-left: 0; }
  .soon::before { left: 50%; margin-left: -1px; }
  .soon__card { max-width: 30rem; margin: 0 auto; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .petals { display: none; }

  .memory__card,
  .memory__dot,
  .soon {
    opacity: 1 !important;
    transform: none !important;
  }
}