/* ====================================================================
   PT Garda Kreasi Utama — custom styles (complements Tailwind CDN)
   ==================================================================== */

:root {
  --crimson: #C81E1E;
  --flame:   #F36F21;
  --gold:    #FBB040;
  --ink:     #0a0a0f;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--crimson), var(--flame));
  border-radius: 99px;
}

/* numeric weight aliases used in markup (font-700 etc.) */
.font-400 { font-weight: 400; } .font-500 { font-weight: 500; }
.font-600 { font-weight: 600; } .font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* -------------------------------------------------- animated background */
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.mesh-1 {
  width: 50vw; height: 50vw; top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(200,30,30,0.55), transparent 65%);
  animation: drift1 22s ease-in-out infinite;
}
.mesh-2 {
  width: 45vw; height: 45vw; top: 30%; right: -12%;
  background: radial-gradient(circle, rgba(243,111,33,0.45), transparent 65%);
  animation: drift2 26s ease-in-out infinite;
}
.mesh-3 {
  width: 40vw; height: 40vw; bottom: -10%; left: 25%;
  background: radial-gradient(circle, rgba(251,176,64,0.30), transparent 65%);
  animation: drift3 30s ease-in-out infinite;
}
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8%,12%) scale(1.15)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-10%,8%) scale(1.1)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,-10%) scale(1.2)} }

/* film grain overlay */
.grain {
  position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- header states */
#site-header.scrolled #nav-shell {
  background: rgba(10,10,15,0.85);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
}
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  border-radius: 2px; transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 60%; }
.nav-link.active { color: #fff; }

/* -------------------------------------------------- scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* -------------------------------------------------- 3D tilt */
.tilt { transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }

/* -------------------------------------------------- marquee */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-block;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------- forms */
.form-input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 0.7rem 0.9rem;
  color: #e2e8f0;
  font-size: 0.9rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-input::placeholder { color: #64748b; }
.form-input:focus {
  outline: none;
  border-color: var(--flame);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 0 3px rgba(243,111,33,0.15);
}

/* -------------------------------------------------- gallery filter */
.gal-item { transition: opacity .4s ease, transform .4s ease; }
.gal-item.hide { display: none; }

/* -------------------------------------------------- preloader done */
body.loaded #preloader { opacity: 0; visibility: hidden; }

/* prose tweaks */
.prose-invert :where(p) { margin: 0; }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .mesh-blob, .marquee-track, .animate-float { animation: none !important; }
  [data-reveal] { transition: none; opacity: 1; transform: none; }
}