/* ==========================================================================
   Scrapbook — paper, tape, polaroid, decorative elements, page-specific
   compositions (entry hero, letter card, memory chapters).
   ========================================================================== */

/* Subtle paper grain, self-contained (no external asset needed). */
:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.paper {
  background: var(--color-paper);
  border-radius: var(--radius-paper);
  box-shadow: 0 1px 0 rgba(63, 73, 56, 0.06), 0 18px 40px -28px rgba(63, 73, 56, 0.45);
  position: relative;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.6;
  pointer-events: none;
  border-radius: inherit;
}

/* ---------------------------------------------------------------------
   Background photo marquee — fixed behind every page, see
   components/photoMarquee.njk. Rows slide horizontally, alternating
   direction, at very low opacity so it never competes with real
   content (all foreground cards already have their own solid
   background, so legibility isn't affected either way).
   --------------------------------------------------------------------- */

.photo-marquee {
  --marquee-size: 200px;
  --marquee-gap-x: 0.3rem;
  --marquee-gap-y: 0.6rem;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--marquee-gap-y);
}

.photo-marquee__row {
  height: var(--marquee-size);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.photo-marquee__track {
  display: flex;
  gap: var(--marquee-gap-x);
  width: max-content;
  will-change: transform;
}

/* Continuous, non-stopping loop: the track holds two identical copies
   of the (padded) photo set back to back, and the animation only ever
   travels exactly one copy's width (0 -> -50% of the track's own
   width) before repeating — so the seam is invisible and motion never
   pauses or jumps. */
.photo-marquee__row--left .photo-marquee__track {
  animation: marquee-left 100s linear infinite;
}

.photo-marquee__row--right .photo-marquee__track {
  animation: marquee-right 100s linear infinite;
}

.photo-marquee img {
  width: var(--marquee-size);
  height: var(--marquee-size);
  object-fit: cover;
  opacity: 0.1;
  border-radius: var(--radius-paper);
  filter: grayscale(15%);
  flex-shrink: 0;
}

@keyframes marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .photo-marquee {
    --marquee-size: 60px;
    --marquee-gap-x: 0.2rem;
    --marquee-gap-y: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-marquee__track {
    animation: none;
  }
}

/* ---------------------------------------------------------------------
   Falling leaves & flowers — fixed behind every page, drawn above the
   photo marquee. Pure CSS, one drifting/rotating fall animation per
   item, staggered via animation-delay/duration set inline per item
   (see components/fallingPetals.njk). Purely decorative.
   --------------------------------------------------------------------- */

.falling-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.falling-decor__item {
  position: absolute;
  top: -10vh;
  opacity: 0;
  animation-name: leaf-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes leaf-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: var(--fall-opacity, 0.2);
  }
  25% {
    transform: translate3d(var(--fall-drift), 30vh, 0) rotate(90deg);
  }
  50% {
    transform: translate3d(calc(var(--fall-drift) * -1), 60vh, 0) rotate(180deg);
  }
  75% {
    transform: translate3d(var(--fall-drift), 90vh, 0) rotate(270deg);
  }
  92% {
    opacity: var(--fall-opacity, 0.2);
  }
  100% {
    transform: translate3d(0, 120vh, 0) rotate(360deg);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  /* Thin the effect out on small screens — less clutter, less battery. */
  .falling-decor__item:nth-child(n + 15) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* A continuous falling effect is exactly the kind of motion this
     preference asks to avoid — hide it rather than freeze it mid-fall. */
  .falling-decor {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Entry page (secret code hero)
   --------------------------------------------------------------------- */

.entry {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.entry__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #f6efe2 0%, var(--color-cream) 45%, var(--color-cream) 100%);
  /* Slightly translucent so the background photo marquee (z-index -1,
     behind everything) still peeks through on this page instead of
     being fully hidden under the hero gradient. */
  opacity: 0.82;
}

.entry__scene::before,
.entry__scene::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  height: 45%;
  bottom: 0;
  background: var(--color-green-muted);
  opacity: 0.16;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.entry__scene::before {
  bottom: -6%;
  background: var(--color-olive);
  opacity: 0.14;
  height: 38%;
}

.entry__scene::after {
  bottom: -14%;
  height: 30%;
}

.entry__container {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry__logo {
  margin-bottom: var(--space-3);
}

.entry__title {
  margin-bottom: var(--space-3);
}

.entry__supporting {
  max-width: 32ch;
  color: var(--color-olive);
  margin-bottom: var(--space-4);
}

.entry__card-wrap {
  width: 100%;
  max-width: 26rem;
  margin-bottom: var(--space-4);
}

.entry__footer {
  font-size: 1.3rem;
  color: var(--color-brown);
  max-width: 30ch;
}

/* ---------------------------------------------------------------------
   Secret code form
   --------------------------------------------------------------------- */

.secret-form {
  padding: var(--space-3);
  text-align: left;
  border: 1px solid var(--color-beige-soft);
}

.secret-form__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-1);
  color: var(--color-olive-deep);
}

.secret-form__row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.secret-form__input {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  padding: 0.75em 0.9em;
  border: 1.5px solid var(--color-beige-soft);
  border-radius: var(--radius-paper);
  background: var(--color-cream);
  color: var(--color-olive-deep);
}

.secret-form__input::placeholder {
  color: color-mix(in srgb, var(--color-olive) 55%, transparent);
}

.secret-form--invalid .secret-form__input {
  border-color: var(--color-error);
}

.secret-form__error {
  margin: var(--space-1) 0 0;
  font-size: 0.88rem;
  color: var(--color-error);
}

/* ---------------------------------------------------------------------
   Polaroid
   --------------------------------------------------------------------- */

.polaroid {
  display: inline-block;
  background: #fdfaf3;
  padding: 0.6rem 0.6rem 1.4rem;
  box-shadow: 0 14px 28px -18px rgba(63, 73, 56, 0.55);
  transform: rotate(var(--polaroid-rotation, -2deg));
}

/* Combined with .reveal, the polaroid's own rotation must survive the
   reveal transition — a plain `.reveal { transform: none }` would wipe
   it out, so this pairing gets an explicit, higher-specificity rule. */
.polaroid.reveal {
  transform: rotate(var(--polaroid-rotation, -2deg)) translateY(18px);
}

.polaroid.reveal.is-visible {
  transform: rotate(var(--polaroid-rotation, -2deg));
}

.polaroid img {
  width: 100%;
  height: auto;
  display: block;
}

.polaroid figcaption {
  margin-top: 0.6rem;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--color-olive-deep);
  text-align: center;
}

/* ---------------------------------------------------------------------
   Tape
   --------------------------------------------------------------------- */

.tape {
  position: absolute;
  width: 4.5rem;
  height: 1.6rem;
  background: color-mix(in srgb, var(--color-beige-soft) 80%, white);
  opacity: 0.75;
  box-shadow: 0 2px 4px rgba(63, 73, 56, 0.15);
}

/* ---------------------------------------------------------------------
   Message page layout — stacked photo-then-text on tablet/mobile
   (README §18), two-column on desktop (1200px+).
   --------------------------------------------------------------------- */

.message-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1200px) {
  .message-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .message-layout__photos {
    flex: 1 1 40%;
    position: sticky;
    top: var(--space-3);
  }

  .message-layout__letter {
    flex: 1 1 55%;
  }
}

