/* ═══════════════════════════════════════════════
   TAS Enhancements — Scroll · Cursor · Tilt · Transitions · Gradient
   ═══════════════════════════════════════════════ */

/* ── 1. PAGE TRANSITION OVERLAY ── */
#tas-page-transition {
  position: fixed;
  inset: 0;
  background: #070913;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#tas-page-transition.tas-fade-out {
  opacity: 1;
  pointer-events: all;
}
body.tas-page-loading #tas-page-transition {
  opacity: 1;
}

/* ── 2. CURSOR GLOW ── */
#tas-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.08) 0%, rgba(16,185,129,.04) 40%, transparent 72%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.08s linear;
  will-change: transform;
}
body.light-theme #tas-cursor-glow {
  background: radial-gradient(circle, rgba(5,150,105,.06) 0%, rgba(5,150,105,.03) 40%, transparent 72%);
}
@media (hover: none) {
  #tas-cursor-glow { display: none; }
}

/* ── 3. SCROLL REVEAL ANIMATIONS ── */
.tas-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(.22,.9,.22,1),
              transform 0.65s cubic-bezier(.22,.9,.22,1);
}
.tas-reveal.tas-visible {
  opacity: 1;
  transform: translateY(0);
}
.tas-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(.22,.9,.22,1),
              transform 0.65s cubic-bezier(.22,.9,.22,1);
}
.tas-reveal-left.tas-visible {
  opacity: 1;
  transform: translateX(0);
}
.tas-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(.22,.9,.22,1),
              transform 0.65s cubic-bezier(.22,.9,.22,1);
}
.tas-reveal-right.tas-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for grids */
.tas-stagger:nth-child(1)  { transition-delay: 0.00s; }
.tas-stagger:nth-child(2)  { transition-delay: 0.08s; }
.tas-stagger:nth-child(3)  { transition-delay: 0.16s; }
.tas-stagger:nth-child(4)  { transition-delay: 0.24s; }
.tas-stagger:nth-child(5)  { transition-delay: 0.32s; }
.tas-stagger:nth-child(6)  { transition-delay: 0.40s; }
.tas-stagger:nth-child(7)  { transition-delay: 0.48s; }
.tas-stagger:nth-child(8)  { transition-delay: 0.56s; }

/* Reduce motion override */
@media (prefers-reduced-motion: reduce) {
  .tas-reveal, .tas-reveal-left, .tas-reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 4. ANIMATED GRADIENT TEXT ── */
.hero-slogan-highlight,
.section-header h2 span {
  background: linear-gradient(
    270deg,
    #10b981, #34d399, #6ee7b7,
    #10b981, #059669, #34d399
  ) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  animation: tasGradientFlow 5s ease infinite;
}
@keyframes tasGradientFlow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── 5. HERO PARTICLE CANVAS ── */
#tas-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.85;
}
body.light-theme #tas-hero-canvas {
  opacity: 0.4;
}

/* ── 6. RIPPLE EFFECT on btn-add ── */
.btn-add {
  position: relative;
  overflow: hidden;
}
.tas-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: tasRippleAnim 0.55s linear forwards;
  pointer-events: none;
}
@keyframes tasRippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* 3D Tilt + Holographic — removed */

/* ── 8. AURORA BOREALIS BACKGROUND ── */
.tas-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.55;
}
body.light-theme .tas-aurora { opacity: 0.2; }

