/*
 * Home page semantic palette.
 *
 * This file only supplies Home-specific color meaning. Product motion and
 * interaction timing remain owned by product-interactions.css, and the
 * reveal remains owned by home-hero-reveal.css.
 */

/* ── Hero semantic roles ──────────────────────────────────────────────── */
.home-hero {
  --hero-ink: var(--ink);
  --hero-muted: var(--muted);
  --hero-accent: var(--copper);
  --hero-surface: var(--paper-2);
  --hero-line: var(--line);
  color: var(--hero-ink);
}

@media (min-width: 901px) {
  .home-hero .hero-overlay {
    background: radial-gradient(
      ellipse 105% 125% at 0% 50%,
      color-mix(in srgb, var(--paper) 96%, transparent) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 30%,
      color-mix(in srgb, var(--paper) 72%, transparent) 50%,
      color-mix(in srgb, var(--paper) 42%, transparent) 60%,
      transparent 65%
    );
  }

  [dir="rtl"] .home-hero .hero-overlay {
    background: radial-gradient(
      ellipse 105% 125% at 100% 50%,
      color-mix(in srgb, var(--paper) 96%, transparent) 0%,
      color-mix(in srgb, var(--paper) 90%, transparent) 30%,
      color-mix(in srgb, var(--paper) 72%, transparent) 50%,
      color-mix(in srgb, var(--paper) 42%, transparent) 60%,
      transparent 65%
    );
  }
}

.home-hero .home-hero-eyebrow,
.home-hero .home-hero-headline > span[aria-hidden="true"] > span,
.home-hero .home-hero-scroll-arrow {
  color: var(--hero-accent);
}

.home-hero .home-hero-headline,
.home-hero .home-hero-support,
.home-hero .home-hero-scroll {
  color: var(--hero-ink);
}

.home-hero .home-hero-support {
  color: var(--hero-muted);
}

.home-hero .home-hero-actions .button-ghost {
  color: var(--hero-ink);
  background: color-mix(in srgb, var(--hero-surface) 78%, transparent);
  border-color: var(--hero-line);
}

/* Preserve readable copy and the top-heavy image treatment on smaller
 * screens while keeping the overlay derived from the active theme tokens. */
@media (min-width: 561px) and (max-width: 900px) {
  .home-hero .hero-overlay {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 96%, transparent) 0%,
      color-mix(in srgb, var(--paper) 82%, transparent) 35%,
      color-mix(in srgb, var(--paper) 40%, transparent) 62%,
      color-mix(in srgb, var(--paper) 10%, transparent) 100%
    );
  }
}

@media (max-width: 560px) {
  .home-hero .hero-overlay {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--paper) 96%, transparent) 0%,
      color-mix(in srgb, var(--paper) 80%, transparent) 38%,
      color-mix(in srgb, var(--paper) 30%, transparent) 66%,
      color-mix(in srgb, var(--paper) 10%, transparent) 100%
    );
  }
}

/* ── Four-package stage ───────────────────────────────────────────────── */
/* These values feed the existing shared product interaction contract. */
.home-hero .home-hero-product--shell {
  --product-glow: var(--pkg-shell);
  --product-glow-soft: var(--pkg-shell);
  --product-interaction-image-hover-filter:
    drop-shadow(0 20px 25px color-mix(in srgb, var(--pkg-shell) 35%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--pkg-shell) 28%, transparent));
}

.home-hero .home-hero-product--red-skin {
  --product-glow: var(--pkg-red-skin);
  --product-glow-soft: var(--pkg-red-skin);
  --product-interaction-image-hover-filter:
    drop-shadow(0 20px 25px color-mix(in srgb, var(--pkg-red-skin) 35%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--pkg-red-skin) 28%, transparent));
}

.home-hero .home-hero-product--blanched {
  --product-glow: var(--pkg-blanched);
  --product-glow-soft: var(--pkg-blanched);
  --product-interaction-image-hover-filter:
    drop-shadow(0 20px 25px color-mix(in srgb, var(--pkg-blanched) 30%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--pkg-blanched) 24%, transparent));
}

.home-hero .home-hero-product--mixed {
  --product-glow: var(--pkg-cashew);
  --product-glow-soft: var(--pkg-cashew);
  --product-interaction-image-hover-filter:
    drop-shadow(0 20px 25px color-mix(in srgb, var(--pkg-cashew) 32%, transparent))
    drop-shadow(0 0 22px color-mix(in srgb, var(--pkg-cashew) 26%, transparent));
}

/* ── Process timeline ─────────────────────────────────────────────────── */
.home-process-timeline .timeline-step {
  border-color: var(--line);
}

.home-process-timeline .timeline-step::before {
  background: var(--copper);
  opacity: .72;
}

.home-process-timeline .timeline-number {
  background: var(--paper-2);
  color: var(--copper);
  border-color: var(--copper);
}

.home-process-timeline .timeline-step:first-child .timeline-number {
  background: var(--copper);
  color: var(--selection-color);
  border-color: var(--copper);
}

.home-process-timeline .timeline-step h3 {
  color: var(--ink);
}

.home-process-timeline .timeline-step p {
  color: var(--muted);
}

@media (max-width: 560px) {
  .home-process-timeline .timeline-step:not(:last-child)::after {
    background: var(--copper);
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .home-hero-product--shell,
  .home-hero .home-hero-product--red-skin,
  .home-hero .home-hero-product--blanched,
  .home-hero .home-hero-product--mixed {
    --product-interaction-image-hover-filter: var(--product-interaction-image-filter);
  }
}