/**
 * NewsPortal Pro — 3D Animations & Premium Effects
 * Floema-inspired: custom cursor, page transitions, card tilt, scroll reveals
 */

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.np-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--np-primary, #e63946);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease, background 0.2s ease;
  mix-blend-mode: difference;
}
.np-cursor-follower {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid var(--np-primary, #e63946);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0.55;
  transition: width 0.35s cubic-bezier(0.34,1.56,0.64,1),
              height 0.35s cubic-bezier(0.34,1.56,0.64,1),
              opacity 0.3s ease,
              border-color 0.25s ease;
  mix-blend-mode: difference;
}
/* Link hover */
.np-cursor.np-cur-link   { width: 16px; height: 16px; }
.np-cursor-follower.np-cur-link { width: 56px; height: 56px; opacity: 0.3; border-style: dashed; }
/* Card hover */
.np-cursor.np-cur-card   { width: 12px; height: 12px; background: var(--np-accent, #457b9d); }
.np-cursor-follower.np-cur-card { width: 70px; height: 70px; opacity: 0.2; }
/* Click pulse */
.np-cursor.np-cur-click  { transform: translate(-50%,-50%) scale(0.6); }
@media (hover: none), (pointer: coarse) {
  .np-cursor, .np-cursor-follower { display: none !important; }
}

/* ============================================================
   PAGE TRANSITION CURTAIN
   Start hidden (scaleY 0) — JS adds np-pc-in when navigating away
   ============================================================ */
.np-page-curtain {
  position: fixed;
  inset: 0;
  background: #0f172a;
  z-index: 99990;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform 0.48s cubic-bezier(0.76, 0, 0.24, 1);
  visibility: hidden;
}
.np-page-curtain.np-pc-in {
  transform: scaleY(1);
  transform-origin: bottom;
  pointer-events: all;
  visibility: visible;
}

/* ============================================================
   GLOBAL CARD ENTRANCE (applies to ALL card types)
   ============================================================ */
.np-card-entrance {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.np-card-entrance.np-card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   PERSPECTIVE CONTAINERS
   ============================================================ */
.np-3d-scene {
  perspective: var(--np-perspective, 1200px);
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.np-3d-element {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* ============================================================
   VANILLA TILT CARDS
   ============================================================ */
.np-tilt-card {
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease;
}
.np-tilt-card:hover { box-shadow: 0 30px 80px rgba(0,0,0,0.25); }
.np-tilt-card .np-tilt-depth  { transform: translateZ(30px); display: block; }
.np-tilt-card .np-tilt-title  { transform: translateZ(40px); position: relative; }
.np-tilt-card .np-tilt-badge  { transform: translateZ(50px); position: relative; }
.np-tilt-card .np-tilt-image  { transform: translateZ(10px); }

/* ============================================================
   SCROLL REVEAL — base states
   ============================================================ */
.np-reveal         { opacity: 0; }
.np-reveal--up     { transform: translateY(60px); }
.np-reveal--down   { transform: translateY(-60px); }
.np-reveal--left   { transform: translateX(-80px); }
.np-reveal--right  { transform: translateX(80px); }
.np-reveal--scale  { transform: scale(0.75); }
.np-reveal--rotate { transform: rotate3d(1,0,0,45deg) translateZ(-80px); opacity: 0; }
.np-reveal--flip   { transform: rotateY(90deg); opacity: 0; backface-visibility: hidden; }
.np-reveal--depth  { transform: translateZ(-200px) scale(0.6); opacity: 0; }

.np-revealed {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* Stagger delays */
.np-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.np-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.np-stagger > *:nth-child(3) { transition-delay: 0.19s; }
.np-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.np-stagger > *:nth-child(5) { transition-delay: 0.33s; }
.np-stagger > *:nth-child(6) { transition-delay: 0.40s; }
.np-stagger > *:nth-child(7) { transition-delay: 0.47s; }
.np-stagger > *:nth-child(8) { transition-delay: 0.54s; }

/* ============================================================
   HERO TEXT SPLIT (word-by-word entrance)
   ============================================================ */
.np-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}
.np-word {
  display: inline-block;
  transform-origin: bottom center;
}

/* ============================================================
   GLOBAL SECTION HEADING REVEAL
   ============================================================ */
.np-section-title,
.np-widget-title,
.np-archive-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.np-section-title.np-revealed,
.np-widget-title.np-revealed,
.np-archive-title.np-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   THUMB ZOOM (applied via JS on all card images)
   ============================================================ */
.np-card-thumb,
.np-post-thumb,
.np-thumb-wrap {
  overflow: hidden;
}
.np-card-thumb img,
.np-post-thumb img,
.np-thumb-wrap img {
  transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
  transform: scale(1);
}
.np-card-thumb:hover img,
.np-post-thumb:hover img,
.np-thumb-wrap:hover img {
  transform: scale(1.08);
}

/* ============================================================
   HOMEPAGE TEMPLATE 1 — CINEMATIC REVEAL
   ============================================================ */
.np-tpl-1 .np-hero-cinematic {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  perspective: 1200px;
}
.np-tpl-1 .np-hero-cinematic__bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  transform: translateZ(-100px) scale(1.2);
  will-change: transform;
}
.np-tpl-1 .np-hero-cinematic__layer-mid {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2));
  transform: translateZ(-50px) scale(1.08);
}
.np-tpl-1 .np-hero-cinematic__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 60px;
  z-index: 2;
}
.np-tpl-1 .np-hero-cinematic__text {
  max-width: 760px;
  color: #fff;
  transform: translateZ(40px);
}
.np-tpl-1 .np-hero-cinematic__eyebrow {
  display: inline-block;
  font-family: var(--np-font-accent);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: var(--np-primary);
  color: #fff !important;
  padding: 5px 16px;
  border-radius: 3px;
  margin-bottom: 16px;
  animation: np-slide-in-up 0.8s 0.2s both;
}
.np-tpl-1 .np-hero-cinematic__title {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  animation: np-slide-in-up 0.8s 0.4s both;
}
.np-tpl-1 .np-hero-cinematic__meta { animation: np-slide-in-up 0.8s 0.6s both; }

.np-tpl-1 .np-cin-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  margin: 40px 0;
}
.np-tpl-1 .np-cin-card {
  background: var(--np-card-bg);
  border-radius: var(--np-radius);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s ease;
  cursor: pointer;
}
.np-tpl-1 .np-cin-card:hover {
  transform: translateY(-14px) rotateX(8deg) rotateY(-3deg);
  box-shadow: 0 40px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.08);
}
.np-tpl-1 .np-cin-card__inner { transform: translateZ(20px); padding: 16px; }

