/* ============================================================
   Brimo — home.css
   Home-page-only styles (index.html).
   Loaded AFTER style.css.
   ============================================================ */

/* ==================== HERO ==================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background:
    radial-gradient(60rem 40rem at 85% -10%, color-mix(in srgb, var(--cat-blue) 10%, transparent), transparent 60%),
    radial-gradient(50rem 40rem at -10% 110%, color-mix(in srgb, var(--cat-citrus) 10%, transparent), transparent 60%),
    var(--paper);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero__lede {
  font-size: 1.15rem;
  color: var(--mist);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ==================== THE SHELF ==================== */
.hero__media {
  position: relative;
  min-height: 28rem;   /* taller: bottles are ~35% larger now */
}

.shelf {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 0.2rem;
  height: 100%;
  /* Parallax: JS sets --px / --py (-1..1); 0 by default (bulletproof). */
  --px: 0;
  --py: 0;
}

/* Bottles enlarged ~34% over the old 100% column width. Wider than their
   grid track + justify-self:center → they overlap slightly like bottles
   crowded on a real shelf, while the grid itself still spans the same
   width (no push into the headline column). */
.shelf__item {
  width: 134%;
  justify-self: center;
  /* rotation lives in the entrance animation's resting state (below) */
}

/* Parallax rides on the inner slot so it never fights the entrance
   transform on .shelf__item (JS sets --px/--py on .shelf). */
.shelf .bottle-slot {
  transform: translate(calc(var(--px, 0) * var(--depth, 6px)),
                       calc(var(--py, 0) * var(--depth, 6px)));
  transition: transform 0.25s ease-out;
}
.shelf .bottle-slot img { position: relative; z-index: 1; }

/* Staggered heights + rotations + depth + per-bottle stagger delay +
   colored shadow tint + the masked light-sweep source image. */
.shelf__item--1 { margin-bottom: 2.6rem; --rot: -5deg; --depth: 14px; --enter-delay: 0s;    --shadow-color: var(--cat-citrus);   --shelf-img: url("../assets/products/shelf-1.png"); z-index: 1; }
.shelf__item--2 { margin-bottom: 5.2rem; --rot:  3deg; --depth: 22px; --enter-delay: 0.11s; --shadow-color: var(--cat-blue);     --shelf-img: url("../assets/products/shelf-2.png"); z-index: 2; }
.shelf__item--3 { margin-bottom: 0.7rem; --rot: -2deg; --depth: 30px; --enter-delay: 0.22s; --shadow-color: var(--cat-dish);     --shelf-img: url("../assets/products/shelf-3.png"); z-index: 3; }
.shelf__item--4 { margin-bottom: 4.0rem; --rot:  5deg; --depth: 22px; --enter-delay: 0.33s; --shadow-color: var(--cat-rose);     --shelf-img: url("../assets/products/shelf-4.png"); z-index: 2; }
.shelf__item--5 { margin-bottom: 1.6rem; --rot: -4deg; --depth: 14px; --enter-delay: 0.44s; --shadow-color: var(--cat-toilet);   --shelf-img: url("../assets/products/shelf-5.png"); z-index: 1; }

/* ---- ENTRANCE: bouncy staggered arrival (pure CSS, once on load) ----
   Each bottle drops from above (translateY(-120px)), over-rotated and
   scaled down, then settles with an overshoot easing. `both` fill holds
   the final resting state before AND after, so layout space is reserved
   from the first frame (transforms only → zero layout shift). Not
   scroll-linked: runs exactly once per page load, never replays. */
@keyframes shelf-arrive {
  from {
    opacity: 0;
    transform: translateY(-120px) rotate(calc(var(--rot, 0deg) * 1.7)) scale(0.85);
  }
  60% { opacity: 1; }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
  }
}
.shelf__item {
  opacity: 0;
  animation: shelf-arrive 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) var(--enter-delay, 0s) both;
}

/* ---- Colored shadow blob — grounds each bottle, fades/scales in just
   AFTER it lands (delay = stagger + 0.55s), reinforcing weight. ---- */
