/* ===================================================================
   PAYYANNUR — PREMIUM CRAFT LAYER
   Film grain · custom cursor · magnetic CTAs · cinematic reveals
   Vanilla, no libraries, reduced-motion aware.
   =================================================================== */

/* ---------- 1. FILM GRAIN ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ---------- 2. CUSTOM CURSOR ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s;
}
.cursor-dot { width: 6px; height: 6px; background: var(--maroon); }
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(123,29,42,0.5);
  transition: width 0.25s cubic-bezier(0.22,1,0.36,1),
              height 0.25s cubic-bezier(0.22,1,0.36,1),
              background 0.25s, border-color 0.25s, opacity 0.3s;
}
body.cursor-ready.cursor-active .cursor-dot,
body.cursor-ready.cursor-active .cursor-ring { opacity: 1; }
body.cursor-ready.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  background: rgba(123,29,42,0.08);
  border-color: rgba(123,29,42,0.75);
}
@media (hover: hover) and (pointer: fine) {
  body.cursor-ready, body.cursor-ready a, body.cursor-ready button { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ---------- 3. MAGNETIC BUTTONS ---------- */
.magnetic { will-change: transform; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }

/* ---------- 4. CINEMATIC IMAGE REVEAL ---------- */
[data-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: clip-path;
}
[data-clip].is-revealed { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { [data-clip] { clip-path: none; } }

/* ---------- 5. LINE-BY-LINE HEADING REVEAL ---------- */
.reveal-lines .line { overflow: hidden; display: block; }
.reveal-lines .line > span {
  display: block; transform: translateY(105%);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal-lines.is-revealed .line:nth-child(1) > span { transition-delay: 0.05s; }
.reveal-lines.is-revealed .line:nth-child(2) > span { transition-delay: 0.16s; }
.reveal-lines.is-revealed .line:nth-child(3) > span { transition-delay: 0.27s; }
.reveal-lines.is-revealed .line > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal-lines .line > span { transform: none; } }

/* ---------- 6. KEN BURNS HERO ---------- */
.hero-bg.kenburns {
  animation: kenburns 22s ease-in-out infinite alternate;
  transform-origin: 62% 42%;
}
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .hero-bg.kenburns { animation: none; } }

/* ---------- 7. SCROLL PROGRESS ---------- */
.scroll-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--maroon), var(--saffron));
  z-index: 9999; transition: width 0.1s linear; pointer-events: none;
}