/* ═══════════════════════════════════════════════════════════════════
   AIRGAS SHOP — REDESIGN LAYER (v2)
   Loads AFTER css/style.css + css/shop.css. Adds the cinematic hero,
   category showcase, product ribbon, brand marquee, and CTA + the
   scroll/animation polish. Core cart/grid/product styles stay in shop.css.
   Tokens only. Signature easing --ease-film from shop.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ CINEMATIC HERO ═══════════ */
.shop-hero {
  min-height: 78vh;
  min-height: 78dvh;
  display: flex;
  align-items: center;
  padding-top: clamp(120px, 18vh, 200px);
  padding-bottom: 0;
  isolation: isolate;
}
/* morphing liquid blobs */
.shop-hero .hb {
  position: absolute; z-index: -1; pointer-events: none;
  border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%;
  filter: blur(60px);
}
.shop-hero .hb-1 {
  width: 42rem; height: 42rem; right: -8rem; top: -10rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-500) 40%, transparent), transparent 70%);
  animation: hb-morph 17s var(--ease-film) infinite;
}
.shop-hero .hb-2 {
  width: 30rem; height: 30rem; left: -6rem; bottom: 2rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orange-700) 34%, transparent), transparent 68%);
  animation: hb-morph 21s var(--ease-film) 1s infinite reverse;
}
@keyframes hb-morph {
  0%,100% { border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%; transform: translate(0,0) scale(1); }
  50% { border-radius: 58% 42% 38% 62% / 55% 58% 42% 45%; transform: translate(-2.5rem,2rem) scale(1.08); }
}
/* blueprint grid */
.shop-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 79px, color-mix(in srgb, var(--white-pure) 3%, transparent) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, color-mix(in srgb, var(--white-pure) 3%, transparent) 79px 80px);
  mask-image: radial-gradient(70rem 50rem at 60% 30%, rgba(0,0,0,0.85), transparent 72%);
}
.shop-hero-inner { width: 100%; }
.shop-hero .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--white-pure) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-pure) 14%, transparent);
}
.shop-hero .pulse-dot {
  width: 7px; height: 7px; border-radius: var(--radius-circle);
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange-500) 55%, transparent);
  animation: sh-pulse 1.9s var(--ease-film) infinite;
}
@keyframes sh-pulse { to { box-shadow: 0 0 0 9px transparent; } }
.shop-hero .h2w {
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin: var(--space-lg) 0 var(--space-md);
}
.shop-hero .h2w .story-serif {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  background: linear-gradient(100deg, var(--orange-300), var(--orange-500) 55%, var(--orange-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* staggered word reveal */
.shop-hero .h2w .w { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: sh-word 0.7s var(--ease-film) forwards; }
@keyframes sh-word { to { opacity: 1; transform: none; } }
.shop-hero-lead { opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.5s forwards; }

/* count-up stats */
.shop-hero-stats { gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.7s forwards; }
.shop-hero-stats strong {
  font-size: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(115deg, var(--orange-300), var(--orange-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.shop-scroll-cue {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  margin-top: var(--space-2xl);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--white-pure) 60%, transparent);
  text-decoration: none;
  opacity: 0; animation: sh-word 0.8s var(--ease-film) 0.9s forwards;
}
.shop-scroll-cue:hover { color: var(--orange-300); }
.shop-scroll-cue .arr { display: inline-block; animation: cue-drop 1.8s var(--ease-film) infinite; }
@keyframes cue-drop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* product ribbon — auto-scrolling real photos across the bottom of the hero */
.hero-ribbon {
  margin-top: clamp(var(--space-xl), 5vh, var(--space-4xl));
  padding: var(--space-md) 0;
  border-top: 1px solid color-mix(in srgb, var(--white-pure) 10%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  overflow: hidden;
}
.hero-ribbon-track { display: flex; gap: var(--space-md); width: max-content; animation: ribbon 60s linear infinite; }
.hero-ribbon:hover .hero-ribbon-track { animation-play-state: paused; }
@keyframes ribbon { to { transform: translateX(-50%); } }
.hero-ribbon-item {
  flex: 0 0 auto; width: 92px; height: 92px;
  border-radius: var(--radius-md);
  background: var(--white-pure);
  border: 1px solid color-mix(in srgb, var(--white-pure) 14%, transparent);
  display: grid; place-items: center; padding: 8px;
  overflow: hidden;
}
.hero-ribbon-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ═══════════ CATEGORY SHOWCASE ═══════════ */
.showcase-wrap { background: var(--color-bg); padding: var(--space-4xl) var(--space-lg) var(--space-2xl); }
.showcase-inner { max-width: var(--container-wide); margin: 0 auto; }
.showcase-head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.showcase-head .h2w { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.showcase-head p { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.cat-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: var(--space-md);
}
/* editorial mosaic for exactly 7 tiles, no orphan gaps:
   row1: [ tile1 2×2 ][ tile2 2×1 ]
   row2: [ tile1 ....][ tile3 2×1 ]
   row3: [ t4 ][ t5 ][ t6 ][ t7 ] */
.cat-showcase .cat-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.cat-showcase .cat-tile:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.cat-showcase .cat-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.cat-showcase .cat-tile:nth-child(n+4) { grid-column: span 1; grid-row: span 1; }
.cat-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  text-decoration: none;
  background: var(--ink-900);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease-film), box-shadow 0.3s var(--ease-film);
  min-height: 200px;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat-tile:active { transform: translateY(0) scale(0.995); }
.cat-tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cat-tile-img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
  transition: transform 0.5s var(--ease-film);
}
.cat-tile:hover .cat-tile-img { transform: scale(1.08); }
.cat-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 10%, transparent) 0%, color-mix(in srgb, var(--ink-900) 82%, transparent) 100%);
  transition: background 0.3s var(--ease-film);
}
.cat-tile:hover::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ink-900) 24%, transparent) 0%, color-mix(in srgb, var(--ink-900) 90%, transparent) 100%); }
.cat-tile-body {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  /* dedicated scrim so text always sits on dark regardless of the photo (AA) */
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--ink-900) 82%, transparent) 55%, var(--ink-900) 100%);
}
.cat-tile-count {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange-300);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.cat-tile-name {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: 1.1;
  color: var(--color-text-inv);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.cat-tile-go {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  margin-top: var(--space-xs);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--white-pure);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s var(--ease-film), transform 0.3s var(--ease-film);
}
.cat-tile:hover .cat-tile-go, .cat-tile:focus-visible .cat-tile-go { opacity: 1; transform: none; }
.cat-tile-go svg { width: 15px; height: 15px; }

