:root{
  --bg:#05060a;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --glass2:rgba(8,10,18,.58);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Background */
.bg{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(120,0,255,.18), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(0,160,255,.18), transparent 60%),
    linear-gradient(180deg,#02030a 0%, #05060a 40%, #070716 100%);
}
.bgVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.92;
  filter:saturate(1.05) contrast(1.05);
}
.bgOverlay{
  position:absolute;
  inset:0;
  background: transparent;
}


.bgGlow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(700px 380px at 60% 40%, rgba(255,0,220,.12), transparent 55%),
    radial-gradient(600px 340px at 35% 55%, rgba(0,190,255,.12), transparent 55%);
  filter: blur(18px);
  pointer-events:none;
}

/* Layout */
.stage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:48px 20px;
}

/* HERO (no card) */
.hero{
  text-align:center;
  max-width:1000px;
}

/* Liquid letters: see-through fill + outline + glow */
.liquidTitle{
  margin:0;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size: clamp(22px, 3.4vw, 48px);
  line-height:1.15;

  color: rgba(255,255,255,.35);

  text-shadow:
    0 0 4px rgba(255,255,255,.30),
    0 0 14px rgba(0,190,255,.45),
    0 0 22px rgba(255,0,220,.35),
    0 0 36px rgba(0,190,255,.25);

  -webkit-font-smoothing: antialiased;
}


@keyframes shimmer{
  0%{ background-position:0% 50%;}
  50%{ background-position:100% 50%;}
  100%{ background-position:0% 50%;}
}

.subline{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.35em;
  text-transform:uppercase;
  color: var(--muted);
}

/* Social cards row */
.socialRow{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  width:min(980px, 100%);
  padding-top:6px;
}

/* Glass / smoke cards */
.glassCard{
  text-decoration:none;
  color:var(--text);
  width:min(320px, 100%);
  padding:16px 18px;
  border-radius:14px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(400px 120px at 30% 20%, rgba(255,0,220,.10), transparent 55%),
    radial-gradient(420px 140px at 80% 70%, rgba(0,190,255,.10), transparent 55%),
    var(--glass2);

  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.glassCard:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.30);
  box-shadow:
    0 22px 54px rgba(0,0,0,.55),
    0 0 24px rgba(0,190,255,.14),
    0 0 26px rgba(255,0,220,.12),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.cardLabel{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--muted);
}
.cardValue{
  margin-top:6px;
  font-size:15px;
  letter-spacing:.03em;
}

@media (max-width: 520px){
  .liquidTitle{ letter-spacing:.14em; }
  .glassCard{ width:100%; }
}

/* Timed entrance animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header: 2s delay */
.hero {
  opacity: 0;
  animation: fadeUp 900ms ease forwards;
  animation-delay: 2s;
}

/* Cards: default hidden, each gets its own delay */
.glassCard {
  opacity: 0;
  animation: fadeUp 900ms ease forwards;
}

.socialRow .glassCard:nth-child(1) { animation-delay: 5s; }
.socialRow .glassCard:nth-child(2) { animation-delay: 7s; }
.socialRow .glassCard:nth-child(3) { animation-delay: 9s; }


@keyframes liquidPulse {
  0%   { text-shadow: 0 0 4px rgba(255,255,255,.25), 0 0 14px rgba(0,190,255,.35), 0 0 22px rgba(255,0,220,.25); }
  50%  { text-shadow: 0 0 8px rgba(255,255,255,.35), 0 0 22px rgba(0,190,255,.55), 0 0 30px rgba(255,0,220,.40); }
  100% { text-shadow: 0 0 4px rgba(255,255,255,.25), 0 0 14px rgba(0,190,255,.35), 0 0 22px rgba(255,0,220,.25); }
}

.liquidTitle {
  animation: liquidPulse 5s ease-in-out infinite;
}

/* Micro size pulse (subtle energy vibration) */
@keyframes microPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.015); }
  70%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}

/* Combine glow + micro movement */
.liquidTitle {
  animation:
    liquidPulse 5s ease-in-out infinite,
    microPulse 3.8s ease-in-out infinite;
}

