/* === UI Kit: Components, Effects, Utilities === */

/* Reset helpers */
:root {
  --ui-accent: #7c4dff;
  --ui-accent-2: #00d4ff;
  --ui-bg: #0b0f1a;
  --ui-card: rgba(255,255,255,0.06);
  --ui-glass: rgba(255,255,255,0.12);
  --ui-border: rgba(255,255,255,0.18);
  --ui-text: #e6ecff;
  --ui-muted: #a8b2d1;
  --ui-good: #3ad29f;
  --ui-warn: #ffbf47;
  --ui-bad: #ff5c80;
}

/* ------- Components -------- */

/* Glassy modal dialog */
.modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  z-index: 80;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal .dialog {
  width: min(560px, 92vw); padding: 24px; border-radius: 20px;
  backdrop-filter: blur(16px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid var(--ui-border); color: var(--ui-text);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Floating context menu */
.context-menu {
  position: fixed; min-width: 180px; padding: 8px; background: #0f1525;
  border: 1px solid var(--ui-border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); display: none; z-index: 90;
}
.context-menu.open { display: block; }
.context-menu .item { padding: 10px 12px; border-radius: 8px; color: var(--ui-text); cursor: pointer; }
.context-menu .item:hover { background: rgba(255,255,255,.06); }

/* Pill nav bar variation */
.pill-nav { display:flex; gap:8px; padding:6px; background: var(--ui-card); border-radius: 999px; border:1px solid var(--ui-border); }
.pill-nav a { padding:8px 14px; border-radius:999px; color:var(--ui-text); text-decoration:none; }
.pill-nav a.active, .pill-nav a:hover { background: linear-gradient(90deg,var(--ui-accent), var(--ui-accent-2)); color:white; }

/* Stats counters */
.stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat { padding:16px; border-radius:16px; background:var(--ui-card); border:1px solid var(--ui-border); text-align:center; }
.stat .num { font-size:28px; font-weight:800; letter-spacing:.5px; }
.stat .label { color: var(--ui-muted); font-size:12px; }

/* Progress bar stripes */
.progress { height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.progress .bar { height:100%; width:0%; background: repeating-linear-gradient(45deg, var(--ui-accent) 0 10px, var(--ui-accent-2) 10px 20px); animation: moveStripes 1s linear infinite; }
@keyframes moveStripes { to { background-position: 40px 0; }}

/* Radial menu demo */
.radial-menu { position:relative; width:160px; height:160px; margin:auto; }
.radial-menu .center { position:absolute; inset:50% auto auto 50%; transform: translate(-50%, -50%); width:64px; height:64px; border-radius:50%; background:var(--ui-accent); display:grid; place-items:center; color:white; }
.radial-menu .item { position:absolute; width:44px; height:44px; border-radius:50%; background:var(--ui-card); border:1px solid var(--ui-border); display:grid; place-items:center; color:var(--ui-text); transition: transform .25s ease; }
.radial-menu.open .item:nth-child(2){ transform: translate(0,-70px); }
.radial-menu.open .item:nth-child(3){ transform: translate(50px,-50px); }
.radial-menu.open .item:nth-child(4){ transform: translate(70px,0); }
.radial-menu.open .item:nth-child(5){ transform: translate(50px,50px); }
.radial-menu.open .item:nth-child(6){ transform: translate(0,70px); }
.radial-menu.open .item:nth-child(7){ transform: translate(-50px,50px); }
.radial-menu.open .item:nth-child(8){ transform: translate(-70px,0); }
.radial-menu.open .item:nth-child(9){ transform: translate(-50px,-50px); }

/* Notification bell with badge */
.bell { position:relative; }
.bell .badge { position:absolute; top:-4px; right:-4px; background: var(--ui-bad); color:white; font-size:11px; font-weight:700; line-height:1; padding:4px 6px; border-radius:999px; box-shadow:0 0 0 2px #0b0f1a; }

/* Search spotlight overlay (Cmd/Ctrl+K) */
.spotlight {
  position: fixed; inset:0; display:none; place-items:center; z-index:100;
  background: rgba(0,0,0,.5);
}
.spotlight.open { display:grid; }
.spotlight .panel {
  width: min(720px, 92vw); background: #0b1224; border:1px solid var(--ui-border);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.spotlight .panel input {
  width:100%; padding:16px 20px; background:transparent; border:none; outline:none; color:var(--ui-text); font-size:16px;
}
.spotlight .results { max-height: 40vh; overflow:auto; padding: 6px 8px 12px; }
.spotlight .result { padding:10px 12px; border-radius:10px; color:var(--ui-text); }
.spotlight .result:hover { background:rgba(255,255,255,.06); }

/* Timeline alt with images */
.timeline { display:grid; gap:16px; border-left:2px dashed var(--ui-border); padding-left:16px; }
.timeline .entry { display:grid; gap:10px; }
.timeline .title { font-weight:700; }
.timeline .thumb { width:100%; border-radius:12px; aspect-ratio: 16/9; object-fit:cover; border:1px solid var(--ui-border); }

/* Feature cards with icons */
.features { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.feature { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:16px; padding:16px; display:grid; gap:8px; }
.feature .icon { width:28px; height:28px; }

/* Accordion alt with chevrons */
.accordion { border:1px solid var(--ui-border); border-radius:14px; overflow:hidden; }
.accordion .item { border-top:1px solid var(--ui-border); }
.accordion .head { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; cursor:pointer; }
.accordion .chev { transition: transform .2s ease; }
.accordion .content { display:none; padding:0 14px 12px; color:var(--ui-muted); }
.accordion .item.open .content { display:block; }
.accordion .item.open .chev { transform: rotate(180deg); }

/* Hoverable flip cards */
.flip { perspective: 1000px; }
.flip .card { position:relative; transform-style: preserve-3d; transition: transform .6s; }
.flip:hover .card { transform: rotateY(180deg); }
.flip .front, .flip .back { position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; border:1px solid var(--ui-border); }
.flip .front { background:var(--ui-card); }
.flip .back { background:#0c1530; transform: rotateY(180deg); }

/* Dropdown menus styled */
.dropdown { position:relative; }
.dropdown .menu { position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#0f1525; border:1px solid var(--ui-border); border-radius:12px; display:none; z-index:30; }
.dropdown.open .menu { display:block; }
.dropdown .menu a { display:block; padding:10px 12px; color:var(--ui-text); text-decoration:none; }
.dropdown .menu a:hover { background: rgba(255,255,255,.06); }

/* Tags cloud style */
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px dashed var(--ui-border); color:var(--ui-text); font-size:12px; }

/* Floating labels for inputs */
.float-label { position:relative; }
.float-label input { width:100%; padding:14px 12px; border-radius:12px; background:transparent; border:1px solid var(--ui-border); color:var(--ui-text); }
.float-label label { position:absolute; left:12px; top:50%; transform: translateY(-50%); color: var(--ui-muted); transition: all .15s ease; background:#0b0f1a; padding:0 6px; }
.float-label input:focus + label,
.float-label input:not(:placeholder-shown) + label { top:-8px; font-size:12px; color: var(--ui-accent); }

/* Pricing cards layout */
.pricing { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.price-card { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:16px; padding:18px; }
.price-card .price { font-size:32px; font-weight:800; }
.price-card .cta { display:block; margin-top:12px; text-align:center; padding:10px 14px; border-radius:12px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); color:white; text-decoration:none; }

/* Team member card */
.team { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.team-card { background:var(--ui-card); border:1px solid var(--ui-border); border-radius:16px; padding:14px; display:grid; gap:10px; text-align:center; }
.team-card img { width:96px; height:96px; border-radius:50%; object-fit:cover; margin: 8px auto; }
.team-card .role { color: var(--ui-muted); font-size: 12px; }

/* Hero CTA block */
.hero { padding:48px 18px; border-radius:20px; background:
  radial-gradient(60% 100% at 10% 0%, rgba(124,77,255,.25), transparent),
  radial-gradient(60% 100% at 90% 20%, rgba(0,212,255,.25), transparent),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--ui-border);
}
.hero h1 { font-size: clamp(28px, 4vw, 48px); line-height:1.08; margin:0 0 8px; }
.hero p { color: var(--ui-muted); margin:0 0 16px; }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { padding:10px 14px; border-radius:12px; border:1px solid var(--ui-border); background:var(--ui-card); color:var(--ui-text); text-decoration:none; }
.btn.primary { background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); color:white; border:none; }

/* Footer with columns */
.footer { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:16px; padding:24px; border-top:1px solid var(--ui-border); background: rgba(255,255,255,.03); }
.footer h4 { margin:0 0 8px; }
.footer a { color: var(--ui-muted); text-decoration:none; display:block; margin:6px 0; }
.footer a:hover { color: var(--ui-text); }

/* Inline alert boxes */
.alert { padding:12px 14px; border-radius:12px; border:1px solid var(--ui-border); }
.alert.info { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.35); }
.alert.warn { background: rgba(255,191,71,.08); border-color: rgba(255,191,71,.45); }
.alert.danger { background: rgba(255,92,128,.08); border-color: rgba(255,92,128,.45); }

/* ------- Effects -------- */

/* Morphing blob */
.blob { width:180px; height:180px; background: radial-gradient(circle at 30% 30%, var(--ui-accent), var(--ui-accent-2)); border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; animation: blob 10s ease-in-out infinite; filter: blur(0.3px); }
@keyframes blob {
  0%,100%{ border-radius:33% 67% 70% 30% / 30% 30% 70% 70%; transform: translate(0,0) rotate(0deg); }
  25%{ border-radius:60% 40% 30% 70% / 60% 60% 40% 40%; transform: translate(6px,-6px) rotate(10deg); }
  50%{ border-radius:40% 60% 60% 40% / 40% 40% 60% 60%; transform: translate(-4px,6px) rotate(-8deg); }
  75%{ border-radius:55% 45% 35% 65% / 55% 55% 45% 45%; transform: translate(4px,2px) rotate(4deg); }
}

/* Parallax scroll background utility */
.parallax { background-attachment: fixed; background-size: cover; background-position: center; }

/* Magnetic button hover */
.magnetic { position:relative; overflow:hidden; }
.magnetic span { position:relative; z-index:1; }
.magnetic::after { content:""; position:absolute; inset:-30%; border-radius:50%; transform: scale(0); background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 60%); transition: transform .2s ease; }
.magnetic:hover::after { transform: scale(1); }

/* Wavy text animation */
.wavy { display:inline-block; }
.wavy span { display:inline-block; animation: wave 1.2s ease-in-out infinite; }
.wavy span:nth-child(odd){ animation-delay: .1s; } .wavy span:nth-child(even){ animation-delay: .2s; }
@keyframes wave { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); }}

/* Glow trail cursor */
html.glow-cursor body { cursor: none; }
.cursor-glow { position: fixed; width:18px; height:18px; border-radius:50%; pointer-events:none; mix-blend-mode: difference; background:white; transform: translate(-50%, -50%); z-index:1000; }

/* Flip-in cards */
.flip-in { animation: flipIn .6s both; }
@keyframes flipIn { 0%{ transform: rotateX(-90deg); opacity:0; } 100%{ transform: rotateX(0); opacity:1; }}

/* Page fade-in */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1}}

