/* =========================================================================
   KSOLKO Studios — Minimal CSS
   Tailwind handles layout/spacing/colors.
   This file: resets, animations, fixes.
   ========================================================================= */

/* --- Base reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  background-color: #09090b;
  background-image: radial-gradient(circle at 50% 0%, rgba(30, 30, 34, 0.5) 0%, transparent 70%),
                    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-position: center, -1px -1px, -1px -1px;
}
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* --- Selection --- */
::selection {
  background: rgba(240, 90, 40, 0.25);
  color: #fff;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #09090b; }
::-webkit-scrollbar-thumb { background: #1e1e22; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a30; }

/* --- Framer-style scroll reveal --- */
.anim-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.anim-d1 { transition-delay: 0.08s; }
.anim-d2 { transition-delay: 0.16s; }
.anim-d3 { transition-delay: 0.24s; }
.anim-d4 { transition-delay: 0.32s; }

/* --- Lucide icon defaults --- */
.lucide {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

/* --- Tailwind CDN can't generate arbitrary opacity on custom colors. 
   bg-accent/8 doesn't work, so we define tag bg manually. --- */
.tag-bg {
  background: rgba(240, 90, 40, 0.08);
}

/* --- Contact form autofill fix for dark bg --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #111113 inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* --- Focus ring utility --- */
.focus-accent:focus {
  border-color: #f05a28;
  outline: none;
}

/* --- Smooth hover lift for cards (backup if tailwind transition-all not enough) --- */
.card-hover {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}