/* ═══════════════════════════════════════════════════════════════
   LENCOE Living Aura v1.0 — CSS Layer
   Ambient Breathing · Glassmorphism · Touch Ripples · Corona
   Digital Rain · Haptic Feedback · Kinetic Typography · Shockwave
   ═══════════════════════════════════════════════════════════════ */

/* ── AMBIENT BREATHING ── */
.lencoe-breathe {
  will-change: transform;
  transition: none !important;
}

/* Override tilt/magnetic for breathing — the JS handles transform directly */
.lencoe-breathe:not(:hover) {
  transition: none !important;
}


/* ── REFRACTIVE GLASSMORPHISM — Crystalline ── */
.lencoe-glass {
  background: rgba(8, 14, 20, 0.6) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(1, 71, 81, 0.06) !important;
  position: relative;
  overflow: hidden;
}

/* Chromatic dispersion prismatic edge */
.lencoe-glass::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(1, 71, 81, 0.0) 0%,
    rgba(1, 71, 81, 0.06) 15%,
    rgba(1, 71, 81, 0.08) 30%,
    rgba(1, 71, 81, 0.0) 50%,
    rgba(1, 71, 81, 0.06) 70%,
    rgba(1, 71, 81, 0.04) 85%,
    rgba(1, 71, 81, 0.0) 100%
  );
  pointer-events: none;
  z-index: 0;
  animation: glassRefract 8s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lencoe-glass:hover::after {
  opacity: 1;
}

@keyframes glassRefract {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Chromatic light bend inner shimmer */
.lencoe-glass::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(1, 71, 81, 0.02) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 0;
  animation: glassShimmer 6s ease-in-out infinite alternate;
}

@keyframes glassShimmer {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(10%, 5%) scale(1.1); opacity: 0.6; }
}

/* Ensure card content stays above pseudo-elements */
.lencoe-glass > * {
  position: relative;
  z-index: 1;
}


/* ── TOUCH RIPPLES (Mobile) ── */
.touch-ripple {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 71, 81, 0.2) 0%, rgba(1, 71, 81, 0.08) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.touch-ripple--active {
  animation: touchRippleExpand 0.9s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes touchRippleExpand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.6;
  }
  60% {
    opacity: 0.3;
  }
  100% {
    width: 320px;
    height: 320px;
    opacity: 0;
  }
}


/* ── KINETIC TYPOGRAPHY (Mobile Decode) ── */
.kinetic-heading {
  font-variant-numeric: tabular-nums;
}


/* ── NyViA CORONA FLARES ── */
.nyvia-corona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.nyvia-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 40px;
  background: linear-gradient(to top, rgba(1, 71, 81, 0.35), transparent);
  transform-origin: center bottom;
  transform: translate(-50%, -100%) rotate(var(--flare-angle, 0deg)) scaleY(var(--flare-size, 1));
  animation: flareShoot 2.5s ease-in-out infinite;
  animation-delay: var(--flare-delay, 0s);
  opacity: 0;
  border-radius: 2px;
  filter: blur(1px);
}

@keyframes flareShoot {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%) rotate(var(--flare-angle, 0deg)) scaleY(0.3);
  }
  15% {
    opacity: 0.8;
  }
  40% {
    opacity: 0.6;
    transform: translate(-50%, -100%) rotate(var(--flare-angle, 0deg)) scaleY(var(--flare-size, 1));
  }
  70% {
    opacity: 0.2;
    transform: translate(-50%, -100%) rotate(var(--flare-angle, 0deg)) scaleY(1.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) rotate(var(--flare-angle, 0deg)) scaleY(0.1);
  }
}


/* ── NyViA SHOCKWAVE (Tap/Click) ── */
.nyvia-shockwave {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 2px solid rgba(1, 71, 81, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
}

.nyvia-shockwave--active {
  animation: shockwaveBlast 0.8s cubic-bezier(0.2, 0.5, 0.3, 1) forwards;
}

@keyframes shockwaveBlast {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    border-width: 3px;
    box-shadow: 0 0 20px rgba(1, 71, 81, 0.2);
  }
  50% {
    opacity: 0.4;
    border-width: 1.5px;
  }
  100% {
    width: min(100vw, 100vh);
    height: min(100vw, 100vh);
    opacity: 0;
    border-width: 0.5px;
    box-shadow: 0 0 60px rgba(1, 71, 81, 0);
  }
}


