/* ════════════════════════════════════════════════════════════════
   MYTHOS LAYER — site-wide premium animation enhancements
   Loaded on ALL www pages via templates/layouts/main.php
   Pure enhancement: never hides content, never blocks render.
   Disable for a visitor: localStorage.setItem('mythosOff','1')
════════════════════════════════════════════════════════════════ */

/* ── Branded text selection — browser default blue brand se clash karta tha ── */
::selection { background: var(--gold, #C8992E); color: var(--navy-void, #05101F); }
::-moz-selection { background: var(--gold, #C8992E); color: var(--navy-void, #05101F); }

/* ── Custom cursor REMOVED — native browser cursor is used site-wide. ── */

/* ── Film grain — cinematic texture, extremely subtle ── */
#mythGrain {
  position: fixed; inset: -100%; z-index: 9998; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: mythGrain 8s steps(10) infinite;
}
@keyframes mythGrain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); } 30% { transform: translate(6%, 3%); }
  50% { transform: translate(-4%, 7%); } 70% { transform: translate(7%, -4%); }
  90% { transform: translate(-6%, -6%); }
}

/* ── 3D tilt cards — JS drives transform; this prepares the stage ── */
.myth-tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.myth-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; z-index: 1;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%),
              rgba(232, 184, 74, .13), transparent 45%);
  transition: opacity .3s ease;
}
.myth-tilt:hover .myth-glare { opacity: 1; }

/* ── Magnetic buttons ── */
.myth-mag { will-change: transform; }

/* ── Click ripple ── */
.myth-ripple-host { position: relative; overflow: hidden; }
.myth-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: mythRipple .6s ease-out forwards;
}
@keyframes mythRipple { to { transform: scale(3.4); opacity: 0; } }

/* ── Title soft blur-reveal — professional focus-in effect ──
   .myth-t sirf JS (html.myth-on) ke saath hide hota hai,
   isliye bina JS ke titles hamesha visible rehte hain. */
html.myth-on .myth-t {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition: opacity .8s ease, filter .8s ease,
              transform .8s cubic-bezier(.22, 1, .36, 1);
}
html.myth-on .myth-t.myth-t-in {
  opacity: 1;
  filter: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.myth-on .myth-t { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── Reduced motion / coarse pointer: layer fully inert ── */
@media (prefers-reduced-motion: reduce) {
  #mythGrain { display: none !important; }
}