/* ==========================================================================
   HOME PAGE STYLES
   ==========================================================================
   Styles that ONLY apply to index.html live here, not in components.css.
   This keeps components.css focused on things reused across the whole
   site, and makes it obvious where to look when you want to change
   something specific to the home page.
   ========================================================================== */


/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  position: relative;
  padding-block: var(--space-5xl) var(--space-6xl);
  overflow: hidden; /* clips the decorative gradient blob so it can't
                        cause a horizontal scrollbar on small screens */
}

/* ------------------------------------------------------------------
   PREMIUM ENTRANCE ANIMATION
   ------------------------------------------------------------------
   Each hero child fades in and lifts slightly, staggered in sequence:
   badge, then heading, then subline, then actions, then founder note.
   This is a page-load animation (not scroll-triggered), so it needs no
   JavaScript — every element gets a fixed animation-delay and the
   browser runs them in order automatically once the page paints.

   "animation: ... both" is doing two jobs: the "backwards" half of
   fill-mode holds the 0% keyframe (invisible, shifted down) BEFORE the
   animation starts, so there's no flash of the element in its final
   position before its delay elapses. The "forwards" half holds the
   100% keyframe after the animation completes, so the element doesn't
   snap back to its pre-animation state.

   Accessibility: no extra media query is needed here. base.css already
   collapses every animation-duration to 0.01ms under
   prefers-reduced-motion — that global rule applies to these
   animations automatically, so anyone with reduced motion enabled
   simply sees the final layout immediately, with no perceptible
   animation at all.
   ------------------------------------------------------------------ */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-status-badge {
  animation: heroFadeUp 600ms var(--ease-smooth) both;
  animation-delay: 60ms;
}

.hero h1 {
  animation: heroFadeUp 600ms var(--ease-smooth) both;
  animation-delay: 160ms;
}

.hero-subline {
  animation: heroFadeUp 600ms var(--ease-smooth) both;
  animation-delay: 280ms;
}

.hero-actions {
  animation: heroFadeUp 600ms var(--ease-smooth) both;
  animation-delay: 400ms;
}

.hero-founder-note {
  animation: heroFadeUp 600ms var(--ease-smooth) both;
  animation-delay: 520ms;
}

/* The decorative gradient shape behind the hero text. This is a
   PLACEHOLDER for what would ideally be a real illustration matching the
   app's painterly art style (see meditation.png / run1.png in the app's
   asset catalog) — replace the background of .hero-blob with an <img>
   pointing at a real illustration when one is ready. For now, a soft
   blurred gradient shape echoes the app icon without needing an image. */
.hero-blob {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 640px;
  height: 640px;
  max-width: 90vw;
  border-radius: 50%;
  background: var(--color-brand-gradient-soft);
  opacity: 0.18;
  filter: blur(80px);
  z-index: -1;
  /* Slow, ambient drift — 30 second loop, barely perceptible. This is
     the kind of motion the design brief calls "atmosphere": present,
     but never distracting from the text sitting on top of it. */
  animation: drift 30s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.05); }
}

/* ------------------------------------------------------------------
   HERO PROGRESS-LINE MOTIF
   ------------------------------------------------------------------
   The same uneven, upward-trending line from the About page's
   consistency section (same polyline shape, same styling approach —
   see about.html), reused here at very low opacity as a quiet
   background element. This is intentionally NOT animated: the blob
   already provides ambient motion in this section, and layering a
   second moving element would start to feel busy rather than calm.
   The line sits behind all hero text (z-index below .hero-inner,
   which is unset/auto and therefore stacks above this).
   ------------------------------------------------------------------ */
.hero-progress-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  width: 100%;
  height: auto;
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 720px;
  position: relative; /* ensures hero text stacks above .hero-progress-line */
}

/* ------------------------------------------------------------------
   SECTION DIVIDER — the same progress-line motif, reused as a thin
   strip at section seams instead of a hero background layer. Static,
   no animation (this is a quiet structural detail, not a moment to
   draw attention to). Placed at the two seams where a section's
   background changes, so the line reinforces a transition that's
   already happening rather than inventing a new one.
   ------------------------------------------------------------------ */
.section-divider {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin-inline: auto;
  opacity: 0.12;
}

.hero h1 {
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

/* Small spacing adjustment for the launching-soon badge specifically
   when it sits above the hero h1 — the base .pill component (defined
   in components.css) doesn't have bottom margin by default since it's
   normally used inline within a sentence, not stacked above a heading. */
.hero-status-badge {
  position: relative;
  padding-left: calc(var(--space-lg) + 12px); /* room for the status dot */
  margin-bottom: var(--space-lg);
}

/* Matches the final-cta-badge's status-dot pattern (see components.css
   for the shared badgePulse keyframe) — same restrained "live status"
   signal, applied here since .hero-status-badge uses the base .pill
   component rather than final-cta-badge's own markup. */
.hero-status-badge::before {
  content: '';
  position: absolute;
  left: var(--space-lg);
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-blue);
  animation: badgePulse 2.4s var(--ease-smooth) infinite;
}

/* Highlights one phrase within the h1 using the brand gradient as a text
   color — a small, deliberate accent rather than coloring the whole
   headline (which would reduce contrast and readability). */
