/* ============================================================
   MacroSnap — Page-specific CSS
   Only: animations, overflow fallbacks, JS-state selectors,
         Swiper overrides, gradient text, complex selectors
   ============================================================ */

/* overflow-x: hidden on <body> creates a scroll container that breaks position: sticky.
   override with clip, which clips without creating a scroll container. */
body.page-macrosnap { overflow-x: clip; }

/* ── overflow: clip (with hidden fallback for older iOS Safari) ─────── */
.ms-hero      { overflow: hidden; overflow: clip; }
.ms-card-clip { overflow: hidden; overflow: clip; }

/* ── Backdrop: always-on blur (40px), disabled when not scrolled — same as header-new.php ── */
.ms-header:not(.scrolled) {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}

/* ── Hamburger animation (menu-toggle / menu-icon pattern) ──────
   Scroll state handled via group-[.scrolled]: Tailwind variants in HTML.
   Only the menu-icon animation CSS lives here since it requires
   ::before/::after pseudo-elements not achievable with Tailwind alone. ── */
.ms-header .menu-toggle .menu-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
}
@media (min-width: 768px) {
    .ms-header .menu-toggle .menu-icon { height: 3px; }
}

.ms-header .menu-toggle .menu-icon::before,
.ms-header .menu-toggle .menu-icon::after {
    content: "";
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ms-header.scrolled .menu-toggle .menu-icon::before,
.ms-header.scrolled .menu-toggle .menu-icon::after { background: #000; }

.ms-header .menu-toggle .menu-icon::before { top: -4px; }
.ms-header .menu-toggle .menu-icon::after  { top:  4px; }
@media (min-width: 768px) {
    .ms-header .menu-toggle .menu-icon::before { top: -5px; }
    .ms-header .menu-toggle .menu-icon::after  { top:  5px; }
}

.ms-header .menu-toggle.open .menu-icon::before,
.ms-header .menu-toggle.open .menu-icon::after                { background: #000; }
.ms-header .menu-toggle.open .menu-icon::before               { top: 0; transform: rotate(45deg); }
.ms-header .menu-toggle.open .menu-icon::after                { top: 0; transform: rotate(-45deg); }

/* ── Desktop hero: scan rig card + pill positions (2xl = 1440px) ── */
/* Positions derived from Figma mask-under-scan (840×444) + rig offset (top:39 left:20) */
@media (min-width: 1440px) {
    .ms-scan-line  { right: 20px !important; }

    .ms-card-cal     { left: 290px !important; top: 154px !important; right: auto !important; bottom: auto !important; }
    .ms-card-carbs   { left: 438px !important; top: 125px !important; right: auto !important; bottom: auto !important; }
    .ms-card-fat     { left: 493px !important; top: 237px !important; right: auto !important; bottom: auto !important; }
    .ms-card-protein { left: 355px !important; top: 262px !important; right: auto !important; bottom: auto !important; }

    .ms-pill-chicken  { left: 147px !important; top: 375px !important; right: auto !important; bottom: auto !important; }
    .ms-pill-broccoli { left: 169px !important; top:  97px !important; right: auto !important; bottom: auto !important; }
    .ms-pill-potato   { left: 684px !important; top: 329px !important; right: auto !important; bottom: auto !important; }
    .ms-pill-tomato   { left:  66px !important; top: 228px !important; right: auto !important; bottom: auto !important; }
    .ms-pill-egg      { left: 618px !important; top: 126px !important; }
}

/* ── Mobile menu (JS adds .open) ────────────────────────────── */
.ms-mobile-menu      { display: none; position: fixed; inset: 0; background: #fff; z-index: 200; flex-direction: column; overflow-y: auto; }
.ms-mobile-menu.open { display: flex; }
@media (min-width: 768px) {
    .ms-mobile-menu { bottom: auto; height: 485px; }
}

/* ── Lottie container — Safari SVG clip fix ─────────────────── */
/* Safari ignores overflow:hidden + border-radius on SVG children.
   -webkit-mask-image forces GPU compositing and correct clipping. */
#ms-lottie {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ── Lottie replay button ───────────────────────────────────── */
.ms-lottie-replay {
    display: none;
    position: absolute;
    bottom: 10.7vw;
    right: 9.1vw;
    z-index: 10;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    color: #1f1f1f;
    cursor: pointer;
    transition: background 0.2s;
}
.ms-lottie-replay svg {
    width: 14.5px;
}
.ms-lottie-replay:hover { background: #f0f0f0; }
.ms-lottie-replay.visible { display: flex; }
@media (min-width: 768px)  { 
    .ms-lottie-replay { 
                bottom: 7.3vw;
        right: 5.3vw;
        width: 36.5px;
        height: 36.5px;
    }
    .ms-lottie-replay svg {
        width: 20px;
        height: auto;
    }
 }
 @media (min-width: 1024px)  { 
    .ms-lottie-replay { 
        bottom: 6.7vw;
        right: 4.7vw;
        width: 44px;
        height: 44px;
    }
 }
 @media (min-width: 1440px)  { 
    .ms-lottie-replay { 
        bottom: 4.7vw;
        right: 3.3vw;
        width: 44px;
        height: 44px;
    }
 }

 @media (min-width: 1920px) {
    .ms-lottie-replay {
        width: 50.575px;
        height: 50.575px;
        bottom: 4.2vw;
        right: 3.1vw;
    }
 }

/* ── S2 Snap Ways — AI badge holographic gradient (exact from Figma) ── */
.ms-ai-badge-gradient {
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgNDEgMjAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgcHJlc2VydmVBc3BlY3RSYXRpbz0nbm9uZSc+PHJlY3QgeD0nMCcgeT0nMCcgaGVpZ2h0PScxMDAlJyB3aWR0aD0nMTAwJScgZmlsbD0ndXJsKCNncmFkKScgb3BhY2l0eT0nMScvPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0nZ3JhZCcgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnIGN4PScwJyBjeT0nMCcgcj0nMTAnIGdyYWRpZW50VHJhbnNmb3JtPSdtYXRyaXgoMy44NDU5IC0zLjggMS45MzE1IDcuNTY2OCAtMC4wMDAwMDExMTcyIDQ2KSc+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgxODgsMjQzLDkyLDEpJyBvZmZzZXQ9JzAuMDczNTE3Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyMDUsMjQ0LDEyNiwxKScgb2Zmc2V0PScwLjEzNzY4Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyMjEsMjQ1LDE2MCwxKScgb2Zmc2V0PScwLjIwMTg0Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyNTUsMjQ3LDIyNywxKScgb2Zmc2V0PScwLjMzMDE2Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgxOTIsMjI3LDIzMywxKScgb2Zmc2V0PScwLjM2ODgnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDEyOSwyMDcsMjM4LDEpJyBvZmZzZXQ9JzAuNDA3NDUnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDk4LDE5NywyNDEsMSknIG9mZnNldD0nMC40MjY3OCcvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoNjYsMTg4LDI0NCwxKScgb2Zmc2V0PScwLjQ0NjEnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDM1LDE3OCwyNDcsMSknIG9mZnNldD0nMC40NjU0MycvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoMTksMTczLDI0OSwxKScgb2Zmc2V0PScwLjQ3NTA5Jy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgzLDE2OCwyNTAsMSknIG9mZnNldD0nMC40ODQ3NScvPjxzdG9wIHN0b3AtY29sb3I9J3JnYmEoMTUsMTMyLDIxMywwLjc1KScgb2Zmc2V0PScwLjY0MDgyJy8+PHN0b3Agc3RvcC1jb2xvcj0ncmdiYSgyNyw5NiwxNzYsMC41KScgb2Zmc2V0PScwLjc5NjknLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDEzLDQ4LDg4LDAuMjUpJyBvZmZzZXQ9JzAuODk4NDUnLz48c3RvcCBzdG9wLWNvbG9yPSdyZ2JhKDAsMCwwLDApJyBvZmZzZXQ9JzEnLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48L3N2Zz4="),
        linear-gradient(90deg, #081537 0%, #081537 100%);
    background-size: 100% 100%;
}

/* ── S3 Why MacroSnap — description accordion ───────────────── */
/* Controlled by parent .is-active — JS only toggles that class */
.ms-why-nav-item {
    border-left-color: transparent;
}
.ms-why-nav-item.is-active {
    border-left-color: #000;
    opacity: 1 !important;
}
.ms-why-accordion {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.ms-why-nav-item.is-active .ms-why-accordion {
    grid-template-rows: 1fr;
    opacity: 1;
}
.ms-why-accordion > div { min-height: 0; }

/* ── S4 Testimonials — continuous full-bleed marquee (right → left) ── */

@keyframes ms-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ms-testimonials-marquee {
    animation: ms-marquee-scroll 40s linear infinite;
    will-change: transform;
}

.ms-testimonials-marquee-wrap:hover .ms-testimonials-marquee {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .ms-testimonials-marquee { animation: none; }
}

/* Coach badge: glossy radial-gradient bevel (all breakpoints). Layout/weight handled by utility classes. */
.ms-testimonials .ms-badge-coach {
    background-image: url("../images/macrosnap/badge-coach-bg.svg");
    background-size: 100% 100%;
}

/* ── S2 Snap Ways — Swiper overrides ────────────────────────── */
.ms-snap-swiper                     { overflow: unset; }
.ms-snap-swiper .swiper-wrapper     { align-items: stretch; }

/* Swiper default sets width:100% on .swiper-slide; override to fixed card width
   so slidesPerView:'auto' shows multiple slides (768–1439px only). */
.ms-snap-swiper .swiper-slide {
    width: 415px !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.ms-snap-swiper .swiper-slide > div { flex: 1; }

/* Built-in Swiper pagination — pill bullets (matches nutrition Explore More) */
.ms-snap-pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    bottom: auto;
    left: auto;
    line-height: 0;
}
.ms-snap-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background: #333;
    opacity: 0.2;
    border-radius: 99px;
    margin: 0 !important;
    transition: opacity 0.2s ease;
}
.ms-snap-pagination .swiper-pagination-bullet-active { opacity: 1; }
/* Hide when swiper is locked (all cards fit — watchOverflow sets this class) */
.ms-snap-pagination.swiper-pagination-lock           { display: none; }

/* ── S5 Pricing ──────────────────────────────────────────────── */
.ms-pricing-section {
    overflow: hidden;
}

/* Gradient text — requires -webkit-text-fill-color, no Tailwind equivalent */
.ms-pricing-headline-gradient {
    background: linear-gradient(90deg, #000 56%, #FFCD0C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── S6 FAQ accordion — only one item open at a time, JS toggles .is-expanded ── */
/* Same component as the Coach landing page (msc-faq), ms- prefixed for this page. */
.ms-faq-item {
    transition: background-color 0.3s ease, padding 0.3s ease;
    border-radius: 12px;
    background: transparent;
}

.ms-faq-item.is-expanded {
    background: #060606;
    padding-bottom: 6px;
}

.ms-faq-item .ms-faq-item__header p {
    transition: color 0.3s ease;
    color: #000;
}

.ms-faq-item.is-expanded .ms-faq-item__header p {
    color: #fff;
}

.ms-faq-item .ms-faq-item__icon {
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
    background: #f6f6f6;
    border: 1px solid transparent;
}

.ms-faq-item.is-expanded .ms-faq-item__icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ms-faq-item .ms-faq-icon-minus,
.ms-faq-item .ms-faq-icon-plus {
    position: absolute;
    transition: opacity 0.3s ease;
}

.ms-faq-item .ms-faq-icon-minus { opacity: 0; }
.ms-faq-item .ms-faq-icon-plus { opacity: 1; }
.ms-faq-item.is-expanded .ms-faq-icon-minus { opacity: 1; }
.ms-faq-item.is-expanded .ms-faq-icon-plus { opacity: 0; }

.ms-faq-item .ms-faq-icon-plus path {
    transition: fill 0.3s ease;
    fill: black;
}

.ms-faq-item.is-expanded .ms-faq-icon-plus path {
    fill: white;
}

.ms-faq-item__answer {
    overflow: hidden;
    height: 0;
    opacity: 0;
    /* Always active (not scoped to .is-expanded) so collapsing animates too —
       JS sets height:0 and removes .is-expanded in the same tick with no forced
       reflow between them, so the browser only sees the final (collapsed) style
       when it recalculates. If transition only lived on .is-expanded, that final
       style would have no transition and the collapse would snap instantly. */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ms-faq-item.is-expanded .ms-faq-item__answer {
    opacity: 1;
    transition-delay: 0s, 0.05s;
}

/* Figma never shows a divider touching the expanded (dark) item — it reads as
   redundant next to the rounded dark box. Hide the divider on whichever side
   currently borders .is-expanded (only one item is ever expanded at a time). */
.ms-faq-item.is-expanded + .ms-faq-divider,
.ms-faq-divider:has(+ .ms-faq-item.is-expanded) {
    opacity: 0;
}

/* Figma 7246:5006 — link is underlined by default (unlike the coach page). */
.ms-faq-link {
    color: #38a9ff;
    text-decoration: underline;
    text-underline-position: from-font;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .ms-faq-link { font-size: 15px; }
}

@media (min-width: 1440px) {
    .ms-faq-link { font-size: 16px; }
}