/*
 * 99SEEDS homepage hero — desktop art direction.
 *
 * A softly tinted full-bleed copy of each artwork gives ultra-wide screens one
 * continuous canvas. A fixed, softly feathered high-detail layer keeps the
 * subject crisp without moving its blend boundary or stretching it across the
 * complete viewport.
 */

/*
 * Same Google Fonts asset as before, but without the extra render-blocking
 * fonts.googleapis.com stylesheet hop. `swap` preserves immediate text paint.
 */
@font-face {
  font-family: 'Staatliches';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/staatliches/v15/HI_OiY8KO6hCsQSoAPmtMYebvpCfOMPT.woff2') format('woff2');
}

/*
 * One artwork per slide across every breakpoint. The version token is part of
 * the URL only to bypass long-lived browser caches after an artwork swap.
 */
body.home #bannerSlider .slide:nth-child(1) {
  --hero-image: url('/wp-content/uploads/2026/06/99seeds-hero-botanical-prism-20260622.webp?v=cartoon-20260729-v2');
}

body.home #bannerSlider .slide:nth-child(2) {
  --hero-image: url('/wp-content/uploads/2026/06/99seeds-hero-california-dream-20260622.webp?v=cartoon-20260729-v2');
}

body.home #bannerSlider .slide:nth-child(3) {
  --hero-image: url('/wp-content/uploads/2026/06/99seeds-hero-member-club-20260622.webp?v=cartoon-20260729-v2');
}

@media (min-width: 768px) and (max-width: 991px) {
  body.home #bannerSlider .slide {
    background-image:
      linear-gradient(90deg, rgba(16, 4, 10, 0.86) 0%, rgba(24, 6, 12, 0.64) 38%, rgba(24, 6, 12, 0.18) 72%),
      var(--hero-image) !important;
  }
}

@media (max-width: 767px) {
  body.home #bannerSlider .slide:nth-child(1) {
    background-image:
      linear-gradient(180deg, rgba(6, 9, 16, 0.02) 0%, rgba(6, 9, 16, 0.18) 42%, rgba(6, 9, 16, 0.9) 78%, rgba(6, 9, 16, 0.97) 100%),
      var(--hero-image) !important;
  }

  body.home #bannerSlider .slide:nth-child(2) {
    background-image:
      linear-gradient(180deg, rgba(6, 12, 18, 0.02) 0%, rgba(6, 12, 18, 0.12) 40%, rgba(6, 12, 18, 0.86) 78%, rgba(6, 12, 18, 0.96) 100%),
      var(--hero-image) !important;
  }

  body.home #bannerSlider .slide:nth-child(3) {
    background-image:
      linear-gradient(180deg, rgba(10, 4, 18, 0.02) 0%, rgba(10, 4, 18, 0.16) 40%, rgba(10, 4, 18, 0.88) 76%, rgba(10, 4, 18, 0.97) 100%),
      var(--hero-image) !important;
  }
}

