.arcana{
  --bg:var(--ink-900); --gold:var(--gold-300); --gold-bright:var(--gold-100); --gold-deep:var(--gold-400);
  --text:var(--parchment); --muted:var(--parchment-dim);
  --display: var(--font-display);
  --body: var(--font-body);
  position:relative; min-height:900px; height:100%; width:100%;
  background:radial-gradient(120% 80% at 50% 12%, #11101c 0%, #08070f 45%, #050409 100%);
  color:var(--text); font-family:var(--body); overflow:hidden; isolation:isolate; box-sizing:border-box;
}

.arcana *{box-sizing:border-box;}

.arcana .ac-stars{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}

.arcana .ac-neb{position:absolute; left:50%; top:48%; width:760px; height:760px; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; transition:transform .25s ease-out;
  background:radial-gradient(closest-side, rgba(215,180,90,.08), rgba(215,180,90,.025) 45%, transparent 70%); filter:blur(6px);}


.arcana .ac-head{position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:22px 40px 0;}

.arcana .ac-mark{display:flex; align-items:center; gap:14px; font-family:var(--display); letter-spacing:.5em; font-size:15px; color:var(--gold-bright); text-indent:.5em;}

.arcana .ac-mark .rule{width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);}

.arcana .ac-nav{display:flex; gap:30px; font-size:11px; letter-spacing:.34em; color:var(--muted);}

.arcana .ac-nav a{cursor:pointer; position:relative; padding-bottom:6px; transition:color .25s;}

.arcana .ac-nav a:hover{color:var(--text);}

.arcana .ac-nav a.on{color:var(--gold-bright);}

.arcana .ac-nav a.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);}


.arcana .ac-stage{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:56px; padding:30px 24px 8px; min-height:700px;}

.arcana .ac-zone{position:relative; display:flex; flex-direction:column; align-items:center; perspective:1700px;}

.arcana .ac-eyebrow{display:flex; align-items:center; gap:12px; font-size:10.5px; letter-spacing:.42em; color:var(--gold); margin-bottom:18px; text-indent:.42em;}

.arcana .ac-eyebrow .rule{width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);}

.arcana .ac-shadow{position:absolute; bottom:46px; left:50%; transform:translateX(-50%); width:230px; height:46px; border-radius:50%; z-index:0;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%); filter:blur(8px);}


.arcana .ac-float{transform-style:preserve-3d; animation:floaty 7s ease-in-out infinite;}

@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}


.arcana .ac-tilt{position:relative; width:min(440px,84vw); aspect-ratio:320/470; cursor:pointer;
  transform-style:preserve-3d; transition:transform .16s cubic-bezier(.2,.7,.2,1); will-change:transform; outline:none;}

.arcana .ac-tilt:focus-visible{box-shadow:0 0 0 2px rgba(244,226,168,.6); border-radius:14px;}


.arcana .ac-flip{position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.6,.05,.2,1), opacity .18s ease; animation:deal .6s cubic-bezier(.2,.8,.2,1);}

.arcana .ac-flip.is-flipped{transform:rotateY(180deg);}

@keyframes deal{from{transform:rotateY(-24deg) scale(.9); opacity:0;}to{opacity:1;}}


.arcana .ac-face{position:absolute; inset:0; border-radius:13px; backface-visibility:hidden; -webkit-backface-visibility:hidden; isolation:isolate;}

/* No box-shadow / border on the front face: a drop shadow outlines the card
   rectangle and reads as a frame. The card should float edgeless in the cosmos;
   depth comes from the soft .ac-shadow ellipse beneath instead. */
.arcana .ac-front{background:transparent; overflow:visible;}

