/* =========================================================
   Kalpataru Polyplast — v2 "cinematic" theme
   Builds on css/style.css. This file only adds what's new:
   preloader, custom cursor, film grain / scanlines / vignette,
   split-text letter reveal, 3D tilt cards, glitch hover.
   ========================================================= */

/* ---------- preloader ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.4rem;
}
#preloader img { height: 46px; opacity: 0; animation: preloaderFade .8s ease forwards; }
.preloader-bar {
  width: 220px; height: 2px; background: rgba(255,255,255,.08); overflow: hidden; border-radius: 999px;
}
.preloader-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-blue-light));
}
.preloader-pct { font-family: 'Space Grotesk', sans-serif; font-size: .75rem; letter-spacing: .2em; color: #55607a; }
@keyframes preloaderFade { to { opacity: 1; } }

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  body.cursor-ready { cursor: none; }
  body.cursor-ready a, body.cursor-ready button, body.cursor-ready input, body.cursor-ready textarea { cursor: none; }
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--brand-orange-light); }
.cursor-ring {
  width: 34px; height: 34px; border: 1px solid rgba(244,144,60,.5);
  transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}
.cursor-ring.is-active {
  width: 56px; height: 56px;
  background: rgba(244,144,60,.08);
  border-color: rgba(244,144,60,.9);
}

/* ---------- cinematic overlays: grain + scanlines + vignette ---------- */
.fx-grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1s steps(4) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  25% { transform: translate(-1%,1%); }
  50% { transform: translate(1%,-1%); }
  75% { transform: translate(-1%,-1%); }
}
.fx-vignette {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.fx-scanline {
  position: fixed; inset: 0; z-index: 61; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 2px, transparent 3px);
}

/* ---------- three.js hero canvas ---------- */
#three-hero { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,8,15,.15) 0%, rgba(6,8,15,.55) 65%, var(--ink) 100%);
}

/* ---------- hero copy initial state (GSAP animates these in after preload) ---------- */
[data-anim="hero-sub"], [data-anim="hero-cta"], [data-anim="hero-stats"] {
  opacity: 0;
  transform: translateY(24px);
}

/* ---------- split-text hero heading ---------- */
.split-line { overflow: hidden; display: block; }
.split-char {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
}
/* When a gradient line is split into inline-block chars, the parent's
   background-clip:text can't paint through the child boxes — so carry
   the gradient on each character instead (keeps them visible + animated). */
.split-line.text-gradient { -webkit-text-fill-color: transparent; }
.split-line.text-gradient .split-char {
  background: linear-gradient(90deg, var(--brand-orange-light), var(--brand-orange), var(--brand-blue-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- glitch hover on eyebrow / logo ---------- */
.glitch-hover { position: relative; display: inline-block; }
.glitch-hover:hover { animation: glitchShake .28s steps(2, end) 2; }
@keyframes glitchShake {
  0% { transform: translate(0,0); text-shadow: -2px 0 var(--brand-orange), 2px 0 var(--brand-blue-light); }
  50% { transform: translate(-1px,1px); text-shadow: 2px 0 var(--brand-orange), -2px 0 var(--brand-blue-light); }
  100% { transform: translate(0,0); text-shadow: none; }
}

/* ---------- 3D tilt cards (product rows, why-cards) ---------- */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform .12s ease-out, box-shadow .3s ease; }
.tilt-card.tilting { box-shadow: 0 25px 60px -20px rgba(244,144,60,.25); }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.12), transparent 45%);
  opacity: 0; transition: opacity .25s ease;
}
.tilt-card.tilting .tilt-glare { opacity: 1; }

/* ---------- cinematic section frame lines ---------- */
.frame-corner { position: absolute; width: 18px; height: 18px; border-color: rgba(244,144,60,.5); opacity: .7; }
.frame-corner.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.frame-corner.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.frame-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.frame-corner.br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

/* ---------- magnetic buttons ---------- */
.magnetic { position: relative; }

/* ---------- cinematic letterboxing on hero (subtle top/bottom bars) ---------- */
.cine-bar { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 58; pointer-events: none; }
.cine-bar.top { top: 0; } .cine-bar.bottom { bottom: 0; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-scanline { display: none; }
  .split-char { transform: none; opacity: 1; }
}