/* PhishDestroy UX v2 — Premium visual layer */
/* Applies above pd-atmosphere.css; no js framework required */

/* ── 1. BODY BACKGROUND: rich gradient instead of flat #070c12 ── */
html[data-pd-atmosphere] body {
  background: radial-gradient(ellipse 120% 60% at 30% 0, #0d1f2d, #030712 68%) !important;
}

/* ── 2. CARD GLASSMORPHISM: explicit surface on transparent cards ── */
html[data-pd-atmosphere] body :is(
  .detection-card, .api-info-card, .pd-dash-card,
  .panel, .analytics-grid .panel, .reg-table,
  .stat-card, .info-card, .pd-namesilo-card,
  .tip-card, .news-card, .article-card,
  .pd-hacker-card, .scam-card
) {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── 3. CARD HOVER: lift + shimmer ── */
html[data-pd-atmosphere] body .detection-card,
html[data-pd-atmosphere] body .pd-dash-card,
html[data-pd-atmosphere] body .pd-flag-card,
html[data-pd-atmosphere] body .panel,
html[data-pd-atmosphere] body .res-card,
html[data-pd-atmosphere] body .news-card,
html[data-pd-atmosphere] body .article-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  will-change: transform;
}
html[data-pd-atmosphere] body .detection-card::after,
html[data-pd-atmosphere] body .pd-dash-card::after,
html[data-pd-atmosphere] body .pd-flag-card::after,
html[data-pd-atmosphere] body .panel::after,
html[data-pd-atmosphere] body .news-card::after,
html[data-pd-atmosphere] body .article-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
html[data-pd-atmosphere] body .detection-card:hover::after,
html[data-pd-atmosphere] body .pd-dash-card:hover::after,
html[data-pd-atmosphere] body .pd-flag-card:hover::after,
html[data-pd-atmosphere] body .panel:hover::after,
html[data-pd-atmosphere] body .news-card:hover::after,
html[data-pd-atmosphere] body .article-card:hover::after {
  background-position: -200% 0;
}
html[data-pd-atmosphere] body .detection-card:hover,
html[data-pd-atmosphere] body .pd-dash-card:hover,
html[data-pd-atmosphere] body .pd-flag-card:hover,
html[data-pd-atmosphere] body .panel:hover,
html[data-pd-atmosphere] body .res-card:hover,
html[data-pd-atmosphere] body .news-card:hover,
html[data-pd-atmosphere] body .article-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42), 0 0 18px rgba(34,197,94,0.07) !important;
}

/* ── 4. THREAT INDICATORS: soft glow on badges ── */
.pd-score-badge[data-score="critical"],
.score-critical, .badge-danger,
.pd-threat-badge--critical {
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.35), 0 0 4px rgba(239, 68, 68, 0.6) !important;
}
.pd-score-badge[data-score="safe"],
.score-safe, .badge-safe {
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.3) !important;
}

/* PULSE: continuous glow for critical badges */
@keyframes pdPulseCritical {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(239,68,68,.5); }
  50%       { box-shadow: 0 0 20px 4px rgba(239,68,68,.2); }
}
.pd-threat-badge--critical,
.score-badge[class*="critical"],
.pd-risk-critical {
  animation: pdPulseCritical 2.4s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .pd-threat-badge--critical,
  .score-badge[class*="critical"],
  .pd-risk-critical { animation: none !important; }
}

/* ── 5. SEARCH BAR: prominent, hero-sized ── */
.pd-search-section {
  padding: 52px 0 60px !important;
}
.pd-search-wrap {
  max-width: 700px !important;
  margin: 0 auto !important;
}
.pd-search-label {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.01em !important;
}
.pd-search-form {
  border-radius: 14px !important;
  box-shadow: 0 0 0 1px rgba(99,217,176,0.22), 0 8px 32px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
  transition: box-shadow 0.22s ease !important;
}
.pd-search-section:focus-within .pd-search-form {
  box-shadow:
    0 0 0 2px rgba(34,197,94,0.55),
    0 0 36px rgba(34,197,94,0.14),
    0 8px 32px rgba(0,0,0,0.35) !important;
}
.pd-search-form input[type=text] {
  font-size: 1.08rem !important;
  padding: 18px 16px 18px 48px !important;
  background: rgba(15,23,42,0.7) !important;
  color: #f1f5f9 !important;
}
.pd-search-form button[type=submit] {
  padding: 0 28px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 0 12px 12px 0 !important;
}
.pd-search-hints {
  margin-top: 14px !important;
  opacity: 0.75 !important;
  font-size: 0.875rem !important;
}