/* Menu slide down */
.slide-down { animation: slideDown .25s ease both; }
@keyframes slideDown { from{opacity:0; transform: translateY(-8px)} to{opacity:1; transform: translateY(0)}}

/* Elastic scale hover */
.elastic:hover { transform: scale(1.03); transition: transform .15s ease; }

/* Typewriter effect */
.typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--ui-accent); animation: typing 3s steps(30,end), blink .8s step-end infinite; }
@keyframes typing { from{ width: 0 } to { width: 100% } }
@keyframes blink { 50% { border-color: transparent }}

/* Neon flicker text */
.neon { color:#9d82ff; text-shadow: 0 0 6px rgba(124,77,255,.8), 0 0 20px rgba(124,77,255,.6); animation: flicker 3s infinite both; }
@keyframes flicker { 0%,100%{ opacity:1 } 10%{ opacity:.9 } 20%{ opacity:.95 } 30%{ opacity:.85 } 40%{ opacity:1 }}

/* Starfield background */
.starfield { position: fixed; inset:0; pointer-events:none; background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,.7), transparent); background-repeat:no-repeat; animation: starDrift 60s linear infinite; z-index:-1; }
@keyframes starDrift { from{ background-position: 0 0, 0 0, 0 0 } to { background-position: 2000px -2000px, -1500px 1500px, 1800px 1200px }}

/* Shimmer loader bar */
.shimmer { position:relative; overflow:hidden; background: rgba(255,255,255,.06); }
.shimmer::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transform: translateX(-100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); }}

/* Ripple effect on buttons */
.ripple { position:relative; overflow:hidden; }
.ripple span.r { position:absolute; border-radius:50%; transform: scale(0); animation: ripple .6s ease; background: rgba(255,255,255,.4); }
@keyframes ripple { to { transform: scale(4); opacity:0 }}

/* Hover 'lift shadow' */
.lift:hover { box-shadow: 0 20px 40px rgba(0,0,0,.35); transform: translateY(-2px); transition: all .18s ease; }

/* ------- Nice Utilities -------- */

/* Icon set for buttons (using mask) */
.icon { width:18px; height:18px; display:inline-block; background: currentColor; mask-size: cover; -webkit-mask-size: cover; vertical-align: -3px; }
.icon-bell { mask: url('icon-bell.svg') no-repeat center; -webkit-mask: url('icon-bell.svg') no-repeat center; }
.icon-search { mask: url('icon-search.svg') no-repeat center; -webkit-mask: url('icon-search.svg') no-repeat center; }
.icon-user { mask: url('icon-user.svg') no-repeat center; -webkit-mask: url('icon-user.svg') no-repeat center; }

/* Better avatar sizes */
.avatar { border-radius:50%; object-fit:cover; }
.avatar.sm{ width:24px; height:24px; } .avatar.md{ width:36px; height:36px; } .avatar.lg{ width:64px; height:64px; }

