/* ============================================================
   SECTIONS — layout per section, redesigned per breakpoint
   ------------------------------------------------------------
   1. Hero
   2. Timeline
   3. Memory wall
   4. Envelopes
   5. Letter
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 12vh, 8rem) var(--gut) clamp(7rem, 14vh, 9rem);
  text-align: center;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 62rem;
  /* Slow scale "breath" applied to the whole block */
  animation: breathe 13s var(--e-in-out) infinite alternate;
}
@keyframes breathe {
  0%   { transform: scale(1); }
  100% { transform: scale(1.022); }
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.3rem);
  font-family: var(--font-ui);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: clamp(1.4rem, 3.4vh, 2.4rem);
}
.hero__rule {
  display: block;
  width: clamp(1.6rem, 7vw, 4.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.hero__title {
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin-bottom: clamp(1.5rem, 4vh, 2.6rem);
}

.hero__line {
  display: block;
  /* Each line is a mask window; the words rise up into it.
     line-height is below 1, so the line box is SHORTER than the glyphs —
     which clipped the descender on "y" (Happy, Birthday) and the italic
     "i" in Khushi. The padding gives those glyphs room inside the clip
     region; the matching negative margin keeps the tight line rhythm. */
  overflow: hidden;
  padding-block: 0.22em;
  margin-block: -0.22em;
}
.hero__line--name { margin-top: -0.2em; }

.word {
  display: inline-block;
  white-space: nowrap;
}

/* The name is the focal point of the entire page */
.word--name {
  font-style: italic;
  font-weight: 500;
  background: var(--grad-metal);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 9s linear infinite;
  padding-right: 0.06em;
}

.word--heart {
  font-size: 0.62em;
  vertical-align: 0.18em;
  -webkit-text-fill-color: initial;
  animation: heart-tick 4.5s var(--e-in-out) infinite;
  transform-origin: center 70%;
}
@keyframes heart-tick {
  0%, 74%, 100% { transform: scale(1) rotate(0deg); }
  80%           { transform: scale(1.16) rotate(-5deg); }
  88%           { transform: scale(1.02) rotate(3deg); }
}

.hero__sub {
  max-width: 33rem;
  margin-inline: auto;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: clamp(2.4rem, 6vh, 3.8rem);
}

.hero__cta-wrap { display: flex; justify-content: center; }

/* Scroll cue — a line that fills downward on a loop */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.8rem, 5vh, 3rem);
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: clamp(38px, 7vh, 62px);
  background: rgba(183, 110, 121, 0.18);
  overflow: hidden;
}
.hero__scroll-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--rose));
  transform: translateY(-100%);
  animation: scroll-cue 2.6s var(--e-in-out) infinite;
}
@keyframes scroll-cue {
  0%        { transform: translateY(-100%); }
  55%, 100% { transform: translateY(100%); }
}

/* ============================================================
   2. TIMELINE — editorial left spine
   ============================================================ */
.timeline { position: relative; }

.timeline__spine {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 7px;
  width: 2px;
  background: rgba(217, 190, 143, 0.34);
  border-radius: 2px;
  overflow: hidden;
}

/* Filled by ScrollTrigger as the section is read */
.timeline__spine-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--champagne) 0%, var(--rose-light) 45%, var(--rose) 100%);
  box-shadow: 0 0 14px rgba(183, 110, 121, 0.55);
  border-radius: 2px;
}

.timeline__list {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vh, 7rem);
}

.tl-item {
  position: relative;
  padding-left: clamp(2.6rem, 5vw, 4.2rem);
}

/* --- Node on the spine --- */
.tl-item__node {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.tl-item__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--rose-light);
  box-shadow: 0 0 0 4px var(--ivory);
  transition: background 0.6s var(--e-out), border-color 0.6s var(--e-out), transform 0.6s var(--e-spring);
}
.tl-item__halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(183, 110, 121, 0.4);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.7s var(--e-out), transform 0.7s var(--e-out);
}