/* FINAL: ensure transform works + slightly stronger micro pulse */
.liquidTitle{
  display:inline-block;
  transform-origin:center;
  will-change: transform;
  animation:
    liquidPulse 5s ease-in-out infinite,
    microPulse 2.6s ease-in-out infinite !important;
}

@keyframes microPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.028); }
  65%  { transform: scale(0.992); }
  100% { transform: scale(1); }
}

/* AGGRESSIVE energy pulse */
@keyframes microPulseAggressive {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.045) rotate(0.3deg); }
  50%  { transform: scale(0.985) rotate(-0.3deg); }
  75%  { transform: scale(1.035) rotate(0.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.liquidTitle{
  animation:
    liquidPulse 5s ease-in-out infinite,
    microPulseAggressive 2.2s ease-in-out infinite !important;
}

/* FINAL: hard lock centering inside social cards */
.glassCard{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.cardLabel,
.cardValue{
  text-align:center !important;
}

/* Daily workout zone */
.workoutZone{
  width:min(980px, 100%);
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

/* Ticker */
.tickerShell{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    var(--glass2);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}

.tickerLive{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  flex:0 0 auto;
}

.tickerTrack{
  position:relative;
  flex:1;
  overflow:hidden;
}

.tickerText{
  display:inline-block;
  white-space:nowrap;
  will-change: transform;
  animation: tickerScroll 14s linear infinite;
  color: rgba(255,255,255,.88);
  letter-spacing:.02em;
}

@keyframes tickerScroll{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Workout panel */
.workoutPanel{
  width:100%;
  border-radius:16px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(420px 140px at 20% 20%, rgba(0,190,255,.08), transparent 60%),
    radial-gradient(420px 140px at 80% 80%, rgba(255,0,220,.08), transparent 60%),
    var(--glass2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.workoutHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.workoutTitle{
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: rgba(255,255,255,.86);
}

.workoutDate{
  font-size:12px;
  color: rgba(255,255,255,.60);
}

.workoutBody{
  padding-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}

.workoutCopy{
  white-space:pre-wrap;
  line-height:1.5;
  color: rgba(255,255,255,.86);
}

.workoutImageWrap{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}

.workoutImageWrap img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width: 760px){
  .workoutBody{ grid-template-columns: 1fr; }
  .tickerText{ animation-duration: 18s; }
}

/* --- Clearer glass social cards (less smoke) --- */
.glassCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

/* --- Footer ticker (news channel bar) --- */
.footerTicker{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  pointer-events: none;
}

.footerTickerInner{
  pointer-events: auto;
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    radial-gradient(380px 120px at 15% 50%, rgba(0,255,160,.10), transparent 60%),
    radial-gradient(380px 120px at 85% 50%, rgba(0,190,255,.08), transparent 60%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.footerLivePill{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;

  color: rgba(0,255,170,.90);
  border: 1px solid rgba(0,255,170,.35);
  background: rgba(0,255,170,.10);
  text-shadow:
    0 0 10px rgba(0,255,170,.35),
    0 0 18px rgba(0,255,170,.20);
}

.footerTickerTrack{
  position: relative;
  flex: 1;
  overflow: hidden;
}

.footerTickerText{
  display:inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: footerScroll 18s linear infinite;

  color: rgba(0,255,170,.92);
  letter-spacing: .02em;
  text-shadow:
    0 0 10px rgba(0,255,170,.45),
    0 0 22px rgba(0,255,170,.22),
    0 0 30px rgba(0,255,170,.14);
}

/* smooth “liquid” glow pulse for the ticker text */
@keyframes emeraldPulse {
  0%   { filter: drop-shadow(0 0 8px rgba(0,255,170,.25)); }
  50%  { filter: drop-shadow(0 0 16px rgba(0,255,170,.42)); }
  100% { filter: drop-shadow(0 0 8px rgba(0,255,170,.25)); }
}
.footerTickerText{
  animation: footerScroll 18s linear infinite, emeraldPulse 4.5s ease-in-out infinite;
}

@keyframes footerScroll{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* keep footer from covering content on small screens */
body{
  padding-bottom: 92px;
}

@media (max-width: 560px){
  .footerTicker{ left: 10px; right: 10px; bottom: 10px; }
  .footerTickerText{ animation-duration: 14s, 4.5s; }
  body{ padding-bottom: 102px; }
}

/* Clearer glass social cards (less smoke) */
.glassCard{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

/* Footer ticker (news channel bar) */
.footerTicker{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  pointer-events: none;
}
.footerTickerInner{
  pointer-events: auto;
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    radial-gradient(380px 120px at 15% 50%, rgba(0,255,160,.10), transparent 60%),
    radial-gradient(380px 120px at 85% 50%, rgba(0,190,255,.08), transparent 60%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.footerLivePill{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;

  color: rgba(0,255,170,.92);
  border: 1px solid rgba(0,255,170,.38);
  background: rgba(0,255,170,.10);
  text-shadow: 0 0 10px rgba(0,255,170,.35), 0 0 18px rgba(0,255,170,.20);
}

.footerTickerTrack{ flex: 1; overflow: hidden; }
.footerTickerText{
  display:inline-block;
  white-space: nowrap;
  will-change: transform;

  color: rgba(0,255,170,.92);
  letter-spacing: .02em;
  text-shadow:
    0 0 10px rgba(0,255,170,.45),
    0 0 22px rgba(0,255,170,.22),
    0 0 30px rgba(0,255,170,.14);
  animation: footerScroll 18s linear infinite, emeraldPulse 4.5s ease-in-out infinite;
}

@keyframes footerScroll{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes emeraldPulse{
  0%   { filter: drop-shadow(0 0 8px rgba(0,255,170,.25)); }
  50%  { filter: drop-shadow(0 0 16px rgba(0,255,170,.42)); }
  100% { filter: drop-shadow(0 0 8px rgba(0,255,170,.25)); }
}

body{ padding-bottom: 92px; }

/* --- Top HYROX ticker (gold liquid glass) --- */
.topTicker{
  position: fixed;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 2147483647;
  pointer-events: none;
}

.topTickerInner{
  pointer-events: auto;
  width: 100%;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    radial-gradient(380px 120px at 15% 50%, rgba(255,210,110,.10), transparent 60%),
    radial-gradient(380px 120px at 85% 50%, rgba(0,190,255,.06), transparent 60%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.topLivePill{
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;

  color: rgba(255,215,120,.95);
  border: 1px solid rgba(255,215,120,.40);
  background: rgba(255,215,120,.10);
  text-shadow: 0 0 10px rgba(255,215,120,.35), 0 0 18px rgba(255,215,120,.20);
}

.topTickerTrack{ flex: 1; overflow: hidden; }

.topTickerText{
  display:inline-block;
  white-space: nowrap;
  will-change: transform;

  color: rgba(255,215,120,.95);
  letter-spacing: .02em;
  text-shadow:
    0 0 10px rgba(255,215,120,.45),
    0 0 22px rgba(255,215,120,.22),
    0 0 30px rgba(255,215,120,.14);
  animation: topScroll 20s linear infinite, goldPulse 4.6s ease-in-out infinite;
}

@keyframes topScroll{
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes goldPulse{
  0%   { filter: drop-shadow(0 0 8px rgba(255,215,120,.22)); }
  50%  { filter: drop-shadow(0 0 16px rgba(255,215,120,.42)); }
  100% { filter: drop-shadow(0 0 8px rgba(255,215,120,.22)); }
}

/* Prevent tickers covering content */
body{
  padding-top: 86px;
}

/* Mobile spacing */
@media (max-width: 560px){
  .topTicker{ left: 10px; right: 10px; top: 10px; }
  .topTickerText{ animation-duration: 16s, 4.6s; }
  body{ padding-top: 96px; }
}

/* topTickerOverride */
.topTicker{
  z-index: 2147483647 !important;
  display: block !important;
  opacity: 1 !important;
}