.arcana .ac-back{transform:rotateY(180deg); overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, #15131f, #0a0812 60%, #070510);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75), inset 0 0 0 1px rgba(215,180,90,.18);}


.arcana .mosaic{position:absolute; inset:0;}
.arcana .mosaic-canvas{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;}

.arcana .front-light{position:absolute; inset:-3% -2%; z-index:0; pointer-events:none; border-radius:46% / 40%;
  background:radial-gradient(ellipse at 50% 47%, rgba(255,226,150,.14), rgba(232,180,92,.06) 44%, rgba(176,128,58,.02) 66%, transparent 82%);
  filter:blur(14px); animation:lightpulse 7.5s ease-in-out infinite;}

@keyframes lightpulse{0%,100%{opacity:.5; transform:scale(1);}50%{opacity:.66; transform:scale(1.02);}}

/* The art core is INSET by the margin (--mx/--my) so the full picture sits in a
   clean inner rect with empty space around it; the mosaic dissolve lives in that
   margin. A light JS feather mask just softens the art's own outer edge so the
   crumble tiles blend in. */
.arcana .art-core{position:absolute; inset:var(--my,0) var(--mx,0); z-index:1; background-image:var(--img); background-size:var(--cw) var(--ch); background-repeat:no-repeat; background-position:0 0;}

.arcana .mosaic{z-index:2;}

/* Foil + glare are feathered (radial mask) instead of hard-clipped, so they
   never draw a rounded-rectangle edge over the art. `screen` (not color-dodge)
   keeps the sheen soft — color-dodge blows out to harsh flashes on hover. The
   opacity transition lets it glide in/out rather than snapping. */
.arcana .holo{position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none; background-size:220% 220%;
  transition:opacity .35s ease;
  -webkit-mask:radial-gradient(130% 122% at 50% 50%, #000 55%, transparent 88%);
  mask:radial-gradient(130% 122% at 50% 50%, #000 55%, transparent 88%);
  background-image:repeating-linear-gradient(108deg, rgba(255,228,168,0) 0%, rgba(255,228,168,.22) 8%, rgba(150,200,212,.1) 14%, rgba(205,170,255,.08) 20%, rgba(255,228,168,.22) 27%, rgba(255,228,168,0) 36%);}

.arcana .glare{position:absolute; inset:0; mix-blend-mode:soft-light; pointer-events:none; transition:opacity .35s ease;
  -webkit-mask:radial-gradient(130% 122% at 50% 50%, #000 55%, transparent 88%);
  mask:radial-gradient(130% 122% at 50% 50%, #000 55%, transparent 88%);}

/* No top scrim: the numeral's own text-shadow gives it contrast, and a top
   gradient block read as a dark rectangle over the upper art. The bottom scrim
   stays (the title needs backing) but fades fully so it has no hard edge. */
.arcana .scrim-t{display:none;}

.arcana .scrim-b{position:absolute; inset:auto var(--mx,0) var(--my,0) var(--mx,0); height:30%; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 40%, rgba(0,0,0,.5) 100%);}

.arcana .numeral{position:absolute; top:calc(var(--my,0px) + 14px); left:0; right:0; text-align:center; z-index:5; font-family:var(--display); font-size:19px; letter-spacing:.2em; color:var(--gold-bright); text-shadow:0 1px 8px rgba(0,0,0,.6);}

.arcana .plate{position:absolute; left:0; right:0; bottom:calc(var(--my,0px) + 20px); z-index:5; text-align:center;}

/* When real art is present, suppress the fallback overlays — they were designed
   for the no-image placeholder state and shouldn't render over real card art. */
.arcana .ac-front.has-image .numeral,
.arcana .ac-front.has-image .plate,
.arcana .ac-front.has-image .scrim-b { display:none; }

.arcana .plate .name{font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:.12em; color:var(--gold-bright); text-shadow:0 2px 10px rgba(0,0,0,.7);}

.arcana .plate .kw{margin-top:7px; font-size:9px; letter-spacing:.32em; color:var(--gold); text-indent:.32em; text-shadow:0 1px 6px rgba(0,0,0,.8);}

.arcana .edge{position:absolute; inset:6px; border:1px solid rgba(215,180,90,.32); border-radius:9px; pointer-events:none; z-index:6; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 36px rgba(0,0,0,.5);}

/* Card-swap cross-dissolve (arcana-card.js:fadeSwap): a snapshot clone of the
   outgoing front face, stacked over the live one while the card swaps beneath
   it, then dissolved away. The translateZ lifts it a hair clear of .ac-front so
   the two coplanar faces can't z-fight inside the preserve-3d flip container.
   The card's own text plates ride along inside the snapshot — they need no
   separate fade of their own. */
.arcana .ac-ghost{
  transform:translate3d(0,0,.5px) scale(1);
  pointer-events:none;
  will-change:transform,opacity;
}
.arcana .ac-ghost.is-leaving.dir-next{
  transform:translate3d(-10px,-2px,.5px) scale(.985) rotate(-.35deg);
}
.arcana .ac-ghost.is-leaving.dir-prev{
  transform:translate3d(10px,-2px,.5px) scale(.985) rotate(.35deg);
}

/* The incoming face settles very slightly while the outgoing snapshot clears.
   Transform and opacity stay on the compositor; the mosaic itself is untouched. */
.arcana .ac-front.is-arriving{animation:acCardArrive .42s cubic-bezier(.2,.72,.2,1) both;}
@keyframes acCardArrive{
  from{opacity:.72; transform:translate3d(0,5px,0) scale(.992);}
  to{opacity:1; transform:translate3d(0,0,0) scale(1);}
}


.arcana .back-glow{position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 60% at 50% 28%, rgba(215,180,90,.10), transparent 70%);}

.arcana .watermark{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:190px; color:rgba(215,180,90,.06); pointer-events:none; line-height:1;}

.arcana .holo-soft{mix-blend-mode:overlay;}

.arcana .back-body{position:absolute; inset:0; z-index:4; padding:42px 30px; display:flex; flex-direction:column; align-items:center; text-align:center;}

.arcana .b-eyebrow{font-size:10px; letter-spacing:.42em; color:var(--gold); text-indent:.42em;}

.arcana .b-name{font-family:var(--display); font-size:25px; letter-spacing:.1em; color:var(--gold-bright); margin-top:12px;}

.arcana .b-div{display:flex; align-items:center; gap:10px; margin:16px 0 18px; color:var(--gold-deep); width:62%;}

.arcana .b-div span{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);}

.arcana .b-div .dot{flex:0; color:var(--gold);}

.arcana .b-element{display:flex; align-items:center; gap:11px; color:var(--gold-bright); margin-bottom:20px;}

.arcana .b-element .glyph{display:flex; color:var(--gold);}

.arcana .b-el-text{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; font-size:14px; letter-spacing:.22em;}

.arcana .b-el-text em{font-style:normal; font-size:8.5px; letter-spacing:.34em; color:var(--muted);}

.arcana .b-meaning{font-size:15.5px; line-height:1.62; color:var(--text); max-width:240px; font-style:italic; margin:0;}

.arcana .b-foot{margin-top:auto; font-size:9px; letter-spacing:.3em; color:var(--muted); text-indent:.3em;}


.arcana .ac-dissolve{position:absolute; inset:0; z-index:8; pointer-events:none; overflow:visible; transition:opacity .1s ease;}

.arcana .diss-core{position:absolute; inset:var(--my,0) var(--mx,0); z-index:1; background-image:var(--img); background-size:var(--cw) var(--ch); background-repeat:no-repeat; background-position:0 0;}

.arcana .diss-core.out{animation:coreOut 260ms ease forwards;}

.arcana .diss-core.in{animation:coreIn 300ms cubic-bezier(.2,.8,.2,1) forwards;}

@keyframes coreOut{from{opacity:1; transform:scale(1);}to{opacity:0; transform:scale(.93);}}

@keyframes coreIn{from{opacity:0; transform:scale(1.05);}to{opacity:1; transform:scale(1);}}

.arcana .ac-dissolve .tile{z-index:2;}

/* Flying dissolve tiles drop their catch-light/sparkle pseudo-elements: they're
   moving fast so the glow is wasted GPU work and only adds transition weight. */
.arcana .ac-dissolve .tile::before,
.arcana .ac-dissolve .tile::after{display:none;}

.arcana .ac-burst{position:absolute; inset:-22%; z-index:0; pointer-events:none; animation:burst 700ms ease-in-out forwards;
  background:radial-gradient(closest-side, rgba(246,228,176,.5), rgba(215,180,90,.15) 45%, transparent 72%); filter:blur(8px);}

@keyframes burst{0%{opacity:0; transform:scale(.6);}35%{opacity:.8; transform:scale(1);}100%{opacity:0; transform:scale(1.28);}}


.arcana .tile{position:absolute; background-repeat:no-repeat; background-image:var(--img); background-size:var(--cw) var(--ch);
  border-radius:1px;
  /* Each tile IS a slice of the card art, so it already carries the card's own
     colour. Only a hair-thin seam separates chips — no gold tint over the art,
     so the squares read as the same colour as the card. No backface-visibility
     or overflow here: at rest the tiles are flat, and forcing a GPU layer per
     tile (×~1500) was a real compositing/memory drain. */
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1);}

/* No brightness lift on the core: the inner band tiles are now pixel-aligned,
   fully-opaque continuations of the image, so any core/tile brightness delta
   would draw a visible seam where the band begins. */

/* Catch-light per tile removed for performance: with ~2000 tiles, a `::before`
   with mix-blend-mode:screen on each forces the whole mosaic layer to repaint and
   defeats GPU compositing — a major source of the sluggishness. The tiles already
   carry the card's gold, and the `.tw` sparkle subset supplies the glints, so the
   gilt look is preserved without thousands of blended pseudo-elements. */

/* a tiny gold-leaf sparkle on the `.tw` subset. PERFORMANCE: it animates ONLY
   opacity (compositor-friendly, no repaint) — no mix-blend-mode, no animated
   box-shadow, no scale. A baked gold radial gives the glint its colour; a
   slightly larger soft glow is painted once, not per-frame. This lets hundreds
   twinkle without pinning the main thread. */
.arcana .tile.tw::after{content:""; position:absolute; pointer-events:none;
  left:var(--lx,50%); top:var(--ly,40%);
  /* sparkle size tracks the tile (set per-tile via --sp): bigger toward the
     centre, smaller at the eroding edge — matching the tesserae distribution */
  width:var(--sp,4px); height:var(--sp,4px);
  transform:translate(-50%,-50%);
  border-radius:1px; opacity:0; will-change:opacity;
  /* square gold glint to match the tesserae */
  background:linear-gradient(135deg, rgba(255,244,196,1), rgba(232,186,94,.78));
  box-shadow:0 0 3px 0 rgba(232,186,94,.4);
  animation:tileTwinkle 5s ease-in-out infinite; animation-delay:var(--lt,0s);}

/* twinkle: a tight glint pulse — opacity only, so the compositor handles it
   without repainting. The pulse is narrow so that, combined with the depth-based
   per-tile delay, the active glints form a defined wave-FRONT that sweeps from
   the inner band outward to the rim — the card reads as dissolving outward. */
@keyframes tileTwinkle{
  0%,70%,100%{opacity:0;}
  85%{opacity:calc(1 * var(--lb,1));}}

/* Freeze the perpetual sparkle animation during a card transition so it doesn't
   compete with the image swap for the main thread (toggled via JS .anim-paused). */
.arcana.anim-paused .tile.tw::after{animation-play-state:paused; opacity:0;}

.arcana .tile.out{animation:tileOut 230ms cubic-bezier(.5,0,.78,.25) both; will-change:transform,opacity;}

.arcana .tile.in{animation:tileIn 270ms cubic-bezier(.16,.72,.24,1) both; will-change:transform,opacity;}

@keyframes tileOut{
  from{transform:translate(var(--hx),var(--hy)) rotate(var(--hr)) scale(1); opacity:var(--ho);}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(var(--ds)); opacity:0;}}

@keyframes tileIn{
  from{transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(var(--ds)); opacity:0;}
  to{transform:translate(var(--hx),var(--hy)) rotate(var(--hr)) scale(1); opacity:var(--ho);}}


.arcana .ac-side{background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted); transition:color .3s,opacity .3s; padding:8px;}

