/* /energy/ — VOLTRA energy drink launch demo. Scroll-scrubbed can render that flips from side to side,
   with the page colour flooding to each flavour. Scoped to .en-page so it sits inside the site layout.
   Base rules = static layout (reduced motion / no GSAP). `html.en-on` switches on the scroll story. */

.en-page {
  --bg: #f6f5ef; --ink: #121417; --ink-2: color-mix(in srgb, var(--ink) 72%, transparent);
  --bar-h: 52px;
  background: #f6f5ef; color: #121417; font: 400 1.0625rem/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
  position: relative; z-index: 2;
}
.en-page *, .en-page *::before, .en-page *::after { box-sizing: border-box; }
.en-page h1, .en-page h2, .en-page h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.04em; line-height: .95; margin: 0; color: inherit; text-transform: none; }
.en-page a { color: inherit; }
.en-page img { max-width: 100%; height: auto; }
.en-wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

.en-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #121417; color: #fff; font: 700 1rem var(--f-body); text-decoration: none; transition: transform .2s, background .2s;
}
.en-page .en-btn { color: #fff; }
.en-btn:hover { transform: translateY(-2px) rotate(-1deg); }
.en-btn--sm { min-height: 34px; padding: 0 1rem; font-size: .85rem; }
.en-eyebrow, .en-kicker { font: 500 .78rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; margin: 0; }
.en-tag {
  display: inline-block; vertical-align: middle; margin-left: .45rem; padding: .15rem .45rem; border-radius: 6px;
  border: 1.5px solid currentColor; font: 500 .62rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .8;
}

/* Product bar */
.en-bar {
  position: sticky; top: 0; z-index: 10; height: var(--bar-h); display: flex; align-items: center; gap: 1.5rem;
  padding: 0 max(16px, (100vw - 1160px) / 2); background: #121417; color: #fff;
}
.en-bar__name { font: 800 1.15rem var(--f-display); letter-spacing: .02em; text-decoration: none; margin-right: auto; white-space: nowrap; }
.en-bar .en-tag { color: #c6f432; opacity: 1; }
.en-bar__links { display: flex; gap: 1.4rem; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.en-bar__links a { text-decoration: none; }
.en-bar__links a:hover { color: #fff; }
.en-bar .en-btn { background: #c6f432; color: #121417; }
@media (max-width: 560px) { .en-bar__links { display: none; } }
@media (max-width: 400px) { .en-bar { gap: .75rem; } .en-bar__name { font-size: 1rem; } .en-bar .en-tag { margin-left: .25rem; font-size: .58rem; } }

/* ---------- Story: static layout ---------- */
.en-stage { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 3rem; padding: 10vh 16px; text-align: center; }
.en-intro h1 { font-size: clamp(2.8rem, 7.5vw, 6.2rem); }
.en-intro p:last-child { margin: 1rem 0 0; font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--ink-2); }
.en-intro .en-eyebrow { margin-bottom: 1rem; }
.en-can { width: min(100%, 360px); }
.en-can canvas { display: none; width: 100%; height: 100%; }
.en-steps { display: grid; gap: 3rem; max-width: 36rem; }
.en-step { display: grid; gap: .9rem; justify-items: center; }
.en-step h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.en-step p { margin: 0; font-size: 1.15rem; color: var(--ink-2); }
.en-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .3rem 0 0; padding: 0; }
.en-chips li { padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); font-weight: 600; font-size: .9rem; }
.en-final h2 { font-size: clamp(2.6rem, 7vw, 6rem); }
.en-final p { margin: .8rem 0 1.4rem; color: var(--ink-2); font-size: 1.2rem; }
.en-giants, .en-cue, .en-load, .en-bubbles { display: none; }

/* ---------- The scroll story ---------- */
.en-on .en-story { height: 1000svh; }
.en-on .en-stage {
  position: sticky; top: 0; height: 100svh; display: block; padding: 0; gap: 0; text-align: left;
  background: var(--bg); color: var(--ink);
  /* --x slides the can side to side; --k (1 → 0) shrinks it up out of the way for the intro and finale copy */
  --x: 0vw; --k: 1;
}
/* Soft spotlight so the can doesn't sit on a flat colour */
.en-on .en-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34vmax 30vmax at calc(50% + var(--x, 0vw)) 52%, rgba(255, 255, 255, .5), transparent 70%);
}
.en-on .en-intro, .en-on .en-final { position: absolute; left: 0; right: 0; top: calc(50svh + 3rem); z-index: 3; text-align: center; padding: 0 16px; }
.en-on .en-final { visibility: hidden; opacity: 0; color: #fff; }
.en-on .en-final p { color: rgba(255, 255, 255, .75); }
.en-on .en-final .en-btn { background: #c6f432; color: #121417; }

.en-on .en-can {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: min(80svh, 52vw); aspect-ratio: 1; will-change: translate, scale;
  translate: calc(-50% + var(--x)) calc(-50% - 22% * var(--k));
  scale: calc(1 - .45 * var(--k));
}
.en-on .en-can canvas { display: block; }
.en-on .en-still { display: none; }
/* Soft floor shadow */
.en-on .en-can::after {
  content: ""; position: absolute; left: 34%; right: 34%; bottom: 4%; height: 5%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent); filter: blur(4px);
}

.en-on .en-giants { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.en-giant {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: 0; white-space: nowrap;
  font: 800 clamp(6rem, 19vw, 20rem)/1 var(--f-display); letter-spacing: -.05em; color: rgba(255, 255, 255, .55);
}
.en-giant[data-side="right"] { translate: calc(-50% + 22vw) -50%; }
.en-giant[data-side="left"] { translate: calc(-50% - 22vw) -50%; }

.en-on .en-steps { position: absolute; inset: 0; z-index: 3; max-width: none; pointer-events: none; }
.en-on .en-step {
  position: absolute; top: 50%; translate: 0 -50%; width: min(32rem, 38vw); justify-items: start; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: auto;
}
.en-on .en-step[data-side="left"] { left: max(24px, (100vw - 1200px) / 2); }
.en-on .en-step[data-side="right"] { right: max(24px, (100vw - 1200px) / 2); }

.en-on .en-cue {
  display: block; position: absolute; bottom: 3svh; left: 50%; translate: -50% 0; z-index: 4;
  font: 500 .85rem var(--f-mono); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
}
.en-on .en-cue::after { content: ""; display: block; width: 2px; height: 40px; margin: 12px auto 0; background: currentColor; animation: en-drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes en-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.en-on .en-load { display: block; position: absolute; right: 16px; bottom: 14px; z-index: 3; font: .7rem var(--f-mono); letter-spacing: .08em; opacity: .6; transition: opacity .6s; }

/* Bubbles for the finale */
.en-on .en-bubbles { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.en-bubble {
  position: absolute; bottom: -20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08);
  animation: en-rise linear infinite;
}
@keyframes en-rise { to { transform: translate(var(--dx), -110svh); } }

@media (max-width: 800px) {
  .en-on .en-can { width: min(100vw, 58svh); top: calc(var(--bar-h) + 29svh); }
  .en-on .en-intro { top: 50svh; }
  .en-on .en-final { top: auto; bottom: 10svh; }
  .en-on .en-steps { inset: auto 0 0; height: 20rem; background: linear-gradient(transparent, var(--bg) 22%); }
  .en-on .en-step, .en-on .en-step[data-side] { left: 16px; right: 16px; width: auto; top: auto; bottom: 1.5rem; translate: none; }
  .en-on .en-step h2 { font-size: 2.2rem; }
  .en-on .en-step p { font-size: 1rem; }
  .en-giant, .en-giant[data-side] { top: 30svh; translate: -50% -50%; font-size: 30vw; }
}
@media (prefers-reduced-motion: reduce) { .en-bubble { animation: none; } }

/* ---------- The pack ---------- */
.en-pack { padding: 7rem 0 6rem; background: #fff; }
.en-pack h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); margin: .8rem 0 3rem; }
.en-lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0 0 3rem; padding: 0; }
.en-lineup li {
  display: grid; justify-items: center; gap: .8rem; padding: 2rem .5rem 1.2rem; border-radius: 24px;
  background: color-mix(in srgb, var(--c) 16%, #fff); transition: transform .3s;
}
.en-lineup li:hover { transform: translateY(-8px) rotate(-2deg); }
.en-lineup img { height: clamp(180px, 26vw, 330px); width: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .18)); }
.en-lineup span { font: 800 1.1rem var(--f-display); letter-spacing: -.01em; color: color-mix(in srgb, var(--c) 70%, #000); }
@media (max-width: 800px) {
  .en-lineup { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .en-lineup li { scroll-snap-align: start; }
  .en-lineup img { height: 260px; }
}
.en-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2rem; border-radius: 24px; background: #121417; color: #fff; }
.en-order h3 { font-size: 1.6rem; letter-spacing: -.02em; }
.en-price { font: 800 2.4rem var(--f-display); margin: .4rem 0; }
.en-price .en-tag { color: #c6f432; opacity: 1; }
.en-small { margin: 0; color: rgba(255, 255, 255, .65); font-size: .9rem; }
.en-order .en-btn { background: #c6f432; color: #121417; }
.en-note { margin: 1rem 0 0; max-width: 24rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(198, 244, 50, .12); border: 1px solid rgba(198, 244, 50, .4); font-size: .95rem; }
.en-note a { color: #c6f432; }
@media (max-width: 800px) { .en-order { grid-template-columns: minmax(0, 1fr); } }

.en-foot { padding: 2.2rem 16px; text-align: center; font-size: .85rem; color: #5b6168; background: #fff; border-top: 1px solid #eceae4; }
.en-foot a { color: #17743f; }