.hero h1 .highlight {
  background: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subline {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 560px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

/* The founder's note — a small, quiet piece of authentic proof beneath
   the hero fold, replacing a fabricated testimonial or stat (see the
   content strategy discussion: authenticity over invented social proof
   pre-launch). */
.hero-founder-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 480px;
  margin-top: var(--space-3xl); /* increased from --space-2xl — more
                                    separation from the CTAs above, so
                                    the primary action reads clearly
                                    first before the eye moves to this
                                    supporting note */
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.4); /* reduced from 0.6 — quieter,
                                            reads as a soft aside rather
                                            than a bordered card
                                            competing with the CTAs */
  border-radius: var(--radius-lg);
  /* Border removed — the reduced background opacity alone is enough
     to separate this from the page background, without adding a hard
     edge that gave it equal visual weight to the CTA buttons above. */
}

.hero-founder-note .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-brand-gradient-soft);
  flex-shrink: 0;
}

.hero-founder-note p {
  font-size: var(--text-body-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ==========================================================================
   "WHY UPLIFT ME" SECTION — three philosophy pillars
   ========================================================================== */

.why-section {
  padding-block: var(--space-4xl);
}

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
  font-size: 22px;
}

.pillar h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-snug);
}

.pillar p {
  font-size: var(--text-body-md);
}

.why-closing {
  margin-top: var(--space-4xl);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-weight: 700;
  color: var(--color-text-primary);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--leading-snug);
}

@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   FEATURE PREVIEW SECTION — 3 flagship features, alternating card style
   ========================================================================== */

.feature-preview-section {
  padding-block: var(--space-6xl);
  background: var(--color-sand);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ------------------------------------------------------------------
   SCREENSHOT-READY CONTAINER
   ------------------------------------------------------------------
   Structured now so a real <img> can replace the placeholder content
   later with zero CSS changes: overflow:hidden means a future
   screenshot will respect the existing border-radius automatically
   (a plain <img> ignores its parent's border-radius unless the
   parent clips it), and object-fit:cover (applied via the
   .feature-card-visual img rule below, ready but currently unused
   since there's no <img> yet) will crop any screenshot to fill the
   4:3 frame without distortion regardless of its original aspect
   ratio. The hover lift/shadow below is the "floating card" treatment
   — no phone mockup, matching the brand review's recommendation.
   ------------------------------------------------------------------ */
.feature-card-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-sky-soft);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-medium) var(--ease-smooth),
              box-shadow var(--duration-medium) var(--ease-smooth);
  /* Updated during the content-readiness fix pass: this was a plain
     solid gradient block with no on-screen indication of what belongs
     here — only a screen-reader-only aria-label, invisible to sighted
     visitors. Swapped the gradient fill for the same light tint used
     on the Features page's placeholders, and added a real visible
     label below (see .feature-card-visual-label) so the placeholder
     reads as "intentional slot for a screenshot" rather than
     "unfinished block of color." Layout/aspect-ratio unchanged, so a
     real screenshot can replace this with zero layout changes later. */
}

/* Ready for when a real screenshot replaces the placeholder — not
   used yet since there's no <img> in the markup, but defined now so
   dropping one in requires no further CSS work. */
.feature-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The hover interaction: the whole card visual lifts and its shadow
   deepens, using the exact same transform/shadow values as the
   shared .card component elsewhere on the site — this is the same
   "premium" hover language already established, not a new pattern. */
.feature-card:hover .feature-card-visual {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.feature-card-visual-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-brand-blue);
  background: rgba(255, 255, 255, 0.8);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1px dashed var(--color-brand-blue);
  text-align: center;
}

.feature-card-visual-label svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--duration-medium) var(--ease-smooth);
}

/* A small, gentle nudge on the placeholder icon specifically — this is
   the "internal visual movement" the brief asked for, kept subtle
   enough to read as quality rather than as a gimmick. */
.feature-card:hover .feature-card-visual-label svg {
  transform: translateY(-2px) scale(1.08);
}

.feature-card h3 {
  font-size: var(--text-heading-sm);
}

.feature-card p {
  font-size: var(--text-body-md);
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   BLOG PREVIEW SECTION
   ========================================================================== */

.blog-preview-section {
  padding-block: var(--space-4xl);
}

.blog-preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.blog-card-image {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  margin-bottom: var(--space-lg);
}

.blog-card .pill {
  margin-bottom: var(--space-md);
}

.blog-card h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-snug);
}

.blog-card p {
  font-size: var(--text-body-sm);
}

@media (min-width: 768px) {
  .blog-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* NOTE: .final-cta and its related rules moved to components.css during
   the content-readiness fix pass. This section is used on all 9 pages,
   not just the homepage — but it was only defined here, in home.css,
   which only index.html loads. That meant the section had been
   rendering completely unstyled on every other page. Promoting it to
   the shared file is the same "used by more than one page → belongs in
   components.css" pattern already used for .page-hero and
   .placeholder-note earlier in this project — this one was simply
   missed when the section was first built. See components.css for the
   actual rules. */


/* ==========================================================================
   PRICING TEASER — a compact summary, not a duplicate of the full
   pricing page. Four price points + one CTA to the real page, where
   the full comparison lives.
   ========================================================================== */

.pricing-teaser-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
  .pricing-teaser-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing-teaser-item {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-medium) var(--ease-smooth);
}

.pricing-teaser-item:hover {
  transform: translateY(-4px);
}

.pricing-teaser-item.is-featured {
  background: var(--color-brand-blue);
  color: #FFFFFF;
}

.pricing-teaser-name {
  font-size: var(--text-body-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.8;
}

.pricing-teaser-price {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: 800;
  margin-top: var(--space-xs);
}

.pricing-teaser-cta-wrap {
  text-align: center;
  margin-top: var(--space-2xl);
}