/* Status dots */
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-dot.online { background: var(--ui-good); } .status-dot.offline { background: #647; }

/* Animated separators */
.sep { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); background-size:200% 100%; animation: sep 2s linear infinite; }
@keyframes sep { to { background-position: 200% 0; }}

/* Gradient borders */
.gradient-border { position:relative; border-radius:16px; }
.gradient-border::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background: linear-gradient(135deg,var(--ui-accent),var(--ui-accent-2)); z-index:-1; }
.gradient-border > * { background: #0d1322; border-radius: inherit; padding: 1px; }

/* Dashed outlines utility */
.dashed { border: 1px dashed var(--ui-border); border-radius: 12px; }

/* Link hover transitions */
a { transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; }

/* Rotating gradient bg */
.rot-grad { background: conic-gradient(from 0deg at 50% 50%, var(--ui-accent), var(--ui-accent-2), var(--ui-accent)); animation: rot 8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); }}

/* Rounded image masks */
.rounded-clip { clip-path: inset(0 round 18px); }

/* Polaroid photo utility */
.polaroid { background:white; padding:10px 10px 28px; box-shadow: 0 10px 30px rgba(0,0,0,.35); color:black; border-radius:6px; }

/* Card stack shadows */
.stack { box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 12px 20px rgba(0,0,0,.28); }

/* Vertical nav bar style */
.vnav { display:grid; gap:6px; }
.vnav a { padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ui-text); }
.vnav a:hover { background: rgba(255,255,255,.06); }

/* Highlight on copy */
.copy-highlighted { background: rgba(255,255,0,.12); transition: background .6s ease; }

/* Snackbar */
.snackbar { position: fixed; left:50%; bottom:18px; transform: translateX(-50%); background:#111a2d; border:1px solid var(--ui-border); color:var(--ui-text); padding:10px 14px; border-radius:10px; display:none; z-index:120; }
.snackbar.show { display:block; animation: fadeIn .3s both; }

/* Mini loader dots */
.dots { display:inline-block; }
.dots::after { content:""; display:inline-block; width:40px; height:1em; vertical-align:-.25em; background:
 radial-gradient(currentColor 2px, transparent 3px) 0% 50%/10px 10px repeat-x;
 animation: dots 1s steps(4,end) infinite; }
@keyframes dots { to { background-position: 40px 50%; }}

/* Flip arrow for accordions */
.flip-arrow { display:inline-block; transition: transform .2s ease; }
.rotate-180 { transform: rotate(180deg); }

/* Hover tilt for buttons */
.tilt { transform: perspective(300px) rotateX(0) rotateY(0); transform-style: preserve-3d; transition: transform .2s ease; }
.tilt:hover { transform: perspective(300px) rotateX(6deg) rotateY(-6deg); }

/* Inset shadows */
.inset { box-shadow: inset 0 0 0 1px var(--ui-border), inset 0 8px 30px rgba(0,0,0,.25); }

/* Glow around inputs */
.input-glow:focus { box-shadow: 0 0 0 3px rgba(124,77,255,.35); border-color: var(--ui-accent); outline: none; }

/* Progress dots bar */
.progress-dots { display:flex; gap:6px; }
.progress-dots .dot { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.18); }
.progress-dots .dot.active { background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); }

/* Diagonal background stripes */
.diagonal { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,.08) 10px 20px); }

/* Sticker note box */
.sticker { background: #fff59d; color:#333; padding:12px; border-radius: 6px 10px 60px 6px; box-shadow: 0 8px 16px rgba(0,0,0,.2); }

/* Speech bubble utility */
.bubble { background: var(--ui-card); border:1px solid var(--ui-border); padding:12px; border-radius:10px; position:relative; }
.bubble::after { content:""; position:absolute; top: -6px; left: 20px; border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent var(--ui-border) transparent; }

/* Gradient text shadows */
.grad-shadow { text-shadow: 0 2px 10px rgba(124,77,255,.6), 0 6px 20px rgba(0,212,255,.4); }

/* Noise texture alt */
.noise { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".03"/></svg>'); }

/* Hover zoom images */
.zoom:hover { transform: scale(1.03); transition: transform .2s ease; }

/* Glass tooltip alt */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 8px; color: var(--ui-text); white-space: nowrap; border:1px solid var(--ui-border); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
[data-tip]:hover::after { opacity: 1; }

/* Pulse border animation */
.pulse-border { position: relative; }
.pulse-border::before { content:""; position:absolute; inset:-3px; border-radius:inherit; border:2px solid rgba(124,77,255,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%{ opacity:1 } 100%{ opacity:0; transform: scale(1.1) }}

/* Light sweep on cards */
.sweep { position:relative; overflow:hidden; }
.sweep::after { content:""; position:absolute; top:-40%; left:-20%; width:40%; height:200%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); animation: sweep 3s infinite; }
@keyframes sweep { to { left: 120%; }}

/* Scroll progress indicator bar (top) – if not already present */
.scroll-progress { position: fixed; left:0; top:0; height:3px; width:0; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); z-index:200; }

/* === News Visual Upgrades (35) === */

/* 1. News card base polish */
.news-card, article { border-radius: 16px; overflow: hidden; background: var(--ui-card); border: 1px solid var(--ui-border); transition: transform .18s ease, box-shadow .18s ease; }
.news-card:hover, article:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

/* 2. Media gradient overlay */
.card-media { position: relative; height: 180px; background-size: cover; background-position: center; }
.card-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)); }

/* 3. Category chip row */
.card-cats { position:absolute; left:12px; top:12px; display:flex; gap:6px; z-index:2; }
.cat { font-size:11px; padding:6px 8px; border-radius:999px; background: rgba(255,255,255,.14); border: 1px solid var(--ui-border); backdrop-filter: blur(6px); color: var(--ui-text); }

/* 4. Corner ribbon (Top Story/New) */
.ribbon { position:absolute; right:-36px; top:14px; transform: rotate(35deg); background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); color:white; font-size:12px; padding:4px 40px; box-shadow:0 8px 18px rgba(0,0,0,.35); }

/* 5. Card body spacing */
.card-body { padding: 14px; display: grid; gap: 8px; }
.card-body h3 { margin: 0; line-height:1.2; }
.card-body .meta { color: var(--ui-muted); font-size: 12px; display:flex; align-items:center; gap:8px; }

/* 6. Category dot in meta */
.meta .dot { width:6px; height:6px; border-radius:50%; background: var(--ui-accent); display:inline-block; }

/* 7. Headline underline gradient */
.card-body h3 { position: relative; }
.card-body h3::after { content:""; position:absolute; left:0; bottom:-6px; width:68px; height:3px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); border-radius:2px; opacity:.6; }

