/* ============================================================
   Bari — pinned scroll timeline, deep green + light-green neon
   scroll choreography:
     1. header overlaps photos
     2. scroll -> ONLY header slides up (opaque, no fade)
     3. header gone -> photos pan up
     4. photos reach the end -> photos stop
     5. keep scrolling -> heart rises over the last row
   (fully reversible — everything is a pure function of scroll position)
   ============================================================ */

:root {
  --green-abyss: #0a1c12;
  --green-forest: #102a1a;
  --accent: #9bf06a;
  --accent-soft: rgba(155, 240, 106, 0.45);
  --accent-faint: rgba(155, 240, 106, 0.22);
  --heart: #ff5a6e;
  --heart-glow: rgba(255, 90, 110, 0.6);
}

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

html {
  background:
    radial-gradient(130% 70% at 50% 0%, #18402a 0%, transparent 45%),
    linear-gradient(165deg, var(--green-forest) 0%, var(--green-abyss) 100%);
  background-repeat: no-repeat;
  background-color: var(--green-abyss);
}

body {
  color: var(--accent);
  overflow-x: hidden;
}

/* subtle static grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE — pinned to the viewport; layers are moved by JS
   ============================================================ */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;          /* fallback */
  height: 100dvh;         /* exclude mobile browser chrome so the bottom heart stays visible */
  overflow: hidden;
  z-index: 1;
}

/* the spacer's height (set in JS) is what we actually scroll through */
.spacer { width: 100%; }

/* ----- the photos (panned up in phase 3) ----- */
.gallery {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1320px;
  column-count: 3;
  column-gap: 22px;
  padding: clamp(0.5rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  will-change: transform;
}

.photo {
  position: relative;
  display: block;
  margin: 0 0 20px;
  break-inside: avoid;
  overflow: hidden;                 /* sharp corners */
  box-shadow:
    0 14px 38px -12px rgba(0, 0, 0, 0.7),
    0 0 26px -2px var(--accent-faint);
  transition: box-shadow 0.45s ease;
  will-change: transform;           /* JS adds a tiny cursor-driven float */
  backface-visibility: hidden;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 0.5s cubic-bezier(.2, .8, .2, 1), filter 0.5s ease;
  scale: 1;
}
.photo:hover {
  z-index: 6;
  box-shadow:
    0 22px 50px -10px rgba(0, 0, 0, 0.75),
    0 0 46px 2px var(--accent-soft);
}
.photo:hover img { scale: 1.06; filter: saturate(1.1) brightness(1.05); }

/* ----- the heading (slides up in phase 2, stays fully opaque) ----- */
.title {
  position: absolute;
  top: clamp(0.5rem, 2vw, 2rem);
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  text-align: center;
  font-family: "Molle", cursive;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(7rem, 27vw, 17rem);   /* bigger on phones */
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--accent);
  text-shadow:
    0 0 26px var(--accent-soft),
    0 0 70px var(--accent-faint),
    0 8px 40px rgba(0, 0, 0, 0.55);
  will-change: transform;
}

/* ----- the heart (rises in phase 5) ----- */
.like {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  /* clear the mobile home-indicator / gesture bar so the heart is never clipped */
  padding-bottom: calc(clamp(2.5rem, 7vh, 4.5rem) + env(safe-area-inset-bottom, 0px));
  transform: translateY(140%);      /* hidden below; JS slides it up */
  will-change: transform;
}
.heart {
  font-size: clamp(7rem, 18vw, 12rem);
  line-height: 1;
  color: var(--heart);
  background: none;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 0 18px var(--heart-glow));
  transition: transform 0.25s cubic-bezier(.2, 1.5, .3, 1), filter 0.3s ease;
}
.heart:hover { transform: scale(1.1); filter: drop-shadow(0 0 30px var(--heart-glow)); }
.heart:active { transform: scale(0.94); }
.heart:focus-visible { filter: drop-shadow(0 0 34px var(--heart-glow)); }
.heart.pop { animation: heartburst 0.6s cubic-bezier(.18, 1.5, .4, 1); }
.heart.liked { filter: drop-shadow(0 0 30px var(--heart-glow)); }

@keyframes heartburst {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55) rotate(-9deg); }
  70%  { transform: scale(0.9) rotate(7deg); }
  100% { transform: scale(1); }
}

/* ----- live count, pinned bottom-right ----- */
.count {
  position: absolute;
  right: clamp(1rem, 3vw, 2.6rem);
  bottom: clamp(0.8rem, 3vw, 2rem);
  z-index: 20;
  pointer-events: none;
  font-family: "Ubuntu Mono", monospace;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-soft), 0 0 44px var(--accent-faint);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   MOBILE — drop the pinned JS scroll-timeline and lay everything
   out in normal document flow so the browser scrolls it NATIVELY
   (smooth, compositor-driven). Desktop above is untouched.
   ============================================================ */
@media (max-width: 640px) {
  /* un-pin the stage: normal flow, native scrolling. flex column lets us
     order children independently of the source order (photos come first in HTML) */
  .stage   { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .spacer  { display: none; }

  /* title becomes a hero heading at the top (order: -1 pulls it above the photos) */
  .title {
    position: static;
    order: -1;
    transform: none !important;
    font-size: clamp(5rem, 24vw, 9rem);
    padding: 0.35em 0 0.15em;
  }

  /* 2 columns of photos at their natural size (no cropping) */
  .gallery {
    position: static;
    column-count: 2;
    column-gap: 12px;
    max-width: 100%;
    padding: 0 12px 14px;
  }
  .photo { margin: 0 0 12px; transform: none !important; }
  /* images keep their natural aspect ratio via the base rule (width 100%, height auto) */

  /* heart rests at the very end, in flow (scroll down to reach it) */
  .like {
    position: static;
    transform: none !important;
    padding: 2rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  /* keep the live count pinned bottom-right and always visible */
  .count { position: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  .photo { transform: none !important; }
}