/* ============================================================
   HOMEPAGE TEMPLATE 2 — EXPLODING GRID
   ============================================================ */
.np-tpl-2 .np-explode-stage {
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  perspective: 1400px;
  background: var(--np-dark, #0f172a);
}
.np-tpl-2 .np-explode-card {
  position: absolute;
  border-radius: var(--np-radius);
  overflow: hidden;
  transform-origin: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}
.np-tpl-2 .np-explode-card:hover {
  transform: scale(1.08) translateZ(30px) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  z-index: 10;
}
@keyframes np-explode-in {
  from {
    transform: translate3d(var(--from-x,0), var(--from-y,0), var(--from-z,-800px))
               rotate3d(var(--rx,0),var(--ry,1),var(--rz,0),var(--rot,360deg))
               scale(0.2);
    opacity: 0;
  }
  to { transform: translate3d(0,0,0) rotate3d(0,0,0,0deg) scale(1); opacity: 1; }
}

/* ============================================================
   HOMEPAGE TEMPLATE 3 — ORBITAL MAGAZINE
   ============================================================ */
.np-tpl-3 .np-orbital-stage {
  perspective: 1500px;
  height: 680px;
  position: relative;
  overflow: hidden;
}
.np-tpl-3 .np-orbital-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 340px; height: 440px;
  z-index: 10;
}
.np-tpl-3 .np-orbital-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  transform: translate(-50%,-50%) rotateX(20deg) rotateY(0deg);
  animation: np-orbital-spin 30s linear infinite;
}
.np-tpl-3 .np-orbital-item {
  position: absolute;
  width: 220px; height: 280px;
  margin-left: -110px; margin-top: -140px;
  border-radius: var(--np-radius);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  cursor: pointer;
}
@keyframes np-orbital-spin {
  from { transform: translate(-50%,-50%) rotateX(20deg) rotateY(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(20deg) rotateY(360deg); }
}

/* ============================================================
   HOMEPAGE TEMPLATE 5 — CUBE ROTATOR
   ============================================================ */
.np-tpl-5 .np-cube-stage {
  perspective: 1000px;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.np-tpl-5 .np-cube {
  width: 500px; height: 400px;
  position: relative;
  transform-style: preserve-3d;
  animation: np-cube-rotate 20s linear infinite;
}
.np-tpl-5 .np-cube:hover { animation-play-state: paused; }
.np-tpl-5 .np-cube__face {
  position: absolute;
  width: 500px; height: 400px;
  overflow: hidden;
  border-radius: 12px;
  backface-visibility: hidden;
  border: 2px solid rgba(255,255,255,0.1);
}
.np-tpl-5 .np-cube__face--front  { transform: translateZ(250px); }
.np-tpl-5 .np-cube__face--back   { transform: rotateY(180deg) translateZ(250px); }
.np-tpl-5 .np-cube__face--left   { transform: rotateY(-90deg) translateZ(250px); }
.np-tpl-5 .np-cube__face--right  { transform: rotateY(90deg) translateZ(250px); }
.np-tpl-5 .np-cube__face--top    { transform: rotateX(90deg) translateZ(200px); }
.np-tpl-5 .np-cube__face--bottom { transform: rotateX(-90deg) translateZ(200px); }
@keyframes np-cube-rotate {
  0%   { transform: rotateX(-5deg) rotateY(0deg); }
  25%  { transform: rotateX(-5deg) rotateY(90deg); }
  50%  { transform: rotateX(-5deg) rotateY(180deg); }
  75%  { transform: rotateX(-5deg) rotateY(270deg); }
  100% { transform: rotateX(-5deg) rotateY(360deg); }
}

/* ============================================================
   HOMEPAGE TEMPLATE 6 — FOLDED PAPER
   ============================================================ */
.np-tpl-6 .np-paper-section { perspective: 1200px; overflow: hidden; }
.np-tpl-6 .np-paper-fold {
  transform-origin: top center;
  transform: rotateX(-90deg);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1), opacity 0.8s ease;
  transform-style: preserve-3d;
}
.np-tpl-6 .np-paper-fold.np-unfolded { transform: rotateX(0deg); opacity: 1; }
.np-tpl-6 .np-paper-crease { position: relative; }
.np-tpl-6 .np-paper-crease::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent);
  z-index: 1;
}