/* 8. Drop cap for first paragraph */
.card-body p:first-of-type::first-letter { float:left; font-size: 2.4em; line-height: .9; padding: 4px 8px 0 0; color: #b9c1ff; text-shadow: 0 2px 10px rgba(124,77,255,.25); }

/* 9. Share bar on hover */
.card-share { position:absolute; right:12px; top:12px; display:flex; gap:8px; opacity:0; transform: translateY(-6px); transition: all .2s ease; z-index:2; }
.news-card:hover .card-share, article:hover .card-share { opacity:1; transform: translateY(0); }
.share-btn { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background: rgba(0,0,0,.4); border:1px solid var(--ui-border); color:white; text-decoration:none; }

/* 10. Date ribbon */
.date-ribbon { position:absolute; bottom:0; left:0; padding:6px 10px; background: rgba(0,0,0,.55); color: #e8edff; font-size: 12px; border-top-right-radius: 10px; }

/* 11. Image captions overlay */
.caption { position:absolute; left:0; bottom:0; width:100%; padding:8px 12px; color:#e8edff; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.8); opacity:.0; transition: opacity .2s ease; }
.news-card:hover .caption, article:hover .caption { opacity:1; }

/* 12. Monochrome to color hover */
.card-media { filter: grayscale(.2); transition: filter .2s ease, transform .2s ease; }
.news-card:hover .card-media, article:hover .card-media { filter: grayscale(0); transform: scale(1.01); }

/* 13. Card border glow on hover */
.news-card:hover, article:hover { box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(124,77,255,.35) inset; }

/* 14. Comment chip */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--ui-border); background: rgba(255,255,255,.06); font-size:12px; }
.chip .dot { background: var(--ui-accent); width:6px; height:6px; border-radius:50%; }

/* 15. Reading time pill */
.read-time { font-size:11px; padding:4px 8px; border-radius:999px; background: rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.35); }

/* 16. Bookmark heart (visual) */
.bookmark { position:absolute; left:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background: rgba(0,0,0,.38); display:grid; place-items:center; color:white; border:1px solid var(--ui-border); }
.bookmark.active { background: rgba(124,77,255,.5); }

/* 17. Masonry grid for news list */
.news-grid { columns: 1; column-gap: 16px; }
@media(min-width:700px){ .news-grid{ columns: 2 } }
@media(min-width:1040px){ .news-grid{ columns: 3 } }
.news-grid article { break-inside: avoid; margin: 0 0 16px; }

/* 18. Skeleton shimmer for images */
.skel { position: relative; background: rgba(255,255,255,.06); }
.skel::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); transform: translateX(-100%); animation: shimmer 1.2s infinite; }

/* 19. Featured banner */
.featured { outline: 2px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); position: relative; }
.featured::before { content:"FEATURED"; position:absolute; left:12px; top:12px; font-size:11px; letter-spacing:.12em; color:#9aa3c9; }

/* 20. Subtle inner divider */
.card-body .divider { height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); margin: 6px 0; }

/* 21. Article badges row */
.badges { display:flex; gap:8px; flex-wrap:wrap; }

/* 22. Sticky mini header on scroll */
.mini-header { position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(11,15,26,.6); border-bottom:1px solid var(--ui-border); }
.mini-header .container { display:flex; align-items:center; gap:12px; padding:6px 0; }

/* 23. Headline style upgrades */
h1,h2,h3 { letter-spacing: .2px; }
h2.section-title { display:flex; align-items:center; gap:8px; }
h2.section-title::before { content:""; width:8px; height:18px; border-radius:3px; background: linear-gradient(180deg,var(--ui-accent),var(--ui-accent-2)); }

/* 24. Card corner fold */
.corner-fold { position:absolute; right:0; top:0; width:24px; height:24px; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.0)); border-bottom-left-radius: 6px; }

/* 25. Photo frame edge */
.photo-edge { box-shadow: 0 6px 18px rgba(0,0,0,.35); border-radius: 14px; overflow: hidden; }

/* 26. Meta separator dot */
.meta .sep-dot::before{ content:"•"; margin: 0 6px; color: #6f7aa7; }

/* 27. Inline quote styling */
.snip-quote { font-style: italic; color:#c6ccf3; border-left: 3px solid rgba(124,77,255,.35); padding-left: 8px; display:block; }

/* 28. Action buttons compact style */
.card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn.outline { background: transparent; border: 1px solid var(--ui-border); }

/* 29. Article hover shadow lift handled above */

/* 30. Image zoom handled above */

/* 31. Gradient meta underline */
.card-body .meta { position:relative; }
.card-body .meta::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:48px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); opacity:.35; border-radius:2px; }

/* 32. Tag pills already defined as .tag */

/* 33. Noise overlay on cards */
.news-card.noise::before, article.noise::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; background-image: radial-gradient(#fff 0.5px, transparent 0.5px); background-size: 6px 6px; }

/* 34. Hover light sweep on media */
.card-media.sweep::after{ pointer-events:none; mix-blend-mode: screen; }

/* 35. Download button size tooltip via [data-tip] already supported */

/* === 25 More News Visual Upgrades === */

/* A) Headline hover underline expand */
.card-body h3::after { transition: width .18s ease, opacity .18s ease; }
.news-card:hover .card-body h3::after, article:hover .card-body h3::after { width: 100px; opacity:.9; }

/* B) Keyboard focus ring */
:focus-visible { outline: 2px solid rgba(124,77,255,.6); outline-offset: 2px; border-radius: 8px; }

/* C) :target highlight */
article:target { box-shadow: 0 0 0 2px rgba(0,212,255,.5) inset, 0 16px 40px rgba(0,0,0,.35); transform: translateY(-1px); }

/* D) Ticker marquee */
.mini-header .marquee { display:block; white-space: nowrap; overflow: hidden; position: relative; }
.mini-header .marquee::after { content:""; position:absolute; right:0; top:0; width:80px; height:100%; background: linear-gradient(90deg, transparent, rgba(11,15,26,.9)); }
.mini-header .marquee { animation: ticker 18s linear infinite; }
@keyframes ticker { from{ transform: translateX(0) } to { transform: translateX(-50%) }}

/* E) Progress indicator on left side of articles */
article { position: relative; }
article::before { content:""; position:absolute; left:-2px; top:0; width:3px; height: calc(var(--read-progress, 0) * 100%); background: linear-gradient(180deg,var(--ui-accent),var(--ui-accent-2)); border-radius: 3px; }

/* F) Image radius grows slightly on hover */
.news-card:hover .card-media, article:hover .card-media { border-radius: 18px; }

/* G) Tag color animation */
.tag { transition: background .18s ease, border-color .18s ease; }
.tag:hover { background: linear-gradient(90deg, rgba(124,77,255,.18), rgba(0,212,255,.18)); border-color: rgba(255,255,255,.28); }

/* H) Reading-time micro pulse */
.read-time { transition: transform .15s ease, box-shadow .15s ease; }
.read-time:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }

/* I) Buttons glow shadow on hover */
.btn:hover { box-shadow: 0 10px 24px rgba(124,77,255,.28); }

/* J) Tooltip styling enhancement already handled by [data-tip] */

/* K) Old news dim (optional via data-age="old") */
article[data-age="old"] { filter: saturate(.7) brightness(.9); }

