/* =========================================================
   Find My Pet - landing v5
   Clean, white, airy - inspired by jitter.video.
   Loaded after style.css on the home page only.
   ========================================================= */

body.landing { background: #ffffff; }
body.landing .site-header { display: none; }

/* jitter-style buttons: near-black pill, gentle press */
body.landing .btn { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; }
body.landing .btn--primary { background: #17161a; }
body.landing .btn--primary:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow); }
body.landing .btn--primary:active { transform: translateY(0); }
body.landing .btn--lg { padding: 1.05em 2.1em; font-size: 1.05rem; }

/* minimal header */
.nav--minimal { justify-content: space-between; }
.brand--mark img { width: 40px; height: 40px; object-fit: contain; }
.nav--minimal .btn--primary { padding: 0.7em 1.4em; font-size: 0.98rem; }
.nav--minimal .nav-toggle { display: none !important; }

/* ---------- HERO v9 (full-height banner, game logo + buttons) ---------- */
.hero-v9 {
  position: relative;
  min-height: 100vh;    /* fallback for browsers without the newer viewport units */
  min-height: 100svh;   /* iOS counts 100vh as the *whole* screen, ignoring the browser bars,
                           which pushed the bottom of the hero off-screen. svh = what you see. */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* two-layer mouse parallax background (blurred meadow + heroes) */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-layer { position: absolute; inset: 0; background-position: center bottom; background-size: cover; background-repeat: no-repeat; will-change: transform; transition: transform 0.3s ease-out; }
.hero-bg--back   { background-image: url("../assets/hero-back.webp");   z-index: 0; transform: translate3d(calc(var(--mx,0) * -4px),  calc(var(--my,0) * -3px),  0) scale(1.04); }
.hero-bg--trees  { background-image: url("../assets/hero-trees.webp");  z-index: 1; transform: translate3d(calc(var(--mx,0) * -11px), calc(var(--my,0) * -8px),  0) scale(1.07); }
.hero-bg--heroes { background-image: url("../assets/hero-heroes.webp"); z-index: 2; background-size: auto 132%; transform: translate3d(calc(var(--mx,0) * -20px), calc(16% + var(--my,0) * -14px), 0); }   /* full-body file; the belt-line crop is done by the fold, not baked into the image */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-layer { transition: none; }
  .hero-bg--back { transform: scale(1.04); }
  .hero-bg--trees { transform: scale(1.07); }
  .hero-bg--heroes { transform: translateY(16%); }
}
.hero-v9-top {
  position: relative; z-index: 3;
  margin-top: calc(clamp(30px, 5vh, 70px) - 10px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(20px, 3vh, 40px);
}
.hero-v9-logo {
  width: 150px; height: auto;                        /* fixed: never shrinks on narrow widths, never balloons on mobile */
  max-width: 60vw;                                    /* safety net for ultra-narrow screens only */
  filter: none;
}
.hero-v9-bar {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.60);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 26px;                               /* rounded rectangle, not a full pill */
  padding: 16px;
  gap: 26px;                                         /* (bar has a single .badges child - real gap lives on .badges below) */
  box-shadow: 0 24px 60px -24px rgba(20, 50, 90, 0.4);
}
.hero-v9-bar .badges { gap: 16px; }                  /* match the ~16px padding to the pill edges */
.hero-v9-bar .badge { display: block; }
.hero-v9-bar .badge img { height: min(52px, 13.5vw); transition: transform 0.18s ease; } /* constant 52px on normal widths, smoothly shrinks only on very narrow screens — no breakpoint jump */
.hero-v9-bar .badge:hover img { transform: translateY(-2px); }

