/* ================================================================
   IGS — utilities.css
   Atomic premium primitives: glass, glow, gradient, depth,
   animated grid, gradient blobs, noise, marquee, motion helpers
   ================================================================ */

/* ── GLASS ───────────────────────────────────────────────────── */
.u-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.u-glass-strong {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  backdrop-filter: var(--glass-blur-strong);
}
.u-glass-dark {
  background: var(--glass-bg-dark);
  border: 1px solid var(--glass-border-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--color-white);
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .u-glass,
  .u-glass-strong { background: rgba(255,255,255,0.92); }
  .u-glass-dark   { background: rgba(10,15,20,0.92); }
}

/* ── GLOWS ───────────────────────────────────────────────────── */
.u-glow-primary { box-shadow: var(--glow-primary); }
.u-glow-accent  { box-shadow: var(--glow-accent); }
.u-glow-soft    { box-shadow: var(--glow-soft); }
.u-glow-inner   { box-shadow: var(--glow-inner); }

/* ── DEPTH (elevation) ───────────────────────────────────────── */
.u-depth-0 { box-shadow: var(--depth-0); }
.u-depth-1 { box-shadow: var(--depth-1); }
.u-depth-2 { box-shadow: var(--depth-2); }
.u-depth-3 { box-shadow: var(--depth-3); }
.u-depth-4 { box-shadow: var(--depth-4); }
.u-depth-5 { box-shadow: var(--depth-5); }

/* Hover elevation pattern */
.u-lift {
  transition: transform var(--d-base) var(--ease-emphasized),
              box-shadow var(--d-base) var(--ease-emphasized);
  will-change: transform;
}
.u-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-4);
}
.u-lift-lg:hover {
  transform: translateY(-8px);
  box-shadow: var(--depth-5);
}

/* ── GRADIENTS ───────────────────────────────────────────────── */
.u-bg-grad-primary { background: var(--grad-primary); }
.u-bg-grad-deep    { background: var(--grad-deep); }
.u-bg-grad-dawn    { background: var(--grad-dawn); }
.u-bg-grad-mesh    { background: var(--grad-mesh); }

.u-text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── GRADIENT BLOBS (floating decorative shapes) ─────────────── */
.u-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.u-blob--primary { background: radial-gradient(circle at 30% 30%, #0A66C2, transparent 70%); }
.u-blob--accent  { background: radial-gradient(circle at 70% 70%, #0E8ADE, transparent 70%); }
.u-blob--violet  { background: radial-gradient(circle at 50% 50%, #6366F1, transparent 70%); }

.u-blob--sm { width: 240px; height: 240px; }
.u-blob--md { width: 420px; height: 420px; }
.u-blob--lg { width: 640px; height: 640px; }

.u-blob--float-a { animation: blobFloatA 18s ease-in-out infinite; }
.u-blob--float-b { animation: blobFloatB 22s ease-in-out infinite; }
.u-blob--float-c { animation: blobFloatC 26s ease-in-out infinite; }

@keyframes blobFloatA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}
@keyframes blobFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 30px) scale(1.08); }
}
@keyframes blobFloatC {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -20px) rotate(8deg); }
}

/* ── ANIMATED GRID (AI-inspired background) ──────────────────── */
.u-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,102,194,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,102,194,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.u-grid-bg--dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Pulse-moving grid (cinematic) */
.u-grid-bg--animated {
  animation: gridPan 30s linear infinite;
}
@keyframes gridPan {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* ── NOISE TEXTURE (subtle grain) ─────────────────────────────── */
.u-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── MARQUEE (technology logos, partners) ────────────────────── */
.u-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.u-marquee__track {
  display: flex;
  gap: 56px;
  flex-shrink: 0;
  animation: marqueeScroll 38s linear infinite;
  will-change: transform;
}
.u-marquee:hover .u-marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── FLOAT / PULSE / SHIMMER MICRO MOTION ────────────────────── */
.u-float    { animation: floatY 4s ease-in-out infinite; }
.u-pulse    { animation: pulseSoft 2.4s ease-in-out infinite; }
.u-shimmer  {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.u-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmerSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatY      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseSoft   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.03); } }
@keyframes shimmerSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ── REVEAL STATES (used by core.js IntersectionObserver) ────── */
.u-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--d-cinema) var(--ease-emphasized),
              transform var(--d-cinema) var(--ease-emphasized);
  will-change: opacity, transform;
}
.u-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.u-reveal--scale       { transform: translateY(24px) scale(0.96); }
.u-reveal--scale.is-visible { transform: translateY(0) scale(1); }
.u-reveal--left        { transform: translateX(-32px); }
.u-reveal--left.is-visible  { transform: translateX(0); }
.u-reveal--right       { transform: translateX(32px); }
.u-reveal--right.is-visible { transform: translateX(0); }

/* Stagger delay helpers (apply to children) */
.u-stagger > * { --i: 0; transition-delay: calc(var(--i) * 60ms); }
.u-stagger > *:nth-child(1) { --i: 0; }
.u-stagger > *:nth-child(2) { --i: 1; }
.u-stagger > *:nth-child(3) { --i: 2; }
.u-stagger > *:nth-child(4) { --i: 3; }
.u-stagger > *:nth-child(5) { --i: 4; }
.u-stagger > *:nth-child(6) { --i: 5; }
.u-stagger > *:nth-child(7) { --i: 6; }
.u-stagger > *:nth-child(8) { --i: 7; }
.u-stagger > *:nth-child(9) { --i: 8; }

/* ── CONIC SPINNER (loading state) ───────────────────────────── */
.u-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--color-primary) 100%);
  mask: radial-gradient(closest-side, transparent 60%, #000 62%);
  -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 62%);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── IMAGE PLACEHOLDER (for future real photos) ──────────────── */
.u-img-placeholder {
  position: relative;
  background: linear-gradient(135deg, #E6E9EC 0%, #F3F2EF 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.u-img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmerSweep 2s ease-in-out infinite;
}
.u-img-placeholder--portrait { aspect-ratio: 3 / 4; }
.u-img-placeholder--square   { aspect-ratio: 1 / 1; }

/* ── LAZY-LOAD IMAGE FADE-IN ─────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease-standard);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* ── REDUCED MOTION KILLSWITCH for utilities ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .u-blob--float-a,
  .u-blob--float-b,
  .u-blob--float-c,
  .u-grid-bg--animated,
  .u-marquee__track,
  .u-float,
  .u-pulse,
  .u-shimmer::before,
  .u-img-placeholder::before {
    animation: none !important;
  }
  .u-reveal,
  .u-reveal--scale,
  .u-reveal--left,
  .u-reveal--right {
    opacity: 1 !important;
    transform: none !important;
  }
}