/* 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; }
}

/* ───── Section fixes (Jeff 10-28) ───── */

/* CarPlay corners ("cleanup all the corners on the car play screens too. example section 1,2,14,21,22"): the clips carry the head
   unit's own bezel with ~46 px corners (measured on the 1652×646 posters: the bezel meets the edge 45 px in); round the video to exactly
   that and drop the page's plate + outline, so there is one clean corner instead of a 22 px card around a 46/1652 bezel. */
#pv .pv-card.cpu { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
#pv .pv-card.cpu::after { display: none !important; }
#pv .pv-card.cpu > video { background: transparent; clip-path: inset(0 round 2.8% / 7.1%); }

/* Section 15 ("remove the black square around the landscape iphone"): the scan clip is a landscape iPhone (frame at x 62–1018,
   y 125–583 of 1080×708) on a navy plate. Show only the phone: the card takes the phone's shape, the video is offset to fill it. */
#pv #pv-scan .pv-card { aspect-ratio: 1040 / 502 !important; --ar: 2.0717 !important; background: transparent !important; box-shadow: none !important;
  overflow: hidden !important; border-radius: 7.4% / 15.4% !important; position: relative; }
#pv #pv-scan .pv-card::after { display: none !important; }
#pv #pv-scan .pv-card > video { position: absolute; width: 103.846%; height: 107.968%; left: -1.923%; top: -3.984%; max-width: none; clip-path: none !important; background: transparent; }

/* Section 09 ("looks out of place and AI slop … looking more like the whole website"): no tiles, no ticks — the route line from the app.
   Where your location goes is a green line with a stop for each service; advertisers and tracking are struck off below it. */
#pv .pv-card.pv-priv { background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 0 0 !important; overflow: visible !important; }
#pv .pv-card.pv-priv::after { display: none !important; }
#pv .pv-priv .pp-h { font: 700 10px/1 var(--wide); letter-spacing: .28em; color: color-mix(in oklab, var(--amb) 80%, #fff); margin: 0 0 14px; }
#pv .pv-priv .pp-l { gap: 0; padding-left: 30px; }
#pv .pv-priv .pp-l li { display: block; position: relative; padding: 7px 0; background: none !important; border-radius: 0; }
#pv .pv-priv .pp-l li i { position: absolute; left: -30px; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink, #08090b);
  box-shadow: 0 0 0 3px #2DEC86, 0 0 12px rgba(45,236,134,.55); display: block; }
#pv .pv-priv .pp-l li i::after { display: none !important; }
#pv .pv-priv .pp-l li.ok::before { content: ''; position: absolute; left: -24.5px; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(#2DEC86, #8CFFC4); }
#pv .pv-priv .pp-l li.ok:first-child::before { top: 18px; }
#pv .pv-priv .pp-l li.ok:has(+ li.no)::before { bottom: calc(100% - 18px); }
#pv .pv-priv .pp-l li b { display: block; font: 650 17px/1.2 var(--disp, -apple-system); color: #fff; letter-spacing: -.01em; }
#pv .pv-priv .pp-l li span { display: block; font: 400 13px/1.35 var(--disp, -apple-system); color: var(--dim, #9aa1a9); margin-top: 2px; }
#pv .pv-priv .pp-l li.no { margin-left: -30px; padding: 2px 0; display: flex; align-items: baseline; gap: 12px; }
#pv .pv-priv .pp-l li.ok + li.no { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
#pv .pv-priv .pp-l li.no i { display: none; }
#pv .pv-priv .pp-l li.no b { font: 700 clamp(24px, 2.4vw, 32px)/1.1 var(--disp, -apple-system); letter-spacing: -.03em; color: rgba(255,255,255,.34);
  text-decoration: line-through; text-decoration-color: #FF453A; text-decoration-thickness: 3px; }
#pv .pv-priv .pp-l li.no span { font: 700 9.5px/1 var(--wide); letter-spacing: .28em; text-transform: uppercase; color: #FF6B60 !important; margin: 0; }
#pv .pv-priv .pp-f { margin: 16px 0 0; font-size: 13px; color: var(--dim, #9aa1a9); }