/* Lit once scrolled past, and again on hover */
.tl-item.is-lit .tl-item__dot {
  background: var(--rose);
  border-color: var(--rose);
  transform: scale(1.15);
}
.tl-item.is-lit .tl-item__halo { opacity: 1; transform: scale(1); }

.tl-item__card {
  position: relative;
  /* Capped so the card hugs its own text measure. Left to stretch the full
     shell width, the ghost index drifts far from the copy and the card
     reads as a wide empty panel. */
  max-width: 46rem;
  padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.5rem, 3.4vw, 2.9rem);
  border-radius: var(--radius);
  background: linear-gradient(158deg, rgba(255, 253, 251, 0.78) 0%, rgba(248, 241, 231, 0.62) 100%);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--sh-md);
  transition: transform 0.75s var(--e-out), box-shadow 0.75s var(--e-out);
  cursor: default;
}

@media (hover: hover) {
  .tl-item__card:hover {
    transform: translate3d(6px, -4px, 0);
    box-shadow: var(--sh-lg);
  }
  .tl-item__card:hover ~ .tl-item__node .tl-item__dot { transform: scale(1.3); }
}

/* Big ghost index behind the card content */
.tl-item__index {
  position: absolute;
  top: clamp(0.5rem, 1.6vw, 1.1rem);
  right: clamp(0.9rem, 2.4vw, 1.9rem);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 6rem);
  font-weight: 500;
  line-height: 1;
  color: rgba(183, 110, 121, 0.09);
  pointer-events: none;
  user-select: none;
}

.tl-item__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42em 1em;
  margin-bottom: 1.1rem;
  border-radius: 100px;
  background: rgba(183, 110, 121, 0.09);
  border: 1px solid rgba(183, 110, 121, 0.16);
  font-family: var(--font-ui);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.tl-item__tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rose);
}

.tl-item__title {
  position: relative;
  font-size: var(--t-h3);
  margin-bottom: 0.85rem;
  max-width: 22ch;
}

.tl-item__text {
  position: relative;
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ============================================================
   3. MEMORY WALL — scattered polaroids
   ------------------------------------------------------------
   Grid provides the structure; per-item rotation and vertical
   offset provide the scatter. Rotations live on --rot so hover
   can neutralise them without touching layout.
   ============================================================ */
.wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem) clamp(1.2rem, 2.6vw, 2.6rem);
  padding-block: clamp(1rem, 3vh, 2rem);
}

.wall__cell { position: relative; }

/* Hand-placed scatter: alternating rotations and staggered drops.
   Deliberately irregular — a repeating pattern would read as a grid. */
.wall__cell:nth-child(1)  { --rot: -3.2deg; transform: translateY(0.4rem); }
.wall__cell:nth-child(2)  { --rot:  2.1deg; transform: translateY(2.6rem); }
.wall__cell:nth-child(3)  { --rot: -1.4deg; transform: translateY(0.9rem); }
.wall__cell:nth-child(4)  { --rot:  3.4deg; transform: translateY(3.1rem); }
.wall__cell:nth-child(5)  { --rot:  2.6deg; transform: translateY(1.4rem); }
.wall__cell:nth-child(6)  { --rot: -2.8deg; transform: translateY(3.4rem); }
.wall__cell:nth-child(7)  { --rot:  1.2deg; transform: translateY(0.6rem); }
.wall__cell:nth-child(8)  { --rot: -3.6deg; transform: translateY(2.4rem); }
.wall__cell:nth-child(9)  { --rot: -2.2deg; transform: translateY(1.1rem); }
.wall__cell:nth-child(10) { --rot:  3.1deg; transform: translateY(3.2rem); }
.wall__cell:nth-child(11) { --rot: -1.8deg; transform: translateY(0.5rem); }
.wall__cell:nth-child(12) { --rot:  2.4deg; transform: translateY(2.8rem); }