@media (min-width: 992px) {
  body.home #bannerSlider.banner-slider {
    height: clamp(520px, 55svh, 660px);
    background: #070b12;
    isolation: isolate;
  }

  body.home #bannerSlider .slider-track {
    will-change: transform;
  }

  body.home #bannerSlider .slide {
    --hero-ink-rgb: 7, 11, 18;
    --hero-image: none;
    --hero-glow-rgb: 255, 216, 54;
    --hero-image-size: clamp(1240px, 96vw, 1920px);
    --hero-reading-veil: linear-gradient(
      90deg,
      rgba(var(--hero-ink-rgb), 0.9) 0%,
      rgba(var(--hero-ink-rgb), 0.82) 18%,
      rgba(var(--hero-ink-rgb), 0.65) 34%,
      rgba(var(--hero-ink-rgb), 0.39) 49%,
      rgba(var(--hero-ink-rgb), 0.16) 63%,
      rgba(var(--hero-ink-rgb), 0.04) 74%,
      rgba(var(--hero-ink-rgb), 0) 84%
    );
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 3vw, 3.75rem);
    background-color: rgb(var(--hero-ink-rgb)) !important;
    background-image:
      linear-gradient(
        90deg,
        rgba(var(--hero-ink-rgb), 0.24),
        rgba(var(--hero-ink-rgb), 0.12) 48%,
        rgba(var(--hero-ink-rgb), 0.03)
      ),
      var(--hero-image) !important;
    background-repeat: no-repeat;
    background-position: center 48%;
    background-size: cover;
  }

  /*
   * Keep the high-detail artwork fixed. The feather starts before the image
   * plane itself, so there is no hard boundary even on 2550 px-wide viewports.
   */
  body.home #bannerSlider .slide::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: var(--hero-image);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: var(--hero-image-size) auto;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 18%,
      rgba(0, 0, 0, 0.1) 27%,
      rgba(0, 0, 0, 0.38) 38%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.94) 60%,
      #000 72%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      transparent 18%,
      rgba(0, 0, 0, 0.1) 27%,
      rgba(0, 0, 0, 0.38) 38%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.94) 60%,
      #000 72%
    );
    pointer-events: none;
  }

  /* A focused reading veil replaces the former half-screen black field. */
  body.home #bannerSlider .slide::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
      linear-gradient(
        180deg,
        rgba(var(--hero-ink-rgb), 0.1) 0%,
        rgba(var(--hero-ink-rgb), 0) 52%,
        rgba(var(--hero-ink-rgb), 0.3) 100%
      ),
      radial-gradient(
        ellipse 36% 88% at 46% 48%,
        rgba(var(--hero-glow-rgb), 0.095) 0%,
        rgba(var(--hero-glow-rgb), 0.03) 46%,
        transparent 76%
      ),
      var(--hero-reading-veil);
    pointer-events: none;
  }

  body.home #bannerSlider .slide:nth-child(1) {
    --hero-ink-rgb: 7, 11, 18;
    --hero-glow-rgb: 255, 216, 54;
  }

  body.home #bannerSlider .slide:nth-child(2) {
    --hero-ink-rgb: 8, 12, 20;
    --hero-glow-rgb: 79, 195, 247;
  }

  body.home #bannerSlider .slide:nth-child(3) {
    --hero-ink-rgb: 12, 4, 24;
    --hero-glow-rgb: 255, 122, 163;
  }

  body.home #bannerSlider .slide-inner {
    position: relative;
    z-index: 2;
    width: min(42vw, 700px) !important;
    max-width: 700px !important;
    margin-right: auto !important;
    margin-left: clamp(6rem, 9.75vw, 11.5rem) !important;
    text-align: left !important;
  }

  body.home #bannerSlider .slide-inner::before {
    content: '';
    display: block;
    width: clamp(48px, 4vw, 68px);
    height: 4px;
    margin-bottom: clamp(1rem, 1.35vw, 1.35rem);
    border-radius: 999px;
    background: var(--btn, #ffd836);
    box-shadow: 0 0 24px color-mix(in srgb, var(--btn, #ffd836) 42%, transparent);
  }

  body.home #bannerSlider .headline {
    max-width: 100% !important;
    margin: 0 0 clamp(1rem, 1.35vw, 1.35rem) !important;
    font-size: clamp(3.25rem, 3.75vw, 5.5rem) !important;
    line-height: 0.93 !important;
    letter-spacing: -0.01em !important;
    text-wrap: balance;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.38);
  }

  body.home #bannerSlider .subline {
    max-width: 44ch !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.05rem, 1.05vw, 1.25rem) !important;
    line-height: 1.42;
  }

  body.home #bannerSlider .cta {
    position: relative;
    z-index: 2;
    align-self: flex-start !important;
    overflow: hidden;
    isolation: isolate;
    min-height: 50px;
    margin: clamp(1.35rem, 1.8vw, 1.75rem) 0 0 clamp(6rem, 9.75vw, 11.5rem) !important;
    padding: 0.95rem 1.45rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.65rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  }

  body.home #bannerSlider .cta::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -55%;
    bottom: -55%;
    left: -42%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
    pointer-events: none;
    transform: translate3d(-180%, 0, 0) skewX(-18deg);
  }

  body.home #bannerSlider .cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 40px rgba(0, 0, 0, 0.34);
  }

  body.home #bannerSlider .cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
  }

  body.home #bannerSlider .pager {
    bottom: 1rem;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(5, 7, 12, 0.44);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
  }

  body.home #bannerSlider .pager li {
    width: 34px;
    height: 3px;
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms ease;
  }

  body.home #bannerSlider .pager li.is-active {
    width: 50px;
  }

  body.home #bannerSlider.is-motion-ready .slide:not(.is-active) .slide-inner::before,
  body.home #bannerSlider.is-motion-ready .slide:not(.is-active) .headline,
  body.home #bannerSlider.is-motion-ready .slide:not(.is-active) .subline,
  body.home #bannerSlider.is-motion-ready .slide:not(.is-active) .cta {
    opacity: 0;
  }

  body.home #bannerSlider.is-motion-ready .slide.is-active .slide-inner::before {
    transform-origin: left center;
    animation: seedsHeroLineReveal 680ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.home #bannerSlider.is-motion-ready .slide.is-active .headline {
    animation: seedsHeroTitleReveal 820ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.home #bannerSlider.is-motion-ready .slide.is-active .subline {
    animation: seedsHeroCopyReveal 720ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.home #bannerSlider.is-motion-ready .slide.is-active .cta {
    animation: seedsHeroCtaReveal 680ms 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.home #bannerSlider.is-motion-ready .slide.is-active .cta::after {
    animation: seedsHeroCtaSheen 920ms 1.05s ease-out both;
  }
}

