/* Motion: scroll reveals, count-ups, FAQ slides and the page-to-page logo transition.
   Everything here is gated by html.mo, which is only set when JS runs and the visitor
   hasn't asked for reduced motion. Without it, the page renders fully as before. */

main{overflow-x:clip}

/* Scroll reveals */
html.mo .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.mo .rv.rv-l{transform:translate3d(-72px,0,0)}
html.mo .rv.rv-r{transform:translate3d(72px,0,0)}
html.mo .rv.rv-f{transform:none}
html.mo .rv.in{opacity:1;transform:none}
@media (max-width:640px){html.mo .rv.rv-l{transform:translate3d(-36px,0,0)}html.mo .rv.rv-r{transform:translate3d(36px,0,0)}}

/* FAQ: the JS animates height; this keeps the content from spilling while it moves */
details.anim{overflow:hidden}

/* Page transition: a 3D logo spin. Wordmark, then the CE emblem, then the wordmark again. */
#cm-veil{--bg:#000;--front:url("/img/logo.png");--back:url("/img/emblem.png");--edge:.32;
  position:fixed;inset:0;z-index:9999;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .18s ease}
#cm-veil.on{opacity:1;pointer-events:auto}
#cm-veil .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:900px}
#cm-veil .coin{position:absolute;width:min(300px,64vw);aspect-ratio:799/184;transform-style:preserve-3d}
#cm-veil .coin[hidden]{display:none}
#cm-veil .coin.e{width:min(190px,42vw);aspect-ratio:2867/1444}
#cm-veil .coin i{position:absolute;inset:0}
#cm-veil .coin i:not(.sheen){background:var(--front) center/contain no-repeat}
#cm-veil .coin.e i:not(.sheen){background-image:var(--back)}
/* the solid edge: copies stacked behind the face, shaded darker */
#cm-veil .ly{transform:translateZ(calc(var(--z) * -1.6px));filter:brightness(var(--edge))}
#cm-veil .top{transform:translateZ(0)}
/* the light: a bright band clipped to the logo's own shape, moving as it turns */
#cm-veil .sheen{transform:translateZ(.5px);background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) 130% 0/300% 100% no-repeat;
  -webkit-mask:var(--front) center/contain no-repeat;mask:var(--front) center/contain no-repeat;mix-blend-mode:screen;opacity:.75}
#cm-veil .coin.e .sheen{-webkit-mask-image:var(--back);mask-image:var(--back)}

/* The emblem's spin: constant speed, edge to edge, repeating until the next page is ready.
   --sd lets the next page pick up the spin at the same point. */
#cm-veil{--spd:1100ms}
#cm-veil.spin .coin.e{animation:cm-spin var(--spd) linear var(--sd,0ms) infinite}
#cm-veil.spin .coin.e .top{animation:cm-lit var(--spd) linear var(--sd,0ms) infinite}
#cm-veil.spin .coin.e .sheen{animation:cm-sheen var(--spd) linear var(--sd,0ms) infinite}
@keyframes cm-spin{from{transform:rotateY(-90deg)}to{transform:rotateY(90deg)}}
@keyframes cm-lit{0%{filter:brightness(.5)}50%{filter:brightness(1.2)}100%{filter:brightness(.5)}}
@keyframes cm-sheen{from{background-position:85% 0}to{background-position:15% 0}}
#cm-veil.leave{transition:opacity .45s ease}

/* Light mode visitors: the card is off-white with the dark logo versions */
@media (prefers-color-scheme: light){
  #cm-veil{--bg:#F2EFE9;--front:url("/img/logo-ink.png");--back:url("/img/emblem-ink.png");--edge:3.2}
  #cm-veil .sheen{mix-blend-mode:normal;opacity:.55}
}