/* amp-pops.css — sitewide card animations & visual energy
   Loaded after amp-shell.css and amp-dtc.css so it can layer on top.
   Goal: make EVERY card feel alive without breaking existing layouts. */

/* ============================================================
   ENTRANCE: cards fade+lift in as they enter viewport
   ============================================================ */
@keyframes ampPopIn {
  0%   { opacity: 0; transform: translateY(18px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Apply to common card-like elements */
.console,
.cause,
.symptom,
.callout,
.cta,
.forum,
.plain,
.toc,
.verdict-box,
.main-col > section,
.sidebar > div,
.sidebar > section,
.amp-related,
.amp-author-byline,
.trust-strip {
  animation: ampPopIn .65s cubic-bezier(.16,1,.3,1) both;
}

/* Stagger via :nth-child for natural cascade */
.main-col > section:nth-child(1) { animation-delay: .05s; }
.main-col > section:nth-child(2) { animation-delay: .12s; }
.main-col > section:nth-child(3) { animation-delay: .18s; }
.main-col > section:nth-child(4) { animation-delay: .24s; }
.main-col > section:nth-child(5) { animation-delay: .30s; }
.main-col > section:nth-child(6) { animation-delay: .36s; }
.main-col > section:nth-child(n+7) { animation-delay: .42s; }

.cause:nth-child(1) { animation-delay: .08s; }
.cause:nth-child(2) { animation-delay: .15s; }
.cause:nth-child(3) { animation-delay: .22s; }
.cause:nth-child(4) { animation-delay: .29s; }

.symptom:nth-child(1) { animation-delay: .10s; }
.symptom:nth-child(2) { animation-delay: .18s; }
.symptom:nth-child(3) { animation-delay: .26s; }

/* ============================================================
   HOVER LIFT: every card subtly rises on hover
   ============================================================ */
.console,
.cause,
.symptom,
.callout,
.cta,
.forum,
.plain,
.verdict-box,
.main-col > section,
.sidebar > div,
.sidebar > section {
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease;
  will-change: transform;
}

.cause:hover,
.symptom:hover,
.callout:hover,
.forum:hover,
.main-col > section:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.2);
}

[data-theme="dark"] .cause:hover,
[data-theme="dark"] .symptom:hover,
[data-theme="dark"] .callout:hover,
[data-theme="dark"] .forum:hover,
[data-theme="dark"] .main-col > section:hover {
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.55), 0 4px 12px -4px rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.35) !important;
}

/* ============================================================
   PILL / CHIP HOVER: pills and chips at top of pages "pop"
   ============================================================ */
.pill,
.trust-chip,
.console-status,
.code-readout-sub {
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pill:hover,
.trust-chip:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.1);
}

/* ============================================================
   LINKS in cards: animated underline that draws on hover
   ============================================================ */
.main-col a:not(.nav-cta):not(.cta-btn):not(.ymm-row button):not(.amp-ec-btn),
.callout a,
.forum a,
.amp-related a {
  position: relative;
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s ease;
  text-decoration: none !important;
}
.main-col a:not(.nav-cta):not(.cta-btn):not(.ymm-row button):not(.amp-ec-btn):hover,
.callout a:hover,
.forum a:hover,
.amp-related a:hover {
  background-size: 100% 1.5px;
}

/* ============================================================
   BUTTONS: every CTA button gets a "press" feel
   ============================================================ */
button:not(.amp-ec-btn),
.nav-cta,
.cta-btn,
.ymm-row button {
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
  will-change: transform;
}
button:not(.amp-ec-btn):not(:disabled):hover,
.nav-cta:hover,
.cta-btn:not(:disabled):hover,
.ymm-row button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
button:not(.amp-ec-btn):not(:disabled):active,
.nav-cta:active,
.cta-btn:not(:disabled):active,
.ymm-row button:not(:disabled):active {
  transform: translateY(0);
}

/* ============================================================
   HERO H1 & code-readout: subtle gradient text on dark theme
   ============================================================ */
[data-theme="dark"] .code-readout {
  background: linear-gradient(135deg, #f1f5f9 0%, #93c5fd 50%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(59,130,246,.3));
}

/* ============================================================
   IMAGE & DIAGRAM hover: subtle zoom
   ============================================================ */
.main-col img:not([class*="logo"]):not([class*="icon"]),
.main-col svg:not([class*="logo"]):not([class*="icon"]) {
  transition: transform .35s ease, filter .25s ease;
}
.main-col img:not([class*="logo"]):not([class*="icon"]):hover,
.main-col svg:not([class*="logo"]):not([class*="icon"]):hover {
  transform: scale(1.015);
}

/* ============================================================
   SCROLL PROGRESS BAR: gradient instead of flat
   ============================================================ */
#ampScrollProgress {
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%) !important;
  box-shadow: 0 0 12px rgba(59,130,246,.6);
}

/* ============================================================
   NAV "AmpAuto" logo: subtle shine on hover
   ============================================================ */
.nav-logo {
  transition: filter .2s ease;
}
.nav-logo:hover {
  filter: drop-shadow(0 0 8px rgba(59,130,246,.4));
}

/* ============================================================
   ACCESSIBILITY: kill all animations for users who prefer it
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .console, .cause, .symptom, .callout, .cta, .forum, .plain,
  .toc, .verdict-box, .main-col > section, .sidebar > div, .sidebar > section,
  .amp-related, .amp-author-byline, .trust-strip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  *:hover {
    transform: none !important;
  }
}

/* ============================================================
   MOBILE: tone down animations slightly (saves battery, feels snappier)
   ============================================================ */