.arcana .ac-side:hover{color:var(--text);}

.arcana .ac-side:disabled{opacity:.35; cursor:default;}

.arcana .ac-side .disc{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(215,180,90,.28);
  background:radial-gradient(circle at 50% 35%, rgba(215,180,90,.10), rgba(8,7,14,.6)); box-shadow:0 8px 28px -12px rgba(0,0,0,.8); transition:.3s;}

.arcana .ac-side:not(:disabled):hover .disc{border-color:rgba(244,226,168,.65); box-shadow:0 0 26px -6px rgba(215,180,90,.45);}

.arcana .ac-side .disc em{font-style:normal; font-family:var(--display); font-size:17px; letter-spacing:.12em; color:var(--gold-bright);}

.arcana .ac-side .lbl{font-size:9px; letter-spacing:.28em;}

.arcana .ac-hint{margin-top:22px; font-size:9.5px; letter-spacing:.36em; color:var(--muted); text-indent:.36em;}


.arcana .ac-foot{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:22px; padding:14px 24px 34px;}

.arcana .ac-rail{display:flex; align-items:center; gap:16px; width:min(440px,82vw);}

.arcana .ac-rail .cap{font-size:10px; letter-spacing:.24em; color:var(--muted);}

.arcana .ac-rail .track{position:relative; flex:1; height:1px; background:rgba(215,180,90,.22);}

