/*
 * The mega menu's IN SEASON tile (2026-10-02, client request).
 *
 * Hovering (or focusing) a flavour in THE RANGE puts that flavour in the tile — its can,
 * its tag line, its name, and its colour in the glow — and the tile leads to its page.
 * The tile stands on a clean ground of its own rather than the design's translucent
 * wash, which let the page behind the menu read through it, with a small animation
 * behind the can: a glow that breathes in the flavour's colour, slow rays, and a few
 * bubbles rising.
 *
 * ONE sheet for both surfaces: site-header.tsx links it on the coded pages, and
 * bridge/home.js installs it on the byte-for-byte homepage. Both tag the tile's parts
 * with the same `data-su-season*` names (design-source/.patches/_header.json and
 * menuForBridge() in scripts/build-chrome.mjs), so nothing here hooks on a style string.
 *
 * The licence, as the bridge sheets' is:
 *   1. Every rule is scoped under [data-su-season], which only exists once the tile is
 *      tagged; without this sheet the tile is exactly as the design drew it.
 *   2. The palette is the brand's own, declared once below (packages/config/
 *      tailwind-preset.css is not loaded on the homepage); the one colour from
 *      elsewhere is --su-season-c, the shown flavour's own colour from its Strapi
 *      Product. Tints are mixed from those with color-mix().
 *   3. Everything that moves unasked stops under prefers-reduced-motion (§2.10).
 */

/* Registered so the glow can ease from one flavour's colour to the next. */
@property --su-season-c {
  syntax: '<color>';
  inherits: true;
  initial-value: #a86a3c;
}

[data-su-season] {
  --su-season-paper: #ffffff;
  --su-season-cream: #F7F3E8;
  --su-season-leaf: #007A33;
  background:
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--su-season-c) 24%, transparent), transparent 68%),
    linear-gradient(180deg, var(--su-season-paper), var(--su-season-cream)) !important;
  border-color: color-mix(in srgb, var(--su-season-c) 34%, transparent) !important;
  isolation: isolate;
  transition: --su-season-c .7s cubic-bezier(.2,.8,.2,1), border-color .7s cubic-bezier(.2,.8,.2,1);
}

/* The glow: behind the can, in the flavour's colour, breathing. */
[data-su-season-glow] {
  inset: 4% 6% auto 6% !important;
  height: 70% !important;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--su-season-c) 46%, transparent), color-mix(in srgb, var(--su-season-c) 14%, transparent) 62%, transparent) !important;
  border-radius: 50%;
  z-index: -1;
  animation: su-season-breathe 5.5s ease-in-out infinite;
}
/* Slow rays turning behind it, faded out toward the edge. */
[data-su-season-glow]::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--su-season-c) 22%, transparent) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  opacity: .55;
  animation: su-season-turn 38s linear infinite;
}

/* The bubbles. */
[data-su-season-fx] {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
[data-su-season-fx] i {
  position: absolute;
  bottom: -14px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--su-season-c) 18%, var(--su-season-paper));
  border: 1px solid color-mix(in srgb, var(--su-season-c) 48%, transparent);
  opacity: 0;
  animation: su-season-rise var(--d) linear var(--w) infinite;
}
[data-su-season-fx] i:nth-child(1) { --x: 14%; --s: 6px;  --d: 6.5s; --w: 0s }
[data-su-season-fx] i:nth-child(2) { --x: 27%; --s: 9px;  --d: 8s;   --w: 1.8s }
[data-su-season-fx] i:nth-child(3) { --x: 41%; --s: 4px;  --d: 5.5s; --w: 3.1s }
[data-su-season-fx] i:nth-child(4) { --x: 58%; --s: 7px;  --d: 7.2s; --w: .9s }
[data-su-season-fx] i:nth-child(5) { --x: 70%; --s: 5px;  --d: 6s;   --w: 2.6s }
[data-su-season-fx] i:nth-child(6) { --x: 82%; --s: 8px;  --d: 8.6s; --w: 4.2s }
[data-su-season-fx] i:nth-child(7) { --x: 90%; --s: 4px;  --d: 5.8s; --w: 1.2s }

/* The can enters when the flavour changes, then floats. */
[data-su-season-can] {
  animation: su-season-in .6s cubic-bezier(.2,.8,.2,1) both, su-season-float 5s ease-in-out .6s infinite;
}

/* IN SEASON steps aside for a hovered flavour (which has no tag line of its own since
   2026-10-14: its name and the link under it say which it is). */
[data-su-season][data-su-peek] [data-su-season-label] { display: none }
[data-su-season-name] {
  animation: su-season-words .5s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes su-season-breathe {
  0%, 100% { transform: scale(.92); opacity: .85 }
  50%      { transform: scale(1.06); opacity: 1 }
}
@keyframes su-season-turn {
  to { transform: rotate(360deg) }
}
@keyframes su-season-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0 }
  12%  { opacity: .9 }
  70%  { opacity: .6 }
  100% { transform: translate3d(6px, -260px, 0); opacity: 0 }
}
@keyframes su-season-in {
  from { opacity: 0; transform: translateY(16px) scale(.94) }
  to   { opacity: 1; transform: none }
}
@keyframes su-season-float {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-5px) }
}
@keyframes su-season-words {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  [data-su-season],
  [data-su-season] * ,
  [data-su-season] *::before {
    animation: none !important;
    transition: none !important;
  }
  [data-su-season-fx] { display: none }
}