@media (max-width: 600px) {
  .console, .cause, .symptom, .callout, .cta, .forum, .plain,
  .verdict-box, .main-col > section {
    animation-duration: .45s;
  }
  /* Disable hover lifts on touch devices (no hover = no point) */
  .cause:hover, .symptom:hover, .callout:hover, .forum:hover {
    transform: none;
  }
}

/* ============================================================
   AMAZON AFFILIATE LINKS — convert from invisible text to buttons
   Catches every link containing the ampauto20-20 affiliate tag.
   Two treatments:
     1. Standalone affiliate links (in callouts, after periods) → full button
     2. Inline affiliate links (inside sentences) → highlighted "marker" style
   ============================================================ */

/* === BASE: every amazon affiliate link gets transformed === */
a[href*="ampauto20-20"],
a[href*="amzn.to"] {
  /* Reset inherited animated underline (from amp-pops) */
  background-image: none !important;
  background-size: 0 0 !important;
  /* Visual identity */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  margin: 2px 4px;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  border-radius: 99px;
  border: 1.5px solid rgba(254, 215, 170, .35);
  box-shadow:
    0 4px 14px -4px rgba(234, 88, 12, .55),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s ease,
              filter .15s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .1px;
  animation: ampAffPulse 2.6s ease-in-out infinite;
  vertical-align: middle;
  line-height: 1.2;
}

/* Tiny Amazon-style "a" badge before the text */
a[href*="ampauto20-20"]::before,
a[href*="amzn.to"]::before {
  content: "a";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  color: #ea580c;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Sliding shine sweep on hover */
a[href*="ampauto20-20"]::after,
a[href*="amzn.to"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
a[href*="ampauto20-20"]:hover::after,
a[href*="amzn.to"]:hover::after {
  left: 150%;
}

/* Hover state */
a[href*="ampauto20-20"]:hover,
a[href*="amzn.to"]:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 8px 22px -4px rgba(234, 88, 12, .7),
    0 0 0 3px rgba(245, 158, 11, .18),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  filter: brightness(1.08);
  animation: none;
  text-decoration: none !important;
  color: #fff !important;
}

/* Gentle attention-grabber pulse */
@keyframes ampAffPulse {
  0%, 100% { box-shadow: 0 4px 14px -4px rgba(234, 88, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
  50%      { box-shadow: 0 6px 20px -2px rgba(234, 88, 12, .8),  0 0 0 4px rgba(245, 158, 11, .15), inset 0 1px 0 rgba(255, 255, 255, .3); }
}

/* === SCAN-CALLOUT containers: make them pop too === */
.scan-callout {
  background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(234,88,12,.04) 100%) !important;
  border: 1.5px solid rgba(245,158,11,.3) !important;
  border-left-width: 4px !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.scan-callout::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(245,158,11,.18) 0%, transparent 60%);
  pointer-events: none;
  animation: ampEcDrift 9s ease-in-out infinite alternate;
}
.scan-callout:hover {
  border-color: rgba(245,158,11,.55) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(234,88,12,.3);
}
.scan-callout > div:not(:first-child) {
  position: relative;
  z-index: 1;
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.scan-callout strong {
  color: #fbbf24 !important;
  font-weight: 800;
  display: inline;
}

/* Make the icon larger and animated */
.scan-callout > div:first-child {
  font-size: 28px !important;
  filter: drop-shadow(0 4px 8px rgba(234,88,12,.4));
  animation: ampAffWobble 2.8s ease-in-out infinite;
  z-index: 1;
  position: relative;
}
@keyframes ampAffWobble {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.1); }
}

/* === PART-LINK widget rows (already structured, just polish) === */
.part-link[href*="ampauto20-20"],
.part-link[href*="amzn.to"] {
  /* Don't double-style — override the generic button treatment for part-link */
  display: flex !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, rgba(234,88,12,.04) 100%) !important;
  color: var(--text, #f1f5f9) !important;
  border: 1.5px solid rgba(245,158,11,.25) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  white-space: normal !important;
  animation: none !important;
}
.part-link[href*="ampauto20-20"]::before,
.part-link[href*="amzn.to"]::before {
  content: none !important;
}
.part-link[href*="ampauto20-20"]:hover,
.part-link[href*="amzn.to"]:hover {
  border-color: rgba(245,158,11,.55) !important;
  background: linear-gradient(135deg, rgba(245,158,11,.14) 0%, rgba(234,88,12,.08) 100%) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(234,88,12,.35);
  filter: brightness(1.05);
}

/* === MOBILE === */
@media (max-width: 600px) {
  a[href*="ampauto20-20"],
  a[href*="amzn.to"] {
    font-size: 13px !important;
    padding: 6px 12px 6px 9px;
    margin: 2px 2px;
  }
  a[href*="ampauto20-20"]::before,
  a[href*="amzn.to"]::before {
    width: 15px;
    height: 15px;
    font-size: 10px;
  }
  .scan-callout {
    padding: 14px 16px !important;
  }
  .scan-callout > div:first-child {
    font-size: 22px !important;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  a[href*="ampauto20-20"],
  a[href*="amzn.to"],
  .scan-callout > div:first-child,
  .scan-callout::before {
    animation: none !important;
  }
}