.tas-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: tasAuroraFloat linear infinite;
  mix-blend-mode: screen;
}
.tas-aurora-blob:nth-child(1) {
  width: 60vw; height: 50vh;
  background: radial-gradient(ellipse, rgba(16,185,129,.35) 0%, transparent 70%);
  top: -10%; left: -5%;
  animation-duration: 18s;
  animation-name: tasAuroraA;
}
.tas-aurora-blob:nth-child(2) {
  width: 50vw; height: 60vh;
  background: radial-gradient(ellipse, rgba(56,189,248,.25) 0%, transparent 70%);
  top: 30%; right: -10%;
  animation-duration: 24s;
  animation-name: tasAuroraB;
}
.tas-aurora-blob:nth-child(3) {
  width: 45vw; height: 45vh;
  background: radial-gradient(ellipse, rgba(139,92,246,.2) 0%, transparent 70%);
  bottom: -5%; left: 20%;
  animation-duration: 20s;
  animation-name: tasAuroraC;
}
.tas-aurora-blob:nth-child(4) {
  width: 35vw; height: 40vh;
  background: radial-gradient(ellipse, rgba(16,185,129,.2) 0%, transparent 70%);
  top: 50%; left: 40%;
  animation-duration: 28s;
  animation-name: tasAuroraD;
}
@keyframes tasAuroraA {
  0%,100% { transform: translate(0,0)   scale(1);    }
  33%      { transform: translate(8vw,5vh) scale(1.15); }
  66%      { transform: translate(-4vw,10vh) scale(.9); }
}
@keyframes tasAuroraB {
  0%,100% { transform: translate(0,0)    scale(1);   }
  33%      { transform: translate(-10vw,8vh) scale(1.1); }
  66%      { transform: translate(5vw,-6vh) scale(.95); }
}
@keyframes tasAuroraC {
  0%,100% { transform: translate(0,0)   scale(1);   }
  50%      { transform: translate(12vw,-8vh) scale(1.2); }
}
@keyframes tasAuroraD {
  0%,100% { transform: translate(0,0)    scale(1);   }
  40%      { transform: translate(-8vw,12vh) scale(1.3); }
  80%      { transform: translate(6vw,-5vh) scale(.85); }
}

/* ── 9. TYPEWRITER cursor ── */
.tas-typewriter-cursor {
  display: inline-block;
  width: 2px;
  background: var(--accent);
  margin-right: 2px;
  animation: tasBlinkCursor 0.75s step-end infinite;
  vertical-align: text-bottom;
}
@keyframes tasBlinkCursor {
  0%,100% { opacity: 1; } 50% { opacity: 0; }
}

/* ── 10. GLITCH ── */
@keyframes tasGlitch1 {
  0%,100% { clip-path: inset(0 0 95% 0); transform: translate(-3px, 0); }
  20%     { clip-path: inset(20% 0 60% 0); transform: translate(3px, 0); }
  40%     { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 1px); }
  60%     { clip-path: inset(75% 0 10% 0); transform: translate(2px, -1px); }
  80%     { clip-path: inset(90% 0 5% 0);  transform: translate(-1px, 0); }
}
@keyframes tasGlitch2 {
  0%,100% { clip-path: inset(80% 0 5% 0);  transform: translate(3px, 0); }
  25%     { clip-path: inset(40% 0 40% 0); transform: translate(-3px, 1px); }
  50%     { clip-path: inset(10% 0 70% 0); transform: translate(2px, -1px); }
  75%     { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
}
.tas-glitch {
  position: relative;
  display: inline-block;
}
.tas-glitch::before,
.tas-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}
.tas-glitch.glitching::before {
  color: #0ff;
  -webkit-text-fill-color: #0ff;
  background: none;
  opacity: 0.7;
  animation: tasGlitch1 0.3s steps(1) forwards;
}
.tas-glitch.glitching::after {
  color: #f0f;
  -webkit-text-fill-color: #f0f;
  background: none;
  opacity: 0.7;
  animation: tasGlitch2 0.3s steps(1) forwards;
  animation-delay: 0.05s;
}

/* Holographic — removed */

/* ── 12. MAGNETIC BUTTON ── */
.btn-submit-inquiry {
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.2s ease,
              background 0.3s ease !important;
}

/* ── 13. COUNTER ── */
.tas-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── 14. MORPHING SHAPES ── */
.tas-morph-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}
.tas-morph-shape {
  position: absolute;
  opacity: 0.04;
  animation: tasMorph linear infinite alternate;
}
body.light-theme .tas-morph-shape { opacity: 0.025; }

@keyframes tasMorph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg)   scale(1);    }
  33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(120deg) scale(1.05); }
  66%  { border-radius: 50% 60% 40% 60% / 40% 50% 60% 50%; transform: rotate(240deg) scale(.95);  }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg) scale(1);    }
}