/* ================= ROOT ================= */
:root{
  --orange:#fb923c;
  --orange-light:#facc15;
  --dark-bg:#020617;
  --light-bg:#f8fafc;
}


/* ================= TYPING CURSOR ================= */
.typing-cursor::after{
  content: " |";
  animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}


/* ================= NAVBAR ================= */
.nav-slide {
  animation: navSlide 0.7s ease forwards;
}

@keyframes navSlide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.nav-anim{
  position:relative;
}
.nav-anim::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:var(--orange);
  transition:.3s;
}
.nav-anim:hover::after{width:100%;}


/* ================= CURSOR GLOW ================= */
#cursor-glow{
  position:fixed;
  width:20px;
  height:20px;
  background:rgba(251,146,60,.6);
  border-radius:50%;
  pointer-events:none;
  filter:blur(10px);
  transform:translate(-50%,-50%);
  z-index:9999;
}


/* ================= SCROLL PROGRESS ================= */
#progress-bar{
  position:fixed;
  top:0;
  left:0;
  height:4px;
  background:linear-gradient(to right,var(--orange),var(--orange-light));
  width:0%;
  z-index:9999;
}


/* ================= GLASS CARD ================= */
.glass-card {
  background: rgba(31, 41, 55, 0.6);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.glass-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 25px 50px rgba(0,0,0,.6);
}

.glass-card:hover h4{
  text-shadow:0 0 10px rgba(251,146,60,0.9);
}


/* ================= HERO ANIMATION ================= */
@keyframes slideUpFade {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.hero-title-animate {
  animation: slideUpFade 1s ease-out forwards;
}


/* ================= SCROLL REVEAL ================= */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}


/* ================= ABOUT CARDS ================= */
.about-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,#fb923c,#facc15);
  transform: translateX(-100%);
  transition: 0.5s ease;
  z-index: 0;
}

.about-card:hover::before {
  transform: translateX(0);
}

.about-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 30px 60px rgba(251,146,60,0.35);
}

.about-card * {
  position: relative;
  z-index: 1;
}

.about-card:hover h1,
.about-card:hover h2,
.about-card:hover h3,
.about-card:hover h4 {
  color: #0f172a !important;
}

.about-card:hover p {
  color: #1e293b !important;
}


/* ================= ABOUT BOX ================= */
.about-box {
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.35s ease;
}

.about-box:hover {
  transform: translateY(-8px);

  /* 👇 turns orange */
  border-color: rgba(251,146,60,0.9);

  /* glow */
  box-shadow: 0 15px 40px rgba(251,146,60,0.3);
}


/* ================= HEADER NAME EFFECT ================= */
header h1 {
  position: relative;
  color: white;
  overflow: hidden;
}

header h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(120deg, #fb923c, #facc15);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: width 0.5s ease;
}

header h1:hover::after {
  width: 100%;
}


/* ================= INFINITY GLOW ================= */
.infinity-final {
  text-shadow: 0 0 12px rgba(251,146,60,0.9);
}


/* ================= TOOL CARDS ================= */
.tool-card {
  position: relative;
  background: rgba(15, 23, 42, 0.6); /* dark glass */
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 28px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  transition: all 0.35s ease;
  overflow: hidden;
}

.tool-card h4 {
  font-size: 18px;
  font-weight: 600;
  color: #f97316; /* orange */
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tool-card p {
  color: #94a3b8;
  font-size: 14px;
  margin-top: 6px;
}

.tool-card:hover {
  transform: translateY(-12px) scale(1.03);
  border-color: rgba(251,146,60,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.tool-card i {
  font-size: 22px;
}
.tool-card::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 20%;
  width: 60%;
  height: 4px;

  background: linear-gradient(
    90deg,
    #fb923c,
    #facc15
  );

  border-radius: 999px;
  opacity: 0.8;
  transition: 0.3s ease;
}

/* hidden cards */
.tool-card.hide {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  position: absolute;
}

/* visible cards */
.tool-card.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}

/* ================= FILTER BUTTONS ================= */
.filter-btn {
  position: relative;
  color: #9ca3af;
  font-weight: 500;
  transition: 0.3s;
}

.filter-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  transition: 0.3s;
}

.filter-btn:hover {
  color: var(--orange);
}

.filter-btn.active {
  color: var(--orange);
}

.filter-btn.active::after {
  width: 100%;
}

.tool-card:hover::after {
  width: 70%;
  left: 15%;
  box-shadow: 0 0 12px rgba(251,146,60,0.8);
}

/* ================= FILTER ANIMATION ================= */
.tool-card.hide {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.tool-card.show {
  opacity: 1;
  transform: scale(1);
}
/* ================= PREMIUM BACKGROUND ================= */

.bg-premium {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  background:
    radial-gradient(circle at 20% 30%, rgba(251,146,60,0.12), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(250,204,21,0.08), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(251,146,60,0.06), transparent 50%),
    #000;

  filter: blur(40px);
  opacity: 0.9;

  animation: glowMove 12s ease-in-out infinite alternate;
}

@keyframes glowMove {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  100% {
    transform: translate(-20px, 20px) scale(1.05);
  }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
  opacity: 0.2;
}