.wall__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(3.5rem, 8vh, 6rem);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wall__hint-icon { color: var(--champagne-deep); animation: twinkle 3.4s var(--e-in-out) infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.1) rotate(90deg); }
}

/* ============================================================
   4. ENVELOPES
   ============================================================ */
.envelopes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.4rem) clamp(2rem, 4vw, 3.2rem);
}

/* No vertical stagger here: it was pushing the fourth card below the fold.
   The 2x2 block stays visually interesting via the flap and seal detail. */

/* This section is tuned to fit a laptop viewport whole — all four envelopes
   visible at once — so it runs tighter than the other sections. */
.envelopes-section { padding-block: clamp(3.5rem, 8vh, 6rem); }
.envelopes-section .section-head { margin-bottom: clamp(1.8rem, 3.5vh, 2.8rem); }
.envelopes-section .section-head__lede { display: none; }

/* ============================================================
   5. LETTER
   ============================================================ */
.letter-section { max-width: 62rem; }

.letter { position: relative; }

.letter__paper {
  position: relative;
  padding: clamp(2.2rem, 6vw, 4.6rem) clamp(1.6rem, 6vw, 5rem);
  border-radius: 4px;
  background:
    radial-gradient(120% 60% at 8% 0%, rgba(255,255,255,0.9), transparent 55%),
    linear-gradient(172deg, #FFFDF9 0%, #FBF4E9 46%, #F7EDDE 100%);
  box-shadow:
    var(--sh-xl),
    inset 0 0 60px rgba(196, 168, 132, 0.1);
  overflow: hidden;
}

/* Ruled guide lines, very faint — suggests writing paper without shouting */
.letter__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 2.05rem,
    rgba(183, 110, 121, 0.055) 2.05rem 2.1rem
  );
  pointer-events: none;
}

/* Deckled top edge */
.letter__paper::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(217, 190, 143, 0.7), transparent);
}

/* The horizontal crease of a folded letter */
.letter__fold {
  position: absolute;
  top: 33%;
  left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(180, 150, 118, 0.11) 48%, rgba(255,255,255,0.7) 52%, transparent);
  pointer-events: none;
}

.letter__paper > p {
  position: relative;
  z-index: 1;
  font-family: var(--font-hand);
  font-size: clamp(1.22rem, 2.35vw, 1.72rem);
  line-height: 2.1rem;   /* locked to the ruled-line rhythm */
  color: #3E4257;        /* fountain-pen blue-black */
  margin-bottom: 2.1rem;
  max-width: 54ch;
}
.letter__paper > p em { color: var(--rose-deep); font-style: italic; }

.letter__salutation {
  font-size: clamp(1.5rem, 3vw, 2.1rem) !important;
  color: var(--rose-deep) !important;
  margin-bottom: 2.1rem !important;
}

.letter__signoff { margin-bottom: 0.4rem !important; color: #4A4E63 !important; }

.letter__signature {
  font-size: clamp(2rem, 4.4vw, 3.1rem) !important;
  line-height: 1.2 !important;
  color: var(--rose) !important;
  transform: rotate(-1.6deg);
  transform-origin: left center;
  margin-bottom: 0 !important;
}

.letter__action {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.6rem, 6vh, 4rem);
}

/* ============================================================
   RESPONSIVE — each breakpoint is a re-layout, not a stack
   ============================================================ */

/* ---- Laptop / small desktop ---- */
@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
  /* Re-derive the scatter for a 3-column rhythm */
  .wall__cell:nth-child(3n+1) { --rot: -2.8deg; transform: translateY(0.5rem); }
  .wall__cell:nth-child(3n+2) { --rot:  2.2deg; transform: translateY(2.8rem); }
  .wall__cell:nth-child(3n+3) { --rot: -1.5deg; transform: translateY(1.3rem); }
  .wall__cell:nth-child(6n+4) { --rot:  3.2deg; }
  .wall__cell:nth-child(6n+5) { --rot: -3.4deg; }
}

