/* UI layer: buttons, animations, scroll background overlay, utilities */
:root{
  --primary: #e51e2a; /* base brand (TRON red) */
  --primary-2: #ff4b55;
  --secondary: #22d3ee; /* cyan */
  --secondary-2: #3b82f6; /* blue */
  --accent-1: #a855f7; /* purple */
  --accent-2: #ec4899; /* pink */
  --btn-radius: 12px;
  --motion-fast: 160ms;
  --motion: 260ms;
  --motion-slow: 480ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Scroll background scene colors (JS will lerp toward target) */
  --scene-a: 229,30,42;   /* rgb for red */
  --scene-a-alpha: 0.18;
  --scene-b: 34,211,238;  /* rgb for cyan */
  --scene-b-alpha: 0.14;
}

/* Home3-inspired base gradient mesh below scene layer */
body::before{
  content: "";
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(255,80,90,0.16), transparent 60%),
    radial-gradient(900px 700px at 110% 0%, rgba(59,130,246,0.12), transparent 55%),
    radial-gradient(800px 800px at -10% 120%, rgba(168,85,247,0.10), transparent 60%),
    linear-gradient(180deg, rgba(6,8,11,0.9), rgba(6,8,11,0.9)),
    var(--bg);
  background-blend-mode: screen, screen, screen, normal, normal;
  opacity: 1;
  /* Gentle drift animation for Home3 mesh */
  will-change: transform, filter, opacity;
  animation: meshDrift 22s ease-in-out infinite;
}

@keyframes meshDrift{
  0%   { transform: translate3d(0,0,0) scale(1);     filter: hue-rotate(0deg) saturate(1);    opacity: 1; }
  50%  { transform: translate3d(-1.5%, -1.5%, 0) scale(1.03); filter: hue-rotate(6deg) saturate(1.05); opacity: 0.98; }
  100% { transform: translate3d(0,0,0) scale(1);     filter: hue-rotate(0deg) saturate(1);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation: none !important; filter: none !important; transform: none !important; }
}

/* Smooth anchor scrolling without JS */
html{ scroll-behavior: smooth; }

/* Tame animation on small screens */
@media (max-width: 900px){
  body::before{ animation: meshDriftSoft 28s ease-in-out infinite; }
}
@keyframes meshDriftSoft{
  0%   { transform: translate3d(0,0,0) scale(1);     filter: hue-rotate(0deg) saturate(1);    opacity: 1; }
  50%  { transform: translate3d(-0.6%, -0.6%, 0) scale(1.01); filter: hue-rotate(4deg) saturate(1.02); opacity: 0.99; }
  100% { transform: translate3d(0,0,0) scale(1);     filter: hue-rotate(0deg) saturate(1);    opacity: 1; }
}

/* Smart background overlay layered above base bg to allow scene morphs */
body::after{
  content: "";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1400px 900px at 10% -20%, rgba(var(--scene-a), var(--scene-a-alpha)), transparent 60%),
    radial-gradient(1600px 1100px at 90% 10%, rgba(var(--scene-b), var(--scene-b-alpha)), transparent 55%);
  background-repeat: no-repeat;
  background-position: 10% -20%, 90% 10%;
  background-size: 2000px 1300px, 2000px 1400px;
  transition: background-position var(--motion-slow) var(--ease);
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border:1px solid transparent; border-radius: var(--btn-radius); font-weight:600; letter-spacing:.2px; cursor:pointer; position:relative; isolation:isolate; overflow:hidden; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease), background var(--motion) var(--ease), color var(--motion) var(--ease); }
.btn:active{ transform: translateY(1px); }
.btn .ico{ width:18px; height:18px; }

.btn-primary{ background: linear-gradient(180deg, var(--primary), var(--primary-2)); color: white; box-shadow: 0 10px 28px rgba(229,30,42,0.32); }
.btn-primary:hover{ box-shadow: 0 14px 36px rgba(229,30,42,0.4); }

.btn-secondary{ background: linear-gradient(180deg, var(--secondary), var(--secondary-2)); color: #051923; box-shadow: 0 10px 28px rgba(34,211,238,0.28); border-color: rgba(255,255,255,0.06); }
.btn-secondary:hover{ box-shadow: 0 14px 36px rgba(34,211,238,0.36); }

.btn-accent{ background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: white; box-shadow: 0 10px 28px rgba(172,87,247,0.28); }
.btn-accent:hover{ box-shadow: 0 14px 36px rgba(172,87,247,0.38); }

.btn-outline{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-outline:hover{ border-color: rgba(255,255,255,0.24); box-shadow: 0 8px 22px rgba(0,0,0,0.35); }

/* Button sheen effect */
.btn::after{
  content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--motion) var(--ease);
  z-index:-1;
}
.btn:hover::after{ transform: translateX(120%); }

/* Optional ripple effect: add class .ripple to .btn */
.btn.ripple{ overflow:hidden; }
.btn.ripple i.r{ position:absolute; border-radius:999px; transform: translate(-50%,-50%); pointer-events:none; background: currentColor; opacity:.18; width: 6px; height:6px; animation: ripple var(--motion-slow) ease-out forwards; }
@keyframes ripple{ to{ opacity:0; width: 320px; height:320px; } }

/* Reveal-on-scroll utilities */
[data-animate]{ opacity:0; transform: translateY(14px); transition: opacity var(--motion) var(--ease), transform var(--motion) var(--ease); }
[data-animate].is-inview{ opacity:1; transform: none; }
[data-animate="fade-in"]{ transform:none; }
[data-animate="scale-in"]{ transform: scale(.96); }
[data-animate="tilt-up"]{ transform: perspective(800px) rotateX(6deg) translateY(10px); transform-origin: 50% 100%; }
[data-animate].is-inview[data-animate="scale-in"]{ transform: scale(1); }
[data-animate].is-inview[data-animate="tilt-up"]{ transform: none; }

/* Card subtle hover */
.card{ transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease); }
.card:hover{ transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.45); }

/* Parallax micro-move: add data-parallax="y:10" to move on scroll */
[data-parallax]{ will-change: transform; }

/* Section titles tweaks */
.section-title{ letter-spacing:.2px; }