/* MiracleReps intro screens (sign-in, loading, setup).
   They sit on a living sky: colors follow the time of day (set by intro.js), two soft glows drift across it,
   and plates, dumbbells and water drops roam on a canvas. Everything calms down for "reduce motion". */
.intro-sky,#introBg{display:none}
body.intro-on{background:var(--sky2,#3E7BFA)}
body.intro-on .intro-sky{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(160deg,var(--sky1,#12C2E9),var(--sky2,#3E7BFA) 55%,var(--sky3,#2FBF71));background-size:170% 170%;animation:skyShift 22s ease-in-out infinite alternate}
body.intro-on .intro-sky::before,body.intro-on .intro-sky::after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(40px);opacity:.55}
body.intro-on .intro-sky::before{background:radial-gradient(circle,rgba(255,255,255,.55),transparent 60%);top:-30vmax;left:-20vmax;animation:glowA 18s ease-in-out infinite alternate}
body.intro-on .intro-sky::after{background:radial-gradient(circle,var(--sky3,#2FBF71),transparent 62%);bottom:-35vmax;right:-25vmax;animation:glowB 24s ease-in-out infinite alternate}
body.intro-on #introBg{display:block;position:fixed;inset:0;z-index:0;pointer-events:none}
@keyframes skyShift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes glowA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(28vw,18vh) scale(1.15)}}
@keyframes glowB{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-30vw,-22vh) scale(.95)}}
body.intro-on .screen{position:relative;z-index:1;padding-inline:16px}

.intro{color:#fff;gap:18px}
.intro-head{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.intro .plates-row{margin-bottom:6px}
.intro .plates-row i{box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 0 0 2px rgba(255,255,255,.35)}
body.intro-first .intro .plates-row i{animation:plateIn .55s cubic-bezier(.2,1.6,.4,1) both}
.intro .plates-row i:nth-child(1){animation-delay:.05s!important}
.intro .plates-row i:nth-child(2){animation-delay:.13s!important}
.intro .plates-row i:nth-child(3){animation-delay:.21s!important}
.intro .plates-row i:nth-child(4){animation-delay:.29s!important}
.intro .plates-row i.bar{background:#fff;box-shadow:none;transform-origin:left}
body.intro-first .intro .plates-row i.bar{animation:barIn .5s ease-out both}
.plates-row i.bar{background:var(--fg)}
@keyframes plateIn{0%{transform:translateX(70px) scaleY(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes barIn{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.intro-greet{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.intro-name{font-size:clamp(66px,22vw,96px);line-height:.84;color:#fff;margin:0;letter-spacing:-.005em;text-shadow:0 3px 0 rgba(0,0,0,.12),0 12px 30px rgba(0,0,0,.18)}
.intro-name span{display:block}
.intro-name span{color:#FFE7A3;background:linear-gradient(100deg,#FFF6D8 0%,#FFFFFF 18%,#FFE08A 38%,#FFF6D8 55%,#FFFFFF 75%,#FFF6D8 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12)) drop-shadow(0 10px 22px rgba(0,0,0,.2));animation:shine 7s linear infinite}
@keyframes shine{0%{background-position:0% 0}100%{background-position:250% 0}}
.intro-cycle{position:relative;height:30px;margin:8px 0 0;font:800 26px/30px var(--font-display);letter-spacing:.02em;text-transform:uppercase;overflow:hidden}
.intro-cycle span{position:absolute;left:0;top:0;white-space:nowrap;animation:lineIn .45s cubic-bezier(.2,.9,.3,1.2) both}
.intro-cycle span.out{animation:lineOut .45s ease-in both}
@keyframes lineIn{0%{transform:translateY(100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes lineOut{0%{transform:none;opacity:1}100%{transform:translateY(-100%);opacity:0}}
.intro .tagline{color:rgba(255,255,255,.94);font-size:16.5px;max-width:36ch;margin:0}
.intro > .muted,.intro > p > .muted{color:rgba(255,255,255,.88)}
.intro > .link,.intro > button.link{color:rgba(255,255,255,.92)}
.intro-greet,.intro-cycle,.intro .tagline,.intro-foot{text-shadow:0 1px 10px rgba(0,0,0,.18)}
.intro .err{color:#fff;background:rgba(196,47,42,.85);padding:6px 10px;border-radius:8px}
.intro .card .err{color:var(--protein);background:none;padding:0}

.intro-marquee{overflow:hidden;margin:0 -16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.intro-marquee div{display:flex;gap:8px;width:max-content;animation:marquee 32s linear infinite;padding:2px 0}
.intro-marquee span{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:14px;font-weight:700;white-space:nowrap}
.intro-marquee i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.75)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.intro .card{color:var(--fg);background:var(--surface);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 18px 50px rgba(10,16,40,.28);border-radius:18px}
body.intro-first .intro .card{animation:cardIn .5s .15s cubic-bezier(.2,1,.3,1) both}
@keyframes cardIn{0%{transform:translateY(18px);opacity:0}100%{transform:none;opacity:1}}
.intro .card .btn.primary{position:relative;overflow:hidden}
.intro .card .btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-100%);animation:btnShine 3.6s ease-in-out 1s infinite;pointer-events:none}
@keyframes btnShine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.intro-foot{margin:0;font-size:13.5px;color:rgba(255,255,255,.9)}
.intro .divider{color:rgba(255,255,255,.88)}
.intro .divider::before,.intro .divider::after{background:rgba(255,255,255,.4)}
.intro > .btn{align-self:flex-start}

/* setup screens */
.ob-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.intro-mini{font:800 28px/1 var(--font-display);letter-spacing:.01em;color:#fff}
.intro-mini span{color:#FFE29A}
.intro .steps-dots i{background:rgba(255,255,255,.35)}
.intro .steps-dots i.on{background:#fff}

@media (prefers-reduced-motion: reduce){
  body.intro-on .intro-sky,body.intro-on .intro-sky::before,body.intro-on .intro-sky::after,.intro-name span,.intro-marquee div,
  .intro .card .btn.primary::after,.intro .plates-row i,.intro .card,.intro-cycle span{animation:none!important}
  .intro-marquee div{flex-wrap:wrap;width:auto}
  .intro-marquee{-webkit-mask-image:none;mask-image:none;margin:0}
}

/* five pillars under the rotating line; the active one lights up in step with it */
.intro-pillars{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.intro-pillars button{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;border-radius:999px;padding:6px 12px;font:700 13.5px/1 var(--font-body);
  letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,color .3s,transform .3s,border-color .3s;cursor:pointer}
.intro-pillars button.on{background:#fff;color:var(--sky2,#3E7BFA);border-color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
.intro-perks{display:flex;gap:14px;flex-wrap:wrap;margin:0;font-size:14px;font-weight:600;color:rgba(255,255,255,.95)}
.intro-perks span{display:inline-flex;align-items:center;gap:6px}
.intro-perks span::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
/* dark look: deeper sky, softer glow, quieter card edge */
:root[data-theme="dark"] body.intro-on .intro-sky::before{background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%)}
:root[data-theme="dark"] body.intro-on .intro-sky::after{opacity:.4}
:root[data-theme="dark"] .intro .card{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.45)}
:root[data-theme="dark"] .intro-pillars button.on{color:#141A2E}

/* look switch, top right on the sign-in and setup screens */
.theme-fab{display:none}
body.intro-on .theme-fab{display:grid;place-items:center;position:fixed;z-index:3;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:42px;height:42px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s,background .2s}
body.intro-on .theme-fab:hover{background:rgba(255,255,255,.24)}
body.intro-on .theme-fab:active{transform:scale(.92)}
.theme-fab svg{width:21px;height:21px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}