/* ---- Tablet ---- */
@media (max-width: 860px) {
  .timeline__list { gap: clamp(3rem, 7vh, 4.5rem); }

  /* Envelopes become a single column but keep the offset feel via
     alternating inline padding, so it never reads as a plain stack. */
  .envelopes { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.6rem); }
  .envelopes > *:nth-child(even) { margin-top: 0; }
  .envelopes > *:nth-child(odd)  { padding-right: clamp(0rem, 8vw, 4rem); }
  .envelopes > *:nth-child(even) { padding-left:  clamp(0rem, 8vw, 4rem); }

  .letter__paper > p { max-width: none; }
}

/* ---- Mobile ---- */
@media (max-width: 620px) {
  :root { --sec-pad: clamp(4rem, 10vh, 6rem); }

  .hero { min-height: 100svh; }
  .hero__eyebrow { letter-spacing: 0.3em; }
  .hero__title { line-height: 1.02; }
  /* Keep the descender clearance from the base rule — a smaller pad here
     would clip "y" and the italic "i" again on phones. */
  .hero__line { padding-block: 0.22em; margin-block: -0.22em; }

  /* Two-column offset mosaic — deliberately not a single stack. The
     second column rides lower so the wall still feels scattered. */
  .wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .wall__cell:nth-child(odd)  { --rot: -2.6deg; transform: translateY(0); }
  .wall__cell:nth-child(even) { --rot:  2.4deg; transform: translateY(1.9rem); }
  .wall__cell:nth-child(4n+3) { --rot:  1.6deg; }
  .wall__cell:nth-child(4n)   { --rot: -3deg; }

  .envelopes > * { padding: 0 !important; }

  .tl-item { padding-left: 2.4rem; }
  .tl-item__index { font-size: 3.4rem; opacity: 0.7; }

  /* Keep the letter readable at small sizes — tighten the ruled rhythm */
  .letter__paper::before {
    background-image: repeating-linear-gradient(
      180deg, transparent 0 1.85rem, rgba(183,110,121,0.05) 1.85rem 1.9rem);
  }
  .letter__paper > p { line-height: 1.9rem; margin-bottom: 1.9rem; }

  /* Ticket: stub moves under the body so nothing is cramped */
  .ticket { grid-template-columns: 1fr; }
  .ticket__stub {
    width: 100%;
    flex-direction: row;
    gap: 1.1rem;
    padding: 0.9rem;
  }
  .ticket__barcode { height: 40px; flex: 1; }
  .ticket__barcode i { flex: 1; width: auto; }
  .ticket__serial { writing-mode: horizontal-tb; }
  .ticket__perf {
    top: auto; bottom: clamp(58px, 16%, 70px);
    left: 0; right: 0;
    width: auto; height: 2px;
    background-image: linear-gradient(90deg, rgba(246,231,226,0.62) 0 6px, transparent 6px 13px);
    background-size: 13px 2px;
  }
  .ticket__notch {
    right: auto;
    bottom: clamp(58px, 16%, 70px);
    top: auto;
    transform: translateY(50%);
  }
  .ticket__notch--top    { left: -10px; }
  .ticket__notch--bottom { left: auto; right: -10px; }
}

/* ---- Very small phones only ----
   Kept at 340px deliberately: 375–390px covers most phones in use and
   must keep the two-column mosaic, or the wall stops feeling scattered. */
@media (max-width: 340px) {
  .wall { grid-template-columns: 1fr; }
  .wall__cell:nth-child(n) { transform: none; }
  .wall__cell:nth-child(odd)  { --rot: -1.8deg; }
  .wall__cell:nth-child(even) { --rot:  1.8deg; }
}

/* ---- Short landscape (phones turned sideways) ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 5rem 6rem; }
  .hero__scroll-cue { display: none; }
}