/* ── 6. SCROLL REVEAL: base state ── */
.pd-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.2,0.7,0.2,1), transform 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.pd-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pd-reveal-d1 { transition-delay: 0.1s !important; }
.pd-reveal-d2 { transition-delay: 0.2s !important; }
.pd-reveal-d3 { transition-delay: 0.3s !important; }
@media (prefers-reduced-motion: reduce) {
  .pd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── 7. HERO LOAD ANIMATION: blur-in staggered ── */
@keyframes pdHeroBlurIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pd-hero-animate-h1 {
  animation: pdHeroBlurIn 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
  animation-delay: 0s;
}
.pd-hero-animate-sub {
  animation: pdHeroBlurIn 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
  animation-delay: 0.15s;
}
.pd-hero-animate-cta {
  animation: pdHeroBlurIn 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
  animation-delay: 0.3s;
}
.pd-hero-animate-search {
  animation: pdHeroBlurIn 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
  animation-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .pd-hero-animate-h1,
  .pd-hero-animate-sub,
  .pd-hero-animate-cta,
  .pd-hero-animate-search { animation: none !important; }
}

/* ── 8. LIVE FEED: slide-in for new cards ── */
@keyframes pdSlideInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pd-live-entry-new {
  animation: pdSlideInDown 0.4s cubic-bezier(0.2,0.7,0.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .pd-live-entry-new { animation: none !important; }
}

/* ── 9. SKELETON LOADERS ── */
@keyframes pdSkeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pd-skeleton {
  background: linear-gradient(90deg, rgba(30,41,59,0.8) 25%, rgba(51,65,85,0.6) 50%, rgba(30,41,59,0.8) 75%);
  background-size: 200% 100%;
  animation: pdSkeleton 1.4s ease infinite;
  border-radius: 6px;
}
.pd-skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.pd-skeleton-block {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .pd-skeleton { animation: none !important; background: rgba(30,41,59,0.8); }
}

/* ── 10. DOMAIN SCORE RING SVG ── */
.pd-score-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pd-score-ring-wrap .pd-score-ring {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.pd-score-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1);
}
.pd-score-ring .track { stroke: rgba(255,255,255,0.08); }
.pd-score-ring .progress { stroke: #22c55e; }
.pd-score-ring .progress[data-severity="critical"] { stroke: #ef4444; }
.pd-score-ring .progress[data-severity="high"]     { stroke: #f97316; }
.pd-score-ring .progress[data-severity="medium"]   { stroke: #fbbf24; }

/* ── 11. BUTTON POLISH ── */
html[data-pd-atmosphere] body :is(.btn, .btn-primary, .btn-ghost, .cyber-btn) {
  border-radius: 8px !important;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
html[data-pd-atmosphere] body :is(.btn-primary, .cyber-btn.cyber-btn-green):hover {
  filter: brightness(1.08) !important;
}
html[data-pd-atmosphere] body :is(.btn, .btn-primary):active {
  transform: scale(0.97) !important;
}

/* ── 12. MOBILE: containers, overflow, grids, touch targets ── */
@media (max-width: 768px) {
  .container, .container-fluid, .wrap, .pd-container, main > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  /* Technical string overflow */
  .domain-detail-val, .ip-addr, .hash-val, .pd-domain-hero__domain,
  .sec td, .pd-info-val, code, .mono-val,
  .threats td, .threat-url { word-break: break-all !important; overflow-wrap: break-word !important; }
  /* Scrollable code blocks */
  pre, .code-block, .terminal-output { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  /* Grid collapse */
  .detections-grid, .analytics-grid, .pd-dash-grid, .pd-where-grid,
  .pd-flagship-grid, .pd-dir-grid, .pd-ops-grid, .battle-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Touch targets */
  button, .btn, input[type=text], input[type=search],
  select, a.btn, .pill, .filter-btn, .cyber-btn {
    min-height: 48px !important;
  }
  .pd-search-form input[type=text] {
    min-height: 52px !important;
    font-size: 1rem !important;
  }
  /* Nav items touch target */
  .pd-site-header nav a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
}

/* ── 13. SECTION SPACING on homepage ── */
html[data-pd-atmosphere][data-page=home] body section:not(.home-banner-section) {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 768px) {
  html[data-pd-atmosphere][data-page=home] body section:not(.home-banner-section) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
}

/* ── 14. TECHNICAL STRING OVERFLOW (all pages) ── */
.pd-domain-hero__domain, .domain-name-display, h1[class*="domain"] {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* ── 15a. SEARCH IN HERO: when embedded inline inside hero ── */
.pd-search-hero-inline {
  margin-top: 28px !important;
  padding: 0 !important;
  max-width: 600px !important;
}
.pd-search-hero-inline .pd-search-wrap {
  max-width: 100% !important;
  margin: 0 !important;
}
.pd-search-hero-inline .pd-search-label {
  display: none !important; /* label shown as h1 placeholder */
}
.pd-search-hero-inline .pd-search-form input[type=text] {
  font-size: 1rem !important;
  padding: 16px 14px 16px 44px !important;
}
.pd-search-hero-inline .pd-search-hints {
  font-size: 0.82rem !important;
  margin-top: 10px !important;
}

/* ── 15. NameSilo banner: de-emphasize, move visual weight down ── */
.pd-namesilo-banner {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  opacity: 0.88 !important;
}
.pd-namesilo-card {
  background: rgba(15,23,42,0.5) !important;
  border: 1px solid rgba(239,68,68,0.15) !important;
}

/* ── 16. DASH CARD: Linear-style subtle gradient (replaces flat rgba) ── */
html[data-pd-atmosphere] body .pd-dash-card {
  background: linear-gradient(180deg, rgba(22,22,26,0.62) 0%, rgba(9,9,11,0.62) 100%) !important;
}

/* ── 17. TECHNICAL STRING OVERFLOW: all viewports, not just mobile ── */
code, .domain-name, .wallet-hash, .hash-val,
.pd-domain-hero__domain, .domain-name-display,
a[href*="/domain/"] .pd-live-domain,
.live-domain, .threat-domain, .feed-domain {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* ── 18. CYBER-BTN PRESS STATE ── */
html[data-pd-atmosphere] body .cyber-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}