/* ============================================================
   ATKuniverse Public Site Styles
   All custom styles. Tailwind handles utility classes.
   ============================================================ */

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Hero staggered entrance */
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroScaleIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-enter {
  opacity: 0;
  animation: heroEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-scale-in {
  opacity: 0;
  animation: heroScaleIn 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

/* Delay utilities */
.delay-100 { animation-delay: .10s; }
.delay-200 { animation-delay: .20s; }
.delay-300 { animation-delay: .30s; }
.delay-400 { animation-delay: .45s; }
.delay-500 { animation-delay: .60s; }
.delay-600 { animation-delay: .75s; }
.delay-700 { animation-delay: .90s; }

/* Floating orbs */
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(40px,-30px) scale(1.07); }
  70%     { transform: translate(-20px,20px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  35%     { transform: translate(-35px,25px) scale(1.05); }
  65%     { transform: translate(25px,-15px) scale(0.97); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px,30px) scale(1.04); }
}
.orb-drift-1 { animation: orbDrift1 20s ease-in-out infinite; }
.orb-drift-2 { animation: orbDrift2 25s ease-in-out infinite; }
.orb-drift-3 { animation: orbDrift3 30s ease-in-out infinite; }

/* Animated gradient headline */
@keyframes gradShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.hero-gradient-text {
  background: linear-gradient(135deg, #818cf8, #c084fc, #f472b6, #818cf8);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 5s ease infinite;
}

.animate-fadeInDown { animation: fadeInDown 1s ease-out both; }
.animate-fadeInUp   { animation: fadeInUp  1s ease-out both; }

/* Staggered card delays */
.card-1 { animation-delay: 0.1s; }
.card-2 { animation-delay: 0.2s; }
.card-3 { animation-delay: 0.3s; }
.card-4 { animation-delay: 0.4s; }

/* ── Gradient text ──────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scroll-reveal (added by JS IntersectionObserver) ──── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Progress bar (projects) ────────────────────────────── */
.progress-track {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 9999px;
  transition: width 0.6s ease;
}

/* ── Smooth scroll ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Hero nav pills — full-width row below hero grid ─── */
.hero-pills-row {
  position: relative;
  /* Right-edge fade hints that more pills are scrollable */
}
.hero-pills-row::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 2px;
  width: 60px;
  background: linear-gradient(to right, transparent, rgba(10,10,18,1) 80%);
  pointer-events: none;
  z-index: 1;
}

.hero-pills-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hero-pills-scroll::-webkit-scrollbar { display: none; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #d1d5db;
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.hero-pill i { font-size: .65rem; color: #818cf8; transition: color .2s; }
.hero-pill:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.hero-pill.active {
  background: rgba(99,102,241,.2);
  border-color: rgba(99,102,241,.5);
  color: #c7d2fe;
  box-shadow: 0 0 0 1px rgba(99,102,241,.25), 0 0 14px rgba(99,102,241,.18);
}
.hero-pill.active i { color: #a5b4fc; }

/* ── Floating sticky nav (slides in from top when hero pills leave viewport) ── */
.hero-nav-floating {
  position: fixed;
  /* --nav-h is set in JS by measuring the actual nav offsetHeight */
  top: var(--nav-h, 72px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  /* 49 = always beneath main nav (z-50 = 50) so mobile expanded menu stays on top */
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  max-width: 640px;
  width: calc(100% - 32px);
  transition: opacity .28s ease, transform .35s cubic-bezier(.34,1.3,.64,1);
}
.hero-nav-floating.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.hero-nav-floating-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: rgba(10,10,18,.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9999px;
  padding: 5px 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero-nav-floating-inner::-webkit-scrollbar { display: none; }

.hero-pill-float {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
  flex-shrink: 0;
}
.hero-pill-float i { font-size: .62rem; opacity: .7; transition: opacity .18s; }
.hero-pill-float:hover  { background: rgba(255,255,255,.08); color: #e2e8f0; }
.hero-pill-float:hover i { opacity: 1; }
.hero-pill-float.active {
  background: rgba(99,102,241,.22);
  border-color: rgba(99,102,241,.4);
  color: #c7d2fe;
}
.hero-pill-float.active i { opacity: 1; color: #a5b4fc; }

/* ── Broken / deleted image fallback ───────────────────── */
/* Applied by JS to the .aspect-video (or .card-thumb) wrapper */
.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  pointer-events: none;
}

.img-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
}

.img-placeholder-inner i {
  font-size: 2rem;
  opacity: .7;
}

.img-placeholder-inner span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* ============================================================
   ATK DARK DESIGN SYSTEM
   ─────────────────────────────────────────────────────────
   Surfaces  base:#0a0a11  card:#111118  overlay:#1c1b26
   Text      hi:#f2f2f4   med:65%   low:40%   faint:24%
   Accent    indigo:#6366f1  hover:#818cf8
   ============================================================ */

/* ── Surface overrides ────────────────────────────────────── */
.bg-white      { background-color: #111118 !important; }
.bg-gray-50    { background-color: #0d0d14 !important; }
.bg-gray-100   { background-color: rgba(255,255,255,.06) !important; }
.bg-gray-200   { background-color: rgba(255,255,255,.09) !important; }
.bg-slate-50   { background-color: #0d0d14 !important; }

/* Section that carries its own bg-white (about.php <section>) */
section.bg-white {
  background-color: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07);
}

/* ── Gradient utility overrides (callout boxes, thumb fills) ─ */
.from-slate-50  { --tw-gradient-from: transparent !important; }
.to-gray-100    { --tw-gradient-to: transparent !important; }
.from-indigo-50 { --tw-gradient-from: rgba(217,119,6,.07) !important; }
.to-purple-50   { --tw-gradient-to: rgba(217,119,6,.07) !important; }
.from-indigo-100{ --tw-gradient-from: rgba(217,119,6,.11) !important; }
.to-purple-100  { --tw-gradient-to: rgba(217,119,6,.11) !important; }
.to-indigo-200  { --tw-gradient-to: rgba(217,119,6,.16) !important; }

/* ── Status / badge pill backgrounds ─────────────────────── */
/* Vibrant-on-dark: low opacity fill, paired with vivid text   */
.bg-green-100  { background-color: rgba(34,197,94,.14)   !important; }
.bg-yellow-100 { background-color: rgba(234,179,8,.14)   !important; }
.bg-blue-100   { background-color: rgba(96,165,250,.14)  !important; }
.bg-indigo-100 { background-color: rgba(217,119,6,.14)  !important; }
.bg-pink-100   { background-color: rgba(236,72,153,.14)  !important; }

/* ── Alert / notice box backgrounds ──────────────────────── */
.bg-red-50         { background-color: rgba(239,68,68,.08)   !important; }
.bg-green-50       { background-color: rgba(34,197,94,.08)   !important; }
.bg-yellow-50,
.bg-amber-50       { background-color: rgba(234,179,8,.08)   !important; }
.bg-blue-50        { background-color: rgba(96,165,250,.08)  !important; }
.bg-indigo-50      { background-color: rgba(217,119,6,.09)  !important; }
.bg-purple-50      { background-color: rgba(168,85,247,.09)  !important; }

/* ── Text hierarchy ───────────────────────────────────────── */
/* Primary layer — headings, important labels */
.text-gray-900 { color: #f2f2f4 !important; }
.text-gray-800 { color: #eaeaec !important; }
/* Secondary — body copy */
.text-gray-700 { color: rgba(242,242,244,.68) !important; }
/* Tertiary — captions, placeholders */
.text-gray-600 { color: rgba(242,242,244,.50) !important; }
.text-gray-500 { color: rgba(242,242,244,.38) !important; }
.text-gray-400 { color: rgba(242,242,244,.26) !important; }

/* ── Status / badge text (vibrant on dark) ────────────────── */
.text-green-700  { color: #4ade80 !important; }   /* active   */
.text-yellow-700 { color: #fde047 !important; }   /* planning */
.text-blue-700   { color: #93c5fd !important; }   /* beta     */
.text-indigo-700 { color: #fbbf24 !important; }   /* done     */
.text-pink-700   { color: #f472b6 !important; }   /* promo    */

/* ── Alert text ───────────────────────────────────────────── */
.text-red-700    { color: #fca5a5 !important; }

/* ── Borders ──────────────────────────────────────────────── */
.border-gray-100   { border-color: rgba(255,255,255,.06) !important; }
.border-gray-200   { border-color: rgba(255,255,255,.09) !important; }
.border-gray-300   { border-color: rgba(255,255,255,.14) !important; }
.border-gray-400   { border-color: rgba(255,255,255,.20) !important; }
.border-indigo-100 { border-color: rgba(217,119,6,.18)  !important; }

/* Alert / semantic borders */
.border-red-200    { border-color: rgba(239,68,68,.25)   !important; }
.border-green-200  { border-color: rgba(34,197,94,.25)   !important; }
.border-amber-200,
.border-yellow-200 { border-color: rgba(234,179,8,.25)   !important; }
.border-blue-200   { border-color: rgba(96,165,250,.25)  !important; }
.border-indigo-200 { border-color: rgba(217,119,6,.28)  !important; }

/* Avatar / image ring */
.ring-indigo-100 { --tw-ring-color: rgba(217,119,6,.16) !important; }

/* ── Form inputs ──────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea, select {
  background-color: rgba(255,255,255,.04) !important;
  border-color:     rgba(255,255,255,.10) !important;
  color:            #f2f2f4              !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(242,242,244,.28) !important;
}
input:focus:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea:focus, select:focus {
  background-color: rgba(255,255,255,.06) !important;
  border-color:     rgba(217,119,6,.55)   !important;
  --tw-ring-color:  rgba(217,119,6,.18)   !important;
}
.focus\:ring-indigo-100:focus { --tw-ring-color: rgba(217,119,6,.18) !important; }

/* ── Hover states ─────────────────────────────────────────── */
.hover\:bg-gray-50:hover  { background-color: rgba(255,255,255,.04) !important; }
.hover\:bg-red-50:hover   { background-color: rgba(239,68,68,.08)   !important; }

/* ── Shadows ─────────────────────────────────────────────── */
/* Cards need depth on near-black, not ambient light shadows  */
.shadow     { box-shadow: 0 1px 4px rgba(0,0,0,.45)                              !important; }
.shadow-md  { box-shadow: 0 4px 14px rgba(0,0,0,.50)                             !important; }
.shadow-lg  { box-shadow: 0 8px 28px rgba(0,0,0,.55)                             !important; }
.shadow-xl  { box-shadow: 0 16px 48px rgba(0,0,0,.62)                            !important; }
.shadow-2xl { box-shadow: 0 28px 72px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.05) !important; }

/* ── Image placeholder ────────────────────────────────────── */
.img-placeholder {
  background: linear-gradient(135deg, #161620 0%, #1e1d2c 100%) !important;
}

/* ── Progress track ───────────────────────────────────────── */
.progress-track { background: rgba(255,255,255,.07) !important; }

/* ============================================================
   ACCENT SWAP — indigo/blue → amber/gold
   Overrides all Tailwind indigo-* utilities used in sections,
   pages and layout that are NOT already in the dark block.
   Palette: solid #d97706  text #fbbf24  subtle rgba(217,119,6)
   ============================================================ */

/* ── Nav elevation shadow (replaces removed border-b) ─────── */
.atk-nav {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.5);
}

/* ── Solid fills ──────────────────────────────────────── */
.bg-indigo-600     { background-color: #d97706 !important; }
.bg-indigo-700     { background-color: #b45309 !important; }
.bg-indigo-500     { background-color: #f59e0b !important; }
.hover\:bg-indigo-600:hover  { background-color: #d97706 !important; }
.hover\:bg-indigo-700:hover  { background-color: #b45309 !important; }
.hover\:bg-indigo-500:hover  { background-color: #f59e0b !important; }
.group:hover .group-hover\:bg-indigo-700 { background-color: #b45309 !important; }

/* ── Text ───────────────────────────────────────────── */
.text-indigo-600   { color: #fbbf24 !important; }
.text-indigo-500   { color: #fbbf24 !important; }
.text-indigo-400   { color: #fbbf24 !important; }
.hover\:text-indigo-600:hover { color: #fde68a !important; }
.hover\:text-indigo-700:hover { color: #fbbf24 !important; }
.group:hover .group-hover\:text-indigo-600 { color: #fbbf24 !important; }

/* ── Borders ─────────────────────────────────────────── */
.border-indigo-500           { border-color: rgba(217,119,6,.6)  !important; }
.border-indigo-600           { border-color: #d97706             !important; }
.hover\:border-indigo-500:hover { border-color: rgba(217,119,6,.7) !important; }

/* ── Focus states (form inputs in page files) ────────────── */
.focus\:border-indigo-500:focus { border-color: rgba(217,119,6,.6) !important; }
.focus\:ring-2:focus { --tw-ring-opacity: 1 !important; }