/* No photos yet for this member (see src/_data/messages.js) — let the
   letter stand alone, centered, instead of leaving an empty column. */
.message-layout--no-photos .message-layout__letter {
  max-width: 42rem;
  margin-inline: auto;
}

@media (min-width: 1200px) {
  .message-layout--no-photos .message-layout__letter {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------
   Letter card (personal message page)
   --------------------------------------------------------------------- */

.letter {
  padding: var(--space-4);
}

.letter__greeting {
  margin-bottom: var(--space-2);
}

.letter__body p {
  color: var(--color-olive-deep);
}

.letter__memory {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-brown);
  background: color-mix(in srgb, var(--color-cream) 60%, var(--color-paper));
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--color-olive-deep);
}

.letter__signature {
  margin-top: var(--space-3);
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--color-brown);
}

.letter__cta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-beige-soft);
  text-align: center;
}

.letter__cta-support {
  color: var(--color-olive);
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------
   Photo collage
   --------------------------------------------------------------------- */

/* Vertical, overlapping stack (up to 5 photos per member — see
   buildMessages() in eleventy.config.js) rather than a side-by-side
   wrap: each photo after the first overlaps the bottom of the one
   before it, so more photos fit in less space and the pile reads as
   one scrapbook stack rather than a grid. Natural DOM/paint order
   already puts later photos on top of earlier ones — no z-index
   needed. Small alternating left/right nudge (nth-child) adds a
   "tossed onto the desk" feel on top of each photo's own rotation. */
.photo-collage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0;
}

