/* ==========================================================================
   VIRAL ANIMATION UPGRADE PACK
   Additive layer — does not touch style.css. Safe to include on any page
   that already loads style.css (index.html, projects.html, etc).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom Smooth Cursor (dot + lagging ring)
   Hidden automatically on touch/coarse-pointer devices via JS class toggle.
   -------------------------------------------------------------------------- */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor .btn,
.has-custom-cursor input,
.has-custom-cursor textarea {
    cursor: none;
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--color-accent, #00D2FF);
    box-shadow: 0 0 8px var(--color-accent, #00D2FF);
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 210, 255, 0.5);
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}

.cursor-ring.cursor-hover {
    width: 64px;
    height: 64px;
    background: rgba(0, 210, 255, 0.08);
    border-color: var(--color-primary-light, #3385ff);
}

.cursor-ring.cursor-click {
    width: 28px;
    height: 28px;
}

/* --------------------------------------------------------------------------
   2. Grain / Noise Texture Overlay — adds subtle analog depth
   -------------------------------------------------------------------------- */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    opacity: 0.035;
    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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Spotlight Glow Cards — mouse-tracked radial highlight on card borders
   JS toggles class "spotlight-card" and sets --mx / --my custom properties.
   -------------------------------------------------------------------------- */
.spotlight-card {
    position: relative;
    isolation: isolate;
}

.spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        380px circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 210, 255, 0.55),
        rgba(0, 102, 255, 0.15) 35%,
        transparent 65%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.spotlight-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(
        260px circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 210, 255, 0.06),
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.spotlight-card:hover::before,
.spotlight-card:hover::after {
    opacity: 1;
}

.spotlight-card > * {
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   4. 3D Tilt — perspective tilt following cursor position
   JS sets transform directly; this just primes the element.
   -------------------------------------------------------------------------- */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.tilt-card.tilting {
    transition: none;
}

/* --------------------------------------------------------------------------
   5. Magnetic Buttons — subtle pull toward cursor within bounds
   -------------------------------------------------------------------------- */
.magnetic {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.magnetic.magnetic-active {
    transition: transform 0.12s linear;
}

/* --------------------------------------------------------------------------
   6. Text Scramble (hero headline decode-in effect)
   -------------------------------------------------------------------------- */
.scramble-text {
    display: inline-block;
}

/* --------------------------------------------------------------------------
   7. Kinetic Per-Letter Heading Reveal
   JS wraps each character in <span style="--i:N">. Parent needs .kinetic-text
   and gets .kinetic-active from the scroll observer to trigger the stagger.
   -------------------------------------------------------------------------- */
.kinetic-text .kchar {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotateZ(4deg);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 0.028s);
}

.kinetic-text.kinetic-active .kchar {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg);
}

/* --------------------------------------------------------------------------
   8. Glitch Hover — nav logo flicker on hover
   -------------------------------------------------------------------------- */
.glitch-hover {
    display: inline-block;
    position: relative;
}

.glitch-hover:hover {
    animation: glitch-skew 0.35s steps(2, end) 1;
}

.glitch-hover:hover {
    text-shadow:
        1px 0 var(--color-accent, #00D2FF),
        -1px 0 var(--color-primary, #0066FF);
}

@keyframes glitch-skew {
    0% { transform: skewX(0deg); }
    20% { transform: skewX(3deg); }
    40% { transform: skewX(-3deg); }
    60% { transform: skewX(2deg); }
    80% { transform: skewX(-1deg); }
    100% { transform: skewX(0deg); }
}

/* --------------------------------------------------------------------------
   9. Marquee pause-on-hover polish
   -------------------------------------------------------------------------- */
.logo-ticker-container:hover .logo-ticker-track {
    animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   10. Scroll-linked hero glow drift (JS updates --scroll-y)
   -------------------------------------------------------------------------- */
.hero-glow {
    transform: translateY(calc(var(--scroll-y, 0px) * 0.25));
}

/* --------------------------------------------------------------------------
   11. Button ripple-on-click shimmer
   -------------------------------------------------------------------------- */
.btn {
    isolation: isolate;
}

.btn-shimmer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: -1;
    animation: btn-ripple 0.6s ease-out forwards;
}

@keyframes btn-ripple {
    to {
        transform: translate(-50%, -50%) scale(22);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   12. Accessibility — respect reduced motion & disable on touch devices
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cursor-dot, .cursor-ring, .grain-overlay { display: none !important; }
    .kinetic-text .kchar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .glitch-hover:hover { animation: none; text-shadow: none; }
    .hero-glow { transform: none !important; }
    .tilt-card { transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none !important; }
    .has-custom-cursor,
    .has-custom-cursor a,
    .has-custom-cursor button,
    .has-custom-cursor .btn {
        cursor: auto;
    }
}