/* L) Press effect on click */
.news-card:active, article:active { transform: translateY(0); box-shadow: 0 10px 20px rgba(0,0,0,.28); }

/* M) Headlines clamp */
.card-body h3, article h3 { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }

/* N) Colorized drop shadow */
.news-card, article { box-shadow: 0 6px 16px rgba(8,12,24,.25); }

/* O) Meta chips wrap nicely */
.card-body .meta { flex-wrap: wrap; row-gap: 6px; }

/* P) Animated section separators */
.sep { height:2px; border-radius:2px; }

/* Q) Decorative horizontal rule */
.hr-grad { height:2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); border:0; margin: 14px 0; }

/* R) NEW pulse badge (use [data-new="true"]) */
article[data-new="true"]::after { content:"NEW"; position:absolute; right:10px; top:10px; font-size:10px; padding:3px 6px; border-radius:999px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); color:white; animation: pulse 1.8s infinite; }

/* S) Category chips slight gradient pulse */
.card-cats .cat { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); }

/* T) Button subtle tilt on hover (visual only) */
.btn { transform: perspective(500px) translateZ(0); }
.btn:hover { transform: perspective(500px) translateZ(0) rotateX(1deg) rotateY(-1deg); }

/* U) Card inner content shadow */
.card-body { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-radius: 0 0 16px 16px; }

/* V) Meta icon bullets */
.meta .icon-dot { width:8px; height:8px; border-radius:50%; background: var(--ui-accent); display:inline-block; }

/* W) Image subtle border */
.card-media { border:1px solid rgba(255,255,255,.06); }

/* X) Focused link highlight in meta */
.card-body .meta a:focus-visible { background: rgba(124,77,255,.18); border-radius: 6px; padding: 0 4px; }

/* Y) Card hover gradient border */
.news-card:hover, article:hover { outline: 1px solid rgba(255,255,255,.2); }

/* === Beauty Pass: Cohesive News Theme === */

/* Palette + type tweaks */
:root{
  --ui-accent: #8b5cf6;
  --ui-accent-2:#22d3ee;
  --ui-bg:#0a0f1a;
  --ui-card: rgba(255,255,255,0.05);
  --ui-border: rgba(255,255,255,0.14);
  --ui-text:#e7ecff;
  --ui-muted:#a7b0cf;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important }
}

/* Background glow gradient */
body{
  background:
    radial-gradient(1000px 800px at 10% -10%, rgba(139,92,246,.20), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(34,211,238,.16), transparent 60%),
    linear-gradient(180deg, #090f1a 0%, #0b101d 100%);
  color: var(--ui-text);
}

/* Container max width & breathing room */
.container{ width:min(1100px, 92vw); margin-inline:auto; }
main .container, .news-grid { margin-top: 16px; }

/* Header glass polish */
.site-header{ backdrop-filter: blur(10px); background: rgba(8,12,22,.45); border-bottom:1px solid var(--ui-border); }
.site-header .bar{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px 0; }
.site-header .brand{ font-weight:800; letter-spacing:.3px; text-transform:uppercase; }

/* Buttons – consistent style */
.btn{ border-radius:12px; border:1px solid var(--ui-border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding:10px 14px; color:var(--ui-text); }
.btn:hover{ box-shadow:0 12px 28px rgba(0,0,0,.3); border-color: rgba(255,255,255,.25); }
.btn.primary{ background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); border:none; color:#fff; }
.btn.outline{ background:transparent; }

/* News cards – elegant depth */
article, .news-card{
  position:relative;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid var(--ui-border);
  box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
article:hover{ transform: translateY(-2px); box-shadow: 0 22px 50px rgba(0,0,0,.36), 0 0 0 1px rgba(124,77,255,.22) inset; }

.card-media{ border-radius: 16px 16px 0 0; }
.card-body{ padding:16px 14px 14px; }

/* Typography scale */
h1{ font-size: clamp(28px, 3.6vw, 44px); line-height:1.08; }
h2{ font-size: clamp(20px, 2.2vw, 28px); line-height:1.15; margin: 6px 0 10px; }
h3{ font-size: clamp(17px, 1.7vw, 22px); line-height:1.18; }
p{ color: var(--ui-text); }

/* Meta row chips */
.meta{ color:var(--ui-muted); font-size:12px; display:flex; align-items:center; gap:10px; }
.meta .dot{ background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); }

/* Tags – pill sheen */
.tag{ border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); }
.tag:hover{ background: linear-gradient(90deg, rgba(139,92,246,.22), rgba(34,211,238,.22)); border-color: rgba(255,255,255,.28); }

/* Breaking alert – nicer */
#breaking .alert{ border-radius:14px; background: linear-gradient(180deg, rgba(255,191,71,.14), rgba(255,191,71,.10)); border-color: rgba(255,191,71,.45); }

/* Mini header */
.mini-header{ background: rgba(8,12,22,.55); border-bottom:1px solid var(--ui-border); }
.mini-header .tag{ font-size:11px; }

/* Image overlays & ribbons */
.caption{ backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.6)); }
.ribbon{ letter-spacing:.08em; box-shadow:0 14px 34px rgba(0,0,0,.4); }
.date-ribbon{ border-top-right-radius: 12px; }

/* Focus rings for a11y */
a:focus-visible, button:focus-visible{ outline: 2px solid rgba(34,211,238,.65); outline-offset: 2px; border-radius: 10px; }

/* Footer (if present) */
footer{ border-top:1px solid var(--ui-border); background: rgba(255,255,255,.02); }

/* Smoother card-media sweep */
.sweep::after{ opacity:.65; }

/* Per-article progress line – slimmer */
article::before{ left:-1px; width:2px; border-radius:2px; }

/* Headlines: elegant underline */
.card-body h3::after{ opacity:.5; height:2px; width:72px; }
.news-card:hover .card-body h3::after, article:hover .card-body h3::after{ width:110px; opacity:.95; }

/* Better spacing between articles in masonry */
.news-grid{ column-gap: 20px; }
.news-grid article{ margin: 0 0 20px; }

/* Hover smoothness */
*{ transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .18s ease, transform .18s ease; }

/* === Cinematic Intro Loader + 20+ WOW Effects === */

/* Preloader base */
#preloader{
  position: fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background: radial-gradient(80% 60% at 50% 0%, rgba(139,92,246,.15), transparent),
              radial-gradient(50% 80% at 50% 100%, rgba(34,211,238,.18), transparent),
              #070b13;
  overflow:hidden;
}
#preloader.hidden{ animation: preFadeOut .6s ease forwards; pointer-events:none; }
@keyframes preFadeOut{ to{ opacity:0; visibility:hidden }}

/* Parallax background layers (Effect 1) */
.parallax-layers .layer{ position:absolute; inset:0; pointer-events:none; }
.parallax-layers .stars{ background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent),
                                     radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.6), transparent),
                                     radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,.7), transparent);
                          animation: starDrift 80s linear infinite; opacity:.7 }