/* ============================================================
   HOMEPAGE TEMPLATE 7 — NEON FLUX
   ============================================================ */
.np-tpl-7 {
  background: #06070d;
  --neon-1: #00f5ff;
  --neon-2: #ff0080;
  --neon-3: #7700ff;
}
.np-tpl-7 .np-neon-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--np-radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.np-tpl-7 .np-neon-card:hover {
  transform: translateY(-10px) rotate3d(1,1,0,3deg);
  box-shadow: 0 0 30px rgba(0,245,255,0.3), 0 0 60px rgba(0,245,255,0.08), 0 20px 40px rgba(0,0,0,0.6);
  border-color: var(--neon-1);
}
.np-tpl-7 .np-neon-card::before {
  content: '';
  position: absolute; inset: -1px;
  background: linear-gradient(135deg, var(--neon-1), var(--neon-2), var(--neon-3));
  opacity: 0;
  transition: opacity 0.4s;
  border-radius: var(--np-radius);
  z-index: -1;
}
.np-tpl-7 .np-neon-card:hover::before { opacity: 0.15; }
.np-tpl-7 .np-neon-title { color: #fff; text-shadow: 0 0 20px rgba(0,245,255,0.5); }
.np-tpl-7 .np-neon-cat {
  color: var(--neon-1);
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 2px;
  text-shadow: 0 0 10px currentColor;
}
.np-tpl-7 .np-bn--neon .np-bn__label--neon {
  text-shadow: 0 0 10px var(--neon-2), 0 0 20px var(--neon-2), 0 0 40px var(--neon-2);
  color: var(--neon-2);
}
.np-tpl-7 .np-bn--neon { border-top: 1px solid rgba(255,0,128,0.3); border-bottom: 1px solid rgba(255,0,128,0.3); }
@keyframes np-neon-border {
  0%, 100% { box-shadow: 0 0 5px var(--neon-1), 0 0 15px var(--neon-1); }
  50%       { box-shadow: 0 0 10px var(--neon-2), 0 0 25px var(--neon-2); }
}

/* ============================================================
   HOMEPAGE TEMPLATE 8 — SHATTERED GLASS
   ============================================================ */
.np-tpl-8 .np-shatter-stage {
  position: relative;
  height: 80vh;
  overflow: hidden;
  background: var(--np-dark, #0f172a);
}
.np-tpl-8 .np-shard {
  position: absolute;
  overflow: hidden;
  clip-path: polygon(var(--clip));
  transform-origin: var(--origin-x,50%) var(--origin-y,50%);
  transition: transform var(--dur,1.2s) cubic-bezier(0.34,1.56,0.64,1) var(--delay,0s),
              opacity var(--dur,1.2s) ease var(--delay,0s);
  will-change: transform;
}
.np-tpl-8 .np-shard.np-shatter-init {
  transform: translate3d(var(--fly-x,0), var(--fly-y,0), var(--fly-z,-400px))
             rotate3d(var(--rx,0),var(--ry,1),var(--rz,0),var(--rot,120deg)) scale(0);
  opacity: 0;
}
.np-tpl-8 .np-shard.np-assembled { transform: translate3d(0,0,0) rotate3d(0,0,0,0deg) scale(1); opacity: 1; }

/* ============================================================
   HOMEPAGE TEMPLATE 9 — HOLOGRAPHIC DECK
   ============================================================ */
.np-tpl-9 .np-holo-card {
  position: relative;
  border-radius: var(--np-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.4s ease;
}
.np-tpl-9 .np-holo-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.05) 0%,
    rgba(200,150,255,0.12) 25%,
    rgba(100,200,255,0.12) 50%,
    rgba(255,150,200,0.12) 75%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 200% 200%;
  animation: np-holo-shimmer 4s linear infinite;
  pointer-events: none;
}
.np-tpl-9 .np-holo-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px);
  pointer-events: none;
}
@keyframes np-holo-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* ============================================================
   HOMEPAGE TEMPLATE 10 — ISOMETRIC CITY
   ============================================================ */
