/* ============================================================
   MYL Instruments — Motion Foundation  (assets/animations.css)
   Scroll reveals · glow/aurora hovers · fluid dragon-mist lines
   · skeleton loaders · page transitions · micro-interactions
   ============================================================ */

/* ---- Respect reduced motion globally ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes mylFadeUp   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes mylFade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes mylScaleIn  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes mylFloat    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes mylDrift    { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-22px) scale(1.06); } 100% { transform: translate(0,0) scale(1); } }
@keyframes mylGlowPulse{ 0%,100% { opacity: .45; } 50% { opacity: .8; } }
@keyframes mylShimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes mylGradShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes mylSpin     { to { transform: rotate(360deg); } }
@keyframes mylDash     { to { stroke-dashoffset: 0; } }
@keyframes mylRise     { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ============================================================
   SCROLL REVEALS  (toggled by site.js → .is-in)
   data-reveal="up|fade|scale|left|right" ; --d = stagger delay
   ============================================================ */
[data-reveal] { opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
[data-reveal="up"]    { transform: translateY(30px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* ============================================================
   AURORA BACKDROP  (CSS blobs; canvas mist drawn by site.js)
   ============================================================ */

/* ---- GLOBAL BACKGROUND LAYER (one fixed element, injected by site.js).
   One seamless layer behind ALL content — no per-section clipping, so no
   seams. Content is lifted above it via z-index in styles.css. ---- */
#site-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(150% 120% at 50% -25%, #ffffff 0%, #f5faff 40%, #e9f2ff 78%, #e2ecfe 100%); }
#site-bg .glow { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
#site-bg .g1 { width: 64vw; height: 64vw; left: -12vw; top: -18vw; background: radial-gradient(circle at 50% 50%, rgba(120,190,250,.55), transparent 62%); animation: mylDrift 32s ease-in-out infinite; }
#site-bg .g2 { width: 58vw; height: 58vw; right: -14vw; top: 2vw; background: radial-gradient(circle at 50% 50%, rgba(31,95,224,.26), transparent 64%); animation: mylDrift 40s ease-in-out infinite reverse; }
#site-bg .g3 { width: 54vw; height: 54vw; left: 26vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, rgba(150,212,250,.5), transparent 62%); animation: mylDrift 36s ease-in-out infinite; }
#site-bg .g4 { width: 40vw; height: 40vw; right: 8vw; bottom: -10vw; background: radial-gradient(circle at 50% 50%, rgba(95,182,240,.34), transparent 64%); animation: mylDrift 44s ease-in-out infinite reverse; }
/* premium fine grain */
#site-bg .grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dragon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }

/* ---- Contained aura (for self-contained panels like the CTA band) ---- */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora .blob { position: absolute; border-radius: 50%; filter: blur(64px); animation: mylDrift 22s ease-in-out infinite; }
.aurora .b1 { width: 620px; height: 620px; left: -120px; top: -140px; background: radial-gradient(circle at 40% 40%, rgba(91,182,240,.5), transparent 65%); }
.aurora .b2 { width: 720px; height: 720px; right: -160px; top: -180px; background: radial-gradient(circle at 50% 50%, rgba(31,95,224,.32), transparent 62%); animation-direction: reverse; }
.aurora .b3 { width: 540px; height: 540px; left: 38%; top: 30px; background: radial-gradient(circle at 50% 50%, rgba(159,210,246,.5), transparent 60%); }

/* SVG ribbon (decorative, in heroes) */
.ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ============================================================
   GLOW / AURORA HOVER  on cards & panels
   JS sets --mx/--my (cursor %) for the spotlight.
   ============================================================ */
.glow-card { position: relative; isolation: isolate; }
.glow-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(111,180,255,.28), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.glow-card:hover { transform: translateY(-6px); box-shadow: var(--glow-shadow); border-color: var(--sky-soft); }
.glow-card:hover::before { opacity: 1; }

/* Aurora sweep button (adds a shifting light) */
.btn.aurora-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn.aurora-btn:hover::after { transform: translateX(120%); }

/* Gradient text that gently shifts */
.grad-text {
  background: linear-gradient(100deg, var(--royal), var(--sky), var(--royal));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mylGradShift 6s linear infinite;
}

/* ============================================================
   FLUID CONNECTING LINES  (dragon-mist paths)
   .fluid-path draws when its container gets .is-in
   ============================================================ */
.fluid-line { overflow: visible; }
.fluid-path {
  fill: none; stroke: url(#mistGrad); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(111,180,255,.55));
}
.is-in .fluid-path { animation: mylDash 1.6s cubic-bezier(.6,.1,.2,1) forwards; }
.fluid-pulse { fill: var(--glow); filter: drop-shadow(0 0 8px rgba(111,180,255,.9)); }

/* ============================================================
   SKELETON / LOADERS
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--ice) 25%, var(--ice-3) 37%, var(--ice) 63%);
  background-size: 200% 100%; animation: mylShimmer 1.4s ease-in-out infinite; border-radius: 10px;
}
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ice-3); border-top-color: var(--royal); animation: mylSpin .8s linear infinite; }

/* ============================================================
   PAGE TRANSITION VEIL  (controlled by site.js)
   ============================================================ */
.page-veil {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, var(--ice) 55%, var(--ice-3) 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .42s ease, visibility .42s;
  display: flex; align-items: center; justify-content: center;
}
.page-veil .veil-mark { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(150deg, var(--royal), var(--sky)); box-shadow: 0 10px 30px -8px rgba(31,95,224,.6); animation: mylFloat 2.4s ease-in-out infinite; opacity: 0; transition: opacity .3s; }
.page-veil.show { opacity: 1; visibility: visible; pointer-events: all; }
.page-veil.show .veil-mark { opacity: 1; }

/* Entrance is handled by the page veil fade + per-element [data-reveal]
   animations. We intentionally do NOT opacity-animate <main> as a whole:
   that conflicts with reveals and can leave a blank frame during capture. */

/* ============================================================
   MICRO-INTERACTIONS — forms
   ============================================================ */
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--navy);
  background: var(--ice-2); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 15px 16px; transition: border-color .2s, box-shadow .25s, background .2s; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--royal); background: #fff; box-shadow: 0 0 0 4px rgba(31,95,224,.12);
}
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 8px; }

/* Magnetic icon nudge */
.lift { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.lift:hover { transform: translateY(-3px); }