/* ==========================================================================
   KAWAKI STUDIOS — AWWWARDS KINETIC MOTION & INTERACTION ENGINE
   Aesthetic: Obsidian Glass, Electric Lime (#C6FF00), Editorial Elegance
   ========================================================================== */

/* 1. Fluid Smooth Inertia & Section Poster Styling */
html.has-smooth-scroll {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  /* Subtle letter reveal transition */
  .awwwards-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }
  
  .awwwards-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  /* Parallax card hover depth */
  .cs-card,
  .about-media-card,
  .feature-card {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease;
  }

  .cs-card:hover,
  .feature-card:hover {
    transform: translateY(-8px) scale(1.012);
    border-color: rgba(198, 255, 0, 0.35) !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5),
                0 0 24px -4px rgba(198, 255, 0, 0.12) !important;
  }
}

/* 2. Magnetic Buttons & Fluid Pointer Feedback */
[data-magnetic] {
  display: inline-block;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* 3. Awwwards Award-Caliber Button Treatments */
.vol-btn-primary,
.hero-btn,
.about-btn,
.filter-btn,
.cta-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              color 0.25s ease;
}

.vol-btn-primary::after,
.hero-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(198, 255, 0, 0.22), transparent);
  transition: left 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .vol-btn-primary:hover::after,
  .hero-btn:hover::after {
    left: 100%;
  }
  
  .vol-btn-primary:hover,
  .hero-btn:hover {
    box-shadow: 0 8px 30px rgba(198, 255, 0, 0.25);
  }
}

.vol-btn-primary:active,
.hero-btn:active {
  transform: scale(0.96);
}

/* 4. Telemetry Coordinate Stamp (Awwwards Signature Micro-Detail) */
.kawaki-telemetry-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94A3B8;
  background: rgba(20, 22, 27, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 5px 14px;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
}

.kawaki-telemetry-stamp .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C6FF00;
  box-shadow: 0 0 10px #C6FF00;
  animation: kawakiRadarPulse 2.2s infinite ease-out;
}

@keyframes kawakiRadarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(198, 255, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(198, 255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(198, 255, 0, 0);
  }
}

/* 5. Custom Kinetic Cursor Follower (Opt-In Pointer Glow) */
@media (hover: hover) and (pointer: fine) {
  .kawaki-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 320px;
    margin-top: -160px;
    margin-left: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 255, 0, 0.045) 0%, rgba(198, 255, 0, 0) 70%);
    pointer-events: none;
    z-index: 999;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 0.4s ease;
    will-change: transform;
  }
}

/* 6. Strict Reduced Motion Guard */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kawaki-cursor-glow {
    display: none !important;
  }
}