/* =====================================================================
 * Insights: the latest covers on a lit carousel
 * (template-parts/stages/insights.php). Loaded on the blog index only.
 *
 * One number turns the carousel: --ins-o, the index of the cover in front,
 * registered as a number so it animates. Each cover's place is its index
 * less that number, wrapped round the ring (--s, from -n/2 to n/2), so both
 * sides are always filled and a cover leaving one end comes back at the
 * other, out of sight. The front cover (s 0) faces the reader and steps
 * forward; side covers swing to 50 degrees, facing the middle, on parallel
 * planes 58px apart and 190px back, so they stack like records in a rack
 * and never cut through each other. Past two places either side they fade.
 *
 * Geometry (stage pixels, box 680x520): covers are 300x169, centred on
 * x 350 at y 106. The tabs sit on top at y 42, the reading panel under the
 * front cover at y 300 and 110px forward.
 * ===================================================================== */
@property --ins-o{syntax:'<number>';inherits:true;initial-value:0}

.stage-insights .stage-3d{width:680px;height:520px}
/* Entrance. The shared fly-in fades .sp in and holds that opacity animation
   (fill forwards), and an element with an opacity animation in effect makes
   Chromium flatten everything nested in it, so the covers would lose their
   perspective. Here the .sp only travels in, holding nothing afterwards,
   and the fade sits on the leaves instead. */
