/* Crafto — builder-canvas overrides (Tiger, not ThemeZaa).
 * Injected ONLY into the GrapesJS builder iframe via theme.json "canvasCss" — never the live page.
 *
 * 1) De-animate: Crafto hides entrance-animated elements ([data-anime]{opacity:0},
 *    [data-shadow-animation] img{opacity:0}) until its scroll JS adds .appear; that JS doesn't run in
 *    the static builder canvas, so images/sections sit invisible even though they load. Force their
 *    revealed (post-animation) state so a page previews complete. The live page still animates. */
[data-anime] { opacity: 1 !important; transform: none !important; }
[data-anime] .appear, [data-anime].appear { opacity: 1 !important; }
[data-shadow-animation] img { opacity: 1 !important; }
.atropos-inner, .atropos-rotate, .atropos-scale { transform: none !important; }

/* 2) Light-only: Crafto is a light theme. The builder mirrors the admin UI's data-bs-theme into the
 *    canvas iframe; neutralize the dark Bootstrap body tokens so the canvas stays light for this theme
 *    regardless of the admin's dark/light setting. */
html[data-bs-theme="dark"] { --bs-body-bg: #ffffff !important; --bs-body-color: #232323 !important; color-scheme: light; }

/* 3) Portfolio hover gallery: each .gallery-bg is position:absolute; z-index:-2; opacity:0; hidden and
 *    is revealed on hover when JS toggles .active. In the static canvas no item is hovered, and the
 *    forced opaque canvas body (--bs-body-bg) paints OVER the negative-z-index layer -> blank. Giving the
 *    container its own stacking context lifts the whole section (incl. its z-index:-2 bg) above the body
 *    paper while keeping the bg BELOW the labels/dots. Then reveal the first/active item's image. */
.portfolio-hover-gallery { position: relative; z-index: 0; }
.portfolio-hover-gallery .portfolio-gallery-item:first-child .gallery-bg,
.portfolio-hover-gallery .portfolio-gallery-item.active .gallery-bg { opacity: 1 !important; visibility: visible !important; }