/* difference: styles for js/fx/difference.js */
/* Base styles work without JS. Hidden start states live under .fx-diff, which the module sets. */

/* ---- .diff cards ---- */
#difference .diff > div{
  --c:#6bbeca;--glow:#6bbeca40;--mx:28%;--my:16%;
  position:relative;isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1);
}
#difference .diff > div:nth-child(2){--c:#93a8e1;--glow:#93a8e144}
#difference .diff > div:nth-child(3){--c:#a9c78f;--glow:#a9c78f4d}
#difference .diff > div > *{position:relative;z-index:1}
/* the inline `.diff div` rules also match the inner text block and draw a second, blue box; undo that */
#difference .diff > div > div{background:none;border:0;border-radius:0;padding:0;min-height:0}

/* the coloured bottom border grows up into a soft glow of its own colour */
#difference .diff > div::after{
  content:"";position:absolute;inset:auto 0 0;height:62%;z-index:0;pointer-events:none;
  border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
  background:linear-gradient(to top,var(--glow),transparent);
  transform:scaleY(.06);transform-origin:50% 100%;opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s;
}
/* a faint light sheen; the module moves it with a fine pointer */
#difference .diff > div::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx) var(--my),#ffffff99,#fff0 70%);
  opacity:0;transition:opacity .4s;
}
#difference .diff > div:focus-within{transform:translateY(-4px);box-shadow:0 18px 36px -18px var(--c)}
#difference .diff > div:focus-within::after{transform:none;opacity:1}
#difference .diff > div:focus-within::before{opacity:1}
@media (hover:hover){
  #difference .diff > div:hover{transform:translateY(-4px);box-shadow:0 18px 36px -18px var(--c)}
  #difference .diff > div:hover::after{transform:none;opacity:1}
  #difference .diff > div:hover::before{opacity:1}
}

/* icon strokes draw on when the card enters (--len is the measured length of each shape) */
.fx-diff .diff svg [style*="--len"]{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1);
  transition-delay:calc(var(--ci,0) * 180ms + var(--si,0) * 220ms + 120ms);
}
.fx-diff .diff > div.fx-drawn svg [style*="--len"]{stroke-dashoffset:0}

/* ---- credentials ---- */
#difference .creds li{
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s;
}
#difference .creds li::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--aqua);box-shadow:0 0 0 1px var(--aqua6);
}
@media (hover:hover){
  #difference .creds li:hover{border-color:var(--aqua);background-color:#85e0ed1f;transform:translateY(-2px)}
}
.fx-diff .creds li::before{
  transform:scale(0);opacity:0;
  transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s;
  transition-delay:calc(var(--ci,0) * 90ms + 250ms);
}
.fx-diff .creds.fx-in li::before{transform:none;opacity:1}

/* ---- quote ---- */
#difference .quote{position:relative;overflow:hidden;isolation:isolate}
#difference .quote blockquote,#difference .quote .by{position:relative;z-index:1}
#difference .quote::before{
  content:"\201C";position:absolute;z-index:0;pointer-events:none;
  top:-.2em;left:-.04em;font-size:clamp(200px,22vw,320px);line-height:1;font-weight:400;
  color:var(--aqua6);opacity:.13;
}
.fx-diff .quote::before{
  opacity:0;transform:translate(-28px,22px) rotate(-4deg);
  transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.fx-diff .quote.fx-in::before{opacity:.13;transform:none}
.fx-diff .quote .by{
  opacity:0;transform:translateX(-16px);
  transition:opacity .7s ease .55s,transform .8s cubic-bezier(.2,.7,.2,1) .55s;
}
.fx-diff .quote.fx-in .by{opacity:1;transform:none}

/* ---- reduced motion: complete and still ---- */
@media (prefers-reduced-motion:reduce){
  #difference .diff > div,#difference .diff > div::before,#difference .diff > div::after,
  #difference .creds li,#difference .creds li::before,
  #difference .quote::before,#difference .quote .by,
  .fx-diff .diff svg [style*="--len"]{transition:none}
  .fx-diff .diff svg [style*="--len"]{stroke-dashoffset:0}
  #difference .diff > div:hover,#difference .diff > div:focus-within,#difference .creds li:hover{transform:none}
  #difference .diff > div::before{background:radial-gradient(260px circle at 28% 16%,#ffffff99,#fff0 70%)}
  .fx-diff .creds li::before{transform:none;opacity:1}
  .fx-diff .quote::before{opacity:.13;transform:none}
  .fx-diff .quote .by{opacity:1;transform:none}
}