/* ── DIGITAL RAIN CANVAS ── */
.digital-rain-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Ensure terminal card content is above rain */
.terminal-card--live .terminal-status,
.terminal-card--live .terminal-icon,
.terminal-card--live h3,
.terminal-card--live p,
.terminal-card--live .terminal-specs {
  position: relative;
  z-index: 2;
}


/* ── HAPTIC PULSE (Mobile Touch Feedback) ── */
.haptic-pulse {
  animation: hapticBurst 0.2s ease-out !important;
}

@keyframes hapticBurst {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(1, 71, 81, 0);
  }
  40% {
    transform: scale(0.96);
    box-shadow: 0 0 15px rgba(1, 71, 81, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(1, 71, 81, 0);
  }
}

/* Screen flash overlay on primary button tap */
.haptic-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  pointer-events: none;
  background: rgba(1, 71, 81, 0.03);
  opacity: 0;
}

.haptic-flash--active {
  animation: hapticFlash 0.25s ease-out forwards;
}

@keyframes hapticFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


/* ── GPU SLEEP STATE ── */
.gpu-sleep canvas {
  display: none !important;
}
.gpu-sleep .nyvia-corona {
  animation-play-state: paused !important;
}
.gpu-sleep .nyvia-flare {
  animation-play-state: paused !important;
}


/* ── NEURAL CANVAS GYROSCOPE (Mobile) ── */
@media (max-width: 991px) {
  #neural-canvas {
    will-change: transform;
    transition: transform 0.1s linear;
  }
  .hero-content {
    will-change: transform;
    transition: transform 0.15s ease-out;
  }
}


/* ═══════════════════════════════════════════════════════════
   FLUID BACKGROUND OVERLAY — Volumetric Smoke Effect
   Applied via CSS gradients animated to simulate fluid drift
   ═══════════════════════════════════════════════════════════ */

.fluid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(20, 60, 70, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 80% 70%, rgba(15, 50, 60, 0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 50% 50%, rgba(10, 40, 50, 0.04) 0%, transparent 50%);
  animation: fluidDrift 16s ease-in-out infinite alternate;
}

@keyframes fluidDrift {
  0% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
    transform: translate(0, 0) scale(1);
  }
  33% {
    background-position: 10% 5%, 90% 95%, 45% 55%;
    transform: translate(1.5%, -1%) scale(1.02);
  }
  66% {
    background-position: -5% 8%, 105% 88%, 55% 42%;
    transform: translate(-1%, 1.5%) scale(0.98);
  }
  100% {
    background-position: 5% -3%, 95% 103%, 48% 52%;
    transform: translate(0.5%, -0.5%) scale(1.01);
  }
}

@media (max-width: 991px) {
  .fluid-overlay {
    opacity: 0.25;
    animation-duration: 16s;
  }
}


/* ═══════════════════════════════════════════════════════════
   ENHANCED MOBILE EXPERIENCE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Larger touch targets on mobile */
  .btn-primary,
  .btn-outline,
  .btn-auth-signup {
    min-height: 48px;
    padding: 14px 28px;
  }

  /* Fluid overlay less intense on small screens */
  .fluid-overlay {
    opacity: 0.15;
  }

  /* Shockwave smaller on mobile */
  @keyframes shockwaveBlast {
    100% {
      width: 100vw;
      height: 100vw;
    }
  }

  /* Corona flares smaller */
  .nyvia-flare {
    height: 25px;
  }

  /* Touch ripples smaller */
  @keyframes touchRippleExpand {
    100% {
      width: 200px;
      height: 200px;
    }
  }
}

@media (max-width: 480px) {
  .fluid-overlay {
    opacity: 0.1;
  }

  .nyvia-flare {
    height: 18px;
  }
}