/* =========================================
   TORFIN — Animations Stylesheet
   animations.css
   ========================================= */

/* --- Hero Entrance --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Dot/grid pulse in hero background */
@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* --- Hero Section Animations --- */
.hero-label   { animation: fadeInDown 0.6s ease both; animation-delay: 0.2s; }
.hero-title   { animation: fadeInUp 0.7s ease both;   animation-delay: 0.35s; }
.hero-sub     { animation: fadeInUp 0.7s ease both;   animation-delay: 0.5s; }
.hero-buttons { animation: fadeInUp 0.7s ease both;   animation-delay: 0.65s; }
.hero-scroll  { animation: fadeIn 1s ease both;       animation-delay: 1s; }

/* --- Scroll Reveal Base State --- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1),
              transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal.reveal-left {
  transform: translateX(-36px);
}

.reveal.reveal-right {
  transform: translateX(36px);
}

.reveal.reveal-scale {
  transform: scale(0.9);
  opacity: 0;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for child reveals */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* --- Hero Background Grid --- */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  /* Let browser composite independently */
  will-change: transform;
  contain: strict;
}

.hero-grid-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(62,146,204,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,146,204,0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Opacity-only animation — stays on compositor thread */
  animation: pulse-slow 8s ease-in-out infinite;
  will-change: opacity;
}

/* Glowing orbs — GPU-composited via transform3d */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: float 10s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
}

.hero-orb-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(62,146,204,0.18) 0%, transparent 70%);
  top: -80px;
  right: -80px;
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(10,36,99,0.35) 0%, transparent 70%);
  bottom: 0;
  left: 10%;
  animation-delay: 4s;
}

.hero-orb-3 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(62,146,204,0.12) 0%, transparent 70%);
  top: 40%;
  left: 40%;
  animation-delay: 7s;
}

/* Floating dots — GPU layer, translate-only (no scale) */
@keyframes floatDot {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
  50%       { transform: translate3d(0, -18px, 0); opacity: 0.9; }
}

.floating-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(62,146,204,0.5);
  animation: floatDot 5s ease-in-out infinite;
  will-change: transform;
}

/* --- Number Counter Pulse --- */
@keyframes countPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.counting { animation: countPulse 0.15s ease; }

/* --- Navbar scroll shadow transition (already in JS) --- */
.navbar-shadow {
  box-shadow: 0 2px 20px rgba(10,36,99,0.10);
}

/* --- Page transition --- */
.page-enter {
  animation: fadeIn 0.5s ease both;
}

/* glowPulse removed — was running on every btn-primary simultaneously (major lag source).
   Static shadow is used instead; hover shadow lives in styles.css. */

/* --- Loading skeleton shimmer --- */
.skeleton {
  background: linear-gradient(90deg, var(--neutral) 0%, var(--neutral-2) 50%, var(--neutral) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s linear infinite;
  border-radius: 6px;
}

/* --- Underline draw animation for headings --- */
.underline-draw {
  position: relative;
  display: inline-block;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), var(--navy));
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}

.underline-draw.visible::after { width: 100%; }

/* --- Text gradient --- */
.text-gradient {
  background: linear-gradient(135deg, var(--sky) 0%, #7EC8E3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Ping animation for status dots --- */
@keyframes ping {
  75%, 100% { transform: scale(1.8); opacity: 0; }
}

.status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-live::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5);
  animation: ping 1.5s ease-in-out infinite;
}

/* --- Card entrance with stagger --- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.45s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.55s; }

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   CUSTOM CURSOR
   ========================================= */

/* Hide native cursor across the whole site */
* { cursor: none !important; }

/* Cursor dot (fast, sticks to pointer) */
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #3E92CC;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: background 0.2s, transform 0.15s;
  will-change: transform;
}

/* Cursor ring (lags behind slightly for smooth trail) */
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 2px solid rgba(62, 146, 204, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.4,0,0.2,1),
              height 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s,
              background 0.25s;
  will-change: transform;
  backdrop-filter: none;
}

/* Hover state — dot disappears, ring fills */
body.cursor-hover #cursor-dot {
  transform: translate(-50%, -50%) scale(0);
}

body.cursor-hover #cursor-ring {
  width: 52px;
  height: 52px;
  border-color: rgba(62, 146, 204, 0.25);
  background: rgba(62, 146, 204, 0.08);
}

/* Click state — quick squeeze */
body.cursor-click #cursor-dot {
  transform: translate(-50%, -50%) scale(0.5);
  background: #fff;
}

body.cursor-click #cursor-ring {
  width: 28px;
  height: 28px;
  border-color: rgba(255,255,255,0.6);
}

/* Over dark backgrounds — invert dot to white */
body.cursor-dark #cursor-dot { background: #fff; }
body.cursor-dark #cursor-ring { border-color: rgba(255,255,255,0.4); }

/* Hide on touch devices */
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none !important; }
  * { cursor: auto !important; }
}