/* Tarot4U | Spread-page neon treatment — 2026-10-31.
 * Intentionally scoped to dedicated spread/category discovery pages.
 * The homepage (index.html), its original spectrum, all reading functionality,
 * and the other pages DO NOT load this file and remain unchanged.
 */
body.seo-site.spread-neon-page {
  --spread-bg:#080711;
  --spread-ink:#ffffff;
  background:radial-gradient(ellipse at 75% 7%,#21152e 0%,#100b18 39%,#07070f 90%);
}
/* A rainbow across the individual spread cards, restarting for each group. */
body.spread-neon-page .seo-grid > .seo-card{ --spread-glow:#ff2b61; --spread-glow-rgb:255 43 97; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+2){ --spread-glow:#ff812a; --spread-glow-rgb:255 129 42; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+3){ --spread-glow:#ffe000; --spread-glow-rgb:255 224 0; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+4){ --spread-glow:#04f4a0; --spread-glow-rgb:4 244 160; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+5){ --spread-glow:#00dfff; --spread-glow-rgb:0 223 255; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+6){ --spread-glow:#489bff; --spread-glow-rgb:72 155 255; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+7){ --spread-glow:#9969ff; --spread-glow-rgb:153 105 255; }
body.spread-neon-page .seo-grid > .seo-card:nth-child(8n+8){ --spread-glow:#f02af0; --spread-glow-rgb:240 42 240; }

/* Use brilliant light as the OUTLINE, not as unreadable text color. */
body.spread-neon-page .seo-grid > .seo-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:244px;
  padding:0;
  border:1.5px solid var(--spread-glow);
  border-radius:23px;
  background:
    radial-gradient(ellipse at 50% -35%,rgb(var(--spread-glow-rgb) / .16),transparent 75%),
    linear-gradient(165deg,#171020 0%,#0a0813 63%,#07060e 100%);
  box-shadow:
    0 0 0 1px rgb(var(--spread-glow-rgb) / .22),
    0 0 14px rgb(var(--spread-glow-rgb) / .55),
    0 0 29px rgb(var(--spread-glow-rgb) / .26),
    0 15px 28px #000a,
    inset 0 0 30px rgb(var(--spread-glow-rgb) / .10);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
/* fine second contour, like the original neon reading-step panels */
body.spread-neon-page .seo-grid > .seo-card::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:7px;
  border-radius:17px;
  border:1px solid rgb(var(--spread-glow-rgb) / .24);
  box-shadow:inset 0 0 14px rgb(var(--spread-glow-rgb) / .09);
}
body.spread-neon-page .seo-grid > .seo-card::after{
  content:"✦";
  position:absolute;
  top:19px;
  right:20px;
  color:var(--spread-glow);
  font-size:1.1rem;
  text-shadow:0 0 8px var(--spread-glow),0 0 18px var(--spread-glow);
  pointer-events:none;
}
body.spread-neon-page .seo-grid > .seo-card .seo-card-content{
  position:relative;
  z-index:1;
  width:100%;
  flex:1;
  padding:27px 25px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.spread-neon-page .seo-grid > .seo-card strong{
  padding-right:23px;
  color:#fff !important;
  font:700 clamp(1.15rem,1.5vw,1.43rem)/1.28 Georgia,"Times New Roman",serif;
  text-shadow:0 2px 5px #000,0 0 11px rgb(var(--spread-glow-rgb) / .19);
  text-wrap:balance;
}
body.spread-neon-page .seo-grid > .seo-card small{
  color:#f4eff7 !important;
  font-size:.95rem;
  line-height:1.57;
  text-shadow:0 1px 4px #000b;
}
/* Actual all-spreads buttons: white on dark, never white on cream or blue on black. */
body.spread-neon-page .seo-grid > .seo-card .seo-card-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  align-self:stretch;
  margin-top:auto;
  min-height:43px;
  padding:9px 14px;
  background:linear-gradient(145deg,#130e1e,#090711);
  color:#fff !important;
  font:bold .89rem/1.3 ui-sans-serif,system-ui,sans-serif;
  border:1px solid var(--spread-glow);
  border-radius:11px;
  text-shadow:0 1px 3px #000;
  box-shadow:0 0 12px rgb(var(--spread-glow-rgb) / .35),inset 0 0 12px rgb(var(--spread-glow-rgb) / .12);
}
body.spread-neon-page .seo-grid > .seo-card:hover,
body.spread-neon-page .seo-grid > .seo-card:focus-visible{
  transform:translateY(-5px);
  border-color:var(--spread-glow);
  box-shadow:0 0 0 1px var(--spread-glow),0 0 22px rgb(var(--spread-glow-rgb) / .72),0 0 47px rgb(var(--spread-glow-rgb) / .35),0 22px 34px #000e,inset 0 0 28px rgb(var(--spread-glow-rgb) / .17);
}
body.spread-neon-page .seo-grid > .seo-card:hover .seo-card-link,
body.spread-neon-page .seo-grid > .seo-card:focus-visible .seo-card-link{
  background:linear-gradient(145deg,#1d1029,#100a1a);
  box-shadow:0 0 20px rgb(var(--spread-glow-rgb) / .65),inset 0 0 16px rgb(var(--spread-glow-rgb) / .14);
}
body.spread-neon-page .seo-grid > .seo-card:focus-visible{
  outline:3px solid #fff;
  outline-offset:5px;
}
/* Category headings and individual spread position lists get the same polish. */
body.spread-neon-page .seo-block h2{color:#f9d5a4}
body.spread-neon-page .seo-block h2 a{color:#f9d5a4}
body.spread-neon-page .seo-lead{
  border:1px solid #7f598b;
  background:linear-gradient(145deg,#1b1026,#0e0a18);
  box-shadow:0 0 23px #a343ed25,inset 0 0 22px #8f2ac312;
}
body.spread-neon-page .seo-positions{--spread-glow:#ff2b61}
body.spread-neon-page .seo-positions li{
  color:#fff;
  background:linear-gradient(135deg,#140c1d,#090811);
  border:1px solid #a34cbb;
  box-shadow:0 0 12px #a34cbb3c,inset 0 0 15px #a34cbb15;
}
body.spread-neon-page .seo-positions li:nth-child(8n+1){border-color:#ff2b61;box-shadow:0 0 13px #ff2b614d}
body.spread-neon-page .seo-positions li:nth-child(8n+2){border-color:#ff812a;box-shadow:0 0 13px #ff812a48}
body.spread-neon-page .seo-positions li:nth-child(8n+3){border-color:#ffe000;box-shadow:0 0 13px #ffe00038}
body.spread-neon-page .seo-positions li:nth-child(8n+4){border-color:#04f4a0;box-shadow:0 0 13px #04f4a04b}
body.spread-neon-page .seo-positions li:nth-child(8n+5){border-color:#00dfff;box-shadow:0 0 13px #00dfff49}
body.spread-neon-page .seo-positions li:nth-child(8n+6){border-color:#489bff;box-shadow:0 0 13px #489bff4d}
body.spread-neon-page .seo-positions li:nth-child(8n+7){border-color:#9969ff;box-shadow:0 0 13px #9969ff56}
body.spread-neon-page .seo-positions li:nth-child(8n+8){border-color:#f02af0;box-shadow:0 0 13px #f02af054}
body.spread-neon-page .seo-positions li .seo-number{color:#fff;text-shadow:0 0 8px #efadff}
body.spread-neon-page .seo-button{
  background:linear-gradient(135deg,#1b1027,#0a0815);
  color:#fff !important;
  border:1px solid #d8a4ff;
  box-shadow:0 0 15px #a445ff55,inset 0 0 15px #a445ff24;
  text-shadow:0 1px 2px #000;
}
body.spread-neon-page .seo-button:hover{box-shadow:0 0 23px #ae53ff99,inset 0 0 20px #ae53ff30}
@media(max-width:650px){
  body.spread-neon-page .seo-grid{gap:23px}
  body.spread-neon-page .seo-grid > .seo-card{min-height:204px}
  body.spread-neon-page .seo-grid > .seo-card .seo-card-content{padding:24px 22px 21px}
}
@media(prefers-reduced-motion:reduce){
  body.spread-neon-page .seo-grid > .seo-card{transition:none}
  body.spread-neon-page .seo-grid > .seo-card:hover{transform:none}
}