:root {
  --paper: #fcfcfc;
  --ink: #0f172a;
  --accent-orange: #ff5a22;
  --accent-blue: #2563eb;
}

html {
  /* Removed scroll-behavior: smooth to prevent conflicts with JS custom smooth scroll */
}

@media (pointer: fine) {
  body { cursor: none; }
  .cursor-dot, .cursor-ring { display: block !important; }
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Subtler paper noise */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Custom Cursor */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none; /* Hidden on touch devices */
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ink);
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(15, 23, 42, 0.3);
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.cursor-hover .cursor-ring {
  width: 50px; height: 50px;
  background: rgba(37, 99, 235, 0.1);
  border-color: transparent;
}

/* Glass */
.glass-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}
.nav-glass {
  background: rgba(252, 252, 252, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Nav Links */
.nav-link {
  position: relative;
  transition: color 0.3s;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
  content: ''; position: absolute;
  width: 0; height: 2px;
  bottom: -4px; left: 0;
  background: var(--accent-blue);
  transition: width 0.4s cubic-bezier(0.2, 1, 0.2, 1);
}
.nav-link:hover::after { width: 100%; }

/* Marquee */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 25s linear infinite;
  width: 200%;
}
.marquee-track:hover { animation-play-state: paused; }

/* Filter */
.project-card { transition: opacity 0.5s ease, transform 0.5s ease; }
.project-card.hidden-filter {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  pointer-events: none;
  position: absolute;
}
.project-card > div {
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.2, 1);
  transform-style: preserve-3d;
}

/* ===== ADVANCED ANIMATIONS ===== */
.reveal-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.active { opacity: 1; transform: translateY(0); }

.reveal-up-fast {
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up-fast.active { transform: translateY(0); }

.reveal-blur {
  opacity: 0; filter: blur(10px); transform: translateY(20px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-blur.active { opacity: 1; filter: blur(0); transform: translateY(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.active { opacity: 1; transform: scale(1); }

.reveal-width {
  width: 0; opacity: 0;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.reveal-width.active { width: 6rem; opacity: 1; }

.reveal-fade {
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal-fade.active { opacity: 1; transform: translateY(0); }

.stagger-1 { transition-delay: 150ms; }
.stagger-2 { transition-delay: 300ms; }
.stagger-3 { transition-delay: 450ms; }
.stagger-4 { transition-delay: 600ms; }

/* ===== PRELOADER ANIMATIONS ===== */
#preloader {
  transition: opacity 0.8s ease-in-out;
}

.perspective-\\[800px\\] {
  perspective: 800px;
}
.perspective-\\[1000px\\] {
  perspective: 1000px;
}

.preloader-circle {
  width: 40vmin;
  height: 40vmin;
  animation: pulse-3d 4s infinite cubic-bezier(0.4, 0, 0.2, 1) alternate;
  transform: rotateX(60deg) rotateY(0deg);
  transform-style: preserve-3d;
}

@keyframes pulse-3d {
  0% { transform: rotateX(60deg) rotateY(0deg) scale(0.8) translateZ(-20px); opacity: 0.5; }
  100% { transform: rotateX(60deg) rotateY(180deg) scale(1.1) translateZ(20px); opacity: 1; }
}

.transform-style-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}
.flip-active {
  transform: rotateY(180deg);
}

.preloader-expand {
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.preloader-expand.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(300);
}

.preloader-ideastudio {
  transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease-in 0.2s;
}
.preloader-ideastudio.expand {
  transform: scale(25);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal-up, .reveal-blur, .reveal-scale, .reveal-fade {
    opacity: 1; transform: none; filter: none;
  }
  .reveal-width {
    opacity: 1; transform: none; filter: none; width: 6rem;
  }
}