@import url('/runpo-performance-v3.css?v=20260817-1');

/* RUNPO Motion V4 — kinetic, luminous and deliberately unmistakable. */
body.motion-v4{
  --v4-acid:#eaff00;
  --v4-blue:#55d9ff;
  --v4-violet:#7d5cff;
  --v4-pink:#ff3d9a;
  --v4-glow:0 0 28px rgba(234,255,0,.34),0 0 80px rgba(234,255,0,.12);
  --mx:50vw;
  --my:35vh;
}

body.motion-v4::after{
  content:"";
  position:fixed;
  z-index:9998;
  left:var(--mx);
  top:var(--my);
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(234,255,0,.1),transparent 66%);
  transform:translate(-50%,-50%);
  pointer-events:none;
  mix-blend-mode:screen;
}

body.motion-v4 .runpo-header{
  top:16px;
  left:22px;
  right:22px;
  width:auto;
  border:1px solid rgba(255,255,255,.2);
  border-radius:18px;
  background:linear-gradient(110deg,rgba(8,8,10,.88),rgba(16,16,20,.72));
  box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(1.4);
  overflow:hidden;
}
body.motion-v4 .runpo-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0 24%,rgba(234,255,0,.1) 50%,transparent 76%);
  transform:translateX(-100%);
  animation:v4HeaderSweep 6s ease-in-out infinite;
  pointer-events:none;
}
body.motion-v4 .runpo-header::after{bottom:0;right:0;border-radius:12px 0 16px 0;background:linear-gradient(90deg,var(--v4-acid),#fff700)}
@keyframes v4HeaderSweep{0%,55%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}

body.motion-v4 .rpo-btn{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  box-shadow:inset 0 1px rgba(255,255,255,.2);
  will-change:transform;
}
body.motion-v4 .rpo-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.65) 48%,transparent 76%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
body.motion-v4 .rpo-btn:hover::before{transform:translateX(120%)}
body.motion-v4 .rpo-btn:hover{box-shadow:0 0 0 1px rgba(234,255,0,.5),0 12px 35px rgba(234,255,0,.2)}

/* Runtime-created visual FX */
.pv-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.pv-grid{
  position:absolute;
  inset:35% -15% -38%;
  background-image:linear-gradient(rgba(234,255,0,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(234,255,0,.14) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(520px) rotateX(64deg) translateY(16%);
  transform-origin:center bottom;
  mask-image:linear-gradient(transparent,#000 28%,#000 70%,transparent);
  animation:v4GridMove 5s linear infinite;
}
@keyframes v4GridMove{to{background-position:0 64px,64px 0}}
.pv-orb{position:absolute;border-radius:50%;filter:blur(3px);mix-blend-mode:screen;opacity:.72;animation:v4Float 8s ease-in-out infinite}
.pv-orb-a{width:420px;height:420px;right:-90px;top:8%;background:radial-gradient(circle at 35% 35%,rgba(85,217,255,.62),rgba(125,92,255,.12) 45%,transparent 70%)}
.pv-orb-b{width:300px;height:300px;left:38%;bottom:-80px;background:radial-gradient(circle,rgba(234,255,0,.52),rgba(234,255,0,.06) 52%,transparent 72%);animation-delay:-3s}
.pv-orb-c{width:180px;height:180px;right:30%;top:22%;border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 0 40px rgba(255,61,154,.16),0 0 40px rgba(85,217,255,.12);animation-delay:-5s}
@keyframes v4Float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,32px,0) scale(1.08)}}
.pv-beam{position:absolute;width:2px;height:140%;top:-20%;background:linear-gradient(transparent,var(--v4-acid),transparent);box-shadow:0 0 16px var(--v4-acid);opacity:.45;transform:rotate(28deg);animation:v4Beam 7s linear infinite}
.pv-beam-a{left:23%}.pv-beam-b{left:72%;animation-delay:-3.5s}
@keyframes v4Beam{0%{translate:-280px 0}100%{translate:520px 0}}
.pv-hud{
  position:absolute;
  z-index:4;
  top:132px;
  right:34px;
  display:grid;
  grid-template-columns:auto auto;
  gap:7px 14px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:14px;
  color:#fff;
  background:rgba(5,5,8,.52);
  backdrop-filter:blur(14px);
  font:700 8px/1.25 var(--rpo-mono);
  letter-spacing:.14em;
}
.pv-hud strong{color:var(--v4-acid);font-size:11px}.pv-hud-live{display:flex;align-items:center;gap:7px}
.pv-hud-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--v4-acid);box-shadow:0 0 0 5px rgba(234,255,0,.12),0 0 16px var(--v4-acid);animation:v4Pulse 1.35s ease-in-out infinite}
@keyframes v4Pulse{50%{transform:scale(.7);opacity:.55}}

