/* ForeverTrail landing page — styles specific to index.html.
   Shares tokens, fonts and .btn/.site-header/.brand rules with
   css/style.css (the map app's stylesheet); this file only adds what
   the landing page needs on top of that. */

:root{
  --sage: #8fa98f;
  --sage-mist: #dbe4d6;
}

/* Overrides the shared html,body{height:100%} + main{flex:1;min-height:0}
   rules (css/style.css) -- those are written for the map app's shell,
   where everything fits in exactly one screen and nothing scrolls past
   it. The landing page is an ordinary page that's meant to grow taller
   than one screen on narrower widths and scroll normally, so its body
   needs to size to its content instead of being capped at one screen's
   height -- without this, content past that cap doesn't get more room,
   it just visually spills into whatever sits after it (this is what
   was making the featured-photo card overlap the footer on mobile). */
body.landing-page{
  margin:0;
  overflow-x:hidden;
  height:auto;
  min-height:100%;
}

.landing-page .site-header{
  position:relative;
  z-index:5;
}

/* .btn / .btn-primary come from style.css and are written for
   <button>s -- these two rules just make them behave as real links
   too (no underline, no reflow from inline padding), scoped to the
   landing page so nothing about the app's own buttons changes. */
.landing-page a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.btn-quiet{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  font-size:0.9rem;
  color:var(--moss-dark);
  text-decoration:none;
  padding:0.5rem 0.25rem;
}
.btn-quiet:hover{ color:var(--moss); text-decoration:underline; }

.hero{
  display:flex;
  min-height:calc(100dvh - 73px);
}

/* ---- left: the photo hero ------------------------------------------- */

.hero-scenes{
  position:relative;
  width:58%;
  overflow:hidden;
  background:var(--surface-moss);
}

@keyframes sceneCycle{
  0%{ opacity:0; }
  4.2%{ opacity:1; }
  20.8%{ opacity:1; }
  25%{ opacity:0; }
  100%{ opacity:0; }
}
.scene-layer{
  position:absolute;
  inset:0;
  animation:sceneCycle 24s ease-in-out infinite;
}
.scene-layer img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.scene-forest{ animation-delay:0s; }
.scene-beach{ animation-delay:-6s; }
.scene-cave{ animation-delay:-12s; }
.scene-trail{ animation-delay:-18s; }

.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(239,234,224,0.92) 0%,
    rgba(239,234,224,0.82) 32%,
    rgba(239,234,224,0.5) 62%,
    rgba(239,234,224,0.22) 100%);
}

/* a small memory pin surfaces on each photo while it's the fully-
   visible scene, then clears before the next crossfade starts --
   independent of the photo's own opacity animation (sits above the
   scrim, unfiltered) but built on the identical 24s/6s-stagger rhythm
   so it always lands on the matching scene. */
@keyframes pinReveal{
  0%, 7%{ opacity:0; transform:translateY(10px); }
  11%{ opacity:1; transform:translateY(0); }
  18%{ opacity:1; transform:translateY(0); }
  20.5%, 100%{ opacity:0; transform:translateY(-6px); }
}
.memory-pin{
  position:absolute;
  width:184px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px 11px;
  box-shadow:var(--shadow-lift);
  animation:pinReveal 24s ease-out infinite;
}
.memory-pin .pin-marker{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px var(--amber-soft);
  margin-bottom:7px;
}
.memory-pin .pin-title{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:13.5px; color:var(--ink); margin:0 0 4px; line-height:1.25; }
.memory-pin .pin-text{ font-size:11.5px; line-height:1.45; color:var(--ink-dim); margin:0 0 7px; }
.memory-pin .pin-byline{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.05em; text-transform:uppercase; color:var(--moss); }

.pin-forest{ right:7%; top:9%; animation-delay:0s; }
.pin-beach{ right:7%; bottom:9%; animation-delay:-6s; }
.pin-cave{ right:7%; top:9%; animation-delay:-12s; }
.pin-trail{ right:7%; bottom:9%; animation-delay:-18s; }

.hero-copy{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 6vw;
  max-width:560px;
}
/* A soft light-colored halo behind the headline/body text -- the
   scrim behind these fades out toward the right of the photo (and,
   before the mobile fix below, wasn't strong enough at all under
   full-width mobile text), so text sitting over a bright patch of
   whichever of the four photos happens to be showing could get hard
   to read. The halo keeps it legible against any of them without
   needing a heavier, more washed-out scrim. */
.hero-copy h1{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;
  font-size:clamp(2rem, 3.2vw, 2.9rem);
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0 0 20px;
  text-wrap:balance;
  text-shadow:0 1px 12px rgba(239,234,224,0.9), 0 1px 2px rgba(239,234,224,0.75);
}
.hero-copy p{
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 28px;
  max-width:440px;
  text-shadow:0 1px 10px rgba(239,234,224,0.9), 0 1px 2px rgba(239,234,224,0.75);
}
.btn-lg{
  border-radius:10px;
  padding:15px 26px;
  font-size:16px;
  width:fit-content;
}
.hero-microcopy{
  font-size:13px !important;
  color:var(--ink) !important;
  margin:12px 0 0 !important;
  text-shadow:0 1px 8px rgba(239,234,224,0.9);
}

