/* ============================================================
   SCENE 4 — Product grid montage: icons stagger in
   ============================================================ */
.scene-grid{
  flex-direction: column;
  gap: 40px;
}

.scene-grid .grid-eyebrow{
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--mea-accent-text);
  opacity: 0;
}

.scene-grid.is-active .grid-eyebrow{
  animation: fade-up 0.5s ease forwards;
}

.scene-grid .product-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 18px;
}

/* .product-item is the single animating unit — icon box + label live
   inside it and move together, since they're one flex column instead
   of two independently-positioned elements. */
.scene-grid .product-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.6);
}

.scene-grid.is-active .product-item{
  animation: tile-in 0.5s cubic-bezier(0.2,0.8,0.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s + 0.3s);
}

.scene-grid .product-tile{
  position: relative;
  width: 84px; height: 84px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-md);
  animation: iconBreathe 4.5s ease-in-out infinite;
}

.scene-grid .product-item:nth-child(3n) .product-tile{ animation-delay: -1.5s; }
.scene-grid .product-item:nth-child(3n+1) .product-tile{ animation-delay: -3s; }

@keyframes iconBreathe{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* corner-notch detail, matching the live site's cut-corner icon tiles */
.scene-grid .product-tile::before{
  content:"";
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-style: solid;
  border-width: 0 14px 14px 0;
  border-color: transparent var(--mea-bg) transparent transparent;
}

.scene-grid .product-tile svg{
  width: 30px; height: 30px;
  stroke: var(--mea-accent);
  fill: none;
  stroke-width: 1.6;
}

/* SIESTA's sakura mark carries its own baked-in stroke/fill colors on
   its inner <g>/<circle> elements (set as SVG presentation attributes,
   which already win over any CSS on the outer <svg>) — so the outer
   <svg> itself doesn't need stroke/fill touched at all. Earlier this
   file force-set `fill: initial` on that outer element, which resolves
   to opaque black per the SVG spec and was painting a solid box behind
   the flower — removed entirely; the icon is transparent by default. */
.scene-grid .product-tile svg.custom-mark,
.scene-highlight .highlight-icon svg.custom-mark,
.scene-converge .converge-icon svg.custom-mark{
  fill: transparent;
}

/* 84px tile x 0.52 ratio ≈ 44px, bumped up further since the flower's
   petal detail doesn't read clearly until it has real room to breathe */
.scene-grid .product-tile svg.custom-mark{
  width: 62px; height: 62px;
}
/* 88px tile, sized to match */
.scene-highlight .highlight-icon svg.custom-mark{
  width: 68px; height: 68px;
}

.scene-grid .tile-label{
  font-size: 12px;
  color: var(--mea-text-muted);
  white-space: nowrap;
}

@keyframes tile-in{
  to{ opacity:1; transform: scale(1); }
}
@keyframes fade-up{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ============================================================
   SCENE 5 — Highlight: a couple of products get a closer moment
   ============================================================ */
.scene-highlight{
  flex-direction: column;
  gap: 18px;
}

.scene-highlight .highlight-card{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.scene-highlight .highlight-card.is-current{
  display: flex;
  animation: highlight-in 0.7s cubic-bezier(0.2,0.8,0.2,1) both;
}

.scene-highlight .highlight-icon{
  width: 88px; height: 88px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 32px rgba(59,130,246,0.35);
}

.scene-highlight .highlight-icon svg{
  width: 40px; height: 40px;
  stroke: var(--mea-accent-text);
  fill:none; stroke-width:1.6;
}

.scene-highlight .highlight-name{
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 1px;
}

.scene-highlight .highlight-desc{
  max-width: 480px;
  font-size: 15px;
  color: var(--mea-text-secondary);
  line-height: 1.5;
}

@keyframes highlight-in{
  from{ opacity:0; transform: scale(0.92); }
  to{ opacity:1; transform: scale(1); }
}