/* ============================================================================
   Soarcery marketing - blog editorial cover art + social share (blog.css)
   Agency-style cover art: lush gradient-mesh fields, soft layered forms, fine
   grain, one abstract conceptual motif per post. NOT product UI / data-viz.
   Dark-mode editorial, on-brand Mystic. Motion is slow + subtle, stilled under
   prefers-reduced-motion. Load AFTER site.css.
   ========================================================================== */

/* ---- cover shell ---------------------------------------------------------- */
.cover{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:#0a0a12; isolation:isolate; }
.cover .ec-field{ position:absolute; inset:0; z-index:0; }
.cover .ec-b1,.cover .ec-b2{ position:absolute; border-radius:9999px; filter:blur(38px); z-index:1; mix-blend-mode:screen; opacity:.85; }
.cover .ec-art{ position:absolute; inset:0; z-index:2; }
.cover .ec-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cover .c-vig{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(130% 120% at 50% -15%,transparent 52%,rgba(0,0,0,.5)); }
.cover .c-cat{ position:absolute; left:14px; top:14px; z-index:5; }
.cover .ec-b1,.cover .ec-b2{ transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.card-hover:hover .cover .ec-b1{ transform:translate(8px,-6px) scale(1.08); }
.card-hover:hover .cover .ec-b2{ transform:translate(-8px,6px) scale(1.08); }

/* slow ambient drift */
@keyframes ec-drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(10px,-8px) scale(1.06); } }
@keyframes ec-drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-9px,7px) scale(1.05); } }
.cover .ec-b1{ animation:ec-drift1 15s ease-in-out infinite; }
.cover .ec-b2{ animation:ec-drift2 18s ease-in-out infinite; }

/* ============================================================================
   VARIANT FIELDS + MOTIFS  (one per post, distinct palette + composition)
   ========================================================================== */

