/*
 * NiftyTechFinds — motion layer (Oct 2026)
 *
 * Aurora glow, hero entrance + headline shimmer, topic ticker, staggered
 * scroll reveals, cursor-reactive card glow and hero-card tilt.
 * Everything animates transform/opacity/filter only, and the whole layer
 * switches off for visitors who ask for reduced motion.
 * Delete this file + js/motion.js (and their enqueue) to roll back.
 */

@property --ntf-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ---------- Keyframes ---------- */
@keyframes ntf-rise {
    from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ntf-card-in {
    from { transform: perspective(1200px) rotateX(10deg) translateY(44px) scale(0.96); }
}
@keyframes ntf-shimmer {
    0%        { background-position: 100% 0; }
    55%, 100% { background-position: 0% 0; }
}
@keyframes ntf-ping {
    0%   { box-shadow: 0 0 0 0 rgba(61, 220, 245, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(61, 220, 245, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 220, 245, 0); }
}
@keyframes ntf-drift-a { to { transform: translate3d(18vmax, 10vmax, 0) scale(1.15); } }
@keyframes ntf-drift-b { to { transform: translate3d(-14vmax, 14vmax, 0) scale(0.9); } }
@keyframes ntf-drift-c { to { transform: translate3d(12vmax, -8vmax, 0) scale(1.2); } }
@keyframes ntf-breathe { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes ntf-marquee { to { transform: translateX(-50%); } }
@keyframes ntf-spin { to { --ntf-angle: 360deg; } }
@keyframes ntf-line { from { transform: scaleX(0); opacity: 0; } }
@keyframes ntf-sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Scroll reveals driven by main.js (.ntf-fade-in): rise + de-blur, staggered. */
@keyframes ntf-reveal {
    from { opacity: 0; transform: translateY(32px) scale(0.98); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes ntf-reveal-left {
    from { opacity: 0; transform: translateX(-28px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- 1. Ambient page glow ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42vmax 42vmax at 0% 0%, rgba(61, 220, 245, 0.07), transparent 70%),
        radial-gradient(40vmax 40vmax at 100% 100%, rgba(255, 122, 24, 0.055), transparent 70%);
    animation: ntf-breathe 14s ease-in-out infinite alternate;
}

/* ---------- 2. Hero: aurora, spotlight, entrance, shimmer ---------- */
.ntf-hero { --hx: 30%; --hy: 35%; }
.ntf-hero-bg::before,
.ntf-hero-bg::after,
.ntf-hero::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
.ntf-hero-bg::before {
    width: 55vmax; height: 55vmax; left: -16vmax; top: -26vmax;
    background: radial-gradient(closest-side, rgba(61, 220, 245, 0.18), transparent);
    animation: ntf-drift-a 22s ease-in-out infinite alternate;
}
.ntf-hero-bg::after {
    width: 46vmax; height: 46vmax; right: -14vmax; top: -12vmax;
    background: radial-gradient(closest-side, rgba(255, 122, 24, 0.13), transparent);
    animation: ntf-drift-b 26s ease-in-out infinite alternate;
}
.ntf-hero::before {
    z-index: -1;
    width: 40vmax; height: 40vmax; left: 35%; bottom: -24vmax;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.12), transparent);
    animation: ntf-drift-c 30s ease-in-out infinite alternate;
}
/* Soft light that follows the cursor across the hero (desktop). */
.ntf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(620px circle at var(--hx) var(--hy), rgba(61, 220, 245, 0.10), transparent 60%);
}

.ntf-hero-badge { animation: ntf-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ntf-hero-badge::before { animation: ntf-ping 2.4s ease-out 1s infinite; }
.ntf-hero-title {
    background: linear-gradient(100deg, #ffffff 0%, #dfe7f0 36%, #7beaff 47%, #ffffff 53%, #dfe7f0 64%, #ffffff 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        ntf-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s backwards,
        ntf-shimmer 7s ease-in-out 1.4s infinite;
}
.ntf-hero-description { animation: ntf-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s backwards; }
.ntf-hero-actions { animation: ntf-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s backwards; }

/* Hero card: 3D entrance, then cursor tilt + glare (set by js/motion.js). */
.ntf-hero-card { animation: ntf-card-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards; will-change: transform; }
.ntf-hero-card.is-tilting {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition: transform 0.12s linear, border-color 0.25s ease;
}
.ntf-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.11), transparent 42%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ntf-hero-card:hover::before { opacity: 1; }

/* Hero fades and lifts away as you scroll past it (modern browsers only). */
@supports (animation-timeline: view()) {
    @keyframes ntf-hero-out { to { opacity: 0.15; transform: translateY(-60px) scale(0.97); filter: blur(4px); } }
    .ntf-hero-grid {
        animation: ntf-hero-out linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 90%;
    }
}

/* ---------- 3. Topic ticker ---------- */
.ntf-ticker {
    position: relative;
    overflow: hidden;
    padding: 0.9rem 0;
    border-block: 1px solid var(--ntf-border, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.015);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ntf-ticker-track { display: flex; width: max-content; animation: ntf-marquee 60s linear infinite; }
.ntf-ticker:hover .ntf-ticker-track,
.ntf-ticker:focus-within .ntf-ticker-track { animation-play-state: paused; }
.ntf-ticker-list { display: flex; flex-shrink: 0; list-style: none; margin: 0; padding: 0; }
.ntf-ticker-list li { display: flex; align-items: center; white-space: nowrap; margin: 0; }
.ntf-ticker-list li::after { content: "\2726"; margin: 0 1.75rem; font-size: 0.6rem; color: var(--ntf-cyan); opacity: 0.85; }
.ntf-ticker-list a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ntf-silver);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
.ntf-ticker-list a:hover,
.ntf-ticker-list a:focus-visible { color: #fff; text-shadow: 0 0 18px rgba(61, 220, 245, 0.85); }

/* ---------- 4. Scroll reveals ---------- */
.ntf-js .ntf-fade-in { animation: ntf-reveal 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ntf-posts-grid > .ntf-fade-in:nth-child(3n + 2),
.ntf-grid > .ntf-fade-in:nth-child(3n + 2) { animation-delay: 0.08s; }
.ntf-posts-grid > .ntf-fade-in:nth-child(3n + 3),
.ntf-grid > .ntf-fade-in:nth-child(3n + 3) { animation-delay: 0.16s; }

.ntf-js .ntf-trending-card:not(.ntf-fade-in),
.ntf-js .ntf-section-header:not(.ntf-fade-in) { transform: translateX(-28px); }
.ntf-js .ntf-trending-card.ntf-fade-in,
.ntf-js .ntf-section-header.ntf-fade-in { animation-name: ntf-reveal-left; }
.ntf-trending-grid > .ntf-fade-in:nth-child(2n) { animation-delay: 0.07s; }

/* Glowing underline that draws in under each section heading. */
.ntf-section-header { position: relative; }
.ntf-section-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 140px;
    height: 1px;
    background: linear-gradient(90deg, var(--ntf-cyan), transparent);
    box-shadow: 0 0 12px rgba(61, 220, 245, 0.8);
    transform-origin: left center;
}
.ntf-section-header.ntf-fade-in::after { animation: ntf-line 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }

.ntf-trending-card:nth-child(-n + 3) .ntf-trending-num { text-shadow: 0 0 18px rgba(255, 122, 24, 0.45); }

/* Reveals for blocks main.js doesn't handle (classes set by js/motion.js). */
.ntf-mo {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s),
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s),
        filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
}
.ntf-mo.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 5. Cursor glow on cards ---------- */
body .ntf-post-card, .ntf-featured-card { position: relative; }
body .ntf-post-card::before,
.ntf-featured-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 220, 245, 0.10), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* Glowing border that follows the cursor. */
body .ntf-post-card::after,
.ntf-featured-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 220, 245, 0.85), rgba(255, 122, 24, 0.35) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
}
body .ntf-post-card:hover::before, body .ntf-post-card:hover::after,
.ntf-featured-card:hover::before, .ntf-featured-card:hover::after { opacity: 1; }

