/* =========================================================
   POKEGOHUB — Premium FX layer
   Pure CSS3 + vanilla JS. No frameworks. Additive only — this
   file only adds visual polish on top of main.css and never
   changes markup structure that content/SEO depend on.
   ========================================================= */

:root{
  --fx-star: rgba(255,255,255,.85);
  --fx-grid-line: rgba(255,255,255,.05);
  --type-normal:   linear-gradient(135deg,#cbbfa0,#a79f8a);
  --type-fire:     linear-gradient(135deg,#ff9a3c,#e0301e);
  --type-water:    linear-gradient(135deg,#3ba7ff,#0e6ba8);
  --type-electric: linear-gradient(135deg,#ffe066,#e0a800);
  --type-grass:    linear-gradient(135deg,#4ade80,#0f6b3a);
  --type-ice:      linear-gradient(135deg,#a9ecff,#2f8fc9);
  --type-fighting: linear-gradient(135deg,#e0685c,#7c1f16);
  --type-poison:   linear-gradient(135deg,#c66cf0,#6b1a8a);
  --type-ground:   linear-gradient(135deg,#e0ab5c,#8a4f1a);
  --type-flying:   linear-gradient(135deg,#b9dfff,#6fa3d9);
  --type-psychic:  linear-gradient(135deg,#ff8fd6,#9a2ba8);
  --type-bug:      linear-gradient(135deg,#c3e86a,#5a8a1e);
  --type-rock:     linear-gradient(135deg,#c2a877,#6a5734);
  --type-ghost:    linear-gradient(135deg,#a56cf0,#4a1a80);
  --type-dragon:   linear-gradient(135deg,#5b8cff,#8a2be2);
  --type-dark:     linear-gradient(135deg,#6b6b6b,#1a1a1a);
  --type-steel:    linear-gradient(135deg,#d9e2ea,#6c7a89);
  --type-fairy:    linear-gradient(135deg,#ffb3e6,#d9509e);
}

@media (prefers-reduced-motion: reduce){
  .pgh-fx-bg, .pgh-fx-radar, .pgh-fx-particle, .pgh-fx-blob, .pgh-fx-circle, .pgh-fx-star{
    animation:none !important;
  }
}

/* ---------------------------------------------------------
   1. Global animated background layer
   Fixed behind everything, pointer-events:none, cheap to
   paint (transform/opacity only — no layout thrash).
--------------------------------------------------------- */
.pgh-fx-bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
body.pgh > *:not(.pgh-fx-bg){ position:relative; z-index:1; }

.pgh-fx-stars{ position:absolute; inset:0; }
.pgh-fx-star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:var(--fx-star);
  animation:pgh-twinkle 4.5s ease-in-out infinite;
}
@keyframes pgh-twinkle{
  0%,100%{ opacity:.15; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.6); }
}

.pgh-fx-particle{
  position:absolute; bottom:-10px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  animation:pgh-float-up linear infinite;
}
@keyframes pgh-float-up{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}

.pgh-fx-blob{
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.28; will-change:transform;
  animation:pgh-blob-move 26s ease-in-out infinite;
}
.pgh-fx-blob-1{ width:460px; height:460px; top:-120px; left:-100px; background:radial-gradient(circle, var(--accent-a), transparent 70%); }
.pgh-fx-blob-2{ width:520px; height:520px; top:30%; right:-160px; background:radial-gradient(circle, var(--accent-b), transparent 70%); animation-duration:32s; animation-delay:-6s; }
.pgh-fx-blob-3{ width:380px; height:380px; bottom:-140px; left:20%; background:radial-gradient(circle, var(--accent-c), transparent 70%); animation-duration:22s; animation-delay:-12s; }
@keyframes pgh-blob-move{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.08); }
  66%{ transform:translate(-30px,25px) scale(.95); }
}

.pgh-fx-circle{
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  animation:pgh-circle-drift 40s linear infinite;
}
.pgh-fx-circle-1{ width:900px; height:900px; top:-350px; right:-300px; }
.pgh-fx-circle-2{ width:600px; height:600px; bottom:-260px; left:-200px; animation-duration:55s; animation-direction:reverse; }
@keyframes pgh-circle-drift{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* ---------------------------------------------------------
   2. Radar sweep (behind hero / section content)
--------------------------------------------------------- */
.pgh-hero{ position:relative; }
.pgh-hero > *:not(.pgh-fx-radar){ position:relative; z-index:1; }
.pgh-fx-radar{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.pgh-fx-radar::before{
  content:""; position:absolute;
  width:140%; aspect-ratio:1/1; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, rgba(59,130,246,.22), transparent 22%, transparent 100%);
  border-radius:50%;
  filter:blur(18px);
  opacity:.55;
  animation:pgh-radar-spin 7s linear infinite;
}
.pgh-fx-radar::after{
  content:""; position:absolute;
  width:70%; aspect-ratio:1/1; left:50%; top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(59,130,246,.16);
  border-radius:50%;
  box-shadow:0 0 0 60px rgba(59,130,246,.03), 0 0 0 120px rgba(59,130,246,.02);
}
@keyframes pgh-radar-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---------------------------------------------------------
   3. GPS-inspired grid
--------------------------------------------------------- */
.pgh-fx-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--fx-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 85%);
  mask-image:radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 85%);
}

/* ---------------------------------------------------------
   4. Glassmorphism upgrade for existing card-like surfaces
--------------------------------------------------------- */
.pgh-card,
.pgh-widget-box,
.pgh-qi-card,
.pgh-faq-item,
.pgh-newsletter,
.pgh-toc,
.pgh-author-box,
.pgh-widget-countdown,
.pgh-widget-event,
.pgh-widget-raid-rotation{
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  position:relative;
}
.pgh-card,
.pgh-widget-box,
.pgh-qi-card,
.pgh-widget-countdown,
.pgh-widget-event,
.pgh-widget-raid-rotation{
  border-radius:var(--radius-l);
}
.pgh-card::after,
.pgh-widget-box::after,
.pgh-qi-card::after,
.pgh-widget-countdown::after,
.pgh-widget-event::after,
.pgh-widget-raid-rotation::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(168,85,247,.28) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.pgh-card:hover,
.pgh-widget-box:hover,
.pgh-qi-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hard);
}

/* ---------------------------------------------------------
   5. Pokémon sprite / pill polish
--------------------------------------------------------- */
.pgh-sprite{
  transition:transform .3s var(--ease), filter .3s var(--ease);
}
.pgh-pill:hover .pgh-sprite,
.pgh-tag:hover .pgh-sprite,
a:hover > .pgh-sprite{
  transform:scale(1.15) translateY(-2px);
  filter:drop-shadow(0 6px 14px rgba(168,85,247,.55));
}
.pgh-featured-mon .pgh-sprite{
  animation:pgh-float 3.4s ease-in-out infinite;
}
@keyframes pgh-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------------------------------------------------------
   6. Buttons — gradient sheen + glow on hover
--------------------------------------------------------- */
.pgh-btn{ position:relative; overflow:hidden; isolation:isolate; }
.pgh-btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
}
.pgh-btn:hover::before{ transform:translateX(120%); }
.pgh-btn-ghost:hover{ box-shadow:0 0 0 1px var(--border-strong), 0 12px 28px rgba(59,130,246,.18); }

/* ---------------------------------------------------------
   7. Type badges — [pgh_type_badge] + table headers
--------------------------------------------------------- */
.pgh-type-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:100px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pgh-type-badge:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.35); }
.pgh-type-normal{ background:var(--type-normal); }
.pgh-type-fire{ background:var(--type-fire); }
.pgh-type-water{ background:var(--type-water); }
.pgh-type-electric{ background:var(--type-electric); color:#3a2c00; text-shadow:none; }
.pgh-type-grass{ background:var(--type-grass); }
.pgh-type-ice{ background:var(--type-ice); color:#053044; text-shadow:none; }
.pgh-type-fighting{ background:var(--type-fighting); }
.pgh-type-poison{ background:var(--type-poison); }
.pgh-type-ground{ background:var(--type-ground); }
.pgh-type-flying{ background:var(--type-flying); color:#1a3a55; text-shadow:none; }
.pgh-type-psychic{ background:var(--type-psychic); }
.pgh-type-bug{ background:var(--type-bug); color:#1c3300; text-shadow:none; }
.pgh-type-rock{ background:var(--type-rock); }
.pgh-type-ghost{ background:var(--type-ghost); }
.pgh-type-dragon{ background:var(--type-dragon); }
.pgh-type-dark{ background:var(--type-dark); }
.pgh-type-steel{ background:var(--type-steel); color:#1e2933; text-shadow:none; }
.pgh-type-fairy{ background:var(--type-fairy); color:#4a0f30; text-shadow:none; }

/* ---------------------------------------------------------
   8. Event widgets
--------------------------------------------------------- */
.pgh-widget-countdown{
  border:1px solid var(--border); background:var(--surface);
  padding:20px; margin-bottom:18px; text-align:center;
}
.pgh-widget-countdown h4{ margin:0 0 4px; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.pgh-widget-countdown .pgh-countdown-title{ font-size:16px; font-weight:700; margin-bottom:14px; }
.pgh-countdown-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pgh-countdown-cell{
  background:var(--surface-strong); border:1px solid var(--border);
  border-radius:var(--radius-s); padding:10px 4px;
}
.pgh-countdown-num{
  font-size:24px; font-weight:800; line-height:1;
  background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pgh-countdown-unit{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; display:block; }
.pgh-countdown-ended{ font-weight:700; color:var(--success); padding:10px 0; }

.pgh-widget-event{
  border:1px solid var(--border); background:var(--surface);
  padding:18px; margin-bottom:18px;
}
.pgh-widget-event h4{ margin:0 0 12px; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.pgh-widget-event-media{ border-radius:var(--radius-m); overflow:hidden; aspect-ratio:16/9; margin-bottom:12px; }
.pgh-widget-event-media img{ width:100%; height:100%; object-fit:cover; }
.pgh-widget-event a{ font-weight:700; font-size:15px; }
.pgh-widget-event a:hover{ color:var(--accent-a); }
.pgh-widget-event .meta{ color:var(--text-faint); font-size:13px; margin-top:6px; }

.pgh-widget-raid-rotation{
  border:1px solid var(--border); background:var(--surface);
  padding:18px; margin-bottom:18px;
}
.pgh-widget-raid-rotation h4{ margin:0 0 12px; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); }
.pgh-raid-boss-list{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---------------------------------------------------------
   9. Header shrink-on-scroll
--------------------------------------------------------- */
.pgh-nav{ transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.pgh-nav.is-scrolled{ box-shadow:0 8px 30px rgba(0,0,0,.35); background:rgba(8,9,12,.86); }
.pgh-nav.is-scrolled .pgh-nav-inner{ padding-top:8px; padding-bottom:8px; }
.pgh-nav.is-scrolled .pgh-logo .orb{ width:22px; height:22px; }

/* ---------------------------------------------------------
   10. Footer — gradient accent + social + newsletter
--------------------------------------------------------- */
.pgh-footer{ position:relative; overflow:hidden; }
.pgh-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent-gradient);
}
.pgh-footer-social{ display:flex; gap:10px; margin-top:16px; }
.pgh-footer-social a{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  transition:transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.pgh-footer-social a:hover{
  transform:translateY(-3px);
  background:var(--accent-gradient);
  box-shadow:0 10px 24px rgba(168,85,247,.4);
}
.pgh-footer-social svg{ width:17px; height:17px; }
.pgh-footer .pgh-newsletter{ margin-top:40px; }

/* ---------------------------------------------------------
   11. Scroll-reveal animation variants
   (data-anim on top of the existing data-reveal fade)
--------------------------------------------------------- */
[data-anim]{ opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-anim="fade"]{ transform:none; }
[data-anim="scale"]{ transform:scale(.92); }
[data-anim="slide-up"]{ transform:translateY(28px); }
[data-anim="slide-left"]{ transform:translateX(-28px); }
[data-anim="slide-right"]{ transform:translateX(28px); }
[data-anim].pgh-in-view{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   12. Accessibility — visible focus states
--------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--accent-a);
  outline-offset:3px;
  border-radius:6px;
}

@media (max-width:640px){
  .pgh-fx-circle-1, .pgh-fx-circle-2{ display:none; }
  .pgh-countdown-grid{ gap:6px; }
  .pgh-countdown-num{ font-size:19px; }
}