/* ============================================================
   HOME.CSS — "The Modern Almanac" homepage design layer
   ------------------------------------------------------------
   Loaded AFTER main.css on the homepage ONLY (index.php). It
   overrides the shared marketing styles with the premium
   editorial treatment: Fraunces display serif, DM Mono field
   notes, engraved botanicals, dark ink belts, and hooks for the
   GSAP choreography in /assets/js/home-motion.js.

   Inner pages (dashboard, listings, etc.) never load this file,
   so nothing here can leak into the app shell.

   Token additions live on :root under --alm-* to avoid fighting
   the shared main.css palette (which is kept as-is).
   ============================================================ */

:root {
  --alm-ink: #142A1D;          /* deepened green-ink for dark belts */
  --alm-ink-soft: #1C3A28;
  --alm-parchment: #EFE8D8;    /* alternate paper tone */
  --alm-tomato: #C4472B;       /* single ripe accent — used sparingly */
  --alm-hairline: rgba(26, 58, 40, 0.14);
  --font-display: 'Fraunces', 'Playfair Display', serif;
  --font-body: 'Hanken Grotesk', 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

body.home {
  font-family: var(--font-body);
  /* faint paper grain via layered radial dots — reads as texture,
     costs no image request */
  background-image:
    radial-gradient(rgba(92, 61, 46, 0.028) 1px, transparent 1px),
    radial-gradient(rgba(26, 58, 40, 0.022) 1px, transparent 1px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 11px 17px;
}

/* Selection color — tiny detail, expensive feel */
body.home ::selection { background: var(--green-light); color: var(--alm-ink); }

/* ── Typography overrides ─────────────────────────────────── */
body.home .hero-title,
body.home .section-title,
body.home .nav-logo,
body.home .spotlight-name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 0;
  letter-spacing: -0.015em;
}
body.home .section-title { font-weight: 560; color: var(--alm-ink); }
body.home .section-title em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--green-mid);
}

/* Mono field-note eyebrows replace the pill labels */
body.home .section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark);
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
body.home .section-label::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--bark-light);
  flex-shrink: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── HERO ─────────────────────────────────────────────────── */
body.home .hero {
  min-height: 92vh;
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* ── HERO VIDEO BACKGROUND ───────────────────────────────────
   Fills the hero as an ambient loop. Sits at z-index 0 so the
   existing bg circles + engraving (z:1) and hero-content (z:2)
   stack cleanly on top. GSAP in home-motion.js drives the
   scroll-linked scale/fade/blur that produces the 3D depth
   effect as the user scrolls out of the hero. */
body.home .hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
  transform-origin: center 55%;
}
body.home .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Match the parchment palette — softer, greener, dimmer. */
  filter: saturate(0.72) brightness(0.62) contrast(1.05);
}
/* Layered scrim: dark top+bottom vignette to legibility-protect
   headline + scroll cue, warm parchment glow in the middle to
   blend the video into the page background. */
body.home .hero-video-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,42,29,0.35) 0%,
      rgba(20,42,29,0.08) 42%,
      rgba(20,42,29,0.55) 100%),
    radial-gradient(ellipse 95% 65% at 30% 45%,
      rgba(239,232,216,0.55) 0%,
      rgba(239,232,216,0) 60%);
  pointer-events: none;
}

/* Foreground content sits above video + ambient decor and gets
   its own 3D plane so GSAP can lift it toward the viewer on scroll. */