.stage-insights .sp{opacity:1;animation:in-fly 1s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * .11s + .08s)}
@keyframes in-fly{from{transform:translate3d(0,46px,calc(var(--z,0px) - 140px))}}
.in-picks,.in-read,.in-lift{animation:in-fade .8s ease-out backwards;animation-delay:calc(var(--i,0) * .06s + .2s)}
@keyframes in-fade{from{opacity:0}}
.stage-insights .sp>div{animation:none;transform-style:preserve-3d}
.stage-insights .t-pay{--tc:#5AA0FF;--tg:rgba(90,160,255,.6)}
.stage-insights .t-odoo{--tc:#B79AE6;--tg:rgba(183,154,230,.55)}
.stage-insights .t-einv{--tc:#4FD8C8;--tg:rgba(79,216,200,.55)}
.stage-insights .t-case{--tc:#E8B964;--tg:rgba(232,185,100,.55)}

/* ---------- Floor and light ---------- */
.in-floor{position:absolute;left:-50px;top:236px;width:800px;height:440px;border-radius:50%;pointer-events:none;
  transform:translateZ(-80px) rotateX(76deg);
  background:radial-gradient(closest-side,rgba(47,125,246,.44),rgba(47,125,246,.11) 52%,transparent 74%)}
.in-floor i{position:absolute;inset:0;border-radius:50%;
  background-image:linear-gradient(rgba(150,190,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,255,.16) 1px,transparent 1px);
  background-size:30px 30px;background-position:center;
  -webkit-mask-image:radial-gradient(closest-side,#000 16%,transparent 76%);mask-image:radial-gradient(closest-side,#000 16%,transparent 76%)}
.in-glow{position:absolute;left:150px;top:20px;width:400px;height:330px;border-radius:50%;pointer-events:none;transform:translateZ(-300px);
  background:radial-gradient(closest-side,rgba(90,160,255,.55),rgba(47,125,246,.14) 55%,transparent 78%)}
/* the lit ring the front cover stands over */
.in-spot{position:absolute;left:170px;top:212px;width:360px;height:140px;border-radius:50%;pointer-events:none;transform:translateZ(60px) rotateX(80deg);
  background:radial-gradient(closest-side,rgba(120,180,255,.55),rgba(47,125,246,.16) 52%,transparent 74%)}
.in-spot::after{content:"";position:absolute;inset:24% 20%;border-radius:50%;border:1.5px solid rgba(150,200,255,.5);box-shadow:0 0 22px rgba(90,160,255,.6),inset 0 0 22px rgba(90,160,255,.35)}

/* ---------- Topic tabs ---------- */
.in-picks{position:absolute;left:350px;top:42px;transform:translateX(-50%);display:flex;gap:3px;padding:5px;border-radius:14px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(25,35,57,.95),rgba(11,16,28,.96));border:1px solid rgba(140,180,255,.22);
  box-shadow:0 30px 50px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.in-pk{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:10px;background:transparent;cursor:pointer;pointer-events:auto;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.03em;color:rgba(234,241,255,.6);transition:color .25s,background .25s,box-shadow .25s}
.in-pk i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 8px var(--tc)}
.in-pk em{font-style:normal;font-size:10px;line-height:1;padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.07);color:rgba(234,241,255,.5);transition:background .25s,color .25s}
.in-pk:hover{color:#fff}
.in-pk.cur,.in-picks:not(:has(.cur)) .in-pk:first-child{color:#fff;background:rgba(47,125,246,.2);box-shadow:inset 0 0 0 1px rgba(90,160,255,.45)}
.in-pk.cur em,.in-picks:not(:has(.cur)) .in-pk:first-child em{background:rgba(90,160,255,.28);color:#fff}

/* ---------- The carousel ---------- */
.in-deck,.in-ring{position:absolute;left:0;top:0;width:680px;height:520px;transform-style:preserve-3d}
.in-ring{--ins-o:var(--oa0);transition:--ins-o 1.15s cubic-bezier(.6,.04,.26,1)}
.in-deck.s1 .in-ring{--ins-o:var(--oa1)}
.in-deck.s2 .in-ring{--ins-o:var(--oa2)}
.in-deck.s3 .in-ring{--ins-o:var(--oa3)}
.in-deck.s4 .in-ring{--ins-o:var(--oa4)}
.in-deck.s5 .in-ring{--ins-o:var(--oa5)}
.in-deck.s6 .in-ring{--ins-o:var(--oa6)}
.in-deck.s7 .in-ring{--ins-o:var(--oa7)}
.stage-3d[data-on="pay"] .in-ring{--ins-o:var(--opay0)}
.stage-3d[data-on="pay"] .in-ring.t1{--ins-o:var(--opay1)}
.stage-3d[data-on="odoo"] .in-ring{--ins-o:var(--oodoo0)}
.stage-3d[data-on="odoo"] .in-ring.t1{--ins-o:var(--oodoo1)}
.stage-3d[data-on="einv"] .in-ring{--ins-o:var(--oeinv0)}
.stage-3d[data-on="einv"] .in-ring.t1{--ins-o:var(--oeinv1)}
.stage-3d[data-on="case"] .in-ring{--ins-o:var(--ocase0)}
.stage-3d[data-on="case"] .in-ring.t1{--ins-o:var(--ocase1)}

.in-cv{position:absolute;left:200px;top:106px;width:300px;height:169px;transform-style:preserve-3d;pointer-events:none;
  --s:calc(mod(var(--i) - var(--ins-o) + var(--n) / 2, var(--n)) - var(--n) / 2);
  --sg:clamp(-1,var(--s) * 3,1);
  --v:clamp(0,(8.2 - var(--s) * var(--s)) / 1.6,1);
  transform:translate3d(calc(var(--s) * 58px + var(--sg) * 132px),0px,calc(var(--sg) * var(--sg) * -190px + (1 - var(--sg) * var(--sg)) * 90px)) rotateY(calc(var(--sg) * -50deg));
  opacity:var(--v)}
/* The hover target stays put while the cover lifts, and is gone when the
   cover has faded out at the ends. */
.in-hit{position:absolute;inset:0;border-radius:12px;pointer-events:auto;transform:scale(clamp(0,(var(--v) - .3) * 100,1))}
.in-lift{position:absolute;inset:0;border-radius:12px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.in-img{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:12px;
  box-shadow:0 0 0 1px rgba(160,200,255,.26),0 40px 60px -28px rgba(0,0,0,.95);transition:box-shadow .5s}
.in-img.cover-standin{display:flex}
/* the board's edges, so a turned cover shows its thickness */
.in-ed{position:absolute;top:4px;bottom:4px;width:5px;background:linear-gradient(180deg,#34486F,#0E1526);border-radius:3px}
.in-ed-l{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.in-ed-r{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
/* side covers darken toward the edge that turns away (in-dk on the left
   side, ::before on the right), and all of them further out */
.in-lift::before,.in-dk{content:"";position:absolute;inset:0;z-index:2;border-radius:12px;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,6,12,.8),rgba(3,6,12,.22) 58%,transparent);opacity:clamp(0,var(--sg),1)}
.in-dk{background:linear-gradient(270deg,rgba(3,6,12,.8),rgba(3,6,12,.22) 58%,transparent);opacity:clamp(0,var(--sg) * -1,1)}
/* depth shade, deeper the further out */
.in-lift::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;background:#04070E;
  opacity:min(.6,calc(var(--s) * var(--s) * .09));transition:opacity .5s}
/* glass sheen on the front cover */
.in-sh{position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 34%,transparent 70%,rgba(255,255,255,.05));
  opacity:max(0,1 - var(--s) * var(--s) * 4)}

/* A topic: its covers lift and light up, the rest step back */
.stage-3d[data-on="pay"] .in-cv.t-pay .in-lift,
.stage-3d[data-on="odoo"] .in-cv.t-odoo .in-lift,
.stage-3d[data-on="einv"] .in-cv.t-einv .in-lift,
.stage-3d[data-on="case"] .in-cv.t-case .in-lift{transform:translateY(-12px) translateZ(16px)}
.stage-3d[data-on="pay"] .in-cv.t-pay .in-img,
.stage-3d[data-on="odoo"] .in-cv.t-odoo .in-img,
.stage-3d[data-on="einv"] .in-cv.t-einv .in-img,
.stage-3d[data-on="case"] .in-cv.t-case .in-img{box-shadow:0 0 0 1.5px var(--tc),0 0 46px -6px var(--tg),0 40px 60px -28px rgba(0,0,0,.95)}
.stage-3d[data-on="pay"] .in-cv:not(.t-pay) .in-lift::after,
.stage-3d[data-on="odoo"] .in-cv:not(.t-odoo) .in-lift::after,
.stage-3d[data-on="einv"] .in-cv:not(.t-einv) .in-lift::after,
.stage-3d[data-on="case"] .in-cv:not(.t-case) .in-lift::after{opacity:.6}

/* Hover: the cover lifts out of the rack */
.in-cv.hot .in-lift{transform:translateY(-16px) translateZ(60px)}
.in-cv.hot .in-img{box-shadow:0 0 0 1.5px var(--tc),0 0 52px -6px var(--tg),0 50px 70px -30px rgba(0,0,0,.95)}
.in-cv.hot .in-lift::after{opacity:0}
.stage-3d.hovering .in-cv:not(.hot) .in-lift::after{opacity:.5}

/* ---------- Reading panel ---------- */
.in-read{position:absolute;left:160px;top:300px;width:380px;height:104px;padding:13px 16px 0;border-radius:16px;transform:translateZ(110px);
  background:linear-gradient(170deg,rgba(28,40,66,.95),rgba(11,16,28,.97));border:1px solid rgba(140,180,255,.24);
  box-shadow:0 40px 64px -30px rgba(0,0,0,.95),0 0 70px -34px rgba(47,125,246,.7),inset 0 1px 0 rgba(255,255,255,.09)}
.in-lb{position:absolute;right:16px;top:14px;font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(234,241,255,.42)}
.in-now,.in-hov{position:absolute;left:16px;right:16px;top:13px;height:70px;transition:opacity .25s}
.in-rt{position:absolute;inset:0;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.in-rh{display:flex;align-items:center;gap:10px;height:14px;padding-right:96px;white-space:nowrap}
.in-rk{display:inline-flex;align-items:center;gap:7px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.in-rk i{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 8px var(--tc)}
.in-rd{font:500 10px/1 var(--f-mono);letter-spacing:.02em;color:rgba(234,241,255,.5)}
.in-rt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:9px;font:600 15px/1.25 var(--f-disp);letter-spacing:-.012em;color:#fff}
.in-pgw{position:absolute;left:16px;right:16px;bottom:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.in-pg{position:absolute;inset:0;opacity:0}
.in-pg.on{opacity:1}
.in-pg b{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#2F7DF6,#5AA0FF 70%,#CFE1FF);transform:scaleX(0);transform-origin:0 50%}
.in-pg.on b{transform:scaleX(1);transition:transform var(--d,2000ms) linear}

/* Which title shows: the cover in front at this moment */
.stage-3d:not([data-on]) .in-rt.fa0,
.stage-3d[data-on="all"] .in-deck:not(.s1) .in-rt.fa0,
.stage-3d[data-on="all"] .in-deck.s1:not(.s2) .in-rt.fa1,
.stage-3d[data-on="all"] .in-deck.s2:not(.s3) .in-rt.fa2,
.stage-3d[data-on="all"] .in-deck.s3:not(.s4) .in-rt.fa3,
.stage-3d[data-on="all"] .in-deck.s4:not(.s5) .in-rt.fa4,
.stage-3d[data-on="all"] .in-deck.s5:not(.s6) .in-rt.fa5,
.stage-3d[data-on="all"] .in-deck.s6:not(.s7) .in-rt.fa6,
.stage-3d[data-on="all"] .in-deck.s7 .in-rt.fa7,
.stage-3d[data-on="pay"] .in-ring:not(.t1) .in-rt.fpay0,
.stage-3d[data-on="pay"] .in-ring.t1 .in-rt.fpay1,
.stage-3d[data-on="odoo"] .in-ring:not(.t1) .in-rt.fodoo0,
.stage-3d[data-on="odoo"] .in-ring.t1 .in-rt.fodoo1,
.stage-3d[data-on="einv"] .in-ring:not(.t1) .in-rt.feinv0,
.stage-3d[data-on="einv"] .in-ring.t1 .in-rt.feinv1,
.stage-3d[data-on="case"] .in-ring:not(.t1) .in-rt.fcase0,
.stage-3d[data-on="case"] .in-ring.t1 .in-rt.fcase1{opacity:1;transform:none;transition:opacity .32s .12s,transform .45s .12s cubic-bezier(.2,.7,.2,1)}
/* While a cover is hovered, the panel names that one instead */
.in-hov{opacity:0}
.stage-3d.hovering .in-now{opacity:0}
.stage-3d.hovering .in-hov{opacity:1}
.in-hov .in-rt.hot{opacity:1;transform:none;transition-delay:0s}
.stage-3d.hovering .in-pgw{opacity:.25}

/* Without wrap-around maths (mod), show the front cover alone */
@supports not (width:calc(mod(5px, 3px))){
  .in-cv{transform:translateZ(70px);opacity:0}
  .in-cv:has(+ .in-read){opacity:1}
}

/* ---------- Phones ---------- */
@media (max-width:899px){
  .stage-insights .stage-3d{scale:.62;translate:0 6px}
}
@media (min-width:600px) and (max-width:899px){
  .stage-insights .stage-3d{scale:.72;translate:0 16px}
}
@media (max-width:420px){
  .stage-insights .stage-3d{scale:.56;translate:0 2px}
}

@media (prefers-reduced-motion:reduce){
  .stage-insights .sp,.in-picks,.in-read,.in-lift{animation:none}
  .in-ring,.in-lift,.in-rt,.in-img{transition:none}
}