/* "اختر نكهتك" v2: a dark studio stage lit by the chosen flavour, a glowing podium under the
   centre can, a crisp product label, a counter + progress line instead of 28 dots, and a glass
   fact card in the story phase. Loaded after framer.css and only overrides the showcase. */

/* Registered so the whole stage cross-fades when the flavour changes (gradients can't
   transition, but a typed custom property inside them can). */
@property --flavor { syntax: '<color>'; inherits: true; initial-value: #f2a127; }
.showcase { transition: --flavor .9s cubic-bezier(.22, 1, .36, 1); background: #07100c; }

.showcase-pin {
  background:
    radial-gradient(38% 30% at 50% 64%, color-mix(in srgb, var(--flavor) 38%, transparent), transparent 70%),
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--flavor) 22%, transparent), transparent 72%),
    radial-gradient(120% 70% at 50% 120%, #10261c 0%, transparent 60%),
    linear-gradient(180deg, #050a08 0%, #08130e 46%, #0b1a13 100%);
}
/* Fine grain + vignette so the dark doesn't look flat. */
.showcase-pin::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / .55) 100%); }

/* Podium under the centre can instead of the floating ring. */
.showcase-pin::before { top: auto; bottom: max(178px, 23vh); width: min(380px, 62vw); aspect-ratio: 4.2 / 1; border: 0; border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--flavor) 70%, white) 0%, color-mix(in srgb, var(--flavor) 45%, transparent) 38%, transparent 72%);
  box-shadow: none; filter: blur(6px); opacity: calc(.85 - var(--zoom)); }

/* Heading block: eyebrow + title, kept clear of the cans. */
.showcase-head { top: max(92px, 11vh); }
.showcase-kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 12px; color: rgb(255 255 255 / .55);
  font: 700 12px/1 Arial, sans-serif; letter-spacing: .32em; }
.showcase-kicker i { width: 4px; height: 4px; border-radius: 50%; background: var(--flavor); box-shadow: 0 0 10px var(--flavor); }
.showcase-head h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: 0; text-shadow: 0 10px 40px rgb(0 0 0 / .45); }

/* Product label: brand pill + big flavour name, no blur. */
.showcase-label { bottom: max(112px, 15vh); gap: 8px; }
.showcase-brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; direction: ltr;
  background: color-mix(in srgb, var(--flavor) 22%, rgb(255 255 255 / .06)); border: 1px solid color-mix(in srgb, var(--flavor) 55%, transparent);
  color: #fff; font: 800 12px/1 Arial, sans-serif; letter-spacing: .18em; }