.shelf .bottle-slot::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 66%;
  height: 9%;
  transform: translateX(-50%) scale(0.5);
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--shadow-color, var(--ink)) 42%, transparent) 0%,
              transparent 72%);
  filter: blur(5px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: shelf-shadow 0.5s ease-out calc(var(--enter-delay, 0s) + 0.55s) both;
}
@keyframes shelf-shadow {
  from { opacity: 0;    transform: translateX(-50%) scale(0.5); }
  to   { opacity: 0.85; transform: translateX(-50%) scale(1); }
}

/* ---- Soft diagonal light-sweep — a single white glint that crosses the
   bottle once and fades, timed to land as the bounce settles. Masked to
   the bottle's own silhouette (--shelf-img) so it only lights the bottle,
   never a rectangle. ---- */
.shelf .bottle-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask: var(--shelf-img) center bottom / contain no-repeat;
          mask: var(--shelf-img) center bottom / contain no-repeat;
  opacity: 0;
  animation: shelf-sweep 0.7s ease-out calc(var(--enter-delay, 0s) + 0.45s) both;
}
@keyframes shelf-sweep {
  0%   { opacity: 0; background-position: 150% 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

/* Reduced motion: final state instantly — no drop, no bounce, no sweep;
   shadow shown static so bottles still read as grounded. */
@media (prefers-reduced-motion: reduce) {
  .shelf__item {
    opacity: 1;
    animation: none;
    transform: rotate(var(--rot, 0deg));
  }
  .shelf .bottle-slot::after { display: none; }
  .shelf .bottle-slot::before {
    animation: none;
    opacity: 0.85;
    transform: translateX(-50%) scale(1);
  }
}

/* ==================== TRUST STRIP ==================== */
.trust {
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
}
.trust__list {
  list-style: none;
  margin: 0;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.5rem;
}
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__stat {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--ink);
  line-height: 1;
}
.trust__label {
  font-size: 0.9rem;
  color: var(--mist);
  font-weight: 600;
}

/* ISO badge placeholder (bordered box) */
.iso-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-align: center;
}
.iso-badge strong { font-size: 0.95rem; letter-spacing: 0.04em; }

/* ==================== FEATURED PRODUCTS ==================== */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head__cta { flex: none; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-card__media {
  /* This box is exactly where a real product <img> drops in 1:1. */
  height: 13rem;
  margin-bottom: 0.4rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card__media .bottle-slot { width: 70%; height: 100%; }
.feature-card .tag { align-self: flex-start; }
.feature-card h3 { margin: 0; font-size: 1.05rem; }

/* ==================== STORY: ONE BRAND, SIX JOBS ==================== */
.story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.story__copy p { color: var(--mist); font-size: 1.08rem; margin-bottom: 1.5rem; }

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.category-list__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.category-list__row:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--dot) 40%, var(--line));
}
.category-list__row .dot {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent);
}
.category-list__row strong { display: block; font-size: 1rem; color: var(--charcoal); }
.category-list__row span:not(.dot) { font-size: 0.9rem; color: var(--mist); }

/* ==================== CLOSING CTA BANNER ==================== */
.cta-banner {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(40rem 30rem at 15% 20%, color-mix(in srgb, var(--magenta) 28%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at 85% 90%, color-mix(in srgb, var(--green) 26%, transparent), transparent 60%),
    var(--ink);
  color: var(--paper);
  text-align: center;
}
.cta-banner__inner { max-width: 40rem; margin-inline: auto; }
.cta-banner h2 { color: var(--paper); }
.cta-banner p { color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; margin-bottom: 1.75rem; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 960px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Shelf moves full-width below the copy; bottles are bigger now, so give
     it proportionally more height and ease the overlap a touch. */
  .hero__media { min-height: 24rem; order: 2; }
  .shelf__item { width: 126%; }
  .story__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Narrow phones: 5 across is tight, so trim overlap + stagger further. */
  .hero__media { min-height: 19rem; }
  .shelf__item { width: 118%; }
  .shelf__item--2 { margin-bottom: 3.4rem; }
  .shelf__item--4 { margin-bottom: 2.6rem; }
  .trust__list { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3) { border-left: none; }
  .trust__item + .trust__item { border-left: none; }
  .featured-grid { grid-template-columns: 1fr; }
}