/* scroll hint (frosted, matches the badge bar) */
.hero-scroll {
  position: absolute; left: 50%; bottom: clamp(26px, 4vh, 48px); transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none; opacity: 1; transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-scroll.is-hidden { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.hero-scroll-mouse {
  position: relative; width: 30px; height: 48px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 26px -14px rgba(20, 50, 90, 0.5);
}
.hero-scroll-dot {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; border-radius: 999px;
  background: #fff; transform: translateX(-50%);
  animation: hero-scroll-dot 1.7s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}
.hero-scroll-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: #fff; padding-left: 0.34em;
  text-shadow: 0 1px 10px rgba(20, 50, 90, 0.35);
}
@keyframes hero-scroll-dot {
  0%   { transform: translate(-50%, 0);    opacity: 0; }
  25%  { opacity: 1; }
  70%  { transform: translate(-50%, 14px); opacity: 1; }
  100% { transform: translate(-50%, 18px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll-dot { animation: none; } }

/* ---------- section rhythm on white ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; }
.feat-section, .collect-v5 { border-top: 1px solid var(--line); }

/* ---------- Lens game card ---------- */
.lens-hero { padding-top: clamp(40px, 6vw, 90px); }
.lens-hero .section-head { max-width: 54ch; }
.try-card { background: none; padding: 0; }
.lens-stage {
  position: relative;
  aspect-ratio: 16 / 9;   /* same frame as the editor so positions match 1:1 */
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #fff;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.stage-bw {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 66.5% 100%;
  filter: contrast(0.82) opacity(0.9);
  pointer-events: none;
}
.stage-color {
  position: absolute; inset: 0;
  z-index: 2; /* under the magnifier - its glass is semi-transparent, pets read through the lens */
  clip-path: circle(var(--lens-r, 120px) at var(--lens-x, -300px) var(--lens-y, -300px));
  will-change: clip-path;
}
.stage-pet {
  position: absolute;
  left: var(--px); top: var(--py);
  width: var(--pw);
  min-width: 64px;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; margin: 0;
  cursor: none;
  transition: transform 0.15s ease;
}
.stage-pet img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(23,22,26,0.32)); }
/* no hover scaling - pets keep their real size in focus */
.stage-pet.found { animation: pet-pop 0.5s ease both; pointer-events: none; }
@keyframes pet-pop {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(0.4); opacity: 0; }
}

/* magnifier = real game asset.
   Glass in lupa.png sits at frac (0.593, 0.376), radius 0.176·width.
   So image size S = lensR / 0.176 = 5.68·lensR, and the top-left is
   offset so the glass centre lands exactly on the (lens-x, lens-y) cursor. */
.lens {
  position: absolute;
  left: 0; top: 0;
  /* size + transform are set by lens.js from the measured mask */
  pointer-events: none;
  will-change: transform;
  z-index: 4;
}
.lens-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(23,22,26,0.3)); }

/* HUD - single pill, no duplicate copy */
.lens-hud {
  position: absolute;
  right: 16px; top: 16px;
  z-index: 7;
  background: rgba(23,22,26,0.86); color: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  backdrop-filter: blur(6px);
}
.hud-count b { color: #FFC531; }

/* found toast - top-centre so it never covers the play area */
.found-toast {
  position: absolute;
  left: 50%; top: 16px;
  transform: translate(-50%, -14px);
  z-index: 8;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 22px 8px 16px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  max-width: min(90%, 460px);
}
.found-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.found-toast img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 46px; }
.found-toast b { font-family: var(--font-display); display: block; font-size: 0.98rem; }
.found-toast span { color: var(--muted); font-size: 0.82rem; line-height: 1.3; display: block; }

