/* Live personal-project covers (see scripts/cover-motion.js).
 * 1em = 100 units of the 1672 × 941 cover, so the layer lines up with the static image beneath it.
 * Rest-state transitions set the leave timing; `.is-cover-awake` rules set the enter timing. */
.floating-card-preview:has(.cover-live),
.floating-card-preview:has(.cover-product-logo) { position: relative; container-type: inline-size; }

/* Small product marks sit at the lower centre of contribution covers. */
.cover-product-logo {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 10%;
  aspect-ratio: 1;
  background: center / contain no-repeat;
  filter: drop-shadow(0 4px 4px rgba(36, 32, 68, .2));
  pointer-events: none;
  translate: -50% 0;
  transform-origin: 50% 75%;
}
.cover-product-logo--soft { filter: drop-shadow(0 2px 2px rgba(36, 32, 68, .1)); }
/* Match visible mark size despite the Bot Builder PNG's wider transparent margin. */
.cover-product-logo--bot-builder { background-size: 140%; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .editorial-card:hover .cover-product-logo,
  .editorial-card:focus-visible .cover-product-logo { animation: cover-logo-sway 1400ms ease-in-out both; }
}
@keyframes cover-logo-sway {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-5deg); }
  55% { transform: translateX(3px) rotate(4deg); }
  80% { transform: translateX(-1px) rotate(-1.5deg); }
}

.cover-live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: calc(100cqw / 16.72);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  pointer-events: none;
  user-select: none;
}

.cover-live .cl-bg,
.cover-live .cl-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-live .cl-bg { background: var(--cl-bg); }

.cover-live .cl-icon {
  position: absolute;
  left: 6.36em;
  top: 2.33em;
  width: 4em;
  height: 4em;
  isolation: isolate;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1) 150ms, opacity 400ms ease 150ms;
}
.cover-live .cl-icon img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 .04em .05em rgba(var(--cl-shadow), .28));
}

/* The icon stands on the cover's surface under a soft studio light from the top left, like the PeekLink and
 * ReadyToWhip covers. Its shadow is its own silhouette (masked from the icon image), stacked three times:
 * pushed a little further down and right each time, blurrier and lighter — dark and tight where it meets
 * the ground, wrapping the rounded corners, then falling off softly. --cl-shadow is a deep tone of the background. */
.cover-live { --cl-shadow: 52, 36, 30; }
/* The outer span blurs, the inner one is the flattened silhouette: a mask is applied after a filter,
 * so blurring the masked element itself would cut the blur off at the silhouette's edge. */
.cover-live .cl-shade { position: absolute; inset: 0; z-index: -1; transition: opacity 300ms ease; }
.cover-live .cl-icon.is-loading .cl-shade { opacity: 0; }
.cover-live .cl-shade i {
  position: absolute;
  inset: 0;
  background: rgb(var(--cl-shadow));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cover-live .cl-shade--contact { opacity: .6; filter: blur(.025em); }
.cover-live .cl-shade--contact i { transform: translate(.01em, .035em); }
.cover-live .cl-shade--mid { opacity: .36; filter: blur(.08em); }
.cover-live .cl-shade--mid i { transform: translate(.05em, .12em) scale(1.01, 1); }
.cover-live .cl-shade--far { opacity: .24; filter: blur(.22em); }
.cover-live .cl-shade--far i { transform: translate(.15em, .3em) scale(1.05, 1); }

.cover-live .cl-caption {
  position: absolute;
  top: 4.385em; /* 114 units, in the caption's own 26-unit em */
  left: 0;
  right: 0;
  text-align: center;
  font: 700 .26em/1.54 "SF Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--cl-accent);
  opacity: .9;
}

.cover-live .cl-tags {
  position: absolute;
  top: 7.24em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .3em;
}

.cover-live .cl-tag {
  display: flex;
  align-items: center;
  gap: .55em;
  height: 2.5em;
  padding: 0 2.15em 0 2.2em;
  border-radius: 1.25em;
  background: #fff;
  box-shadow: 0 .25em .75em rgba(80, 60, 40, .06);
  color: #141a2e;
  font-size: .4em;
  font-weight: 700;
  letter-spacing: -.015em;
  white-space: nowrap;
}

.cover-live .cl-tag i {
  width: .8em;
  height: .8em;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 .175em color-mix(in srgb, var(--dot) 28%, transparent);
}

/* Caption and tags step aside while the product moment plays, and return once it has cleared. */
.cover-live :is(.cl-caption, .cl-tags) {
  transition: opacity 450ms ease 300ms, transform 600ms cubic-bezier(.22, 1, .36, 1) 300ms;
}
.is-cover-awake .cover-live :is(.cl-caption, .cl-tags) {
  opacity: 0;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.4, 0, 1, 1);
}
.is-cover-awake .cover-live .cl-caption { transform: translateY(-.3em); }
.is-cover-awake .cover-live .cl-tags { transform: translateY(.3em); }