.np-tpl-10 .np-iso-stage {
  perspective: 1200px;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.np-tpl-10 .np-iso-grid {
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: repeat(4,160px);
  grid-template-rows: repeat(3,120px);
  gap: 8px;
}
.np-tpl-10 .np-iso-building {
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.np-tpl-10 .np-iso-building:hover { transform: translateZ(calc(var(--height) + 20px)); }
.np-tpl-10 .np-iso-top   { transform: translateZ(var(--height,60px)); background: var(--np-card-bg); }
.np-tpl-10 .np-iso-front { transform-origin: bottom; transform: rotateX(-90deg); background: color-mix(in srgb, var(--np-card-bg) 80%, black); }
.np-tpl-10 .np-iso-side  { transform-origin: left;   transform: rotateY(90deg);  background: color-mix(in srgb, var(--np-card-bg) 60%, black); }

/* ============================================================
   HOMEPAGE TEMPLATE 11 — WARP SPEED
   ============================================================ */
.np-tpl-11 .np-warp-stage {
  position: relative;
  height: 100vh;
  background: radial-gradient(ellipse at center, #0d1b2a 0%, #000 100%);
  overflow: hidden;
  perspective: 600px;
}
.np-tpl-11 .np-warp-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  transform-origin: var(--ox,50%) var(--oy,50%);
  animation: np-warp-fly var(--dur,3s) linear var(--delay,0s) infinite;
  will-change: transform, opacity;
}
.np-tpl-11 .np-warp-headline {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) translateZ(300px);
  color: #fff;
  text-align: center;
  z-index: 10;
  animation: np-warp-approach 8s ease-in-out infinite alternate;
}
@keyframes np-warp-fly {
  from { transform: translate(-50%,-50%) scale(0.01); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translate(-50%,-50%) scale(20); opacity: 0; }
}
@keyframes np-warp-approach {
  from { transform: translate(-50%,-50%) translateZ(200px); }
  to   { transform: translate(-50%,-50%) translateZ(400px); }
}

/* ============================================================
   HOMEPAGE TEMPLATE 14 — FLIP DECK
   ============================================================ */
.np-tpl-14 .np-flip-card {
  perspective: 1000px;
  height: 380px;
  cursor: pointer;
}
.np-tpl-14 .np-flip-card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
.np-tpl-14 .np-flip-card:hover .np-flip-card__inner,
.np-tpl-14 .np-flip-card.flipped .np-flip-card__inner { transform: rotateY(180deg); }
.np-tpl-14 .np-flip-card__front,
.np-tpl-14 .np-flip-card__back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--np-radius);
  overflow: hidden;
}
.np-tpl-14 .np-flip-card__front {
  background: var(--np-dark);
  display: flex; align-items: center; justify-content: center;
}
.np-tpl-14 .np-flip-card__back { transform: rotateY(180deg); background: var(--np-card-bg); }