.photo-collage .polaroid ~ .polaroid {
  margin-top: -4.5rem;
}

.photo-collage .polaroid:nth-child(odd) {
  margin-left: -0.9rem;
}

.photo-collage .polaroid:nth-child(even) {
  margin-left: 0.9rem;
}

@media (max-width: 767px) {
  .photo-collage .polaroid ~ .polaroid {
    margin-top: -3.25rem;
  }
}

/* ---------------------------------------------------------------------
   Memories hero
   --------------------------------------------------------------------- */

.memories-hero {
  position: relative;
  overflow: hidden;
}

.memories-hero__inner {
  text-align: center;
  padding-block: var(--space-4);
}

.memories-hero__quote {
  margin-top: var(--space-2);
  font-size: 1.5rem;
  color: var(--color-brown);
}

/* ---------------------------------------------------------------------
   Memory chapters
   --------------------------------------------------------------------- */

.chapter {
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-beige-soft);
  position: relative;
  overflow: hidden;
}

/* Text/photos half-half, alternating sides per chapter — see
   `isReversed` in memoryChapter.njk (odd chapters: text left, photos
   right; even chapters: reversed). Stacked photo-above-text below the
   desktop breakpoint. */
.chapter__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 1024px) {
  .chapter__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .chapter__text,
  .chapter__photos {
    flex: 1 1 50%;
    min-width: 0;
  }

  .chapter--reverse .chapter__grid {
    flex-direction: row-reverse;
  }
}

.chapter__number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--color-olive-deep);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.chapter__subtitle {
  color: var(--color-olive);
  margin-bottom: var(--space-3);
}

.chapter__quote {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--color-brown);
  max-width: 34ch;
  margin-top: var(--space-3);
  white-space: pre-line;
}

/* ---------------------------------------------------------------------
   Decorative leaf sprig (inline SVG, see decorativeLeaf.njk)
   --------------------------------------------------------------------- */

.deco-leaf {
  position: absolute;
  color: var(--color-green-muted);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 767px) {
  /* Keep small screens free of edge-bleeding decoration. */
  .deco-leaf {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------- */

.timeline {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-block: var(--space-3);
}

.timeline__dot {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-beige-soft);
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.timeline__dot:hover {
  background: var(--color-brown);
  transform: scale(1.15);
}

/* ---------------------------------------------------------------------
   Final section
   --------------------------------------------------------------------- */

.final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-6);
}

.final__heading {
  letter-spacing: 0.04em;
}

.final__body {
  max-width: 30ch;
  margin-inline: auto;
  color: var(--color-olive-deep);
  white-space: pre-line;
}

.final__signature {
  margin-top: var(--space-4);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--color-brown);
}

.final__quote {
  margin-top: var(--space-1);
  color: var(--color-olive);
  font-style: italic;
  white-space: pre-line;
}

.final__cta {
  margin-top: var(--space-4);
}

@media (max-width: 767px) {
  .entry__container {
    padding-block: var(--space-4);
  }

  .secret-form__row {
    flex-direction: column;
  }

  .secret-form__submit {
    width: 100%;
    justify-content: center;
  }
}