/* Rhythmic layer: the hero pulse field, crossed tickers, beating section seams
   and the animated simulator banners. Colours stay inside the portal palette
   (#050b16 ground, #45c8f5 accent, #5b9dff cyan). Every effect here is
   decorative and switches off with the shared motion control. */

/* ---------- Hero shell: the pulse field spans the whole hero ---------- */
.heroShell {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.heroShell>#lifeCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.heroShell>.intro {
  position:relative;
  z-index:1;
}

/* ---------- Crossed tickers ---------- */
.tickerBand {
  position:relative;
  overflow:hidden;
  padding:46px 0 42px;
  isolation:isolate;
}

.ticker {
  position:relative;
  overflow:hidden;
  margin:0 -4vw;
}

.tickerMain {
  z-index:2;
  padding:14px 0 12px;
  background:var(--accent);
  color:#041329;
  transform:rotate(-1.4deg);
  box-shadow:0 0 60px #45c8f52e;
}

.tickerGhost {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  z-index:1;
  padding:11px 0 9px;
  border-block:1px solid #45c8f533;
  background:#071427e6;
  transform:translateY(-50%) rotate(2.8deg);
}

.tickerTrack {
  display:flex;
  align-items:center;
  width:max-content;
  animation:ticker-left 58s linear infinite;
}

.tickerGhost .tickerTrack {
  animation:ticker-right 76s linear infinite;
}

/* Margins (not flex gap) keep both halves exactly equal, so -50% loops seamlessly. */
.tickerTrack>span {
  margin-right:28px;
  font:400 31px/1 var(--display);
  letter-spacing:.045em;
  white-space:nowrap;
}

.tickerTrack>i {
  margin-right:28px;
  font-style:normal;
  font-size:17px;
  line-height:1;
}

.tickerGhost .tickerTrack>span {
  color:transparent;
  -webkit-text-stroke:1px #7fb6ff99;
  font-size:26px;
}

.tickerGhost .tickerTrack>i {
  color:var(--accent);
  font-size:13px;
}

/* Anton has no CJK glyphs: Chinese words use a heavy system sans with wider tracking. */
:lang(zh) .tickerTrack>span {
  font-family:var(--sans);
  font-weight:900;
  font-size:27px;
  letter-spacing:.16em;
}

:lang(zh) .tickerGhost .tickerTrack>span {
  font-size:23px;
  -webkit-text-stroke:1px #7fb6ffb3;
}

.tickerMain .tickerTrack>i {
  display:inline-block;
  animation:ticker-spin 9s linear infinite;
}

@keyframes ticker-left { to { transform:translateX(-50%); } }
@keyframes ticker-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes ticker-spin { to { transform:rotate(360deg); } }

/* ---------- Section seams: one ECG blip per heartbeat ---------- */
.pulseSeam {
  position:relative;
  z-index:1;
  width:min(var(--width),100% - var(--gutter)*2);
  height:30px;
  margin:-15px auto;
  overflow:hidden;
  pointer-events:none;
}

.seamLine {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,#45c8f566,var(--line) 18%,var(--line) 82%,#45c8f533);
}

.seamNode {
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0;
  border-radius:50%;
  background:var(--accent);
}

.seamBlip {
  position:absolute;
  left:0;
  top:0;
  width:115px;
  height:30px;
  opacity:0;
}

.seamBlip svg {
  display:block;
  width:115px;
  height:30px;
  overflow:visible;
  filter:drop-shadow(0 0 5px #45c8f5aa);
}

.seamBlip path {
  fill:none;
  stroke:#9fe6ff;
  stroke-width:1.6;
  stroke-linejoin:round;
}

.seamBlip i {
  position:absolute;
  right:100%;
  top:14.5px;
  width:220px;
  height:1px;
  background:linear-gradient(90deg,transparent,#45c8f5cc);
}

.seamTag {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  padding-left:12px;
  background:var(--bg);
  font:9px/1 var(--mono);
  letter-spacing:1px;
  color:var(--faint);
}

/* Section headings: a scan line passes once as they arrive. */
.sectionHead::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-14px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent) 45%,#b8edff 50%,var(--accent) 55%,transparent);
  opacity:0;
  transform-origin:left;
  pointer-events:none;
}

