/* ============================================================
   GT Creative Solutions — Shared Immersive CSS
   Layered on top of each site's style.css. Uses --violet as accent
   (remapped per-site: violet / teal / amber).
   ============================================================ */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--violet),var(--violet-300));z-index:100;transition:transform .1s linear;}

/* Particle canvas layer */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.hero > .wrap,.hero-grid{position:relative;z-index:2;}

/* Header scrolled state */
.site-header{transition:background var(--transition),border-color var(--transition),box-shadow var(--transition);}
.site-header.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.28);}
[data-theme="light"] .site-header.scrolled{box-shadow:0 8px 30px rgba(11,37,69,.10);}

/* ---------- Reveal system (opacity + clip, no layout shift) ---------- */
.rise,.fade,.stagger > *{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),clip-path .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.rise{clip-path:inset(14% 0 0 0);filter:blur(3px);}
.rise.in{opacity:1;clip-path:inset(0 0 0 0);filter:blur(0);}
.fade.in,.stagger > .in{opacity:1;}
.stagger > *{clip-path:inset(0 0 12% 0);}
.stagger > .in{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion:reduce){
  .rise,.fade,.stagger > *{opacity:1 !important;clip-path:none !important;filter:none !important;transition:none;}
}

/* ---------- Magnetic + tilt smoothing ---------- */
.magnetic{transition:transform .25s cubic-bezier(.16,1,.3,1),background var(--transition),box-shadow var(--transition);}
.tilt{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color var(--transition),box-shadow var(--transition);transform-style:preserve-3d;will-change:transform;}

/* ---------- Aurora / animated gradient backdrop ---------- */
@property --fx-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
.aurora{position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.5;filter:blur(60px);
  background:
    radial-gradient(40% 50% at 70% 30%,var(--violet) 0%,transparent 60%),
    radial-gradient(35% 45% at 30% 70%,var(--violet-600,var(--violet)) 0%,transparent 60%);
  animation:aurora-drift 18s ease-in-out infinite alternate;}
[data-theme="light"] .aurora{opacity:.22;}
@keyframes aurora-drift{
  0%{transform:translate3d(-4%,-2%,0) scale(1);}
  100%{transform:translate3d(4%,3%,0) scale(1.15);}
}
@media (prefers-reduced-motion:reduce){.aurora{animation:none;}}

/* ---------- Gradient text shimmer for accent headline ---------- */
.shimmer{background:linear-gradient(100deg,var(--violet) 20%,var(--violet-300) 40%,var(--violet) 60%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5s linear infinite;}
@keyframes shimmer{to{background-position:200% center;}}
@media (prefers-reduced-motion:reduce){.shimmer{animation:none;}}

/* ---------- Glow pulse for key visual elements ---------- */
.glow-pulse{animation:glow-pulse 3.4s ease-in-out infinite;}
@keyframes glow-pulse{0%,100%{filter:drop-shadow(0 0 8px var(--violet));}50%{filter:drop-shadow(0 0 26px var(--violet));}}
@media (prefers-reduced-motion:reduce){.glow-pulse{animation:none;}}

/* ---------- Marquee logo/trust strip ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 26s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ---------- Animated underline links ---------- */
.link-anim{position:relative;}
.link-anim::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--violet);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.link-anim:hover::after{transform:scaleX(1);}

/* ---------- Pipeline / flow animation (dashes) ---------- */
.flow-line{stroke-dasharray:6 8;animation:flow 1.2s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-28;}}
@media (prefers-reduced-motion:reduce){.flow-line{animation:none;}}