/* ═══════════════════════════════════════════════════════
   SKELINE EFFECTS — cursor · canvas · 3D · geo shapes
   ═══════════════════════════════════════════════════════ */

/* ── CUSTOM CURSOR (disabled) ──────────────────────────── */
/* cursor animation deactivated — browser default cursor restored */
#cursor-dot, #cursor-ring { display: none !important; }
@media(pointer:coarse){
  #cursor-dot, #cursor-ring { display: none !important }
}

#cursor-dot, #cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
#cursor-dot {
  width: 7px; height: 7px;
  background: #00D4FF;
  z-index: 99999;
  transition: transform .12s ease, opacity .15s, background .2s, width .15s, height .15s;
}
#cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(0,212,255,.45);
  z-index: 99998;
  transition: width .3s cubic-bezier(.22,1,.36,1),
              height .3s cubic-bezier(.22,1,.36,1),
              border-color .3s, opacity .3s, background .3s;
}

body.cur-hover #cursor-dot {
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
}
body.cur-hover #cursor-ring {
  width: 58px; height: 58px;
  border-color: rgba(0,212,255,.8);
  background: rgba(0,212,255,.04);
}
body.cur-click #cursor-dot {
  transform: translate(-50%,-50%) scale(2.8);
  background: #0BFFD7;
}
body.cur-click #cursor-ring {
  width: 26px; height: 26px;
  border-color: rgba(11,255,215,.9);
}
body.cur-text #cursor-dot {
  width: 3px; height: 22px;
  border-radius: 2px;
  background: rgba(0,212,255,.8);
  transform: translate(-50%,-50%);
}
body.cur-text #cursor-ring {
  opacity: 0;
}

/* ── HERO / PAGE HERO CANVAS ───────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .6;
  display: block;
}

/* ── GEOMETRIC ANIMATED SHAPES ─────────────────────────── */
.hero-geo {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hg1 {
  top: -100px; right: -120px;
  width: 540px; height: 540px;
  border: 1px solid rgba(0,212,255,.055);
  border-radius: 52px;
  animation: hgSpin 26s linear infinite;
}
.hg2 {
  bottom: -90px; left: -130px;
  width: 380px; height: 380px;
  border: 1px solid rgba(11,255,215,.045);
  border-radius: 40px;
  animation: hgSpin 34s linear infinite reverse;
}
.hg3 {
  top: 22%; right: 5%;
  width: 180px; height: 180px;
  border: 1px solid rgba(0,212,255,.08);
  border-radius: 22px;
  animation: hgFloat 9s ease-in-out infinite;
}
.hg4 {
  top: 55%; left: 3%;
  width: 100px; height: 100px;
  border: 1px solid rgba(11,255,215,.065);
  border-radius: 14px;
  animation: hgFloat 12s ease-in-out infinite reverse;
}
@keyframes hgSpin {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}
@keyframes hgFloat {
  0%,100% { transform: translateY(0)   rotate(0deg) }
  50%     { transform: translateY(-18px) rotate(14deg) }
}

/* ── CARD 3D TILT CLASSES ──────────────────────────────── */
.sk-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.sk-tilt.tilting {
  transition: transform .1s ease, border-color .3s, box-shadow .3s;
}
.sk-tilt.resetting {
  transition: transform .55s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}

/* Shimmer layer on sk-tilt cards (only on cards that don't have their own ::after) */
.sk-tilt {
  position: relative;
}
.sk-tilt::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 70% 60% at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(0,212,255,.11) 0%,
    rgba(255,255,255,.07) 30%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.sk-tilt.tilting::after { opacity: 1 }

/* ── BUTTON INNER RADIAL GLOW ──────────────────────────── */
.btn-filled {
  position: relative;
  overflow: hidden;
}
.btn-filled::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.30) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity .22s;
  pointer-events: none;
  z-index: 1;
}
.btn-filled:hover::before { opacity: 1 }

/* ── NAV AMBIENT CURSOR GLOW ───────────────────────────── */
#navbar {
  position: relative;
}
#navbar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 35% 100% at var(--nav-cx,50%) 50%,
    rgba(0,212,255,.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  z-index: 0;
}
#navbar.scrolled::after { opacity: 1 }

/* ── LIGHT MODE OVERRIDES ───────────────────────────────── */
body.light #cursor-dot { background: #006DA8 }
body.light #cursor-ring { border-color: rgba(0,109,168,.4) }
body.light.cur-hover #cursor-ring {
  border-color: rgba(0,109,168,.75);
  background: rgba(0,109,168,.04);
}
body.light .hg1, body.light .hg2,
body.light .hg3, body.light .hg4 {
  border-color: rgba(0,100,180,.07);
}
body.light .sk-tilt::after {
  background: radial-gradient(
    ellipse 70% 60% at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(0,109,168,.08) 0%,
    transparent 65%
  );
}

/* ── AMBIENT BACKGROUND (fixed, persists through scroll) ── */
#page-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.amb-orb {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .45;
}
.amb-orb-1 {
  width: 700px; height: 700px;
  top: -200px; right: -150px;
  background: radial-gradient(circle at center, rgba(0,212,255,.6) 0%, rgba(0,100,200,.25) 40%, transparent 70%);
  animation: ambFloat1 18s ease-in-out infinite;
}
.amb-orb-2 {
  width: 600px; height: 600px;
  bottom: 5%; left: -100px;
  background: radial-gradient(circle at center, rgba(11,255,215,.5) 0%, rgba(0,50,150,.2) 40%, transparent 70%);
  animation: ambFloat2 22s ease-in-out infinite;
}
.amb-orb-3 {
  width: 400px; height: 400px;
  top: 40%; right: 20%;
  background: radial-gradient(circle at center, rgba(120,60,255,.3) 0%, transparent 65%);
  animation: ambFloat3 26s ease-in-out infinite;
}
@keyframes ambFloat1 {
  0%,100% { transform: translate(0,0) }
  33%     { transform: translate(-40px,60px) }
  66%     { transform: translate(30px,-40px) }
}
@keyframes ambFloat2 {
  0%,100% { transform: translate(0,0) }
  40%     { transform: translate(50px,-50px) }
  70%     { transform: translate(-30px,30px) }
}
@keyframes ambFloat3 {
  0%,100% { transform: translate(0,0) }
  50%     { transform: translate(-60px,40px) }
}
body.light #page-ambient { display: none }

/* ── MOBILE RESPONSIVE ─────────────────────────────────── */
@media(max-width:768px){
  .hg1,.hg2{ display:none }
  .hg3{ width:120px;height:120px }
  .hg4{ width:70px;height:70px }
  .amb-orb-1{ width:380px;height:380px }
  .amb-orb-2{ width:280px;height:280px }
  .amb-orb-3{ width:180px;height:180px;opacity:.3 }
}
@media(max-width:480px){
  .hg3,.hg4{ display:none }
  .amb-orb-1,.amb-orb-2{ opacity:.25 }
  .amb-orb-3{ display:none }
}