.sectionHead.is-visible::after {
  animation:head-scan 1.5s var(--ease) .2s both;
}

@keyframes head-scan {
  0% { opacity:1; transform:scaleX(0); }
  70% { opacity:.9; }
  100% { opacity:0; transform:scaleX(1); }
}

/* ---------- PhysioRushAI feature box ---------- */
/* A live "session monitor": rotating light on the border, HUD corners, a
   schematic heart-rate curve that a dot runs across (ride → heart → stretch),
   a glitching word mark and a pointer-driven 3D tilt. The three stage colours
   come from the PhysioRushAI page; the box itself stays portal blue. */
.featuredExperience {
  --pr-ride:#ff7a1a;
  --pr-heart:#ff2e63;
  --pr-stretch:#cefa69;
  position:relative;
  isolation:isolate;
  align-items:center;
  border-color:transparent;
  background:#07162b;
}

.featuredExperience::before {
  content:'';
  position:absolute;
  z-index:-2;
  left:50%;
  top:50%;
  width:max(160%,1400px);
  aspect-ratio:1;
  background:conic-gradient(from 0deg,transparent 0 62%,#45c8f5 72%,#ff4f78 78%,#cefa69 83%,transparent 90%);
  transform:translate(-50%,-50%);
  animation:pr-spin 9s linear infinite;
  opacity:.85;
}

.featuredExperience::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:1px;
  background:
    radial-gradient(ellipse at 88% 110%,#1f59a640,transparent 62%),
    radial-gradient(ellipse at 0% 0%,#45c8f514,transparent 55%),
    linear-gradient(#45c8f50a 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,#45c8f50a 1px,transparent 1px) 0 0/28px 28px,
    #07162b;
}

@keyframes pr-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

.prFrame { position:absolute; inset:12px; pointer-events:none; }
.prFrame i { position:absolute; width:18px; height:18px; border:0 solid #45c8f599; }
.prFrame i:nth-child(1) { left:0; top:0; border-width:1px 0 0 1px; }
.prFrame i:nth-child(2) { right:0; top:0; border-width:1px 1px 0 0; }
.prFrame i:nth-child(3) { left:0; bottom:0; border-width:0 0 1px 1px; }
.prFrame i:nth-child(4) { right:0; bottom:0; border-width:0 1px 1px 0; }

.featureCopy .eyebrow { color:var(--accent); }

.prCta { margin-top:4px; }
.prCtaArrow { display:inline-block; transition:transform .35s var(--ease); }
.prCta:hover .prCtaArrow { transform:translate(4px,-4px) rotate(8deg); }

.prArt {
  position:relative;
  display:block;
  min-width:0;
  padding:18px 0 0 34px;
  border-left:1px solid var(--line);
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}

.prArt.is-tilting { transition:transform .12s linear; }

.prHud {
  display:flex;
  align-items:center;
  gap:16px;
  font:9px/1.4 var(--mono);
  letter-spacing:1.2px;
  color:var(--faint);
  transform:translateZ(18px);
}

.prLive { display:inline-flex; align-items:center; gap:7px; color:#ff6b8a; }
.prLive i { width:7px; height:7px; border-radius:50%; background:#ff2e63; box-shadow:0 0 10px #ff2e63; animation:pr-rec 1.2s steps(2,end) infinite; }
@keyframes pr-rec { 50% { opacity:.25; } }
.prBpm b { font:600 15px/1 var(--mono); color:var(--ink); letter-spacing:0; }
.prLevel { margin-left:auto; color:var(--accent); }

.prWord {
  position:relative;
  display:block;
  width:max-content;
  margin:14px 0 6px;
  font:76px/.94 var(--display);
  letter-spacing:-1px;
  transform:translateZ(46px) rotate(-3deg);
  transition:transform .5s var(--ease);
}

.prArt:hover .prWord { transform:translateZ(60px) rotate(0deg); }

.prPhysio { position:relative; display:block; color:transparent; -webkit-text-stroke:1.6px #e9effaee; }
.prRush { display:flex; align-items:flex-start; gap:.08em; }
.prRushWord {
  position:relative;
  background:linear-gradient(100deg,var(--accent) 0%,#5b9dff 28%,#e3f7ff 46%,#ff7ab6 58%,#5b9dff 72%,var(--accent) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:rush-flow 6s linear infinite;
  filter:drop-shadow(0 0 22px #45c8f540);
}

@keyframes rush-flow { to { background-position:-220% 0; } }

.prAi {
  margin-top:.12em;
  padding:.08em .14em .04em;
  border:2px solid #e9effae6;
  border-radius:.1em;
  font:.3em/1 var(--display);
  font-style:normal;
  letter-spacing:.04em;
  color:var(--ink);
  background:#050b1680;
  box-shadow:0 0 22px #45c8f540,inset 0 0 16px #45c8f52e;
}

/* Glitch: two offset colour copies flash briefly (triggered by feature.js). */
.prWord [data-glitch]::before,.prWord [data-glitch]::after {
  content:attr(data-glitch);
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  -webkit-text-stroke:0;
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
}
.prWord [data-glitch]::before { color:#45c8f5; transform:translate(-.03em,0); mix-blend-mode:screen; }
.prWord [data-glitch]::after { color:#ff2e63; transform:translate(.03em,0); mix-blend-mode:screen; }
.prWord .is-glitching::before { animation:pr-glitch-a .42s steps(2,end) 1; }
.prWord .is-glitching::after { animation:pr-glitch-b .42s steps(2,end) 1; }
@keyframes pr-glitch-a {
  0% { opacity:.85; clip-path:inset(10% 0 62% 0); transform:translate(-.05em,0); }
  33% { opacity:.85; clip-path:inset(58% 0 12% 0); transform:translate(.04em,0); }
  66% { opacity:.85; clip-path:inset(34% 0 40% 0); transform:translate(-.03em,0); }
  100% { opacity:0; clip-path:inset(0); }
}
@keyframes pr-glitch-b {
  0% { opacity:.8; clip-path:inset(66% 0 6% 0); transform:translate(.05em,0); }
  33% { opacity:.8; clip-path:inset(16% 0 60% 0); transform:translate(-.04em,0); }
  66% { opacity:.8; clip-path:inset(44% 0 30% 0); transform:translate(.03em,0); }
  100% { opacity:0; clip-path:inset(0); }
}

.prCurve {
  display:block;
  width:100%;
  max-width:470px;
  height:auto;
  margin-top:10px;
  overflow:visible;
  transform:translateZ(26px);
}
.prZone { fill:var(--zone); opacity:.05; transition:opacity .4s; }
.prZone.is-active { opacity:.13; }
.prGrid { fill:none; stroke:#45c8f51f; stroke-dasharray:2 5; }
.prArea { fill:url(#prFill); }
.prTrace { fill:none; stroke:#45c8f540; stroke-width:1.4; }
.prLit { fill:none; stroke:url(#prStroke); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px #ff4f7866); }
.prCursor { stroke:#e9effa40; stroke-dasharray:2 3; }
.prDot { fill:#fff; }
.prHalo { fill:none; stroke:#fff; stroke-width:1.2; opacity:.45; transform-box:fill-box; transform-origin:center; }
.prTag { font:7px var(--mono); letter-spacing:.8px; fill:#7185a5; }
.prTagPeak { fill:#ff7ab6; }

.prStages {
  display:grid;
  grid-template-columns:173fr 103fr 108fr;
  gap:6px;
  max-width:470px;
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  transform:translateZ(18px);
}
.prStages>span {
  position:relative;
  display:flex;
  align-items:baseline;
  gap:7px;
  padding-top:9px;
  border-top:2px solid #45c8f526;
  transition:color .3s,border-color .3s;
}
.prStages b { font:10px var(--mono); color:var(--accent); }
.prStages small { font:8px var(--mono); letter-spacing:1px; color:var(--faint); }
.prStages>[data-stage=ride].is-active { border-color:var(--pr-ride); color:var(--ink); }
.prStages>[data-stage=heart].is-active { border-color:var(--pr-heart); color:var(--ink); }
.prStages>[data-stage=stretch].is-active { border-color:var(--pr-stretch); color:var(--ink); }
.prStages>.is-active b { color:var(--ink); }

@media(max-width:800px) {
  .prArt { padding-left:22px; }
  .prWord { font-size:60px; }
  .prHud { gap:10px; }
  .prLevel { display:none; }
  .prStages small { display:none; }
}
@media(max-width:650px) {
  .prArt { padding:22px 0 0; border-left:0; border-top:1px solid var(--line); transform:none; }
  .prWord { font-size:58px; }
  .prLevel { display:inline; }
  .prFrame { inset:8px; }
}
@media(max-width:360px) {
  .prWord { font-size:48px; }
  .prHud { gap:8px; font-size:8px; }
  .prStages { font-size:10px; }
  .prStages small { display:none; }
}

/* ---------- Simulator banners ---------- */
.simulatorBanner.hasFx {
  position:relative;
}

.simulatorBanner.hasFx img {
  transition:filter .4s;
}

.bannerFx {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  mix-blend-mode:screen;
  transition:opacity .35s;
}

.bannerFx :is(.fxGlow,.fxSeq,.fxPing,.fxCta,.fxStep,.fxMote,.fxStreak,.fxShine,.fxSweep,.fxSweepLine,.fxScan,.fxNudge,.fxFrameGlow) {
  opacity:0;
}

.bannerFx :is(.fxGlow,.fxSeq,.fxPing,.fxCta,.fxNudge) {
  transform-box:fill-box;
  transform-origin:center;
}

.bannerFx :is(.fxPing,.fxComet,.fxLoop,.fxFrameRun,.fxFrameGlow,.fxCta) {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.bannerFx .fxPing { stroke-width:7; }
.bannerFx .fxComet { stroke-dashoffset:var(--len,9); }
.bannerFx .fxFrameRun { stroke-width:9; stroke-dasharray:7 93; stroke-dashoffset:200; }
.bannerFx .fxFrameGlow { stroke-width:18; }
.bannerFx .fxCta { stroke-width:8; }
.bannerFx .fxStep { stroke-width:4; }

.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx { opacity:1; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) img { filter:brightness(1.07) saturate(1.12); }

.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxScan { animation:fx-scan 1.3s cubic-bezier(.3,.1,.2,1) both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxGlow { animation:fx-lubdub 1.1s var(--d,0s) infinite ease-out both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxBreath { animation:fx-breathe 2.8s var(--d,0s) infinite ease-in-out both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxSeq { animation:fx-seq var(--dur,2.4s) var(--d,0s) infinite ease-in-out both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxPing { animation:fx-ping var(--dur,2.3s) var(--d,0s) infinite ease-out both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxComet { animation:fx-comet var(--dur,2.4s) var(--d,0s) infinite cubic-bezier(.45,.05,.55,.95) both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxLoop { animation:fx-loop var(--dur,2.3s) linear infinite; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxSweep,
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxSweepLine { animation:fx-sweep var(--dur,2.3s) infinite cubic-bezier(.5,0,.5,1); }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxStep { animation:fx-step 2.8s var(--d,0s) infinite both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxStreak { animation:fx-streak var(--dur,.8s) var(--d,0s) infinite linear both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxMote { animation:fx-mote 2.4s var(--d,0s) infinite ease-out both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxFrameRun { animation:fx-loop 3.4s linear infinite; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxFrameRunB { animation-delay:-1.7s; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxFrameGlow { animation:fx-frame 1.1s ease-out infinite; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxCta { animation:fx-cta 1.1s ease-out infinite; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxShine { animation:fx-shine 2.2s .45s infinite cubic-bezier(.5,0,.3,1) both; }
.simulatorBanner.hasFx:is(:hover,:focus-visible,.is-live) .bannerFx .fxNudge { animation:fx-nudge 1.1s ease-in-out infinite; }

@keyframes fx-scan {
  0% { opacity:0; transform:translateX(0); }
  12% { opacity:1; }
  85% { opacity:1; }
  100% { opacity:0; transform:translateX(var(--span)); }
}
@keyframes fx-lubdub {
  0% { opacity:.22; transform:scale(.9); }
  10% { opacity:.95; transform:scale(1.07); }
  22% { opacity:.42; transform:scale(.96); }
  32% { opacity:.8; transform:scale(1.04); }
  55%,100% { opacity:.22; transform:scale(.9); }
}
@keyframes fx-breathe {
  0%,100% { opacity:.22; transform:scale(.92); }
  50% { opacity:.85; transform:scale(1.06); }
}
@keyframes fx-seq {
  0% { opacity:0; transform:scale(.82); }
  12% { opacity:.95; transform:scale(1.04); }
  34% { opacity:.18; transform:scale(1); }
  100% { opacity:0; transform:scale(.82); }
}
@keyframes fx-ping {
  0% { opacity:0; transform:scale(.55); }
  8% { opacity:1; }
  45%,100% { opacity:0; transform:scale(1.85); }
}
@keyframes fx-comet {
  from { stroke-dashoffset:var(--len,9); }
  to { stroke-dashoffset:-100; }
}
@keyframes fx-loop {
  from { stroke-dashoffset:100; }
  to { stroke-dashoffset:0; }
}
@keyframes fx-sweep {
  0% { opacity:0; transform:translateX(0); }
  10%,88% { opacity:1; }
  100% { opacity:0; transform:translateX(var(--span)); }
}
@keyframes fx-step {
  0% { opacity:0; }
  5%,22% { opacity:1; }
  30%,100% { opacity:0; }
}
@keyframes fx-streak {
  0% { opacity:0; transform:translateX(0); }
  15% { opacity:.9; }
  100% { opacity:0; transform:translateX(var(--span)); }
}
@keyframes fx-mote {
  0% { opacity:0; transform:translateY(0); }
  20% { opacity:1; }
  100% { opacity:0; transform:translateY(-80px); }
}
@keyframes fx-frame {
  0% { opacity:.08; }
  10% { opacity:.42; }
  22% { opacity:.12; }
  32% { opacity:.3; }
  60%,100% { opacity:.08; }
}
@keyframes fx-cta {
  0% { opacity:.35; transform:scale(1); }
  10% { opacity:1; transform:scale(1.025); }
  22% { opacity:.5; transform:scale(1.005); }
  32% { opacity:.85; transform:scale(1.015); }
  60%,100% { opacity:.35; transform:scale(1); }
}
@keyframes fx-shine {
  0% { opacity:0; transform:translateX(0) skewX(-18deg); }
  15%,70% { opacity:1; }
  100% { opacity:0; transform:translateX(var(--span)) skewX(-18deg); }
}
@keyframes fx-nudge {
  0%,100% { opacity:.3; transform:translateX(-10px); }
  50% { opacity:.95; transform:translateX(34px); }
}

/* ---------- Responsive ---------- */
@media(max-width:650px) {
  .tickerBand { padding:28px 0 24px; }
  .tickerMain { padding:11px 0 9px; }
  .tickerTrack>span { font-size:23px; margin-right:20px; }
  .tickerTrack>i { font-size:13px; margin-right:20px; }
  .tickerGhost .tickerTrack>span { font-size:19px; }
  :lang(zh) .tickerTrack>span { font-size:20px; }
  :lang(zh) .tickerGhost .tickerTrack>span { font-size:17px; }
  .seamTag { display:none; }
}

/* ---------- Motion off ---------- */
.motion-paused .bannerFx { display:none; }
.motion-paused .seamBlip { display:none; }

@media(prefers-reduced-motion:reduce) {
  .bannerFx, .seamBlip { display:none; }
}

@media print {
  .tickerBand, .pulseSeam, .bannerFx, .heroShell>#lifeCanvas { display:none !important; }
}