/* ===== Power X – polish patch v1 ===== */

/* 1) Round theme + menu buttons */
button[aria-label*="theme"],
button[aria-label*="navigation menu"]{
  border-radius:9999px!important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .2s,color .2s,border-color .2s!important;
}
button[aria-label*="theme"] svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
button[aria-label*="theme"]:active svg{transform:rotate(90deg) scale(.8)}
@media (hover:hover){
  button[aria-label*="theme"]:hover{border-color:#d4a73c;transform:scale(1.08)}
  button[aria-label*="theme"]:hover svg{transform:rotate(25deg)}
}

/* 2) Light button animation (transform/opacity only = smooth on phones) */
button:not([aria-label*="theme"]):not([aria-label*="navigation menu"]),
a.brand-action,
a[class*="uppercase"][class*="px-"],
a[class*="tracking-wider"][class*="px-"]{
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,background-color .2s,color .2s,border-color .2s!important;
  -webkit-tap-highlight-color:transparent;
}
button:not([aria-label*="theme"]):not([aria-label*="navigation menu"]):active,
a.brand-action:active,
a[class*="uppercase"][class*="px-"]:active,
a[class*="tracking-wider"][class*="px-"]:active{transform:scale(.96)}
@media (hover:hover){
  a.brand-action:hover,
  a[class*="uppercase"][class*="px-"]:hover,
  a[class*="tracking-wider"][class*="px-"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(212,167,60,.45)}
  a[class*="uppercase"] svg,a.brand-action svg{transition:transform .22s}
  a[class*="uppercase"]:hover svg,a.brand-action:hover svg{transform:translateX(3px)}
}

/* 3) Phone performance: blur on a fixed header is the #1 cause of scroll lag */
header.fixed{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:#000!important}
html.light header.fixed{background-color:#fff!important}

/* 4) Hero: picture sits BEHIND the headline (not above/below it) */
#top .gym-hero-dim{background:rgba(0,0,0,.42)!important}
#top .bg-gradient-to-t{background:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 12%,rgba(0,0,0,0) 36%)!important}
#top>div:first-child>img{object-position:50% 12%!important}
#top h1,#top .hero-copy p{text-shadow:0 2px 22px rgba(0,0,0,.75)}
@media (max-width:640px){
  /* whole body fits on a phone: picture is a full-width band behind the headline, soft edges */
  #top{min-height:auto!important;padding-top:5.5rem!important;padding-bottom:2.25rem!important;align-items:flex-start!important}
  #top .gym-hero-dim{background:rgba(0,0,0,.30)!important}
  #top .bg-gradient-to-t{background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 22%)!important}
  #top .hero-copy>div.flex{margin-top:3.4rem!important}
  #top>div:first-child>img{
    position:absolute!important;inset:auto!important;left:0!important;top:3.5rem!important;translate:none;
    width:100%!important;height:auto!important;max-width:100%;object-fit:contain!important;object-position:center!important;margin:0!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
  }
}

/* 5) Images stay inside a limit */
main img{max-width:100%}
.px-cap{max-height:340px;overflow:hidden}
.px-cap img{max-height:340px;object-fit:cover}
@media (min-width:1024px){.px-cap,.px-cap img{max-height:380px}}

/* 6) Mobile / tablet section strip - moves by itself (gentle marquee) */
:root{--px-strip:0px}
.px-strip{display:none}
@media (max-width:1279px){
  body{padding-top:var(--px-strip)}
  .px-strip{
    display:block;overflow:hidden;padding:7px 0 9px;
    border-top:1px solid rgba(128,128,128,.22);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  }
  .px-track{display:flex;width:max-content;animation:px-marquee var(--px-dur,22s) linear infinite;will-change:transform}
  .px-strip:active .px-track,.px-strip:hover .px-track{animation-play-state:paused}
  @keyframes px-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  .px-strip a{
    flex:0 0 auto;white-space:nowrap;text-decoration:none;margin-right:8px;
    font-size:12px;font-weight:600;line-height:1;padding:8px 14px;border-radius:9999px;
    color:#a3a3a3;border:1px solid transparent;-webkit-tap-highlight-color:transparent;
    transition:transform .2s,background-color .25s,color .25s,border-color .25s;
  }
  .px-strip a:active{transform:scale(.94)}
  .px-strip a.on{color:#d4a73c;background:rgba(212,167,60,.12);border-color:rgba(212,167,60,.45)}
  html.light .px-strip a{color:#525252}
  html.light .px-strip a.on{color:#7a5200;background:rgba(212,167,60,.18);border-color:rgba(160,110,0,.5)}
}
@media (prefers-reduced-motion:reduce){
  .px-track{animation:none}
  .px-strip{overflow-x:auto;scrollbar-width:none}
}