@keyframes starDrift{ from{ background-position:0 0,0 0,0 0 } to{ background-position:2000px -2000px, -1500px 1500px, 1800px 1200px } }
.parallax-layers .rays{ background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 40%),
                                   conic-gradient(from 0deg, rgba(124,77,255,.18), transparent, rgba(0,212,255,.18), transparent);
                         mix-blend-mode: screen; filter: blur(20px); animation: spinRays 16s linear infinite; opacity:.4 }
@keyframes spinRays{ to{ transform: rotate(360deg) } }
.parallax-layers .noise{ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".04"/></svg>') }

/* Logo blob morph (Effect 2) */
.logo-wrap{ position:relative; display:grid; place-items:center; gap:12px; }
.logo-blob{ width:160px; height:160px; background: radial-gradient(circle at 30% 30%, var(--ui-accent), var(--ui-accent-2));
            border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; animation: blob 10s ease-in-out infinite; box-shadow: 0 30px 80px rgba(0,0,0,.45) inset, 0 20px 60px rgba(124,77,255,.2) }
@keyframes blob{
  0%,100%{ border-radius:33% 67% 70% 30% / 30% 30% 70% 70% }
  25%{ border-radius:60% 40% 30% 70% / 60% 60% 40% 40% }
  50%{ border-radius:40% 60% 60% 40% / 40% 40% 60% 60% }
  75%{ border-radius:55% 45% 35% 65% / 55% 55% 45% 45% }
}

/* Neon logo glow (Effect 3) */
.logo-glow{ font-size: clamp(28px,4.6vw,48px); font-weight:900; letter-spacing:.04em;
  color:#dfe6ff; text-shadow: 0 0 10px rgba(139,92,246,.7), 0 0 24px rgba(34,211,238,.5) }
.logo-glow span{ color:#a7b0ff }

/* Glitch text (Effect 4) */
.logo-glitch{ position:absolute; font-size: clamp(28px,4.6vw,48px); font-weight:900; color:#fff; opacity:.2;
  animation: glitch 2s infinite }
@keyframes glitch{
  0%{ transform: translate(0,0) } 10%{ transform: translate(2px,-2px) } 20%{ transform: translate(-2px,2px) }
  30%{ transform: translate(1px,-1px) } 40%{ transform: translate(-1px,1px) } 100%{ transform: translate(0,0) }
}

/* Typewriter intro (Effect 5) */
#preloader .type-line{ margin-top: 6px; color:#bfc7ea; max-width: 80vw; text-align:center; }

/* Load bar (Effect 6) */
.load-bar{ width:min(520px,80vw); height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); margin-top:10px; border:1px solid var(--ui-border) }
.load-bar .fill{ width:0%; height:100%; background: repeating-linear-gradient(45deg, var(--ui-accent) 0 10px, var(--ui-accent-2) 10px 20px); box-shadow:0 6px 16px rgba(0,0,0,.4) }

/* Headlines rotator (Effect 7) */
.hot-headlines{ margin-top:10px; display:flex; gap:10px; color:#9aa3c9; opacity:.9; animation: floaty 6s ease-in-out infinite alternate }
@keyframes floaty{ to{ transform: translateY(-3px) }}

/* Skip button */
#preloader .skip{ margin-top:12px; }

/* Confetti canvas (Effect 8) */
#confetti{ position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen; }

/* On-page new effects */
/* Magnetic hover for headlines (Effect 9) */
.magnetic-h { display:inline-block; will-change: transform; }

/* Gradient animated text for section titles (Effect 10) */
.gtext { background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; animation: gshift 8s linear infinite }
@keyframes gshift{ to{ filter:hue-rotate(360deg) } }

/* Article ken-burns on media (Effect 11) */
.ken .card-media{ animation: ken 15s ease-in-out infinite alternate }
@keyframes ken{ from{ transform: scale(1.02) translateY(0) } to{ transform: scale(1.07) translateY(-4px) } }

/* Soft entrance blur (Effect 12) */
.soft-in { animation: softin .6s ease both }
@keyframes softin{ from{ filter: blur(6px); opacity:0; transform: translateY(8px) } to{ filter: blur(0); opacity:1; transform: translateY(0) } }

/* Scroll parallax translate (Effect 13) */
[data-parallax]{ will-change: transform }

/* Depth shadow pulse on hover (Effect 14) */
.depth:hover{ box-shadow: 0 26px 64px rgba(0,0,0,.42) }

/* Glow corners (Effect 15) */
.glow-corners{ position:relative }
.glow-corners::before, .glow-corners::after{ content:""; position:absolute; width:10px; height:10px; border:2px solid rgba(139,92,246,.6); }
.glow-corners::before{ left:10px; top:10px; border-right:none; border-bottom:none }
.glow-corners::after{ right:10px; bottom:10px; border-left:none; border-top:none }

/* Hover gradient sweep on headlines (Effect 16) */
.card-body h3{ background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.2), rgba(255,255,255,0)); background-size: 200% 100%; background-position: 120% 0; }
article:hover .card-body h3{ background-position: -20% 0; }

/* Outline glow pulse for NEW items (Effect 17) */
[data-new="true"]{ animation: borderPulse 2.5s ease-in-out infinite }
@keyframes borderPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(139,92,246,.0) } 50%{ box-shadow: 0 0 0 3px rgba(139,92,246,.28) } }

/* Tilt-on-scroll (Effect 18) */
.tilt-scroll{ transform-origin: center 80%; }

/* Sticky side progress bead (Effect 19) */
.progress-bead{ position: fixed; right: 10px; top: 50%; width: 6px; height: 6px; border-radius:50%; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); box-shadow: 0 0 24px rgba(124,77,255,.6); z-index: 40; }

/* Shine overlay on card images (Effect 20) */
.shine .card-media::before{ content:""; position:absolute; top:-100%; left:-50%; width:40%; height:300%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: shine 6s ease-in-out infinite }
@keyframes shine{ to{ left: 120%; } }

/* Cursor highlight ring (Effect 21) */
.cursor-ring{ position: fixed; width:24px; height:24px; border:2px solid rgba(255,255,255,.5); border-radius:50%; pointer-events:none; transform: translate(-50%,-50%); z-index: 999; mix-blend-mode: difference; }

/* Headline split underline (Effect 22) */
.split-underline { position:relative }
.split-underline::after{ content:""; position:absolute; left:0; bottom:-6px; width:36%; height:2px; background: linear-gradient(90deg,var(--ui-accent),transparent) }
.split-underline::before{ content:""; position:absolute; right:0; bottom:-6px; width:36%; height:2px; background: linear-gradient(90deg,transparent,var(--ui-accent-2)) }

/* Smooth scroll-to-top button (Effect 23) */
.back-to-top{ right: 16px; bottom: 16px; }

/* Section title glow (Effect 24) */
h2.section-title.gtext{ text-shadow: 0 0 24px rgba(34,211,238,.25) }

/* Image tilt hover (Effect 25) */
.card-media{ transition: transform .35s ease, filter .2s ease }

