/* Decorative motion layer (assets/motion.js). Every rule here is either harmless without
   JavaScript or scoped to .motion-gsap, which only exists once GSAP has started. */

/* GSAP drives reveals; CSS transitions on the same properties would fight it. */
.motion-gsap .reveal,.motion-gsap .reveal-scale{transition:none}

/* Brand intro: a thin blue line across the top, first visit of the session only. */
.motion-intro{position:fixed;top:0;left:0;right:0;height:2px;z-index:600;transform-origin:left center;
 background:linear-gradient(90deg,transparent,var(--accent) 30%,#9cc8ff 70%,transparent);box-shadow:0 0 12px #4f8fd9aa;pointer-events:none}

/* Cursor light: a soft blue halo that follows the pointer (fine pointers only). */
.motion-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:1;pointer-events:none;
 border-radius:50%;background:radial-gradient(circle,rgba(79,143,217,.13) 0%,rgba(79,143,217,.05) 35%,transparent 68%);
 mix-blend-mode:screen;opacity:0;transition:opacity .6s ease}
.motion-glow.is-on{opacity:1}

/* Text that lights up word by word while scrolling. */
.motion-word{display:inline-block;will-change:opacity}

/* Image expansion: the clip starts inset and opens to full bleed. */
.motion-gsap [data-motion="expand"]{will-change:clip-path}

/* Parallax backgrounds need spare height so the edges never show. */
.motion-gsap .composites .bg[data-motion="parallax"]{inset:-14% 0}

/* Giant translucent words behind the division panels. */
[data-watermark]{position:relative;isolation:isolate}
[data-watermark]::after{content:attr(data-watermark);position:absolute;z-index:-1;left:0;right:0;bottom:4%;
 transform:translateX(var(--wm-shift,0));font-family:'Barlow Condensed',sans-serif;font-weight:600;
 font-size:clamp(5rem,15vw,15rem);line-height:1;letter-spacing:.04em;white-space:nowrap;text-align:center;
 color:transparent;-webkit-text-stroke:1px rgba(125,180,240,.09);pointer-events:none;user-select:none}

/* Slow mesh gradient behind selected sections. Transform-only animation stays on the compositor. */
.motion-gsap [data-motion-mesh]{isolation:isolate;overflow:hidden}
.motion-mesh{position:absolute;inset:0;z-index:-1;pointer-events:none}
.motion-mesh::before,.motion-mesh::after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px);opacity:.5}
.motion-mesh::before{left:-20vmax;top:-30vmax;background:radial-gradient(circle,rgba(79,143,217,.28),transparent 65%);animation:mesh-a 48s ease-in-out infinite alternate}
.motion-mesh::after{right:-25vmax;bottom:-35vmax;background:radial-gradient(circle,rgba(40,70,140,.35),transparent 65%);animation:mesh-b 60s ease-in-out infinite alternate}
@keyframes mesh-a{to{transform:translate(18vmax,22vmax) scale(1.15)}}
@keyframes mesh-b{to{transform:translate(-22vmax,-16vmax) scale(.9)}}

@media(max-width:960px){[data-watermark]::after{font-size:clamp(3.5rem,22vw,7rem);bottom:2%}}
@media(prefers-reduced-motion:reduce){.motion-mesh,.motion-glow,.motion-intro{display:none}}