.showcase-name { filter: none; font-size: clamp(36px, 4.6vw, 62px); text-shadow: 0 6px 30px color-mix(in srgb, var(--flavor) 55%, transparent), 0 2px 0 rgb(0 0 0 / .25); }
.showcase-label.is-changing .showcase-name, .showcase-label.is-changing .showcase-brand { animation: showcase-label-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.showcase-label.is-changing .showcase-brand { animation-delay: .04s; }
@keyframes showcase-label-in { from { opacity: 0; transform: translateY(12px); } }

/* Controls: arrows + "05 / 28" counter + a thin progress line (28 dots were too many). */
.showcase-controls { bottom: max(52px, 7vh); gap: 14px; }
.showcase-dots { display: none; }
.showcase-count { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; min-width: 120px; padding: 10px 18px; border-radius: 20px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.showcase-count::after { content: ''; width: 100%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--flavor) var(--progress, 0%), rgb(255 255 255 / .16) var(--progress, 0%)); transition: --flavor .9s; }
.showcase-arrow { width: 52px; height: 52px; background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.showcase-arrow:hover { background: var(--flavor); border-color: transparent; color: #08130e; }
.showcase-hint { color: rgb(255 255 255 / .5); bottom: 10px; font-size: 11px; }
.showcase-hint::after { display: none; }
.showcase-hint::after { background: linear-gradient(rgb(255 255 255 / .6), transparent); }

/* Story phase: deeper flood, giant brand watermark, glass fact card, slim step rail. */
.showcase-flood { background:
  radial-gradient(60% 70% at 30% 50%, color-mix(in srgb, var(--flavor) 85%, white) 0%, var(--flavor) 40%, color-mix(in srgb, var(--flavor) 45%, black) 100%); }
.showcase-flood::after { content: attr(data-brand); position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); direction: ltr; text-align: center;
  color: rgb(255 255 255 / .07); font: 900 clamp(90px, 16vw, 260px)/1 Arial, sans-serif; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; }
.showcase-features { width: min(420px, 40vw); }
.showcase-features li { gap: 12px; padding: 26px 28px; border-radius: 26px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45); }
.showcase-features li::before { content: '0' counter(fact); counter-increment: fact; color: rgb(255 255 255 / .7); font-weight: 800; font-size: 13px; letter-spacing: .2em; direction: ltr; text-align: right; }
.showcase-features { counter-reset: fact; }
.showcase-features strong { padding: 0; background: none; color: #fff; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; text-shadow: 0 4px 24px rgb(0 0 0 / .2); }
.showcase-features span { color: rgb(255 255 255 / .9); }
.showcase-steps { gap: 8px; }
.showcase-steps span { width: 4px; height: 46px; border: 0; border-radius: 4px; background: rgb(255 255 255 / .28); }
.showcase-steps span.is-active { background: #fff; transform: none; box-shadow: 0 0 14px rgb(255 255 255 / .6); }
.showcase-add { padding-inline: 26px; }

@media (max-width: 760px) {
  .showcase-head { top: 84px; }
  .showcase-kicker { font-size: 10px; gap: 10px; letter-spacing: .26em; }
  .showcase-pin::before { bottom: max(160px, 22vh); width: 74vw; }
  .showcase-label { bottom: 124px; }
  .showcase-controls { bottom: 52px; }
  .showcase-count { min-width: 96px; padding: 8px 14px; }
  .showcase-arrow { width: 48px; height: 48px; }
  .showcase-features { width: auto; }
  .showcase-features li { padding: 18px 20px; }
  .showcase-steps { flex-direction: row; }
  .showcase-steps span { width: 28px; height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase { transition: none; }
  .showcase-label.is-changing .showcase-name, .showcase-label.is-changing .showcase-brand { animation: none; }
}

/* ===== v3 stage dressing ===== */
.showcase { --mx: 0; --my: 0; }
.showcase-back, .showcase-front { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--zoom) * 2.2); }
.showcase-back { z-index: 1; }
.showcase-canvas { z-index: 1; }
.showcase-front { z-index: 2; }

/* Giant flavour word behind the line-up: heavy Latin caps filled with the flavour colour,
   fading out towards the floor, drifting slightly against the pointer. */
.showcase-word { position: absolute; inset-inline: -10%; top: 46%; direction: ltr; text-align: center; white-space: nowrap; overflow: hidden;
  transform: translate(calc(var(--mx) * -18px), calc(-50% + var(--my) * -10px));
  font: 900 clamp(110px, 17vw, 270px)/.9 'Arial Black', Arial, sans-serif; letter-spacing: -.035em;
  color: transparent; -webkit-text-stroke: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--flavor) 60%, white) 0%, color-mix(in srgb, var(--flavor) 45%, transparent) 45%, transparent 92%);
  -webkit-background-clip: text; background-clip: text; opacity: .3; }

/* Soft light beam falling on the chosen can. */
.showcase-beam { position: absolute; left: 50%; top: -10%; width: min(560px, 70vw); height: 92%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, color-mix(in srgb, var(--flavor) 30%, rgb(255 255 255 / .18)) 180deg, transparent 200deg);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%); mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
  filter: blur(18px); opacity: .9; }

/* Flavour pieces (images/fruit3d) floating around the stage. */
.showcase-pieces { position: absolute; inset: 0; }
.showcase-piece { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 1vmin); height: auto;
  translate: calc(-50% + var(--mx) * var(--d) * -26px) calc(-50% + var(--my) * var(--d) * -18px);
  rotate: var(--r); scale: 0; opacity: 0; filter: drop-shadow(0 14px 18px rgb(0 0 0 / .45));
  transition: scale .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s, translate .5s cubic-bezier(.22, 1, .36, 1); }
.showcase-piece.is-in { scale: 1; opacity: 1; animation: showcase-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.is-back .showcase-piece { filter: blur(1.5px) drop-shadow(0 10px 14px rgb(0 0 0 / .45)) brightness(.8); }
@keyframes showcase-float { 50% { rotate: calc(var(--r) + 8deg); transform: translateY(-10px); } }

@media (max-width: 760px) {
  .showcase-word { top: 44%; font-size: 30vw; opacity: .3; }
  .showcase-piece { width: calc(var(--s) * 1.6vmin); }
  .is-front .showcase-piece:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-piece.is-in { animation: none; }
}