/* -- spread: "engines bloom" - three overlapping luminous discs ------------- */
.ecov--spread .ec-field{ background:
  radial-gradient(120% 130% at 12% 0%,rgba(124,58,237,.5),transparent 55%),
  radial-gradient(120% 120% at 100% 100%,rgba(20,184,166,.42),transparent 55%),
  linear-gradient(150deg,#100a22,#0a0a12 70%); }
.ecov--spread .ec-b1{ width:48%; height:75%; left:18%; top:8%; background:radial-gradient(circle,rgba(168,85,247,.9),transparent 62%); }
.ecov--spread .ec-b2{ width:46%; height:72%; left:42%; top:20%; background:radial-gradient(circle,rgba(20,184,166,.8),transparent 62%); }
.ecov--spread .ec-art{ background:radial-gradient(circle at 30% 78%,rgba(249,115,22,.5),transparent 40%); }

/* -- det: "order from chaos" - two converging soft arcs --------------------- */
.ecov--det .ec-field{ background:
  radial-gradient(130% 120% at 0% 0%,rgba(124,58,237,.5),transparent 58%),
  radial-gradient(130% 120% at 100% 100%,rgba(79,70,229,.4),transparent 58%),
  linear-gradient(160deg,#120c26,#0a0a12 72%); }
.ecov--det .ec-b1{ width:58%; height:62%; left:-8%; top:-6%; background:radial-gradient(circle,rgba(167,139,250,.85),transparent 60%); }
.ecov--det .ec-b2{ width:46%; height:56%; right:-6%; bottom:-8%; left:auto; background:radial-gradient(circle,rgba(94,234,212,.6),transparent 62%); }
.ecov--det .ec-art{ background:
  conic-gradient(from 210deg at 70% 75%,transparent 0deg,rgba(196,181,253,.28) 40deg,transparent 90deg);
  -webkit-mask:radial-gradient(80% 80% at 70% 75%,#000 40%,transparent 72%); mask:radial-gradient(80% 80% at 70% 75%,#000 40%,transparent 72%); }

/* -- plain: "flow" - a luminous ribbon sweeping across ---------------------- */
.ecov--plain .ec-field{ background:
  radial-gradient(120% 120% at 100% 0%,rgba(249,115,22,.42),transparent 55%),
  radial-gradient(120% 120% at 0% 100%,rgba(124,58,237,.5),transparent 58%),
  linear-gradient(150deg,#1a0f1a,#0a0a12 72%); }
.ecov--plain .ec-b1{ width:52%; height:60%; right:-6%; top:-8%; left:auto; background:radial-gradient(circle,rgba(251,146,60,.7),transparent 62%); }
.ecov--plain .ec-b2{ width:50%; height:60%; left:-8%; bottom:-10%; background:radial-gradient(circle,rgba(168,85,247,.8),transparent 62%); }
.ecov--plain .ec-art{ background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 47%,rgba(196,181,253,.2) 52%,transparent 66%);
  transform:skewY(-8deg) scale(1.3); }

/* -- curve: "descent" - a big sweeping arc falling away --------------------- */
.ecov--curve .ec-field{ background:
  radial-gradient(120% 120% at 18% 0%,rgba(124,58,237,.52),transparent 55%),
  radial-gradient(130% 130% at 100% 120%,rgba(109,40,217,.45),transparent 55%),
  linear-gradient(160deg,#130c28,#0a0a12 72%); }
.ecov--curve .ec-b1{ width:55%; height:62%; left:6%; top:-10%; background:radial-gradient(circle,rgba(167,139,250,.85),transparent 60%); }
.ecov--curve .ec-b2{ width:42%; height:50%; right:-4%; bottom:-12%; left:auto; background:radial-gradient(circle,rgba(94,234,212,.5),transparent 62%); }
.ecov--curve .ec-art{ background:
  radial-gradient(140% 150% at 18% -28%,transparent 49%,rgba(196,181,253,.55) 50%,transparent 53%),
  radial-gradient(150% 160% at 8% -40%,transparent 60%,rgba(94,234,212,.3) 61%,transparent 64%); }

/* -- rev: "loop" - a luminous orbital ring ---------------------------------- */
.ecov--rev .ec-field{ background:
  radial-gradient(120% 120% at 100% 0%,rgba(20,184,166,.42),transparent 55%),
  radial-gradient(120% 120% at 0% 100%,rgba(124,58,237,.5),transparent 58%),
  linear-gradient(150deg,#0c1320,#0a0a12 72%); }
.ecov--rev .ec-b1{ width:44%; height:60%; left:-6%; top:8%; background:radial-gradient(circle,rgba(94,234,212,.7),transparent 62%); }
.ecov--rev .ec-b2{ width:46%; height:62%; right:-6%; bottom:-6%; left:auto; background:radial-gradient(circle,rgba(168,85,247,.8),transparent 62%); }
.ecov--rev .ec-art{ display:flex; align-items:center; justify-content:center; }
.ecov--rev .ec-art::before{ content:""; width:108px; height:108px; border-radius:9999px; padding:2px;
  background:conic-gradient(from 0deg,rgba(94,234,212,.9),rgba(168,85,247,.8),rgba(251,146,60,.6),rgba(94,234,212,.9));
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 72%); mask:radial-gradient(closest-side,transparent 70%,#000 72%);
  filter:drop-shadow(0 0 14px rgba(124,58,237,.5)); animation:ec-spin 16s linear infinite; }
@keyframes ec-spin{ to{ transform:rotate(360deg); } }

/* -- dash: "signal" - concentric rings radiating from a bright core --------- */
.ecov--dash .ec-field{ background:
  radial-gradient(120% 120% at 50% 18%,rgba(249,115,22,.32),transparent 50%),
  radial-gradient(130% 130% at 50% 120%,rgba(124,58,237,.5),transparent 58%),
  linear-gradient(160deg,#160e1c,#0a0a12 72%); }
.ecov--dash .ec-b1{ width:42%; height:56%; left:30%; top:18%; background:radial-gradient(circle,rgba(251,146,60,.55),transparent 62%); }
.ecov--dash .ec-b2{ width:50%; height:56%; left:25%; bottom:-12%; background:radial-gradient(circle,rgba(168,85,247,.75),transparent 62%); }
.ecov--dash .ec-art{ background:
  radial-gradient(circle at 50% 46%,transparent 14%,rgba(196,181,253,.28) 15%,transparent 17%),
  radial-gradient(circle at 50% 46%,transparent 26%,rgba(196,181,253,.2) 27%,transparent 29%),
  radial-gradient(circle at 50% 46%,transparent 38%,rgba(196,181,253,.12) 39%,transparent 41%);
  -webkit-mask:radial-gradient(60% 60% at 50% 46%,#000,transparent 75%); mask:radial-gradient(60% 60% at 50% 46%,#000,transparent 75%); }
.ecov--dash .ec-art::after{ content:""; position:absolute; left:50%; top:46%; width:12px; height:12px; margin:-6px; border-radius:9999px;
  background:#fff; box-shadow:0 0 18px rgba(196,181,253,.9),0 0 34px rgba(124,58,237,.6); }

/* ============================================================================
   REAL PHOTO layer (image-slot) - the subject; gradient mesh is the wash behind
   In production this is a plain <img class="ec-photo" src="…"> from the CMS;
   in the prototype it's <image-slot> so you can drop real photos to preview.
   ========================================================================== */
.cover .ec-photo{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
img.ec-photo{ object-fit:cover; }
/* let the gradient field show through an EMPTY slot, and kill its light chrome */
image-slot.ec-photo::part(frame){ background:transparent; }
image-slot.ec-photo::part(empty){ color:var(--fg-muted); background:linear-gradient(180deg,transparent,rgba(5,5,8,.4)); }
image-slot.ec-photo::part(ring){ border-color:rgba(255,255,255,.22); }
/* brand wash OVER the photo: keeps covers on-palette + text legible (Splunk-style tint) */
.cover .ec-tint{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .3s;
  background:linear-gradient(150deg,rgba(124,58,237,.42),transparent 46%),linear-gradient(0deg,rgba(8,8,18,.72),rgba(8,8,18,.12) 55%,transparent); mix-blend-mode:normal; }
.cover.has-photo .ec-tint{ opacity:1; }
.cover.t-teal .ec-tint{ background:linear-gradient(150deg,rgba(20,184,166,.4),transparent 46%),linear-gradient(0deg,rgba(8,8,18,.72),rgba(8,8,18,.12) 55%,transparent); }
.cover.t-orange .ec-tint{ background:linear-gradient(150deg,rgba(249,115,22,.4),transparent 46%),linear-gradient(0deg,rgba(8,8,18,.72),rgba(8,8,18,.12) 55%,transparent); }
/* when a photo is present, drop the abstract motif art so it doesn't fight the image */
.cover.has-photo .ec-art{ opacity:0; }
.cover.has-photo .ec-b1,.cover.has-photo .ec-b2{ opacity:.4; }
/* grid-card covers must sit ABOVE the stretched link so drops work in-proto.
   (single source of truth - see the stretched-link block below) */

/* ============================================================================
   SOCIAL SHARE
   ========================================================================== */
.share{ display:inline-flex; align-items:center; gap:6px; }
.share .sh-lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-faint); margin-right:3px; }
.share-btn{ width:30px; height:30px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:9999px; background:rgba(255,255,255,.02); color:var(--fg-muted);
  cursor:pointer; padding:0; transition:color .15s, border-color .15s, background .15s, transform .12s; }
.share-btn:hover{ color:var(--fg); border-color:var(--border-strong); transform:translateY(-1px); }
.share-btn:hover.s-li{ color:#70b5f9; border-color:rgba(112,181,249,.5); background:rgba(112,181,249,.08); }
.share-btn:hover.s-x{ color:#fff; border-color:var(--fg-faint); background:rgba(255,255,255,.06); }
.share-btn:hover.s-fb{ color:#5b8def; border-color:rgba(91,141,239,.5); background:rgba(91,141,239,.08); }
.share-btn:hover.s-ig{ color:#e1306c; border-color:rgba(225,48,108,.5); background:rgba(225,48,108,.08); }
.share-btn svg{ width:15px; height:15px; }

.post .meta-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.post .meta-row .meta{ margin:0; padding:0; }
.post .share{ opacity:0; transform:translateY(3px); transition:opacity .18s, transform .18s; }
.post:hover .share, .post:focus-within .share{ opacity:1; transform:none; }
@media(hover:none){ .post .share{ opacity:1; transform:none; } }

.sh-toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:rgba(10,10,16,.97); border:1px solid var(--border-strong); border-radius:9999px; padding:11px 20px;
  font-size:13px; color:var(--fg); box-shadow:0 16px 50px rgba(0,0,0,.5); z-index:300; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; display:flex; align-items:center; gap:9px; }
.sh-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.sh-toast .ck{ color:var(--teal-300); }

/* stretched-link pattern so share buttons can live inside a clickable card */
.post{ position:relative; }
.post .stretch{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.post .meta-row{ position:relative; z-index:2; }
/* cover sits ABOVE the stretch link so its photo slot can receive drops */
.post .cover{ position:relative; z-index:3; }

/* featured post cover fills its half */
.feat-post .cover{ border:0; border-radius:0; height:100%; min-height:300px; }
.feat-post .body .share{ margin-top:20px; }

@media(prefers-reduced-motion:reduce){
  .cover .ec-b1,.cover .ec-b2,.ecov--rev .ec-art::before{ animation:none !important; }
}

/* article-page hero cover */
.article-cover{margin:34px 0 0}
.article-cover .cover{aspect-ratio:1200/520; box-shadow:0 18px 60px rgba(0,0,0,.45)}
@media(max-width:680px){.article-cover .cover{aspect-ratio:16/10}}
.article-share{margin-top:22px}
.article-share-end{margin-top:40px; padding-top:26px; border-top:1px solid var(--border)}