/* ============================================================
   embed-mode.css — when ?embed=<id> is in the URL on any page,
   we hide all chrome (nav, footer, intro copy) and show ONLY
   the target section's ACTUAL ANIMATION element (not its
   headline + intro paragraph + everything).

     /platform-influence.html?embed=whip-count
                  ↓ iframed by ↓
     /animations-library.html   /your-webflow-site.com

   Update the animation on the platform page once and every
   embed updates automatically — no copying, no syncing.

   The companion JS (embed-mode.js) walks the section to find
   the visual element and marks it with data-embed-visual,
   plus marks its ancestors with data-embed-container. CSS
   below keeps only that path visible.
   ============================================================ */

html.embed-mode,
html.embed-mode body {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    min-height: 0 !important;
}

/* Hide top-level chrome */
body.embed-mode > nav,
body.embed-mode > footer,
body.embed-mode > script[src],
body.embed-mode > .nav,
body.embed-mode > .footer,
body.embed-mode > .workflow-subnav,
body.embed-mode > .next-chapter,
body.embed-mode > .next-chapter-divider,
body.embed-mode > .testimonial-section,
body.embed-mode > .cta-section,
body.embed-mode > .demo-cta,
body.embed-mode > .bottom-cta,
body.embed-mode > .footer-section,
body.embed-mode > section:not([data-embed-target]),
body.embed-mode > div:not([data-embed-target]):not(.al-toast),
body.embed-mode > header,
body.embed-mode > aside {
    display: none !important;
}

/* Target section: only padding/bg, no surrounding margin/border */
body.embed-mode [data-embed-target] {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* INSIDE the target section, walk down the container chain hiding
   only direct siblings that aren't on the visual's ancestor path.
   Only active when the JS actually marked a specific visual
   (body[data-embed-isolated]); sections where the whole thing IS
   the animation (hero blades, video heroes) skip this and render
   as-is. */
body.embed-mode[data-embed-isolated] [data-embed-target] > *:not([data-embed-container]):not([data-embed-visual]) {
    display: none !important;
}
body.embed-mode[data-embed-isolated] [data-embed-container] > *:not([data-embed-container]):not([data-embed-visual]) {
    display: none !important;
}

/* Reset container padding to a small breathing room so the iframe
   hugs the animation. Consumers compose their own surrounding
   padding/headline in Webflow. */
body.embed-mode [data-embed-target] [data-embed-container] {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
}

/* The visual itself: stretch to full width, small outer breathing room */
body.embed-mode [data-embed-target] [data-embed-visual] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* Ensure scroll-reveal opacity is forced visible */
body.embed-mode .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
}
body.embed-mode .scroll-reveal.revealed {
    opacity: 1 !important;
}