/* ═══════════ CATALOG SECTION HEADER ═══════════ */
.catalog-head { max-width: var(--container-base); margin: 0 auto; padding: var(--space-2xl) var(--space-lg) 0; }
.catalog-head .h2w { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: var(--space-2xs); }
.catalog-head p { color: var(--color-text-muted); }

/* staggered product-card reveal (main.js adds .visible) */
.shop-grid .p-card { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--ease-film), transform 0.5s var(--ease-film); }
.shop-grid .p-card.visible { opacity: 1; transform: none; }

/* ═══════════ BRAND MARQUEE ═══════════ */
.brand-band { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding: var(--space-3xl) 0; overflow: clip; }
.brand-band .bm-head { max-width: var(--container-base); margin: 0 auto var(--space-xl); padding: 0 var(--space-lg); }
.brand-band .bm-head .h2w { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.brand-marquee { overflow: hidden; display: flex; }
.brand-marquee + .brand-marquee { margin-top: var(--space-md); }
.brand-track { display: flex; flex-shrink: 0; gap: var(--space-md); align-items: center; padding-right: var(--space-md); white-space: nowrap; animation: bm-scroll 46s linear infinite; }
.brand-marquee--rev .brand-track { animation-direction: reverse; animation-duration: 54s; }
@keyframes bm-scroll { to { transform: translateX(-50%); } }  /* track is 2× duplicated → one copy = 50% */
.brand-chip {
  padding: var(--space-sm) var(--space-xl);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-base); color: var(--color-heading);
  letter-spacing: var(--tracking-wide);
}
.mq-dup { display: contents; }

/* ═══════════ SHOP CTA ═══════════ */
.shop-cta {
  position: relative; overflow: clip;
  background: var(--ink-900);
  background:
    radial-gradient(48rem 30rem at 18% 0%, color-mix(in srgb, var(--orange-500) 16%, transparent), transparent 60%),
    var(--ink-900);
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
}
.shop-cta-inner { max-width: 46rem; margin: 0 auto; }
.shop-cta .h2w { color: var(--color-text-inv); font-size: clamp(1.9rem, 4vw, 3rem); }
.shop-cta .h2w .story-serif {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  background: linear-gradient(100deg, var(--orange-300), var(--orange-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.shop-cta p { color: color-mix(in srgb, var(--white-pure) 74%, transparent); margin-bottom: var(--space-xl); }
.shop-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.shop-cta .btn-primary { box-shadow: 0 0 24px color-mix(in srgb, var(--orange-500) 45%, transparent); }
.shop-cta .btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.9rem 1.6rem; min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--white-pure) 26%, transparent);
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--white-pure) 82%, transparent);
  text-decoration: none; font-weight: var(--weight-medium);
  transition: border-color 0.2s var(--ease-film), color 0.2s var(--ease-film);
}
.shop-cta .btn-ghost:hover { border-color: color-mix(in srgb, var(--white-pure) 55%, transparent); color: var(--white-pure); }
.shop-cta .btn-ghost svg { width: 17px; height: 17px; fill: var(--whatsapp); }

/* ═══════════ MOTION GUARDS ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .shop-hero .hb, .shop-hero .pulse-dot, .shop-scroll-cue .arr,
  .hero-ribbon-track, .brand-track { animation: none; }
  .shop-hero .h2w .w, .shop-hero-lead, .shop-hero-stats, .shop-scroll-cue { opacity: 1; animation: none; transform: none; }
  .brand-marquee { flex-wrap: wrap; justify-content: center; }
  .brand-track { white-space: normal; flex-wrap: wrap; justify-content: center; animation: none; }
  .mq-dup { display: none; }
  .cat-tile:hover, .cat-tile:hover .cat-tile-img { transform: none; }
  .shop-grid .p-card { opacity: 1; transform: none; transition: none; }
  .cat-tile-go { opacity: 1; transform: none; }
  .hero-ribbon-track { transform: none; flex-wrap: wrap; justify-content: center; }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1024px) {
  .cat-showcase { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; }
  .cat-showcase .cat-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .cat-showcase .cat-tile:nth-child(2),
  .cat-showcase .cat-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .cat-showcase .cat-tile:nth-child(n+4) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  .shop-hero { min-height: 0; padding-bottom: 0; }
  .cat-showcase { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: var(--space-xs); }
  .cat-showcase .cat-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .cat-showcase .cat-tile:nth-child(n+2) { grid-column: span 1; grid-row: span 1; }
  .cat-tile-name { font-size: var(--text-lg); }
  .hero-ribbon-item { width: 74px; height: 74px; }
}