/* =========================================================
   Hero Showcase CSS
   Romm Coffee — full-bleed "Ken Burns" product hero.

   Works with:
   - Pages/Index.cshtml  (.showcase-hero markup)
   - wwwroot/css/design-tokens.css

   The hero image is a static, sharp photo that slowly zooms
   and drifts. Because it is the real image being scaled (not
   an AI video), all label text stays crisp and never warps.
========================================================= */

.showcase-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: flex-end;

  min-height: clamp(30rem, 82vh, 52rem);
  overflow: hidden;

  background: var(--color-primary-dark, #321d12);
}

/* --- Media layer (image + Ken Burns motion) --- */

.showcase-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.showcase-hero-img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center 42%;

  transform-origin: center 45%;

  /* Slow, gentle push-in that eases in and out forever. */
  animation: showcase-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes showcase-kenburns {
  from {
    transform: scale(1.04) translateY(0);
  }
  to {
    transform: scale(1.14) translateY(-1.2%);
  }
}

/* --- Readability overlay --- */

.showcase-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    /* The bags behind the copy are bright, so the left side needs to
       stay dark further across than a typical hero. */
    linear-gradient(
      to right,
      rgba(28, 16, 10, 0.86) 0%,
      rgba(28, 16, 10, 0.66) 38%,
      rgba(28, 16, 10, 0.24) 62%,
      rgba(28, 16, 10, 0) 82%
    ),
    linear-gradient(
      to top,
      rgba(28, 16, 10, 0.78) 0%,
      rgba(28, 16, 10, 0.32) 34%,
      rgba(28, 16, 10, 0.05) 62%,
      rgba(28, 16, 10, 0.12) 100%
    );
}

/* --- Content --- */

.showcase-hero-content {
  width: min(var(--container-lg, 1120px), calc(100% - 2rem));
  margin-inline: auto;

  padding-block: clamp(2.5rem, 6vw, 5rem);

  color: var(--color-text-light, #ffffff);
}

/* --- Compact, centred variant (secondary pages, e.g. Contact) --- */

.showcase-hero-compact {
  min-height: clamp(18rem, 40vh, 26rem);
  align-items: center;
}

.showcase-hero-compact .showcase-hero-inner {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.showcase-hero-compact .showcase-hero-description {
  margin-inline: auto;
}

/* Symmetric, bottom-weighted teal wash reads under centred text. */
.showcase-hero-compact .showcase-hero-overlay {
  background: linear-gradient(
    to top,
    rgba(5, 50, 58, 0.82) 0%,
    rgba(5, 50, 58, 0.42) 45%,
    rgba(5, 50, 58, 0.28) 100%
  );
}

.showcase-hero-inner {
  max-width: 40rem;

  /* Gentle rise-in on load. */
  animation: showcase-rise var(--transition-slow, 350ms ease) both;
}

@keyframes showcase-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.showcase-hero-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3, 0.75rem);

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent, #d6a85a);
}

.showcase-hero-title {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: var(--line-tight, 1.15);
  color: #ffffff;

  /* Two shadows: a tight one for edge definition against the bright
     bags, a wide one to sink the copy into the background. */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 2px 28px rgba(0, 0, 0, 0.6);
}

.showcase-hero-title span {
  color: var(--color-accent, #d6a85a);
}

.showcase-hero-description {
  margin-top: var(--space-4, 1rem);
  margin-bottom: 0;
  max-width: 34rem;

  font-size: var(--text-md, 1.125rem);
  line-height: var(--line-relaxed, 1.75);
  color: rgba(255, 255, 255, 0.92);

  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.55),
    0 1px 16px rgba(0, 0, 0, 0.5);
}

.showcase-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);

  margin-top: var(--space-6, 2rem);
}

/* On a dark photo, the outline button needs light borders. */
.showcase-hero-actions .btn-outline-custom {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.showcase-hero-actions .btn-outline-custom:hover {
  color: var(--color-text, #2a1c14);
  background: #ffffff;
  border-color: #ffffff;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .showcase-hero {
    min-height: clamp(28rem, 78vh, 40rem);
  }

  .showcase-hero-img {
    /* Keep the bags in frame when the viewport is tall/narrow. */
    object-position: center 40%;
  }

  .showcase-hero-actions {
    width: 100%;
  }

  .showcase-hero-actions .btn-custom {
    flex: 1 1 auto;
  }
}

/* --- Reduced motion: hold a still, sharp frame --- */

@media (prefers-reduced-motion: reduce) {
  .showcase-hero-img {
    animation: none;
    transform: scale(1.04);
  }

  .showcase-hero-inner {
    animation: none;
  }
}

/* =========================================================
   Stacked hero (home) — full product photo on top, copy below.

   The lineup photo is busy (7 bags), so overlaying text hid the
   products and hurt legibility. Here the image is shown whole and
   uncropped; the headline sits beneath it on a light panel where
   it reads perfectly and nothing is covered.
========================================================= */

.hero-stacked {
  background: var(--color-surface-soft, #eaf1f1);
}

.hero-stacked-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0c2b30;
}

.hero-stacked-media img {
  display: block;
  width: 100%;
  height: auto;

  /* Slow, gentle drift — subtle life without hiding anything. */
  animation: hero-stacked-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-stacked-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

.hero-stacked-copy {
  width: min(var(--container-md, 960px), calc(100% - 2rem));
  margin-inline: auto;
  text-align: center;

  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.hero-stacked-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3, 0.75rem);

  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary-dark, #3f7b7e);
}

.hero-stacked-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: var(--line-tight, 1.15);
  letter-spacing: -0.015em;
  color: var(--color-text, #12292d);
  text-wrap: balance;
}

.hero-stacked-title span {
  font-style: italic;
  color: var(--color-primary, #06515d);
}

.hero-stacked-desc {
  margin: var(--space-4, 1rem) auto 0;
  max-width: 52ch;

  font-size: var(--text-md, 1.125rem);
  line-height: var(--line-relaxed, 1.75);
  color: var(--color-text-muted, #5f7a7d);
  text-wrap: pretty;
}

.hero-stacked-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3, 0.75rem);

  margin-top: var(--space-6, 2rem);
}

@media (max-width: 600px) {
  /* Crop to the centre bags so they stay legible on a phone. */
  .hero-stacked-media {
    height: 58vw;
  }

  .hero-stacked-media img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hero-stacked-actions .btn-custom {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stacked-media img {
    animation: none;
  }
}