/* ==========================================================================
   GymOps landing: custom styles (Tailwind CDN handles utilities)
   ========================================================================== */

/* ---------- Design tokens (RGB channels so Tailwind can apply opacity) ---------- */
:root {
    --ember-50: 255 244 239;
    --ember-100: 255 228 216;
    --ember-200: 255 200 176;
    --ember-300: 255 160 122;
    --ember-400: 255 122 79;
    --ember-500: 255 90 54;
    --ember-600: 232 65 47;
    --ember-700: 185 42 32;

    --page: 255 255 255;
    --ink: 24 24 27;
    --line: 228 228 231;
}

html { background: rgb(var(--page)); overflow-x: clip; }
body { overflow-x: clip; }
::selection { background: rgb(var(--ember-500) / .2); color: rgb(var(--ink)); }

/* ---------- Text ---------- */
.text-ember-grad {
    background: linear-gradient(100deg, rgb(var(--ember-600)) 0%, rgb(var(--ember-500)) 35%, #ff9a3d 65%, rgb(var(--ember-600)) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 6s linear infinite;
    padding-right: .08em;
}
.text-ink-grad {
    background: linear-gradient(180deg, rgb(var(--ink)) 30%, #71717a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes shine { to { background-position: 200% center; } }

/* ---------- Backgrounds ---------- */
.bg-grid {
    background-image:
        linear-gradient(rgb(var(--ink) / .05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--ink) / .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.aurora { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; will-change: transform; }
.aurora-a { animation: drift 18s ease-in-out infinite alternate; }
.aurora-b { animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(6%, -4%, 0) scale(1.12); }
    100% { transform: translate3d(-5%, 6%, 0) scale(.95); }
}

/* ---------- Cards ---------- */
.card {
    position: relative; isolation: isolate;
    background: #fff;
    border: 1px solid rgb(var(--line));
    border-radius: 1.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 32px -16px rgb(0 0 0 / .1);
    transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0;
    background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgb(var(--ember-500) / .08), transparent 42%);
    transition: opacity .4s ease;
}
.card:hover { border-color: rgb(var(--ember-500) / .25); box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 24px 48px -20px rgb(var(--ember-600) / .18); }
.card:hover::before { opacity: 1; }

/* Inner demo panel inside cards */
.panel { border-radius: 1rem; border: 1px solid rgb(var(--line)); background: #fafafa; }

/* Rotating gradient border */
.ring-spin { position: relative; border-radius: 2rem; padding: 1.5px; overflow: hidden; background: rgb(var(--line)); }
.ring-spin::before {
    content: ""; position: absolute; inset: -150%;
    background: conic-gradient(from 0deg, transparent 0 62%, rgb(var(--ember-500)) 75%, #ffb08a 82%, transparent 92%);
    animation: spin 6s linear infinite;
}
.ring-spin > * { position: relative; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Phone mockup ---------- */
.phone {
    position: relative; padding: 9px; border-radius: 46px;
    background: linear-gradient(145deg, #3a3a42, #121215 45%, #2c2c33);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / .08) inset,
        0 50px 80px -30px rgb(24 24 27 / .45),
        0 30px 60px -30px rgb(var(--ember-600) / .35);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 3px; background: #2b2b31; }
.phone::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 70px 0 #2b2b31; }
.phone::after { right: -3px; top: 28%; height: 13%; }
.phone-screen { position: relative; overflow: hidden; border-radius: 38px; background: #fff; aspect-ratio: 720 / 1599; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-island {
    position: absolute; z-index: 5; top: 8px; left: 50%; transform: translateX(-50%);
    width: 28%; height: 18px; border-radius: 999px; background: #050505;
}
.phone-glare {
    position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 38px;
    background: linear-gradient(115deg, rgb(255 255 255 / .35) 0%, rgb(255 255 255 / 0) 28%);
    mix-blend-mode: soft-light;
}

/* Floating glass card */
.glass {
    border-radius: 1rem; border: 1px solid rgb(var(--line) / .9);
    background: rgb(255 255 255 / .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -18px rgb(24 24 27 / .25);
}

/* ---------- Entrance + scroll reveal ---------- */
.js .reveal {
    opacity: 0; transform: translate3d(0, 32px, 0) scale(.985);
    transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }

.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.word > span { display: inline-block; transform: translateY(110%); animation: rise 1s cubic-bezier(.2,.9,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { transform: none; } }

.fade-up { opacity: 0; animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0ms); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.float-a { animation: floatY 6s ease-in-out infinite; }
.float-b { animation: floatY 7s ease-in-out infinite -2s; }
.float-c { animation: floatY 8s ease-in-out infinite -4s; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Marquee ---------- */
.marquee {
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Feature showcase ---------- */
.sc-item { cursor: pointer; }
.sc-item .sc-desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.sc-item .sc-desc > * { overflow: hidden; min-height: 0; }
.sc-item.active .sc-desc { grid-template-rows: 1fr; opacity: 1; }
.sc-item .sc-bar { transform-origin: left; transform: scaleX(0); }
.sc-item.active .sc-bar { animation: progress var(--dur, 3.5s) linear forwards; }
.sc-paused .sc-item.active .sc-bar { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
.sc-shot { opacity: 0; transform: scale(1.04); filter: blur(4px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.sc-shot.active { opacity: 1; transform: none; filter: none; }

/* ---------- Compare toggle ---------- */
.cmp-row .before, .cmp-row .after { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .5s; }
.cmp-row .after { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); filter: blur(4px); }
[data-mode="after"] .cmp-row .before { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
[data-mode="after"] .cmp-row .after { opacity: 1; transform: none; filter: none; }
.cmp-icon-before, .cmp-icon-after { transition: opacity .4s, transform .5s; }
.cmp-icon-after { position: absolute; inset: 0; opacity: 0; transform: scale(.5) rotate(-45deg); }
[data-mode="after"] .cmp-icon-before { opacity: 0; transform: scale(.5) rotate(45deg); }
[data-mode="after"] .cmp-icon-after { opacity: 1; transform: none; }
.cmp-pill { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
[data-mode="after"] .cmp-pill { transform: translateX(100%); }

/* ---------- Toggle switch ---------- */
.tgl { width: 44px; height: 26px; border-radius: 999px; background: #e4e4e7; position: relative; transition: background .35s; flex-shrink: 0; }
.tgl::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / .2); transition: transform .4s cubic-bezier(.3,1.4,.5,1);
}
.tgl[aria-checked="true"] { background: linear-gradient(90deg, rgb(var(--ember-600)), rgb(var(--ember-400))); }
.tgl[aria-checked="true"]::after { transform: translateX(18px); }

/* ---------- FAQ ---------- */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgb(var(--ember-500)); color: #fff; border-color: transparent; }

/* ---------- Range slider ---------- */
input[type=range] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none;
    background: linear-gradient(90deg, rgb(var(--ember-600)) 0%, rgb(var(--ember-400)) var(--p, 50%), #e4e4e7 var(--p, 50%));
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; cursor: grab;
    border: 2px solid rgb(var(--ember-500));
    box-shadow: 0 0 0 6px rgb(var(--ember-500) / .15), 0 4px 10px rgb(0 0 0 / .15); transition: box-shadow .2s;
}
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; box-shadow: 0 0 0 10px rgb(var(--ember-500) / .2), 0 4px 10px rgb(0 0 0 / .15); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid rgb(var(--ember-500)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(var(--ember-500) / .15); }

/* ---------- Micro-interactions ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent);
    transform: skewX(-20deg); transition: left .8s ease;
}
.btn-shine:hover::after { left: 140%; }
.caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #128C7E; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bar-grow { transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.in .bar-grow { transform: scaleY(1); }
.ping-dot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.line-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.2,.8,.2,1) .2s; }
.in .line-draw { stroke-dashoffset: 0; }

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center; background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 10px 30px -6px rgb(37 211 102 / .55); transition: transform .4s cubic-bezier(.3,1.5,.5,1);
}
.wa-fab:hover { transform: scale(1.08) rotate(-6deg); }
.wa-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1; animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
.wa-tip {
    position: absolute; right: 72px; white-space: nowrap; padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 500;
    background: rgb(var(--ink)); color: #fff; opacity: 0; transform: translateX(8px); transition: all .3s; pointer-events: none;
}
.wa-fab:hover .wa-tip { opacity: 1; transform: none; }
@media (max-width: 640px) { .wa-fab { right: 16px; bottom: 16px; width: 54px; height: 54px; } .wa-tip { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .js .reveal { opacity: 1; transform: none; }
    .word > span, .fade-up { transform: none; opacity: 1; }
}