/* Energy layer (2026-10-28, Jeff: "the website is cool but kinda boring").
   Direction from ui-ux-pro-max "Scroll-Triggered Storytelling": each chapter has its own colour, a progress
   indicator, kinetic headlines; Syncopate (its "Kinetic Motion" automotive pairing) for labels only — SF stays the voice.
   Purely additive: remove the <link>/<script> for energy.* in index.html and the site is exactly what it was. */
@property --amb { syntax: '<color>'; inherits: true; initial-value: #2dec86; }
@property --ax { syntax: '<percentage>'; inherits: true; initial-value: 70%; }
:root { --amb: #2dec86; --ax: 70%; --wide: 'Syncopate', var(--disp, -apple-system), sans-serif; }

/* 1 — chapter colour: a glow behind the media that changes hue with the chapter */
#en-amb { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: --amb 1.1s cubic-bezier(.22,1,.36,1), --ax 1.1s cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(42vmax 34vmax at var(--ax) 52%, color-mix(in oklab, var(--amb) 38%, transparent), transparent 70%),
    radial-gradient(60vmax 22vmax at calc(100% - var(--ax)) 108%, color-mix(in oklab, var(--amb) 14%, transparent), transparent 70%); }
#pv { position: relative; z-index: 1; }
#en-grain { position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 2 — chapter label + giant outlined number */
.en-eb { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 700 11px/1 var(--wide);
  letter-spacing: .32em; text-transform: uppercase; color: color-mix(in oklab, var(--amb) 80%, #fff); }
.en-eb::before { content: ''; width: 34px; height: 2px; background: currentColor; border-radius: 2px; }
.en-eb b { font-weight: 700; color: #fff; opacity: .55; }
#pv .pv-sec .chap, #pv .pv-sec .beat { position: relative !important; }   /* the page pins these static; the number needs an anchor */
/* sits above the text block, never behind the paragraph */
.en-num { position: absolute; z-index: -1; left: -.04em; bottom: calc(100% - .32em); pointer-events: none;
  font: 700 clamp(110px, 11vw, 180px)/1 var(--wide); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--amb) 55%, transparent); opacity: 0; translate: 0 24px;
  transition: opacity 1.2s ease, translate 1.4s cubic-bezier(.22,1,.36,1); }
.pv-sec.en-on .en-num { opacity: .5; translate: 0 0; }

/* 3 — kinetic headlines: words rise out of a mask when the chapter arrives */
.en-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.en-wi { display: inline-block; translate: 0 105%; transition: translate .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--d, 0) * 55ms + 80ms); }
.pv-sec.en-on .en-wi { translate: 0 0; }
/* the green gradient words clip their background to the text — a moved child would lose it, so each word carries its own */
.ice .en-wi { background: var(--icefade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 4 — chapter rail */
#en-rail { position: fixed; right: 22px; top: 50%; translate: 0 -50%; z-index: 40; display: flex; flex-direction: column; gap: 7px; }
#en-rail a { position: relative; display: block; width: 14px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22);
  margin-left: auto; transition: width .35s cubic-bezier(.22,1,.36,1), background .35s; }
#en-rail a:hover, #en-rail a:focus-visible { width: 22px; background: rgba(255,255,255,.6); outline: none; }
#en-rail a.on { width: 30px; background: var(--amb); }
#en-rail a span { position: absolute; right: 40px; top: 50%; translate: 6px -50%; white-space: nowrap; opacity: 0; pointer-events: none;
  font: 700 10px/1 var(--wide); letter-spacing: .24em; text-transform: uppercase; color: #fff; transition: opacity .2s, translate .2s; }
#en-rail a:hover span, #en-rail a:focus-visible span, #en-rail a.on span { opacity: 1; translate: 0 -50%; }
#en-rail a.on span { color: var(--amb); }
#en-rail:hover a.on:not(:hover) span { opacity: 0; }

/* 5 — act breaks: a full screen of moving wide type between acts (the page snaps per screen, so a thin strip would be skipped) */
.en-strip { position: relative; z-index: 1; height: 828px; height: calc(100svh - 72px); scroll-snap-align: start; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1.2vh; margin-inline: -57.6px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.en-track { display: flex; width: max-content; will-change: transform; }
.en-track span { font: 700 clamp(56px, 9.5vw, 150px)/1.02 var(--wide); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; padding-right: .5em; }
.en-track.o span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); }
.en-track.f span { color: #fff; }
.en-track span em { font-style: normal; color: var(--amb); -webkit-text-stroke: 0; }

@media (max-width: 1000px) { #en-rail { display: none; } .en-num { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #en-amb { transition: none; } .en-wi { translate: none; transition: none; } .en-num { transition: none; }
}