.arcana .ac-rail .fill{position:absolute; left:0; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); transition:width .5s cubic-bezier(.6,.05,.2,1);}

.arcana .ac-rail .bead{position:absolute; top:50%; width:7px; height:7px; border-radius:50%; transform:translate(-50%,-50%); background:var(--gold-bright); box-shadow:0 0 12px 2px rgba(244,226,168,.55); transition:left .5s cubic-bezier(.6,.05,.2,1);}

.arcana .ac-cta{font-family:var(--display); font-size:12px; letter-spacing:.26em; color:#16120a; cursor:pointer; padding:14px 30px; border:none; text-indent:.26em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-radius:2px; box-shadow:0 10px 30px -10px rgba(215,180,90,.6); transition:transform .2s, box-shadow .2s;}

.arcana .ac-cta:hover{transform:translateY(-2px); box-shadow:0 16px 38px -10px rgba(215,180,90,.75);}


.arcana .ac-grain{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}


@media (max-width:860px){

  .arcana .ac-head{padding:18px 20px 0; flex-direction:column; gap:14px;}

  .arcana .ac-stage{flex-direction:column; gap:26px; padding-top:18px;}

  .arcana .ac-side{flex-direction:row; gap:10px;}

  .arcana .ac-side .disc{width:52px; height:52px;}

  .arcana .ac-side .lbl{font-size:10px;}

}

@media (prefers-reduced-motion: reduce){

  .arcana .ac-float{animation:none;}

  .arcana .ac-flip{animation:none;}

  .arcana .ac-burst{animation:none;}

  .arcana .tile.tw::after{animation:none; opacity:0;}

  .arcana.arcana-bare .ac-neb{animation:none;}

  .arcana .ac-front.is-arriving{animation:none;}

}


/* ─── BARE MODE ───────────────────────────────────────────────────────────
   Just the tiling card, sized to fill its host container (e.g. the home page's
   orbit-ring wrapper). No fixed widget chrome/background/min-height. */
.arcana.arcana-bare{
  min-height:0; height:100%; width:100%; background:none; overflow:visible;
}

.arcana.arcana-bare .ac-stage.ac-bare{
  position:absolute; inset:0; min-height:0; padding:0; gap:0; display:flex;
  align-items:center; justify-content:center;
}

.arcana.arcana-bare .ac-zone{width:100%; height:100%; perspective:1700px;}

.arcana.arcana-bare .ac-float{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  /* No bobbing on the home title card — it should sit still on the page. */
  animation:none;
}

/* Card fits the container but KEEPS its natural 320/470 tarot proportions, just
   like the standalone widget. Stretching to aspect-ratio:auto distorted the
   mosaic cells (wide-but-short), which made the crumble band uneven — thin and
   hard-edged at the top/bottom. Letterboxing to the true ratio fixes that so the
   dissolve matches the standalone card on every side. */
.arcana.arcana-bare .ac-tilt{
  width:auto; height:100%;
  max-width:100%; max-height:100%;
  aspect-ratio:320/470;
  margin:0 auto;
}

/* THE ONE LIGHT: a single soft radial backlight behind the card, very low
   intensity, slowly breathing (opacity + a whisper of scale on a ~7.5s loop).
   Its job is to motivate the edge-dissolve particles — they read brightest
   near it and dim as they drift away. It is ambient backlight only: no orbs,
   no flare dots, no bokeh. The standalone `scale` property is used so the
   pulse survives the JS parallax that rewrites `transform` on tilt. */
.arcana.arcana-bare .ac-neb{
  width:95%; height:95%;
  background:radial-gradient(closest-side, rgba(215,180,90,.09), rgba(215,180,90,.03) 38%, transparent 62%);
  animation:acNebBreathe 7.5s ease-in-out infinite;
}
@keyframes acNebBreathe{
  0%,100%{opacity:.6; scale:1;}
  50%{opacity:1; scale:1.04;}
}

/* Single-light rule: the front-face halo was a second glow layer hugging the
   card edge — dropped in bare mode so the breathing neb is the only light. */
.arcana.arcana-bare .front-light{display:none;}

/* In bare mode the host hero shows its own title / keywords, so the card's own
   text overlays are redundant — and the bottom scrim drew a dark band with a
   hard top edge that read as a card border. Drop them all. */
.arcana.arcana-bare .numeral,
.arcana.arcana-bare .plate,
.arcana.arcana-bare .scrim-t,
.arcana.arcana-bare .scrim-b{display:none;}

/* Feather the ENTIRE front face (core + mosaic tiles together) toward its edges
   so the whole card composite dissolves into the cosmos — no rectangular edge,
   no matter which outer tiles survive. The radial mask fades the corners and
   sides uniformly; the mosaic crumble adds the organic ragged texture on top.
   This sits over the per-element core mask (which still softens the art's own
   edge) and guarantees nothing hard reaches the rectangle boundary. */
.arcana.arcana-bare .ac-front{
  -webkit-mask:radial-gradient(125% 125% at 50% 50%,
    #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.45) 82%, transparent 96%);
  mask:radial-gradient(125% 125% at 50% 50%,
    #000 58%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.45) 82%, transparent 96%);
}