/* ---- right: the featured-memory proof panel -------------------------- */

.hero-proof{
  position:relative;
  width:42%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--paper);
}
.hero-proof::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(460px 460px at 85% 8%, rgba(189,127,92,0.12) 0%, rgba(189,127,92,0) 70%),
    radial-gradient(420px 420px at 8% 92%, rgba(143,169,143,0.18) 0%, rgba(143,169,143,0) 70%);
}

.proof-inner{
  position:relative;
  width:340px;
}
.proof-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--moss);
  margin-bottom:26px;
}

.featured-stack{
  position:relative;
}
.featured-card{
  border-radius:18px;
  overflow:hidden;
  width:100%;
  height:346px;
}
.featured-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.featured-back-2{
  position:absolute;
  top:-22px; left:-48px;
  transform:rotate(-14deg);
  box-shadow:0 4px 10px -6px rgba(43,46,38,0.22);
  z-index:1;
}
.featured-back-1{
  position:absolute;
  top:-13px; left:-29px;
  transform:rotate(-8deg);
  box-shadow:0 5px 12px -6px rgba(43,46,38,0.25);
  z-index:2;
}
.featured-back-2 .featured-tint,
.featured-back-1 .featured-tint{
  position:absolute; inset:0;
  background:rgba(35,38,31,0.12);
}
.featured-front{
  position:relative;
  transform:rotate(2deg);
  box-shadow:var(--shadow-lift);
  z-index:3;
}
.featured-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(35,38,31,0.86) 0%,
    rgba(35,38,31,0.42) 42%,
    rgba(35,38,31,0) 66%);
}
.featured-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:20px 20px 18px;
}
.featured-title{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;
  font-size:19px;
  color:#fbfaf5;
  margin-bottom:7px;
}
.featured-caption p{
  font-size:13.5px;
  line-height:1.5;
  color:rgba(251,250,245,0.92);
  margin:0 0 12px;
  max-width:270px;
}
.featured-byline{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:rgba(251,250,245,0.85);
}
.featured-byline .avatar{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--amber);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  flex:none;
}

.stats-row{
  display:flex;
  margin-top:22px;
}
.stat{
  flex:1;
  text-align:center;
  padding:0 4px;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat-num{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;
  font-size:22px;
  color:var(--ink);
  line-height:1;
}
.stat-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:7.8px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-top:6px;
}

.proof-tagline{
  text-align:center;
  font-size:13.5px;
  color:var(--ink-dim);
  margin:18px 0 0;
}

@media (prefers-reduced-motion: reduce){
  .scene-layer{ animation:none; opacity:0; }
  .scene-trail{ opacity:1; }
  .memory-pin{ animation:none; opacity:0; transform:none; }
  .pin-trail{ opacity:1; }
}

/* ---- narrow viewports: stack instead of split ------------------------ */
@media (max-width: 860px){
  .hero{ flex-direction:column; min-height:0; }
  /* height:auto (with a floor of 70vh) instead of a fixed 70vh --
     on a real phone the headline + paragraph + button need more
     room than 70vh gives them at some widths, and a fixed height
     was clipping that content instead of letting the box grow,
     which also made the next section look like it was overlapping
     the cut-off text. */
  .hero-scenes{ width:100%; height:auto; min-height:70vh; }
  /* overflow:visible overrides the desktop rule -- with .hero now a
     column layout, hero-proof's overflow:hidden was making the browser
     treat its content height as 0 (a flexbox quirk: an item with
     overflow other than visible gets an automatic minimum size of 0
     instead of sizing to fit its content), which let the featured
     photo card float free of its own section instead of pushing the
     footer down below it. body's own overflow-x:hidden (see above)
     still keeps anything from spilling past the sides. */
  .hero-proof{ width:100%; padding:48px 24px; overflow:visible; }
  .hero-copy{ max-width:100%; padding:56px 6vw; }
  /* the desktop scrim is a left-to-right gradient tuned for text that
     only ever sits in the left ~58% column; on mobile the same text
     spans the full width, including the part of the photo the
     gradient barely tints, so it gets a flatter, more even tint here
     instead. */
  .hero-scrim{ background:rgba(239,234,224,0.6); }
  /* the floating "memory" card is positioned to sit beside the
     headline on wide screens; on a narrow phone there's no room
     beside it, so it was landing directly on top of the paragraph
     text instead. Simplest fix: it's a decorative preview, not
     essential content, so just don't show it at this width. */
  .memory-pin{ display:none; }
}