/* Ensure skip button and content are always clickable and above all layers */
#preloader .pre-content{ position: relative; z-index: 5; pointer-events: auto; }
#preloader .skip{ position: relative; z-index: 6; pointer-events: auto; }
#preloader .parallax-layers .layer{ pointer-events: none; }
#preloader #confetti{ pointer-events: none; z-index: 4; }

/* === Preloader: HARD AUTO-HIDE after 3s === */
#preloader{
  /* Kick off an auto-hide animation the moment the page renders */
  animation: preAutoHide 6s linear 0s 1 forwards;
}
#preloader.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes preAutoHide{
  0%{ opacity:1; visibility: visible; pointer-events:auto; }
  99%{ opacity:0.001; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* === Preloader: HARD AUTO-HIDE after 4s (NO FADE) === */
#preloader{ animation: preAutoHideStep 4s steps(1, end) 0s 1 forwards; }
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes preAutoHideStep{
  0%{ opacity:1; visibility: visible; pointer-events:auto; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* === Main Page Visual Improvements Pack (20+) === */

/* 1) Refined palette */
:root{
  --ui-accent:#7C4DFF;
  --ui-accent-2:#20D3F0;
  --ui-good:#34D399;
  --ui-warn:#F59E0B;
  --ui-bad:#F43F5E;
}

/* 2) Header shrink + shadow on scroll */
.site-header{ transition: padding .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header.shrink{ background: rgba(10,14,24,.75); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.site-header .bar{ padding: 8px 0; }
.site-header.shrink .bar{ padding: 4px 0; }

/* 3) Nav ink bar (works with any header nav) */
header nav{ position:relative; display:flex; gap:16px; }
header nav a{ color:var(--ui-text); text-decoration:none; padding:8px 6px; position:relative; }
.nav-ink{ position:absolute; bottom:-2px; height:2px; width:28px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); border-radius:2px; transition: transform .25s ease, width .25s ease; pointer-events:none; }

/* 4) Category tag ring on hover */
.tag{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tag:hover{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 24px rgba(0,0,0,.25); }

/* 5) Card ambient border gradient on hover */
article:hover{ outline: 1px solid rgba(255,255,255,.2); }
article:hover::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px; background: linear-gradient(135deg, rgba(124,77,255,.18), rgba(32,211,240,.18)); mix-blend-mode: overlay; opacity:.28; }

/* 6) Reading-time microbar */
.card-body .readline{ position:relative; height:4px; background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; }
.card-body .readline .fill{ height:100%; width:40%; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); }

/* 7) Byline avatar & spacing */
.meta .byline{ display:flex; align-items:center; gap:8px; }
.meta .byline img{ width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.25); }

/* 8) LIVE pulse for live articles */
article[data-live="true"] .card-body h3::before{ content:"LIVE"; display:inline-block; margin-right:8px; font-size:11px; padding:2px 6px; border-radius:999px; color:white; background: #EF4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: livePulse 1.6s infinite; }
@keyframes livePulse{ 0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.6) } 70%{ box-shadow: 0 0 0 6px rgba(239,68,68,0) } 100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0) } }

/* 9) Comment bubble bounce */
.meta .comments{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid var(--ui-border); }
.meta .comments:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.28); }

/* 10) Headline tracking tighten on hover */
article:hover h3{ letter-spacing: .1px; }

/* 11) Mouse-direction shadow */
article.follow-shadow{ transition: box-shadow .12s ease; }

/* 12) Grid gutters with clamp */
.news-grid{ column-gap: clamp(16px, 3vw, 26px); }
.news-grid article{ margin-bottom: clamp(16px, 3vw, 26px); }

/* 13) Top scroll progress */
.scroll-progress{ position: fixed; left:0; top:0; height:3px; width:0; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); z-index:200; transition: width .1s linear; }

/* 14) FAB: back to top */
.fab-top{ position: fixed; right:16px; bottom:16px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, rgba(124,77,255,.9), rgba(32,211,240,.9)); color:white; border:none; box-shadow: 0 12px 28px rgba(0,0,0,.35); cursor:pointer; opacity:0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; z-index:150; }
.fab-top.show{ opacity:1; transform: translateY(0); }

/* 15) Section divider dotted gradient */
.section-div{ height:2px; background-image: radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 8px 2px; opacity:.6; margin: 16px 0; }

/* 16) Category color mapping via data-cat */
article[data-cat*="Announcements"]{ --cat: 280; }
article[data-cat*="Patches"]{ --cat: 200; }
article[data-cat*="Events"]{ --cat: 140; }
article[data-cat*="Guides"]{ --cat: 20; }
article[data-cat*="Community"]{ --cat: 320; }
article::before{ background: linear-gradient(180deg, hsla(var(--cat,260), 85%, 60%, .6), transparent); }

/* 17) Soft vignette over media */
.card-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.28)); pointer-events:none; }

/* 18) Inline links with animated underline */
article a{ position:relative; text-decoration:none; color:#dfe6ff; }
article a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0%; height:2px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); transition: width .2s ease; }
article a:hover::after{ width:100%; }

/* 19) Footer top gradient line */
footer{ border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); }

/* 20) Accessible focus */
a:focus-visible, button:focus-visible, article:focus-within{ outline:2px solid rgba(32,211,240,.65); outline-offset: 2px; border-radius: 10px; }

/* 21) Motion-safe */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* 22) Headline split underline polish (from earlier) */
.split-underline::after, .split-underline::before{ height:3px; opacity:.8; }

/* === Visual Upgrades Pack #2 (10) === */

/* Guard: never display these again */
.card-share, .bookmark { display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* 1) Themed text selection */
::selection { background: rgba(124,77,255,.35); color: #fff; }
::-moz-selection { background: rgba(124,77,255,.35); color: #fff; }

/* 2) Styled scrollbars (WebKit) + Firefox color */
:root{ scrollbar-color: rgba(124,77,255,.6) rgba(255,255,255,.05); scrollbar-width: thin; }
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(124,77,255,.8), rgba(32,211,240,.8)); border-radius: 10px; border: 2px solid rgba(255,255,255,.08); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(124,77,255,1), rgba(32,211,240,1)); }

/* 3) Header halo (toggles with .halo class) */
.site-header.halo { box-shadow: 0 18px 40px rgba(124,77,255,.18); position: sticky; top: 0; backdrop-filter: blur(10px); }

/* 4) Photo color grading */
.card-media { filter: saturate(1.05) contrast(1.05) brightness(1.01); }
article:hover .card-media { filter: saturate(1.12) contrast(1.08) brightness(1.02); }

/* 5) Headline letterpress */
article h3 { text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 20px rgba(124,77,255,.08); }

/* 6) Gradient bullets in article lists */
article ul { list-style: none; padding-left: 0; }
article ul li { position: relative; padding-left: 18px; }
article ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); box-shadow: 0 0 8px rgba(124,77,255,.35); transform: translateY(-50%); }

/* 7) Corner glow accents (applied via .corner-glow) */
.corner-glow { position: relative; }
.corner-glow::before, .corner-glow::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; filter: blur(12px); opacity: .55; }
.corner-glow::before { left: 10px; top: 10px; background: radial-gradient(circle, rgba(124,77,255,.8), transparent 60%); }
.corner-glow::after { right: 10px; bottom: 10px; background: radial-gradient(circle, rgba(32,211,240,.8), transparent 60%); }

