/* These rules only style the created site, never the editor's platform theme. */
.site-section{isolation:auto}
.site-section.has-visual{isolation:isolate}
.site-block.element-effect-shadow{filter:drop-shadow(0 5px var(--element-effect-blur) var(--element-effect-color))}
.site-block.element-effect-glow{filter:drop-shadow(0 0 var(--element-effect-blur) var(--element-effect-color)) drop-shadow(0 0 var(--element-effect-strength) var(--element-effect-color))}
.site-block.element-effect-neon{filter:drop-shadow(0 0 var(--element-effect-blur) var(--element-effect-color)) drop-shadow(0 0 var(--element-effect-strength) var(--element-effect-color));outline:1px solid var(--element-effect-color);outline-offset:2px}
.site-block.element-effect-glass{background:rgb(255 255 255 / var(--element-effect-opacity));border:1px solid var(--element-effect-color);border-radius:8px;backdrop-filter:blur(var(--element-effect-blur));box-shadow:0 8px 24px #0002}
.site-block.element-effect-outline{outline:var(--element-effect-outline) solid var(--element-effect-color);outline-offset:2px}
.site-document[data-device=desktop] .site-section{height:var(--desktop-section-height,auto)}
.site-document[data-device=tablet] .site-section{height:var(--tablet-section-height,auto)}
.site-document[data-device=mobile] .site-section{height:var(--mobile-section-height,auto)}
.section-content{position:relative;z-index:1;min-width:0}
.section-layers{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.visual-layer{position:absolute;inset:0;pointer-events:none}
.visual-light{filter:blur(var(--visual-blur));transform:scale(1.06)}
.effect-neon>.section-content{box-shadow:inset 0 0 0 1px var(--effect-soft),0 0 var(--effect-strength) var(--effect-soft);border-radius:16px;padding:24px}
.effect-glass>.section-content{background:rgb(255 255 255 / var(--glass-alpha));border:1px solid var(--effect-soft);border-radius:16px;padding:24px;backdrop-filter:blur(var(--visual-blur));box-shadow:0 12px var(--effect-strength) #0002}
.effect-shadow>.section-content{padding:24px;border-radius:16px;box-shadow:0 12px var(--effect-strength) var(--effect-soft)}
.effect-blur .visual-gradient,.effect-blur .visual-image{filter:blur(var(--visual-blur));transform:scale(1.08)}
.section-content.layout-split,.section-content.layout-grid-2,.section-content.layout-grid-3{display:grid;gap:24px;align-items:center;grid-template-columns:repeat(2,minmax(0,1fr))}
.section-content.layout-split{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.section-content.layout-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.section-content>[data-span=full],.section-content>.empty-section{grid-column:1/-1}
.section-content .site-image{vertical-align:middle}
.section-content.layout-grid-3>.site-block,.section-content.layout-grid-2>.site-block{margin:0}
@container(max-width:600px){
 .section-content.layout-split,.section-content.layout-grid-2,.section-content.layout-grid-3{grid-template-columns:minmax(0,1fr);gap:18px}
 .effect-neon>.section-content,.effect-glass>.section-content,.effect-shadow>.section-content{padding:16px}
 .effect-glass>.section-content{backdrop-filter:none;background:rgb(255 255 255 / var(--glass-alpha))}
}

/* Premium backgrounds share bounded layers across editor, preview and delivery.
   Only transforms and opacity animate. Blur is static and capped by the renderer. */
.visual-motion{contain:paint}
.visual-motion .motion-field{inset:-12%;background:radial-gradient(ellipse at 18% 26%,var(--motion-primary),transparent 58%),radial-gradient(ellipse at 80% 65%,var(--motion-secondary),transparent 60%),radial-gradient(ellipse at 50% 85%,var(--motion-third),transparent 65%);filter:blur(var(--motion-blur));opacity:var(--motion-alpha);animation:vibe-organic var(--motion-duration) ease-in-out infinite alternate}
.visual-motion .motion-detail{inset:-12%;background:radial-gradient(ellipse at 20% 30%,var(--motion-glow),transparent 55%);opacity:calc(var(--motion-alpha) * .45);animation:vibe-breathe calc(var(--motion-duration) * .8) ease-in-out infinite alternate}
.visual-motion .motion-particles{inset:-6%;filter:var(--particle-filter);animation:vibe-float var(--particle-duration) ease-in-out infinite alternate}
.visual-motion .motion-particles::after{content:'';position:absolute;inset:0;background-image:var(--particle-extra);opacity:.55;transform:scale(1.08);animation:vibe-orbit calc(var(--particle-duration) * 1.3) ease-in-out infinite alternate}
.motion-aurora-premium .motion-field{border-radius:45%;background:conic-gradient(from 210deg at 50% 50%,var(--motion-primary),var(--motion-secondary),var(--motion-third),var(--motion-primary));transform:scale(1.2);animation-name:vibe-aurora}
.motion-aurora-premium .motion-detail{background:radial-gradient(ellipse at 65% 10%,var(--motion-glow),transparent 55%),radial-gradient(ellipse at 20% 90%,var(--motion-glow),transparent 45%)}
.motion-neon-flow .motion-field{background:radial-gradient(ellipse at 0% 60%,var(--motion-glow),transparent 40%),radial-gradient(ellipse at 100% 30%,var(--motion-secondary),transparent 50%)}
.motion-neon-flow .motion-detail{background:linear-gradient(115deg,transparent 25%,var(--motion-glow) 48%,transparent 64%);filter:blur(22px);animation-name:vibe-sweep}
.motion-glass-luxury .motion-field{background:radial-gradient(ellipse at 15% 30%,var(--motion-secondary),transparent 55%),radial-gradient(ellipse at 85% 70%,var(--motion-third),transparent 60%)}
.motion-glass-luxury .motion-detail{inset:10% 8%;border:1px solid rgb(255 255 255 / .48);border-radius:28px;background:linear-gradient(120deg,#ffffff22,transparent 45%,var(--motion-glow) 52%,transparent 65%);box-shadow:inset 0 1px 20px #fff3,0 24px 64px #28365218;animation-name:vibe-glass;opacity:calc(var(--motion-alpha) * .7)}
.motion-cyber-glow .motion-detail{background:repeating-linear-gradient(115deg,transparent 0 149px,var(--motion-glow) 150px,transparent 151px 290px);opacity:calc(var(--motion-alpha) * .22);animation-name:vibe-lines}
.motion-light-beam .motion-detail{background:conic-gradient(from 135deg at 18% -10%,transparent 0deg,var(--motion-glow) 9deg,transparent 18deg 27deg,var(--motion-glow) 35deg,transparent 45deg);filter:blur(12px);animation-name:vibe-beam}
.motion-floating-lights .motion-field{background:radial-gradient(ellipse at 50% 100%,var(--motion-third),transparent 70%);animation-name:vibe-breathe}
.motion-floating-lights .motion-detail{background:radial-gradient(ellipse at 90% 20%,var(--motion-glow),transparent 50%)}
.motion-liquid-gradient .motion-field{background:radial-gradient(ellipse at 10% 30%,var(--motion-primary),transparent 55%),radial-gradient(ellipse at 80% 15%,var(--motion-secondary),transparent 60%),radial-gradient(ellipse at 40% 85%,var(--motion-third),transparent 55%);animation-name:vibe-liquid;opacity:calc(var(--motion-alpha) * 1.1)}
.motion-liquid-gradient .motion-detail{animation-name:vibe-orbit}
.motion-spotlight .motion-field{background:radial-gradient(ellipse at 50% 30%,var(--motion-glow),transparent 52%);animation-name:vibe-spot}
.motion-spotlight .motion-detail{background:radial-gradient(ellipse at 50% 95%,var(--motion-secondary),transparent 55%);animation-name:vibe-breathe}
.motion-cosmic-premium .motion-field{background:radial-gradient(ellipse at 30% 25%,var(--motion-secondary),transparent 55%),radial-gradient(ellipse at 75% 80%,var(--motion-third),transparent 55%);animation-name:vibe-orbit}
.motion-cosmic-premium .motion-detail{background:radial-gradient(ellipse at 50% 50%,var(--motion-glow),transparent 55%);opacity:calc(var(--motion-alpha) * .18)}
.motion-mesh-motion .motion-field{background:radial-gradient(at 12% 20%,var(--motion-primary),transparent 55%),radial-gradient(at 85% 18%,var(--motion-secondary),transparent 55%),radial-gradient(at 20% 90%,var(--motion-third),transparent 50%),radial-gradient(at 90% 80%,var(--motion-fourth),transparent 60%);animation-name:vibe-mesh;opacity:calc(var(--motion-alpha) * 1.2)}
.motion-holographic .motion-field{background:conic-gradient(from 90deg,var(--motion-primary),var(--motion-secondary),var(--motion-third),var(--motion-primary));animation-name:vibe-hologram}
.motion-holographic .motion-detail{background:linear-gradient(115deg,transparent 20%,var(--motion-glow) 44%,#ffffff66 48%,transparent 60%);animation-name:vibe-sweep}
.motion-elegant-dark .motion-field{background:radial-gradient(ellipse at 70% 0%,var(--motion-glow),transparent 60%);opacity:calc(var(--motion-alpha) * .45);animation-name:vibe-breathe}
.motion-elegant-dark .motion-detail{background:linear-gradient(130deg,transparent 40%,var(--motion-secondary) 55%,transparent 75%);opacity:calc(var(--motion-alpha) * .2)}
@keyframes vibe-organic{from{transform:translate3d(calc(var(--motion-travel) * -1),0,0) scale(1.02)}to{transform:translate3d(var(--motion-travel),var(--motion-travel),0) scale(1.08)}}
@keyframes vibe-aurora{from{transform:translate3d(-2%,0,0) rotate(-8deg) scale(1.12)}to{transform:translate3d(2%,var(--motion-travel),0) rotate(8deg) scale(1.22)}}
@keyframes vibe-breathe{from{opacity:calc(var(--motion-alpha) * .2);transform:scale(1)}to{opacity:calc(var(--motion-alpha) * .45);transform:scale(1.04)}}
@keyframes vibe-sweep{from{transform:translate3d(calc(var(--motion-travel) * -2),0,0) rotate(-3deg);opacity:calc(var(--motion-alpha) * .22)}to{transform:translate3d(calc(var(--motion-travel) * 2),0,0) rotate(3deg);opacity:calc(var(--motion-alpha) * .48)}}
@keyframes vibe-float{from{transform:translate3d(-1%,var(--motion-travel),0)}to{transform:translate3d(1%,calc(var(--motion-travel) * -1),0)}}
@keyframes vibe-orbit{from{transform:translate3d(calc(var(--motion-travel) * -1),0,0) rotate(-4deg)}to{transform:translate3d(var(--motion-travel),calc(var(--motion-travel) * -1),0) rotate(4deg)}}
@keyframes vibe-glass{from{transform:translate3d(-1%,0,0);opacity:calc(var(--motion-alpha) * .5)}to{transform:translate3d(1%,calc(var(--motion-travel) * .3),0);opacity:calc(var(--motion-alpha) * .8)}}
@keyframes vibe-lines{from{transform:translate3d(calc(var(--motion-travel) * -1),0,0)}to{transform:translate3d(var(--motion-travel),0,0)}}
@keyframes vibe-beam{from{transform:rotate(-5deg) translate3d(calc(var(--motion-travel) * -1),0,0)}to{transform:rotate(5deg) translate3d(var(--motion-travel),0,0)}}
@keyframes vibe-liquid{from{transform:translate3d(-2%,var(--motion-travel),0) scale(1.05,1.08) rotate(-4deg)}to{transform:translate3d(2%,calc(var(--motion-travel) * -1),0) scale(1.15,1.03) rotate(4deg)}}
@keyframes vibe-spot{from{transform:translate3d(calc(var(--motion-travel) * -1),0,0) scale(.98)}to{transform:translate3d(var(--motion-travel),var(--motion-travel),0) scale(1.05)}}
@keyframes vibe-mesh{from{transform:translate3d(-2%,0,0) rotate(-4deg) scale(1.1)}to{transform:translate3d(2%,var(--motion-travel),0) rotate(4deg) scale(1.15)}}
@keyframes vibe-hologram{from{transform:rotate(-5deg) scale(1.18);opacity:calc(var(--motion-alpha) * .6)}to{transform:rotate(5deg) scale(1.22);opacity:calc(var(--motion-alpha) * .9)}}
/* The same fallback applies to a narrow editor canvas and a real phone. */
@container(max-width:600px){
 .visual-motion{--motion-travel:12px!important;--motion-blur:16px!important}
 .visual-motion .motion-particles::after{display:none}
 .visual-motion .motion-detail{filter:none}
}
@media(max-width:600px){
 .visual-motion{--motion-travel:12px!important;--motion-blur:16px!important}
 .visual-motion .motion-particles::after{display:none}
 .visual-motion .motion-detail{filter:none}
}
@media(prefers-reduced-motion:reduce){
 .visual-motion .visual-layer,.visual-motion .motion-particles::after{animation:none!important;transform:none!important}
}
/* Native imports intentionally disable CSS containers; device previews still
   receive the same mobile reduction as a real narrow screen. */
.site-document[data-device=mobile] .visual-motion{--motion-travel:12px!important;--motion-blur:16px!important}
.site-document[data-device=mobile] .visual-motion .motion-particles::after{display:none}
.site-document[data-device=mobile] .visual-motion .motion-detail{filter:none}