/* ============================================================
   HOMEPAGE TEMPLATE 16 — VORTEX STREAM
   ============================================================ */
.np-tpl-16 .np-vortex-stage {
  position: relative; height: 90vh; overflow: hidden;
  background: radial-gradient(circle at center, #1a0533 0%, #000 100%);
  perspective: 800px;
}
.np-tpl-16 .np-vortex-item {
  position: absolute; top: 50%; left: 50%;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.np-tpl-16 .np-vortex-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--np-radius);
  padding: 16px; color: #fff;
  width: 200px; cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.np-tpl-16 .np-vortex-card:hover {
  background: rgba(255,255,255,0.16);
  transform: translateZ(30px) scale(1.12);
}

/* ============================================================
   HOMEPAGE TEMPLATE 18 — GLASS PANELS
   ============================================================ */
.np-tpl-18 .np-glass-panel {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--np-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden; position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.np-tpl-18 .np-glass-panel:hover {
  transform: translateY(-8px) translateZ(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
.np-tpl-18 .np-glass-panel::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transition: left 0.6s ease;
}
.np-tpl-18 .np-glass-panel:hover::before { left: 200%; }

/* ============================================================
   HOMEPAGE TEMPLATE 20 — TUNNEL VISION
   ============================================================ */
.np-tpl-20 .np-tunnel-stage {
  position: relative; height: 100vh; overflow: hidden;
  perspective: 400px; background: #000;
}
.np-tpl-20 .np-tunnel-ring {
  position: absolute; top: 50%; left: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  transform: translate(-50%,-50%) translateZ(var(--z,0)) scale(var(--s,1));
  border-radius: 50%;
  will-change: transform, opacity;
  animation: np-tunnel-ring var(--dur,6s) linear var(--delay,0s) infinite;
}
.np-tpl-20 .np-tunnel-item {
  position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%) translateZ(var(--item-z,0));
  will-change: transform;
}
@keyframes np-tunnel-ring {
  from { transform: translate(-50%,-50%) translateZ(-2000px) scale(0.01); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  to   { transform: translate(-50%,-50%) translateZ(200px) scale(5); opacity: 0; }
}

/* ============================================================
   GLOBAL ANIMATION KEYFRAMES
   ============================================================ */
@keyframes np-slide-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes np-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes np-scale-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes np-rotate-in {
  from { opacity: 0; transform: rotate3d(0,1,0,90deg); }
  to   { opacity: 1; transform: rotate3d(0,0,0,0deg); }
}
@keyframes np-flip-in {
  from { opacity: 0; transform: rotateX(-90deg) translateY(-30px); }
  to   { opacity: 1; transform: rotateX(0deg) translateY(0); }
}
@keyframes np-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.85; }
}
@keyframes np-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes np-float {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%       { transform: translateY(-16px) translateZ(20px); }
}
@keyframes np-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes np-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============================================================
   PARTICLE CANVAS (Template 4 — Deep Space News)
   ============================================================ */
#np-particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  display: block;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
#np-reading-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,0.08);
  z-index: 9999;
  pointer-events: none;
}
#np-reading-bar-inner {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--np-primary), var(--np-accent));
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--np-primary);
}