@keyframes seedsHeroLineReveal {
  from {
    opacity: 0;
    transform: scaleX(0.12);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes seedsHeroTitleReveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    clip-path: inset(-8% -4% -12% -4%);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes seedsHeroCopyReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes seedsHeroCtaReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 0.65rem);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0.65rem);
  }
}

@keyframes seedsHeroCtaSheen {
  from {
    transform: translate3d(-180%, 0, 0) skewX(-18deg);
  }

  to {
    transform: translate3d(650%, 0, 0) skewX(-18deg);
  }
}

/*
 * Wide, low desktop windows need less empty ink and a more central copy anchor.
 * The image remains dark enough behind the complete text column, then opens up
 * much earlier through the middle of the viewport.
 */
@media (min-width: 1600px) {
  body.home #bannerSlider .slide {
    --hero-reading-veil: linear-gradient(
      90deg,
      rgba(var(--hero-ink-rgb), 0.88) 0%,
      rgba(var(--hero-ink-rgb), 0.8) 14%,
      rgba(var(--hero-ink-rgb), 0.65) 27%,
      rgba(var(--hero-ink-rgb), 0.43) 39%,
      rgba(var(--hero-ink-rgb), 0.22) 50%,
      rgba(var(--hero-ink-rgb), 0.08) 60%,
      rgba(var(--hero-ink-rgb), 0.02) 69%,
      rgba(var(--hero-ink-rgb), 0) 77%
    );
  }
}

@media (min-width: 1600px) and (max-height: 850px) {
  body.home #bannerSlider .slide-inner {
    margin-left: clamp(11rem, 10.5vw, 17rem) !important;
  }

  body.home #bannerSlider .cta {
    margin-left: clamp(11rem, 10.5vw, 17rem) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body.home #bannerSlider .slide {
    --hero-reading-veil: linear-gradient(
      90deg,
      rgba(var(--hero-ink-rgb), 0.94) 0%,
      rgba(var(--hero-ink-rgb), 0.87) 26%,
      rgba(var(--hero-ink-rgb), 0.65) 48%,
      rgba(var(--hero-ink-rgb), 0.31) 70%,
      rgba(var(--hero-ink-rgb), 0.06) 88%,
      rgba(var(--hero-ink-rgb), 0) 100%
    );
    padding-inline: clamp(1.5rem, 2.8vw, 2.25rem);
  }

  body.home #bannerSlider .slide-inner {
    width: min(47vw, 540px) !important;
    margin-left: clamp(0.5rem, 2vw, 1.5rem) !important;
  }

  body.home #bannerSlider .headline {
    font-size: clamp(3.1rem, 5.1vw, 3.75rem) !important;
  }

  body.home #bannerSlider .cta {
    margin-left: clamp(0.5rem, 2vw, 1.5rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home #bannerSlider .slider-track,
  body.home #bannerSlider .cta,
  body.home #bannerSlider .pager li {
    transition-duration: 0.01ms !important;
  }

  body.home #bannerSlider .slide::before,
  body.home #bannerSlider .slide-inner::before,
  body.home #bannerSlider .headline,
  body.home #bannerSlider .subline,
  body.home #bannerSlider .cta,
  body.home #bannerSlider .cta::after {
    animation: none !important;
  }

  body.home #bannerSlider .cta::after {
    display: none;
  }
}