/* Idle loops sleep while the card is off screen. */
.floating-card:not(.is-cover-visible) .cover-live * { animation-play-state: paused !important; }

/* BrowserRouter ---------------------------------------------------------- */
.cover-live--router .br-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: br-breathe 4.8s ease-in-out infinite;
}

.cover-live--router :is(.br-ray, .br-spark) {
  fill: none;
  stroke-linecap: round;
}
.cover-live--router .br-ray { stroke-width: 9px; }

.cover-live--router .br-spark {
  stroke-width: 11px;
  stroke-dasharray: 4 200;
  animation: br-spark 2.8s cubic-bezier(.3, 0, .6, 1) infinite;
}

.cover-live--router .br-idle { transition: opacity 600ms ease 350ms; }
.is-cover-awake .cover-live--router .br-idle { opacity: 0; transition: opacity 300ms ease; }

.is-cover-awake .cover-live--router .cl-icon {
  transform: translateY(.37em) scale(.8);
  transition: transform 800ms cubic-bezier(.65, 0, .35, 1);
}

.cover-live--router .br-rail {
  fill: none;
  stroke-width: 12px;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 380ms cubic-bezier(.4, 0, 1, 1);
}

.is-cover-awake .cover-live--router .br-rail {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 950ms cubic-bezier(.65, 0, .35, 1) calc(280ms + var(--i) * 90ms);
}

.cover-live--router .br-comet {
  fill: none;
  stroke: #fff;
  stroke-width: 7px;
  stroke-linecap: round;
  stroke-dasharray: 7 200;
  opacity: 0;
  transition: opacity 150ms ease;
  animation: br-comet 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: calc(var(--i) * -.37s);
}
.cover-live--router .br-comet--glow { stroke: var(--c); stroke-width: 24px; }
.cover-live--router .br-comet--late { animation-delay: calc(var(--i) * -.37s - .95s); }

.is-cover-awake .cover-live--router .br-comet { opacity: .95; transition: opacity 500ms ease 1150ms; }
.is-cover-awake .cover-live--router .br-comet--glow { opacity: .75; }

.cover-live--router .br-logo {
  opacity: 0;
  transform-box: view-box;
  transform: scale(.6);
  transition: opacity 200ms ease, transform 300ms ease;
}

.is-cover-awake .cover-live--router .br-logo {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease calc(850ms + var(--i) * 90ms), transform 700ms cubic-bezier(.34, 1.56, .64, 1) calc(850ms + var(--i) * 90ms);
}

.cover-live--router .br-ripple {
  fill: none;
  stroke: var(--c);
  stroke-width: 4px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.is-cover-awake .cover-live--router .br-ripple {
  animation: br-ripple 1.9s ease-out 1.4s infinite;
  animation-delay: calc(1.4s + var(--i) * .37s);
}

@keyframes br-breathe { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.06); opacity: .9; } }
@keyframes br-spark { from { stroke-dashoffset: -14; } to { stroke-dashoffset: -88; } }
@keyframes br-comet { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -100; } }
@keyframes br-ripple { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.45); opacity: 0; } }

/* KeepAwake -------------------------------------------------------------- */
.cover-live--keepawake .ka-sparkle {
  fill: var(--cl-accent);
  opacity: .45;
  animation: ka-twinkle 3.2s ease-in-out infinite;
}