/* ---------- 6. Buttons: light sweep ---------- */
.ntf-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}
.ntf-btn-primary:hover::after { transform: translateX(120%); }

/* ---------- 7. Header: glowing edge once you scroll ---------- */
.ntf-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ntf-cyan), var(--ntf-orange), transparent);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: ntf-sweep 8s linear infinite;
}
.ntf-header.is-scrolled::after { opacity: 0.55; }

/* ---------- 8. Newsletter: rotating glow border ---------- */
.ntf-subscribe { position: relative; isolation: isolate; }
.ntf-subscribe::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: conic-gradient(from var(--ntf-angle), transparent 0 62%, rgba(61, 220, 245, 0.9) 78%, rgba(255, 122, 24, 0.9) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ntf-spin 7s linear infinite;
}

/* ---------- 9. Post & archive headers: soft glow ---------- */
.ntf-single-header, .ntf-archive-header { position: relative; isolation: isolate; }
.ntf-single-header::before, .ntf-archive-header::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30%;
    width: min(900px, 120vw);
    height: 140%;
    z-index: -1;
    pointer-events: none;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(61, 220, 245, 0.10), transparent);
    animation: ntf-breathe 9s ease-in-out infinite alternate;
}
.ntf-single-title, .ntf-archive-title { animation: ntf-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.ntf-single-meta, .ntf-breadcrumb { animation: ntf-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s backwards; }

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
    body::before, .ntf-hero::before, .ntf-hero-bg::before, .ntf-hero-bg::after,
    .ntf-hero-badge, .ntf-hero-badge::before, .ntf-hero-title, .ntf-hero-description, .ntf-hero-actions,
    .ntf-hero-card, .ntf-hero-grid, .ntf-ticker-track, .ntf-header::after, .ntf-subscribe::before,
    .ntf-single-header::before, .ntf-archive-header::before, .ntf-single-title, .ntf-archive-title,
    .ntf-single-meta, .ntf-breadcrumb, .ntf-section-header::after, .ntf-js .ntf-fade-in {
        animation: none !important;
    }
    .ntf-ticker { overflow-x: auto; }
    .ntf-ticker-list[aria-hidden="true"] { display: none; }
    .ntf-mo { opacity: 1; transform: none; filter: none; transition: none; }
    .ntf-hero-card.is-tilting { transform: none; }
}