body.home .hero-content {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
body.home .hero-bg-circle,
body.home .hero-engraving {
  z-index: 1;
}

/* Reduced motion + explicit no-motion escape hatch: freeze on
   the poster frame instead of playing the loop. */
@media (prefers-reduced-motion: reduce) {
  body.home .hero-video { display: none; }
  body.home .hero-video-wrap {
    background-image: url('/assets/video/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}
html.no-motion body.home .hero-video { display: none; }
html.no-motion body.home .hero-video-wrap {
  background-image: url('/assets/video/hero-poster.jpg');
  background-size: cover;
  background-position: center;
}

/* ── HERO VIDEO — mobile tuning ─────────────────────────────
   The source is a 9:16 phone screen-recording, so on a phone
   viewport the video's dark app-header dominates the top of
   the hero and pushes the real headline below the fold. Fix
   three ways for ≤640px:
   1. Object-position focuses on the middle-lower part of the
      video (skips the dark app header at top).
   2. Stronger scrim so the video reads as texture, not UI.
   3. Reduce hero min-height so headline sits above the fold. */
@media (max-width: 640px) {
  body.home .hero {
    min-height: auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  body.home .hero-video {
    object-position: center 68%;
    filter: saturate(0.45) brightness(0.42) contrast(1.05) blur(1.5px);
  }
  body.home .hero-video-scrim {
    background:
      linear-gradient(180deg,
        rgba(20,42,29,0.70) 0%,
        rgba(20,42,29,0.55) 40%,
        rgba(239,232,216,0.88) 100%);
  }
  /* The hero-visual is a static app mockup — on mobile it's
     duplicative of the video (both show the same app UI) and
     eats prime above-the-fold space. Hide it on phones so the
     video + headline get room to breathe. */
  body.home .hero-visual { display: none; }
}

/* ── Hero text legibility over the video ────────────────────
   Text over a moving video always wants extra defense against
   whatever the video happens to be showing in that frame.
   Solved two ways:
   1. A soft "letterbox" — a radial gradient anchored under the
      text column that locally darkens the video where copy sits.
   2. Subtle text-shadow on the headline + body copy — a warm
      cream glow at low opacity, invisible on a plain background
      but enough to separate letters from busy imagery. */
body.home .hero-content::before {
  content: '';
  position: absolute;
  inset: -2rem -1.5rem -1rem -1.5rem;
  background:
    radial-gradient(ellipse 85% 70% at 30% 45%,
      rgba(20, 42, 29, 0.48) 0%,
      rgba(20, 42, 29, 0.30) 45%,
      rgba(20, 42, 29, 0) 75%);
  z-index: -1;
  pointer-events: none;
  border-radius: 24px;
  filter: blur(6px);
}
body.home .hero-title,
body.home .hero-title em {
  text-shadow:
    0 1px 0 rgba(239, 232, 216, 0.35),
    0 0 24px rgba(239, 232, 216, 0.28);
}
body.home .hero-sub {
  color: var(--stitch-on-primary-container, #cfe4d0);
  text-shadow:
    0 1px 2px rgba(20, 42, 29, 0.45),
    0 0 12px rgba(20, 42, 29, 0.35);
}
body.home .hero-badge {
  background-color: rgba(251, 249, 245, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 640px) {
  body.home .hero-content::before {
    inset: -1rem -1rem -1rem -1rem;
    background:
      radial-gradient(ellipse 100% 65% at 30% 45%,
        rgba(20, 42, 29, 0.62) 0%,
        rgba(20, 42, 29, 0.42) 50%,
        rgba(20, 42, 29, 0) 80%);
    filter: blur(4px);
  }
  body.home .hero-title {
    color: #f2ede0;
    text-shadow:
      0 2px 4px rgba(20, 42, 29, 0.55),
      0 0 20px rgba(20, 42, 29, 0.4);
  }
  body.home .hero-title em {
    color: #a0d2a9;
  }
  body.home .hero-sub {
    color: #e4e2de;
    text-shadow: 0 1px 3px rgba(20, 42, 29, 0.7);
  }
}

body.home .hero-title {
  font-size: clamp(3rem, 5.6vw, 4.8rem);
  font-weight: 500;
  line-height: 1.06;
  display: block;
}
/* Masked line-rise reveal: each line clips its inner span. Lines are
   fully visible by default (no-JS / reduced-motion safe); home-motion.js
   sets the initial offset itself before animating. */
.hl-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hl-inner { display: inline-block; will-change: transform; }

/* Kill the old CSS keyframe entrances — GSAP owns the hero timeline.
   (Under reduced motion these elements simply appear, see media query.) */
body.home .hero-badge,
body.home .hero-title,
body.home .hero-sub,
body.home .hero-actions,
body.home .hero-visual { animation: none; }

body.home .hero-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  background: transparent;
  border: 1px solid var(--alm-hairline);
  color: var(--green-deep);
}
body.home .hero-badge-dot { animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.45); }
  55%      { box-shadow: 0 0 0 6px rgba(45, 106, 79, 0); }
}

.hero-fieldnote {
  margin-top: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.fieldnote-rule { width: 44px; height: 1px; background: var(--bark-light); flex-shrink: 0; }

/* Engraved botanical backdrop, right of the headline, behind the phone */
.hero-engraving {
  position: absolute;
  right: 42%;
  top: 8%;
  height: 88%;
  width: auto;
  opacity: 0.10;
  color: var(--green-deep);
  pointer-events: none;
  z-index: 1;
}
.eng-stroke {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

/* Floating badges sit ABOVE the phone (main.css has no z-index, so the
   later-painted phone used to clip them) and hand their idle bobbing to
   GSAP — the main.css keyframe would override GSAP's inline transform. */
body.home .float-badge { z-index: 5; animation: none; }

/* Phone gets a subtler, deeper presentation */
body.home .hero-phone {
  box-shadow:
    0 60px 120px -30px rgba(20, 42, 29, 0.45),
    0 24px 48px -20px rgba(20, 42, 29, 0.30),
    0 0 0 6px rgba(255, 255, 255, 0.10);
}

/* Scroll cue */
.hero-scrollcue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  z-index: 2;
}
.scrollcue-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scrollcue-stem {
  width: 1.5px;
  height: 42px;
  background: linear-gradient(var(--green-mid), transparent);
  border-radius: 2px;
  animation: stem-drop 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes stem-drop {
  0%   { transform: scaleY(0); }
  45%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── VINE SPINE (signature) ───────────────────────────────── */
/* Fixed left-gutter SVG whose stem path is drawn by scroll progress.
   Hidden on narrow viewports and under reduced motion. */
.vine-spine {
  position: fixed;
  left: 18px;
  top: 0;
  height: 100vh;
  width: 44px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;               /* faded in by JS after hero */
}
.vine-stem {
  stroke: var(--green-mid);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.vine-leaf {
  fill: var(--green-bright);
  opacity: 0;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vine-leaf.grown { opacity: 0.9; transform: scale(1); }
.vine-bloom {
  fill: var(--amber);
  opacity: 0;
  transform-origin: center;
  transform: scale(0.2) rotate(-40deg);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vine-bloom.grown { opacity: 0.95; transform: scale(1) rotate(0deg); }
@media (max-width: 1180px) { .vine-spine { display: none; } }

/* ── SEASON TICKER ────────────────────────────────────────── */
.season-section {
  border-top: 1px solid var(--alm-hairline);
  border-bottom: 1px solid var(--alm-hairline);
  background: var(--alm-parchment);
  padding: 1.1rem 0 1.3rem;
  overflow: hidden;
}
.season-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark);
  text-align: center;
  margin-bottom: 0.8rem;
}
.season-eyebrow { display: none; } /* reserved for a stacked layout later */
.season-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.season-track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  white-space: nowrap;
  will-change: transform;
}
.season-item {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 80;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--green-deep);
}
.season-seed { color: var(--alm-tomato); flex-shrink: 0; opacity: 0.75; }

/* ── STATS LEDGER ─────────────────────────────────────────── */
body.home .stats-bar {
  border-top: none;
  border-bottom: 1px solid var(--alm-hairline);
  background: transparent;
  padding: 2.6rem 4rem;
}
body.home .stat-num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 2rem;
  color: var(--alm-ink);
  font-variant-numeric: tabular-nums;
}
body.home .stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── FEATURES BENTO ───────────────────────────────────────── */
/* main.css paints .features-section as a dark green belt with white
   text. The almanac layout keeps this section on paper (the dark belt
   is testimonials') — so every text color must be re-anchored for a
   light background, not just the card surfaces. */
body.home .features-section { background: transparent; }
body.home .features-section .section-title { color: var(--alm-ink); }
body.home .features-section .section-body { color: var(--text-mid); }
body.home .feature-title { color: var(--alm-ink); }
body.home .feature-text { color: var(--text-mid); }
body.home .feature-tag {
  border-color: var(--alm-hairline);
  color: var(--text-mid);
}
body.home a.feature-tag:hover {
  background: rgba(45, 106, 79, 0.08);
  color: var(--green-deep);
  border-color: rgba(45, 106, 79, 0.4);
}
body.home .feature-card-body:hover .feature-title { color: var(--green-mid); }

body.home .features-grid.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
body.home .bento > .feature-card { grid-column: span 2; }
body.home .bento > .feature-card.bento-wide { grid-column: span 3; }
/* Full-width closer card: icon left, copy right, tags trailing */
body.home .bento > .feature-card.bento-full { grid-column: 1 / -1; }
body.home .bento > .feature-card.bento-full .feature-card-body {
  display: flex; align-items: center; gap: 1.6rem;
}
body.home .bento > .feature-card.bento-full .feature-icon-wrap { flex-shrink: 0; margin-bottom: 0; }
body.home .bento > .feature-card.bento-full .feature-title { margin-bottom: 0.35rem; }
@media (max-width: 700px) {
  body.home .bento > .feature-card.bento-full .feature-card-body { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

body.home .feature-card {
  border: 1px solid var(--alm-hairline);
  border-radius: 18px;
  background: #FDFBF6;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
body.home .feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45, 106, 79, 0.35);
  box-shadow: 0 24px 48px -24px rgba(20, 42, 29, 0.28);
}
.f-icon { width: 44px; height: 44px; display: block; }
body.home .feature-icon-wrap {
  width: 72px; height: 72px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
}
body.home .feature-title { font-family: var(--font-display); font-weight: 560; font-size: 1.18rem; }

@media (max-width: 960px) {
  body.home .features-grid.bento { grid-template-columns: 1fr 1fr; }
  body.home .bento > .feature-card,
  body.home .bento > .feature-card.bento-wide { grid-column: span 1; }
}
@media (max-width: 600px) {
  body.home .features-grid.bento { grid-template-columns: 1fr; }
}

/* ── TESTIMONIALS — dark ink belt, scattered cards ────────── */
body.home .testimonials-section {
  background: var(--alm-ink);
  border-radius: 28px;
  max-width: 1240px;
  margin: 4rem auto;
  padding: 5.5rem 3rem;
}
body.home .testimonials-section .section-title,
body.home .testimonials-section .section-body { color: var(--cream); }
body.home .testimonials-section .section-title em { color: var(--green-bright); }
body.home .testimonials-section .section-label { color: var(--bark-light); }
body.home .testimonials-section .section-label::before { background: rgba(201, 168, 130, 0.5); }

body.home .testimonial-card {
  background: var(--cream);
  border: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Pinned-card scatter — straightens on hover */
body.home .testimonial-card.scatter-l { transform: rotate(-1.4deg); }
body.home .testimonial-card.scatter-c { transform: rotate(0.8deg) translateY(10px); }
body.home .testimonial-card.scatter-r { transform: rotate(-0.6deg); }
body.home .testimonial-card:hover { transform: rotate(0deg) translateY(-4px); }

body.home .grower-spotlight { margin-top: 3rem; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}
.faq-categories {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.home .faq-item {
  border: 1px solid var(--alm-hairline);
  border-radius: 14px;
  background: #FDFBF6;
  transition: border-color 0.25s ease;
}
body.home .faq-item.active { border-color: rgba(45, 106, 79, 0.4); }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── CTA ──────────────────────────────────────────────────── */
.cta-sun svg { animation: sun-turn 40s linear infinite; transform-origin: center; }
@keyframes sun-turn { to { transform: rotate(360deg); } }

/* ── Buttons: magnetic base + arrow micro-interaction ─────── */
[data-magnetic] { will-change: transform; }
body.home .btn-primary {
  position: relative;
  overflow: hidden;
}
/* soft sheen sweep on hover */
body.home .btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
body.home .btn-primary:hover::after { left: 130%; }

/* Keyboard focus that matches the brand */
body.home a:focus-visible,
body.home button:focus-visible {
  outline: 2px solid var(--green-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reveal handoff ────────────────────────────────────────
   When home-motion.js runs it adds .gsap-on to <body> and takes
   over all .reveal animation with ScrollTrigger.batch. Neutralize
   the main.css CSS-transition version so the two never fight
   (double-fade / stuck-invisible races). Without JS or with
   reduced motion, .gsap-on is never added and the main.css
   IntersectionObserver fallback works exactly as before. */
body.home.gsap-on .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── Bloom motion support ──────────────────────────────────
   Bloom-target elements get GPU-composited so the springy
   back.out ease stays smooth on mobile. */
body.home.gsap-on .problem-card-icon,
body.home.gsap-on .stat-num,
body.home.gsap-on .feature-card-icon,
body.home.gsap-on .impact-icon,
body.home.gsap-on .section-title { will-change: transform, opacity; }

/* ── Static-page mode (?nomotion=1) ───────────────────────
   home-motion.js adds html.no-motion and skips all GSAP. Every
   reveal is forced visible and the hero sizes to content so the
   page reads top-to-bottom with zero scroll dependence. */
html.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-motion body.home .hero { min-height: auto; }
html.no-motion .scrollcue-stem,
html.no-motion .cta-sun svg,
html.no-motion body.home .hero-badge-dot { animation: none; }

/* ── Responsive: hero ─────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-engraving { display: none; }
  .hero-scrollcue { display: none; }
  body.home .stats-bar { padding: 2rem 1.5rem; }
  body.home .testimonials-section { border-radius: 0; margin: 2rem 0; padding: 4rem 1.5rem; }
}

/* ── Reduced motion: static, fully visible page ───────────── */
@media (prefers-reduced-motion: reduce) {
  body.home .hero-badge-dot,
  .scrollcue-stem,
  .cta-sun svg { animation: none; }
  .season-track { transform: none !important; }
  .vine-spine { display: none; }
  body.home .testimonial-card.scatter-l,
  body.home .testimonial-card.scatter-c,
  body.home .testimonial-card.scatter-r { transform: none; }
}