/* victory overlay */
.lens-victory {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  cursor: auto;
}
.lens-victory.show { opacity: 1; visibility: visible; }
.victory-card {
  position: relative;
  background: #fff; border-radius: 28px;
  box-shadow: 0 40px 90px -30px rgba(20,50,90,0.4);
  padding: clamp(30px, 4vw, 44px) clamp(26px, 4vw, 44px) clamp(26px, 3.5vw, 38px);
  text-align: center; width: min(400px, 88vw); margin: 0 20px;
}
.victory-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: #F1F0F3; color: #46434d;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.victory-close:hover { background: #e4e2e8; transform: rotate(90deg); }
.victory-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.victory-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.victory-card p { color: var(--muted); margin: 10px auto 22px; max-width: 30ch; font-size: 1.02rem; }
.victory-card p b { color: var(--ink); }
.victory-card .badges { justify-content: center; gap: 12px; }
.victory-card .badge img { height: 46px; }
.victory-again {
  display: block; margin: 18px auto 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.victory-again:hover { color: var(--ink); }

/* confetti */
.confetti { position: absolute; width: 10px; height: 14px; z-index: 10; pointer-events: none; border-radius: 2px; }

@media (hover: none) { .lens-stage { cursor: auto; } }
@media (max-width: 760px) {
  .stage-pet { min-width: 44px; }
}
/* The magnifier game needs room: a 16:9 field on a phone collapses to a ~200px
   strip where the pets are too small to hunt and a finger covers the glass.
   Drop the whole section on phones and go hero -> collection instead. */
@media (max-width: 640px) {
  .lens-hero { display: none; }
  .collect-v6 { margin-top: 0; }                    /* nothing left above to overlap */
  .ftr-col a[href="#play"] { display: none; }        /* that anchor no longer exists here */
}

/* ---------- section colours (visually separate blocks) ---------- */
.lens-hero { background: linear-gradient(180deg, #EAF3FF 0%, #F4F9FF 100%); }
.collect-v6 { background: linear-gradient(180deg, #16294A 0%, #102039 100%); }

/* stacked rounded panels — each block's rounded BOTTOM reveals the block below (jitter direction) */
.lens-hero, .collect-v6 { position: relative; border-radius: 0 0 40px 40px; }
.hero-v9 { position: relative; z-index: 4; border-radius: 0; }   /* hero: square edges, no bottom radius */
.lens-hero { z-index: 3; margin-top: -40px; }
.collect-v6 { z-index: 2; margin-top: -40px; }
.ftr { position: relative; z-index: 1; margin-top: -40px; }
@media (max-width: 640px) {
  .lens-hero, .collect-v6 { border-radius: 0 0 28px 28px; }
  .lens-hero, .collect-v6, .ftr { margin-top: -28px; }
  /* the footer rides 28px up over the panel above, so pad by that much extra to leave the
     same 30px above the logo row as .ftr-top leaves below it */
  .ftr { padding-top: 60px; }
  /* the heroes plate is a wide group shot (1700x1080); sizing it by height on a tall
     phone screen blew it up to ~1700px wide, so only a couple of giant faces showed.
     Size it down here so the whole group reads. */
  .hero-bg--heroes { background-size: auto 84%; transform: translate3d(0, 3%, 0); }
}
.collect-v6 .section-title { color: #fff; }
.collect-v6 .section-sub { color: rgba(255,255,255,0.66); }

/* ---------- Features ---------- */
.feature-ic img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(120,70,10,0.22)); }
.feat-section .feature { text-align: center; background: none; border: none; padding: 8px; }
.feat-section .feature-ic { margin: 0 auto 14px; }
.feat-section .feature h3 { font-size: 1.3rem; }
.feat-section .feature p { color: var(--muted); max-width: 30ch; margin-inline: auto; }

/* ---------- Collection (jitter-style cards) ---------- */
.collect-v6 .section-head { max-width: 46ch; }
.jmarquee { overflow-x: auto; overflow-y: hidden; width: 100%; padding: 18px 0; cursor: grab; user-select: none; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.jmarquee::-webkit-scrollbar { display: none; }
.jmarquee.grabbing { cursor: grabbing; }
.jmarquee-track { display: flex; gap: 12px; width: max-content; }
.jcard img { -webkit-user-drag: none; }

.jcard {
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  background: #F4F3F5;
  border-radius: 28px;
  padding: 20px;
  display: flex; flex-direction: column;
  transition: background 0.25s ease, transform 0.25s ease;
}
.jcard:hover { background: #EEECF1; transform: translateY(-4px); }
.jcard-art {
  height: 300px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  /* Shadow lives on the box, not the <img>: while the strip scrolls, the browser
     re-rasterises in tiles and was clipping the filter to the image's own bounds,
     so the blur flickered in and out. The box is far larger than the artwork, so
     the filter always has room. */
  filter: drop-shadow(0 26px 30px rgba(120,70,10,0.28));
}
.jcard-art img {
  max-height: 260px; width: auto; max-width: 82%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.jcard:hover .jcard-art img { transform: scale(1.05) rotate(-2deg); }
.jcard-foot { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.jcard-meta { display: flex; flex-direction: column; line-height: 1.2; }
.jcard-meta b { font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.02em; }
.jcard-meta span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Collection spotlight (one pet + story, badges on the right) ---------- */
.collect-spot { display: flex; align-items: center; gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 32px; padding: clamp(28px, 3vw, 44px) clamp(28px, 4vw, 52px); min-height: 320px; }
.collect-spot-story { min-height: 4.6em; }   /* reserve ~3 lines so the card height doesn't jump between pets */
.collect-spot-pet { width: clamp(150px, 18vw, 210px); height: auto; flex: 0 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.4)); }
.collect-spot-text { flex: 1 1 auto; }
.collect-spot-text h3 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1; color: #fff; }
.collect-spot-tag { display: block; color: rgba(255,255,255,0.5); font-size: 1rem; margin: 6px 0 16px; }
.collect-spot-story { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.5; color: #fff; max-width: 40ch; }
.collect-spot-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.collect-spot-getit { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.collect-spot .badges { flex-direction: column; gap: 12px; }
.collect-spot .badge img { height: 56px; display: block; transition: transform 0.18s ease; }
.collect-spot .badge:hover img { transform: translateY(-2px); }
@media (max-width: 820px) {
  .collect-spot { flex-direction: column; text-align: center; }
  .collect-spot-story { max-width: none; }
}


/* swipe deck + dots — phones only, both built by main.js */
.collect-dots, .spot-deck { display: none; }

@media (max-width: 640px) {
  /* The scrolling strip is gone on phones — the spotlight card *is* the gallery.
     Native scroll-snap does the swiping, so the momentum and settle feel like the
     OS rather than hand-rolled physics. */
  .jmarquee { display: none; }

  /* the hero ran straight into this heading — give it room, but not a canyon */
  .collect-v6 { padding-top: clamp(78px, 18vw, 112px); }
  /* one gap rules the vertical rhythm here (deck / dots / buttons); the children
     carry no margins of their own, so nothing compounds */
  /* overflow:hidden so the deck is cut by the card's own rounded edge — otherwise the
     neighbouring slide spilled into the padding and got sliced mid-air */
  .collect-spot { margin-top: clamp(24px, 4vw, 38px); gap: 18px; min-height: 0; padding: 24px; overflow: hidden; }

  .spot-deck {
    display: flex; width: 100%;
    align-items: flex-start;      /* slides keep their own height; JS sizes the deck */
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .spot-deck::-webkit-scrollbar { display: none; }
  /* run edge to edge inside the card, then inset the content again per slide */
  .spot-deck { margin-inline: -24px; width: calc(100% + 48px); }
  .spot-slide {
    flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
    padding-inline: 24px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  /* Shadow sits on the frame, not the <img>: the deck is a scroll container with
     overflow-y hidden, and a filter on the image itself got cut off flat. The frame's
     padding keeps the whole blur inside the box. */
  /* No drop-shadow here: the filter region kept getting clipped to the box and ending
     in a hard line under the pet. Not worth the trouble — the pets read fine flat. */
  .spot-pic { display: flex; justify-content: center; padding: 8px 0 16px; }
  .spot-slide .collect-spot-pet { width: clamp(148px, 40vw, 196px); filter: none; margin: 0; }
  .spot-slide .collect-spot-story { max-width: 30ch; min-height: 0; margin: 0; }
  .spot-slide .collect-spot-tag { margin: 6px 0 14px; }
  .spot-slide .collect-spot-text h3 { font-size: clamp(1.7rem, 7vw, 2.1rem); }

  .collect-dots { display: flex; justify-content: center; gap: 9px; width: 100%; margin: 0; }

  /* JS moves this out of the card; it sits under it as the section's own call to action */
  .collect-v6 .wrap > .collect-spot-cta { margin-top: clamp(26px, 5vw, 40px); }
  .collect-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.24); transition: background 0.2s ease, transform 0.2s ease; }
  .collect-dots span.is-on { background: #fff; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .jmarquee-track { animation: none; }
  .jcard:hover, .jcard:hover .jcard-art img { transform: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stage-pet.found { animation: none; opacity: 0; }
  .marquee--big .friend:hover { transform: none; }
}