.cover-live--keepawake .ka-z {
  color: var(--cl-accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ka-float 3.6s ease-out infinite;
}

.cover-live--keepawake .ka-idle { transition: opacity 500ms ease 500ms; }
.is-cover-awake .cover-live--keepawake .ka-idle { opacity: 0; transition: opacity 200ms ease; }

/* The icon flies up into the menu bar and becomes the status item. */
.is-cover-awake .cover-live--keepawake .cl-icon {
  transform: translate(3.52em, -4.05em) scale(.08);
  opacity: 0;
  transition: transform 760ms cubic-bezier(.6, 0, .3, 1) 120ms, opacity 180ms ease 720ms;
}

.cover-live--keepawake .ka-sky { opacity: 0; transition: opacity 550ms ease 200ms; }
.is-cover-awake .cover-live--keepawake .ka-sky { opacity: 1; transition: opacity 700ms ease; }

.cover-live--keepawake :is(.ka-menubar, .ka-panel) { transform-box: view-box; opacity: 0; }
.cover-live--keepawake .ka-menubar { transform: translateY(-56px); transition: opacity 250ms ease, transform 300ms ease; }
.cover-live--keepawake .ka-panel {
  transform: translateY(-60px) scale(.96);
  transform-origin: 1190px 56px;
  transition: opacity 220ms ease, transform 300ms ease;
}
.is-cover-awake .cover-live--keepawake .ka-menubar {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease 380ms, transform 500ms cubic-bezier(.22, 1, .36, 1) 380ms;
}
.is-cover-awake .cover-live--keepawake .ka-panel {
  opacity: 1;
  transform: none;
  transition: opacity 380ms ease 820ms, transform 650ms cubic-bezier(.22, 1, .36, 1) 820ms;
}

.cover-live--keepawake text { fill: #1d1d1f; font-size: 47px; }
.cover-live--keepawake .ka-menubar text { fill: #fff; font-size: 26px; }
.cover-live--keepawake .ka-menubar svg { color: #fff; }
.cover-live--keepawake .ka-status-item { fill: #fff; fill-opacity: 0; transition: fill-opacity 300ms ease; }
.cover-live--keepawake :is(.ka-status-cup, .ka-status-time) { opacity: 0; }

.cover-live--keepawake .ka-side text { font-size: 50px; font-weight: 700; transition: fill 200ms ease; }
.cover-live--keepawake .ka-side text.ka-emoji { font-size: 54px; }
.cover-live--keepawake .ka-side--coffee text,
.is-cover-awake .cover-live--keepawake .ka-side--sleep text { fill: #3f6d9d; font-weight: 600; }
.is-cover-awake .cover-live--keepawake .ka-side--coffee text { fill: #1d1d1f; font-weight: 700; }

.cover-live--keepawake .ka-switch { fill: #3c506e; fill-opacity: .22; transition: fill 220ms ease, fill-opacity 220ms ease; }
.cover-live--keepawake .ka-knob { transform-box: view-box; transition: transform 340ms cubic-bezier(.3, 1.4, .5, 1); }

.cover-live--keepawake .ka-state { font-size: 44px; fill: #56708e; }
.cover-live--keepawake .ka-state--awake { opacity: 0; }

.cover-live--keepawake .ka-duration { opacity: .42; }
.cover-live--keepawake .ka-duration-value { fill: #3a6b98; }
.cover-live--keepawake .ka-slider-fill { fill: #8fa5bf; transition: fill 260ms ease; }
.cover-live--keepawake .ka-slider-dots circle { fill: #285082; fill-opacity: .35; }
.cover-live--keepawake .ka-slider-dots circle.is-filled { fill: #fff; fill-opacity: .6; }

.cover-live--keepawake :is(.ka-dawn, .ka-night, .ka-stars, .ka-state, .ka-duration, .ka-status-sleep, .ka-status-cup, .ka-status-time) {
  transition: opacity 420ms ease;
}
.cover-live--keepawake .ka-dawn { opacity: .3; }
.cover-live--keepawake .ka-night { opacity: .38; }
.cover-live--keepawake .ka-stars { opacity: .75; }

.is-cover-awake .cover-live--keepawake .ka-switch { fill: #0a7cff; fill-opacity: 1; }
.is-cover-awake .cover-live--keepawake .ka-knob { transform: translateX(74px); }
.is-cover-awake .cover-live--keepawake :is(.ka-state--asleep, .ka-status-sleep) { opacity: 0; }
.is-cover-awake .cover-live--keepawake :is(.ka-state--awake, .ka-duration, .ka-status-cup, .ka-status-time) { opacity: 1; }
.is-cover-awake .cover-live--keepawake .ka-status-item { fill-opacity: .2; }
.is-cover-awake .cover-live--keepawake .ka-slider-fill { fill: #0a7cff; }
.is-cover-awake .cover-live--keepawake .ka-dawn { opacity: 1; transition-duration: 1000ms; }
.is-cover-awake .cover-live--keepawake .ka-night { opacity: 0; transition-duration: 1000ms; }
.is-cover-awake .cover-live--keepawake .ka-stars { opacity: .2; transition-duration: 1000ms; }

/* The switch waits until the menu has landed; leaving resets at once, hidden behind the fade-out. */
.is-cover-awake .cover-live--keepawake :is(.ka-switch, .ka-knob, .ka-side text, .ka-state, .ka-status-item, .ka-status-sleep, .ka-status-cup, .ka-status-time, .ka-dawn, .ka-night, .ka-stars) {
  transition-delay: 1500ms;
}
.is-cover-awake .cover-live--keepawake :is(.ka-duration, .ka-slider-fill) { transition-delay: 1660ms; }

@keyframes ka-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .75; } }
@keyframes ka-float {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  20% { opacity: .85; }
  100% { transform: translate(70px, -150px) scale(1.15); opacity: 0; }
}

/* Music Wall ------------------------------------------------------------- */
.cover-live--shuffle .mw-ribbon {
  top: 3.58em;
  height: 1.5em;
  overflow: visible;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  transition: opacity 500ms ease 250ms, transform 700ms cubic-bezier(.22, 1, .36, 1) 250ms;
}

.cover-live--shuffle .mw-track {
  display: flex;
  gap: .3em;
  width: max-content;
  padding-right: .3em;
  animation: mw-drift 48s linear infinite;
}

.cover-live--shuffle .mw-tile {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: .14em;
  background-repeat: no-repeat;
  transform: translateY(var(--lift));
  box-shadow: 0 .1em .3em rgba(60, 30, 20, .16);
}

.is-cover-awake .cover-live--shuffle .mw-ribbon {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 350ms ease, transform 600ms ease;
}

/* The icon dissolves into the wall, which comes into focus around it. */
.is-cover-awake .cover-live--shuffle .cl-icon {
  transform: scale(.55);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.4, 0, .2, 1), opacity 450ms ease 200ms;
}

.cover-live--shuffle .mw-wall {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  filter: blur(.12em);
  transition: opacity 350ms ease 100ms, transform 500ms ease 100ms, filter 400ms ease 100ms;
}

.is-cover-awake .cover-live--shuffle .mw-wall {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 650ms ease 150ms, transform 1100ms cubic-bezier(.22, 1, .36, 1) 150ms, filter 900ms ease 150ms;
}

/* The reveal (scripts/cover-motion.js, after the app's IOSShuffleReveal) drives these inline while awake. */
.cover-live--shuffle .mw-dim { background: #000; opacity: 0; }

.cover-live--shuffle .mw-glow {
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 380ms ease;
}
.cover-live--shuffle .mw-glow--cloud { filter: blur(.22em); }
.cover-live--shuffle .mw-glow--sharp { filter: blur(.09em); }
.is-cover-awake .cover-live--shuffle .mw-glow { opacity: 1; transition: none; }

.cover-live--shuffle .mw-halo {
  position: absolute;
  width: 5.44em;
  height: 5.44em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #fff) 55%, transparent), transparent);
  mix-blend-mode: screen;
  opacity: 0;
}

.cover-live--shuffle .mw-cover {
  position: absolute;
  width: 3.4em;
  height: 3.4em;
  border-radius: .136em;
  background-repeat: no-repeat;
  box-shadow: 0 .2em .5em rgba(0, 0, 0, .45);
  opacity: 0;
}

@keyframes mw-drift { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .cover-live :is(.br-spark, .br-comet, .ka-z, .ka-sparkle, .mw-track) { animation: none; }
}