/* ─── KEYFRAMES ──────────────────────────────────── */
@keyframes fadeUp{
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}to{opacity:1;}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-60px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(60px);}
  to{opacity:1;transform:translateX(0);}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.85);}
  to{opacity:1;transform:scale(1);}
}
@keyframes spinGlow{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}

/* ─── LOADING STATE ──────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--surface) 25%,var(--bg3) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}

/* ─── MAGNETIC HOVER ─────────────────────────────── */
.magnetic{
  display:inline-block;
  transition:transform 0.3s var(--ease);
  will-change:transform;
}

/* ─── SPLIT TEXT ANIMATION ───────────────────────── */
.split-word{
  display:inline-block;overflow:hidden;vertical-align:bottom;
}
.split-word-inner{
  display:inline-block;
  animation:wordReveal 0.8s var(--ease) both;
}
@keyframes wordReveal{
  from{transform:translateY(110%);}
  to{transform:translateY(0);}
}

/* ─── SCROLL PROGRESS BAR ────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;right:0;
  height:2px;
  background:var(--gold);
  transform-origin:left;
  transform:scaleX(0);
  z-index:99999;
  transition:transform 0.1s linear;
}

/* ─── PARALLAX LAYER ─────────────────────────────── */
.parallax{will-change:transform;}

/* ─── GLITCH EFFECT (for logo hover) ────────────── */
.glitch{
  position:relative;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;top:0;left:0;
  opacity:0;
  transition:opacity 0.1s;
}
.glitch:hover::before{
  color:var(--gold);
  animation:glitchA 0.3s steps(2) infinite;
  opacity:0.7;clip-path:polygon(0 20%,100% 20%,100% 40%,0 40%);
}
.glitch:hover::after{
  color:#ff0077;
  animation:glitchB 0.3s steps(2) infinite 0.05s;
  opacity:0.5;clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);
}
@keyframes glitchA{
  0%{transform:translateX(0);}
  50%{transform:translateX(-4px);}
  100%{transform:translateX(2px);}
}
@keyframes glitchB{
  0%{transform:translateX(0);}
  50%{transform:translateX(4px);}
  100%{transform:translateX(-2px);}
}

/* ─── HOVER TILT CARD ────────────────────────────── */
.tilt{
  transform-style:preserve-3d;
  transition:transform 0.4s var(--ease);
}
.tilt-inner{transform:translateZ(30px);}

/* ─── ANIMATED UNDERLINE ─────────────────────────── */
.anim-underline{
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:left bottom;
  transition:background-size 0.4s var(--ease);
  padding-bottom:2px;
}
.anim-underline:hover{background-size:100% 1px;}

/* ─── COUNTER ANIMATION ──────────────────────────── */
.count-up{
  display:inline-block;
  animation:countUp 0.05s ease infinite;
}

/* ─── PAGE TRANSITION ────────────────────────────── */
.page-overlay{
  position:fixed;inset:0;
  background:var(--gold);
  z-index:9999999;
  transform:scaleY(0);
  transform-origin:bottom;
}

/* ─── SECTION DIVIDER ────────────────────────────── */
.divider{
  width:100%;height:1px;
  background:var(--border);
  position:relative;
}
.divider::after{
  content:'';position:absolute;
  left:0;top:0;height:100%;
  width:0;background:var(--gold);
  transition:width 1.5s var(--ease);
}
.divider.active::after{width:100%;}

/* ─── HOVER REVEAL TEXT ──────────────────────────── */
.hover-reveal{
  position:relative;
  overflow:hidden;display:inline-block;
}
.hover-reveal-inner{
  display:block;
  transition:transform 0.4s var(--ease);
}
.hover-reveal-sub{
  position:absolute;inset:0;
  display:flex;align-items:center;
  transform:translateY(100%);
  transition:transform 0.4s var(--ease);
  color:var(--gold);
}
.hover-reveal:hover .hover-reveal-inner{transform:translateY(-100%);}
.hover-reveal:hover .hover-reveal-sub{transform:translateY(0);}

/* ─── ANIMATED GRADIENT BORDER ───────────────────── */
.glow-border{
  position:relative;border-radius:16px;
}
.glow-border::before{
  content:'';
  position:absolute;inset:-1px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--gold),transparent,var(--gold));
  background-size:200% 200%;
  animation:gradBorder 4s ease infinite;
  z-index:-1;opacity:0;transition:opacity 0.4s;
}
.glow-border:hover::before{opacity:1;}
@keyframes gradBorder{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* ─── LOADING DOTS ───────────────────────────────── */
.loading-dots{display:inline-flex;gap:0.3rem;align-items:center;}
.loading-dots span{
  width:4px;height:4px;border-radius:50%;background:var(--gold);
  animation:dotBounce 1.2s ease infinite;
}
.loading-dots span:nth-child(2){animation-delay:0.2s;}
.loading-dots span:nth-child(3){animation-delay:0.4s;}
@keyframes dotBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}}

/* ─── CURSOR TRAIL ───────────────────────────────── */
.cursor-trail{
  position:fixed;pointer-events:none;z-index:9997;
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  opacity:0;
  transition:opacity 0.3s;
  will-change:transform;
}