/* HOME hero — modern stage rather than a conventional banner. */
body.runpo-home.motion-v4 .home-hero{min-height:max(820px,100svh);border-radius:0 0 42px 42px;box-shadow:0 30px 90px rgba(0,0,0,.32)}
body.runpo-home.motion-v4 .home-hero-slide::before{
  background:linear-gradient(90deg,rgba(2,3,5,.94) 0%,rgba(3,5,8,.68) 48%,rgba(2,2,3,.12) 80%),linear-gradient(0deg,rgba(2,2,4,.95),transparent 48%);
  z-index:1;
}
body.runpo-home.motion-v4 .home-hero-slide::after{
  right:auto;left:0;top:auto;bottom:0;width:100%;height:38%;opacity:.8;
  background:linear-gradient(115deg,transparent 0 44%,rgba(234,255,0,.95) 44.2% 44.6%,transparent 44.8% 57%,rgba(85,217,255,.52) 57.2% 57.5%,transparent 57.7%);
}
body.runpo-home.motion-v4 .home-hero-media{filter:saturate(1.15) contrast(1.09) brightness(.88)}
body.runpo-home.motion-v4 .home-hero-content{z-index:3;padding-top:170px;padding-bottom:56px}
body.runpo-home.motion-v4 .hero-grid{grid-template-columns:minmax(0,1.42fr) minmax(300px,.42fr)}
body.runpo-home.motion-v4 .home-hero h1,
body.runpo-home.motion-v4 .home-hero h2{
  max-width:990px;
  font-size:clamp(82px,10.2vw,164px);
  line-height:.72;
  letter-spacing:-.06em;
  text-wrap:balance;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.25));
}
body.runpo-home.motion-v4 .hero-yellow{
  color:transparent;
  background:linear-gradient(100deg,var(--v4-acid) 5%,#fff600 42%,var(--v4-blue) 96%);
  -webkit-background-clip:text;
  background-clip:text;
  padding:0;
  transform:none;
  filter:drop-shadow(0 0 22px rgba(234,255,0,.35));
}
body.runpo-home.motion-v4 .hero-side{
  padding:30px;
  border:1px solid rgba(255,255,255,.24);
  border-left:1px solid rgba(255,255,255,.24);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.26),0 0 50px rgba(85,217,255,.08);
  backdrop-filter:blur(22px) saturate(1.3);
}
body.runpo-home.motion-v4 .hero-side::before{content:"●  SYSTEM ONLINE";color:var(--v4-acid);text-shadow:0 0 12px rgba(234,255,0,.6)}
body.runpo-home.motion-v4 .hero-meta{gap:12px;background:transparent;box-shadow:none}
body.runpo-home.motion-v4 .hero-meta-item{
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
  animation:v4MetricFloat 5s ease-in-out infinite;
}
body.runpo-home.motion-v4 .hero-meta-item:nth-child(2){animation-delay:-1.2s}body.runpo-home.motion-v4 .hero-meta-item:nth-child(3){animation-delay:-2.4s}body.runpo-home.motion-v4 .hero-meta-item:nth-child(4){animation-delay:-3.6s}
@keyframes v4MetricFloat{50%{transform:translateY(-7px)}}
body.runpo-home.motion-v4 .hero-meta strong{color:#fff;text-shadow:0 0 18px rgba(234,255,0,.2)}
body.runpo-home.motion-v4 .hero-meta-item:nth-child(2n) strong{color:var(--v4-acid)}

body.runpo-home.motion-v4 .ticker{transform:rotate(-1.3deg) scale(1.03);box-shadow:0 0 42px rgba(234,255,0,.24)}
body.runpo-home.motion-v4 .supporters{position:relative;border-radius:40px 40px 0 0;margin-top:-16px;z-index:3}
body.runpo-home.motion-v4 .supporters-logos a{border:1px solid rgba(17,17,17,.1);border-radius:18px;background:#fff;box-shadow:0 15px 40px rgba(0,0,0,.06)}
body.runpo-home.motion-v4 .supporters-logos a:hover{border-color:var(--v4-acid);box-shadow:0 0 0 4px rgba(234,255,0,.22),0 18px 40px rgba(0,0,0,.08);transform:translateY(-7px)}

body.runpo-home.motion-v4 .statement{background:radial-gradient(circle at 90% 10%,rgba(85,217,255,.15),transparent 30%),radial-gradient(circle at 15% 80%,rgba(234,255,0,.16),transparent 34%),#f5f5f0}
body.runpo-home.motion-v4 .statement-copy{border:1px solid rgba(17,17,17,.14);border-radius:28px;background:rgba(255,255,255,.72);box-shadow:0 28px 80px rgba(25,30,35,.1);backdrop-filter:blur(18px)}
body.runpo-home.motion-v4 .statement .rpo-section-title span{background:linear-gradient(90deg,var(--v4-acid),#fff500)!important;border-radius:12px;box-shadow:0 0 40px rgba(234,255,0,.24)!important}

body.runpo-home.motion-v4 .method{background:radial-gradient(circle at var(--mx) var(--my),rgba(125,92,255,.18),transparent 28%),#050507}
body.runpo-home.motion-v4 .method-card,
body.runpo-community.motion-v4 .rhythm-card{
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.2);
  backdrop-filter:blur(14px);
  transform-style:preserve-3d;
  will-change:transform;
}
body.runpo-home.motion-v4 .method-card::after,
body.runpo-community.motion-v4 .rhythm-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(234,255,0,.18),transparent 35%,rgba(85,217,255,.12));opacity:0;transition:.3s}
body.runpo-home.motion-v4 .method-card:hover::after,
body.runpo-community.motion-v4 .rhythm-card:hover::after{opacity:1}
body.runpo-home.motion-v4 .method-card:hover,
body.runpo-community.motion-v4 .rhythm-card:hover{background:linear-gradient(135deg,var(--v4-acid),#fff700);box-shadow:0 0 45px rgba(234,255,0,.2)}

body.runpo-home.motion-v4 .coach{background:linear-gradient(135deg,var(--v4-acid),#ffef00 52%,#fff 140%)}
body.runpo-home.motion-v4 .coach-photo{border-radius:32px;box-shadow:-18px 18px 0 #111,0 35px 80px rgba(0,0,0,.24)}
body.runpo-home.motion-v4 .coach-photo::before{content:"";position:absolute;z-index:2;inset:18px;border:1px solid rgba(255,255,255,.72);border-radius:22px;pointer-events:none}
body.runpo-home.motion-v4 .coach-content .rpo-kicker{border-radius:999px}

body.runpo-home.motion-v4 .community{border-radius:42px;margin:24px;min-height:820px;box-shadow:0 40px 100px rgba(0,0,0,.25)}
body.runpo-home.motion-v4 .community-copy{border-radius:24px;background:rgba(234,255,0,.9);box-shadow:0 0 50px rgba(234,255,0,.2);backdrop-filter:blur(12px)}
body.runpo-home.motion-v4 .race-card,
body.runpo-community.motion-v4 .weekly-card,
body.runpo-community.motion-v4 .story-card,
body.runpo-community.motion-v4 .race-experience-card{border-radius:24px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.08)}
body.runpo-home.motion-v4 .race-card:hover,
body.runpo-community.motion-v4 .weekly-card:hover,
body.runpo-community.motion-v4 .story-card:hover{transform:translateY(-12px) rotateX(2deg);box-shadow:0 24px 0 -14px var(--v4-acid),0 35px 80px rgba(0,0,0,.15)}
body.runpo-home.motion-v4 .camp-feature-card{border-radius:34px;box-shadow:18px 18px 0 var(--v4-acid),0 40px 100px rgba(0,0,0,.16)}
body.runpo-home.motion-v4 .camp-feature-content{border-left:0;background:radial-gradient(circle at 100% 0,rgba(125,92,255,.22),transparent 35%),#0a0a0d}

/* COMMUNITY receives the same digital performance stage. */
body.runpo-community.motion-v4 .community-hero{min-height:max(850px,100svh);border-radius:0 0 42px 42px;box-shadow:0 34px 100px rgba(0,0,0,.3)}
body.runpo-community.motion-v4 .community-hero::before{border-color:var(--v4-blue);box-shadow:0 0 30px rgba(85,217,255,.25)}
body.runpo-community.motion-v4 .community-hero-content{z-index:3}
body.runpo-community.motion-v4 .community-hero h1 span{color:transparent;background:linear-gradient(90deg,var(--v4-acid),#fff700,var(--v4-blue));-webkit-background-clip:text;background-clip:text;padding:0;transform:none;filter:drop-shadow(0 0 24px rgba(234,255,0,.24))}
body.runpo-community.motion-v4 .community-hero-side{border:1px solid rgba(255,255,255,.22);border-radius:26px;color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 1px rgba(255,255,255,.14),0 30px 80px rgba(0,0,0,.3);backdrop-filter:blur(22px)}
body.runpo-community.motion-v4 .community-hero-side p{color:rgba(255,255,255,.8)}
body.runpo-community.motion-v4 .community-hero-side .rpo-btn-light{color:#fff;border-color:rgba(255,255,255,.55)}
body.runpo-community.motion-v4 .community-stats{gap:12px;background:transparent;box-shadow:none}
body.runpo-community.motion-v4 .community-stat{border:1px solid rgba(255,255,255,.2)!important;border-radius:18px;background:rgba(8,8,10,.46);backdrop-filter:blur(14px);animation:v4MetricFloat 5s ease-in-out infinite}
body.runpo-community.motion-v4 .community-stat:nth-child(2){animation-delay:-1.2s}body.runpo-community.motion-v4 .community-stat:nth-child(3){animation-delay:-2.4s}body.runpo-community.motion-v4 .community-stat:nth-child(4){animation-delay:-3.6s}
body.runpo-community.motion-v4 .community-manifesto{background:radial-gradient(circle at 85% 15%,rgba(85,217,255,.17),transparent 30%),radial-gradient(circle at 12% 82%,rgba(234,255,0,.19),transparent 34%),#f5f5f0}
body.runpo-community.motion-v4 .manifesto-copy{border:1px solid rgba(17,17,17,.14);border-radius:28px;background:rgba(255,255,255,.75);box-shadow:0 28px 80px rgba(0,0,0,.09);backdrop-filter:blur(16px)}
body.runpo-community.motion-v4 .community-rhythm{background:radial-gradient(circle at var(--mx) var(--my),rgba(125,92,255,.2),transparent 30%),#050507}
body.runpo-community.motion-v4 .gallery-item{border-radius:24px;outline:0;box-shadow:0 22px 60px rgba(0,0,0,.12)}
body.runpo-community.motion-v4 .gallery-caption{border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(4,4,6,.66);backdrop-filter:blur(16px)}
body.runpo-community.motion-v4 .race-experiences{background:linear-gradient(135deg,var(--v4-acid),#fff600 55%,var(--v4-blue) 145%)}
body.runpo-community.motion-v4 .race-culture{background:radial-gradient(circle at 80% 20%,rgba(85,217,255,.12),transparent 28%),#07070a}
body.runpo-community.motion-v4 .race-step{border-radius:18px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
body.runpo-community.motion-v4 .community-cta{background:linear-gradient(115deg,var(--v4-acid),#fff600 58%,var(--v4-blue) 160%)}

.pv-section-code{
  position:absolute;
  z-index:4;
  top:22px;
  right:24px;
  padding:8px 11px;
  border:1px solid currentColor;
  border-radius:999px;
  color:inherit;
  font:700 8px/1 var(--rpo-mono);
  letter-spacing:.16em;
  opacity:.56;
  pointer-events:none;
}
body.motion-v4 section{position:relative}

@media(max-width:900px){
  .pv-hud{display:none}
  body.motion-v4 .runpo-header{top:10px;left:10px;right:10px}
  body.runpo-home.motion-v4 .hero-grid{grid-template-columns:1fr}
  body.runpo-home.motion-v4 .hero-side{max-width:560px}
  body.runpo-home.motion-v4 .community{margin:12px;border-radius:30px}
}

@media(max-width:760px){
  body.motion-v4::after{display:none}
  .pv-grid{background-size:42px 42px}
  .pv-orb-a{width:280px;height:280px}.pv-orb-b{width:220px;height:220px}
  body.runpo-home.motion-v4 .home-hero,
  body.runpo-community.motion-v4 .community-hero{min-height:820px;border-radius:0 0 28px 28px}
  body.runpo-home.motion-v4 .home-hero-content{padding-top:132px}
  body.runpo-home.motion-v4 .home-hero h1,
  body.runpo-home.motion-v4 .home-hero h2{font-size:clamp(66px,19vw,102px)}
  body.runpo-home.motion-v4 .hero-side,
  body.runpo-community.motion-v4 .community-hero-side{border-radius:20px;padding:22px}
  body.runpo-home.motion-v4 .hero-meta,
  body.runpo-community.motion-v4 .community-stats{gap:8px}
  body.runpo-home.motion-v4 .hero-meta-item,
  body.runpo-community.motion-v4 .community-stat{border-radius:14px}
  body.runpo-home.motion-v4 .community{margin:8px;border-radius:26px}
  body.runpo-home.motion-v4 .camp-feature-card{border-radius:24px;box-shadow:9px 9px 0 var(--v4-acid)}
  .pv-section-code{display:none}
}

@media(prefers-reduced-motion:reduce){
  .pv-grid,.pv-orb,.pv-beam,.pv-hud-live::before,body.motion-v4 .runpo-header::before,body.motion-v4 .hero-meta-item,body.motion-v4 .community-stat{animation:none!important}
}