/* 8) Media grain overlay (applied via .media-noise) */
.media-noise::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".8"/></svg>');
}

/* 9) Section title breathing glow */
h2.section-title { position: relative; }
h2.section-title::after { content:""; position:absolute; left:0; bottom:-6px; width: 90px; height: 3px; border-radius:3px; background: linear-gradient(90deg,var(--ui-accent),var(--ui-accent-2)); animation: breath 3.4s ease-in-out infinite; opacity:.85; }
@keyframes breath{ 0%,100%{ transform: scaleX(.95); } 50%{ transform: scaleX(1.08); } }

/* 10) Peek tilt on article hover */
article.peek { transform-style: preserve-3d; transition: transform .25s ease; }
article.peek:hover { transform: perspective(800px) rotateX(1.2deg) rotateY(-1.2deg); }

/* === Visual Upgrades Pack #3 (5 items) === */

/* 1) Animated header halo rail */
.site-header{ position: sticky; top:0; z-index:60; }
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2), var(--ui-accent));
  background-size: 200% 100%; animation: rail 10s linear infinite; opacity:.6;
}
@keyframes rail{ to{ background-position: 200% 0; }}

/* 2) Article hover spotlight that follows the cursor (JS updates CSS vars) */
article{ position:relative; --spot-x:50%; --spot-y:0%; }
article::after{
  content:""; position:absolute; inset:-2px; border-radius:16px; pointer-events:none;
  background: radial-gradient(260px 180px at var(--spot-x) var(--spot-y), rgba(255,255,255,.10), transparent 60%);
  opacity:0; transition: opacity .15s ease;
}
article:hover::after{ opacity:1; }

/* 3) Tag pop + inner light */
.tag{ transition: transform .12s ease, box-shadow .15s ease; }
.tag:hover{ transform: translateY(-1px) scale(1.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 20px rgba(0,0,0,.25); }

/* 4) Subtle dotted canvas behind main content */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.04;
  background-image: radial-gradient(#fff 0.75px, transparent 0.75px);
  background-size: 14px 14px;
}

/* 5) Typography polish for readability */
body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; font-variant-ligatures: contextual common-ligatures; }
main .container p{ max-width: 70ch; }

/* === Visual Effects Pack #4 (5 items) === */

/* A) Aurora background ribbons */
body::after{
  content:""; position:fixed; inset:-20% -20% auto -20%; height:60vh; pointer-events:none; z-index:-1;
  background: conic-gradient(from 120deg at 30% 40%, rgba(124,77,255,.25), transparent 40%, rgba(32,211,240,.22), transparent 70%),
              radial-gradient(60% 80% at 70% 10%, rgba(124,77,255,.2), transparent 60%);
  filter: blur(60px); opacity:.12; animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform: translateY(-6vh) rotate(0deg) scale(1); }
  100%{ transform: translateY(3vh) rotate(8deg) scale(1.05); }
}

/* B) Word-by-word headline reveal */
.word-reveal span{ display:inline-block; opacity:0; transform: translateY(6px); animation: wordin .6s ease forwards; }
.word-reveal span:nth-child(1){ animation-delay:.02s } .word-reveal span:nth-child(2){ animation-delay:.06s }
.word-reveal span:nth-child(3){ animation-delay:.10s } .word-reveal span:nth-child(4){ animation-delay:.14s }
.word-reveal span:nth-child(5){ animation-delay:.18s } .word-reveal span:nth-child(6){ animation-delay:.22s }
.word-reveal span:nth-child(7){ animation-delay:.26s } .word-reveal span:nth-child(8){ animation-delay:.30s }
.word-reveal span:nth-child(9){ animation-delay:.34s } .word-reveal span:nth-child(10){ animation-delay:.38s }
@keyframes wordin{ to{ opacity:1; transform: translateY(0) }}

/* C) Scroll-activated border glow for articles */
article.inview{ box-shadow: 0 20px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(124,77,255,.28) inset; }
article.inview::before{ width:3px; } /* piggybacks on existing ::before progress line */

/* D) Image depth parallax on scroll */
.depth-wrap{ perspective: 800px; }
.depth-wrap .card-media{ transform: translateZ(0); will-change: transform; transition: transform .25s ease; }

/* E) Tag ripple (pure CSS) */
.tag{ position:relative; overflow:hidden; }
.tag::before{
  content:""; position:absolute; inset:-200% -200% -200% -200%;
  background: conic-gradient(from 0deg, rgba(124,77,255,.0), rgba(124,77,255,.25), rgba(32,211,240,.25), rgba(124,77,255,.0));
  transform: translate(-50%,-50%); opacity:0; transition: opacity .2s ease; pointer-events:none;
}
.tag:hover::before{ opacity:.45; animation: rotateSweep 2s linear infinite; }
@keyframes rotateSweep{ to{ transform: translate(-50%,-50%) rotate(1turn); } }

/* Kill any residual "neon" theme control visuals (belt & suspenders) */
[class*="neon" i], [id*="neon" i], [data-theme*="neon"] { display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* === Visual Upgrades Pack #5 (5 items) === */

/* 1) Section title scroll progress underline */
h2.section-title{ position:relative; }
h2.section-title::after{
  content:""; position:absolute; left:0; bottom:-8px; height:3px; width: calc(var(--sec-prog, 0) * 100%);
  background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); border-radius:3px; transition: width .08s linear;
}

/* 2) Image hover lens (magnify spotlight) */
.hover-lens .card-media{ position:relative; overflow:hidden; }
.hover-lens .card-media::after{
  content:""; position:absolute; width: var(--lens-r, 0px); height: var(--lens-r, 0px);
  left: calc(var(--lens-x, 50%) - var(--lens-r, 0px)/2); top: calc(var(--lens-y, 50%) - var(--lens-r, 0px)/2);
  border-radius: 50%; pointer-events:none; mix-blend-mode: screen; opacity: .75;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,.05) 60%, transparent 70%);
}

/* 3) Halo border (conic gradient 1px ring) */
.halo-border{ position:relative; }
.halo-border::before{
  content:""; position:absolute; inset:-1px; border-radius:16px; padding:1px; background: conic-gradient(from 0deg, var(--ui-accent), var(--ui-accent-2), var(--ui-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.25; pointer-events:none;
}

/* 4) Copy toast */
.copy-toast{ position: fixed; z-index: 200; padding:8px 10px; border-radius:10px; color:white;
  background: rgba(20,20,30,.8); border:1px solid rgba(255,255,255,.18); transform: translate(-50%,-50%) scale(.96);
  animation: toastIn .18s ease forwards; pointer-events:none;
}
@keyframes toastIn{ to{ transform: translate(-50%,-50%) scale(1); opacity:1 }}

/* 5) Edge glow sides */
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: linear-gradient(90deg, rgba(124,77,255,.12), transparent 12%, transparent 88%, rgba(32,211,240,.12));
  opacity:.08;
}