/**
 * Logo micro-animations
 *
 * Four animations that can play on the .cc-nav__logo-line colour bars:
 *   1. slot     – bars light up L→R with a vertical stretch
 *   2. shimmer  – brightness sweep glides across
 *   3. shuffle  – colours rotate through positions then return
 *   4. wave     – sine-wave ripple travels through the bars
 *
 * Triggered by adding .cc-logo-anim--{name} + .cc-logo-anim--playing
 * to the .navbar-brand element.
 */

/* Shared: bars need transform-origin for vertical effects */
.cc-logo-anim--slot .cc-nav__logo-line span,
.cc-logo-anim--wave .cc-nav__logo-line span {
  transform-origin: bottom;
}

/* ── 1. SLOT MACHINE ──────────────────────────────────── */
@keyframes cc-slot-flash {
  0%, 100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
  15%      { opacity: 1; transform: scaleY(2.5); filter: brightness(1.8); }
  30%      { transform: scaleY(1); filter: brightness(1.2); }
  50%      { opacity: 1; filter: brightness(1); }
}

.cc-logo-anim--slot.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(1) {
  animation: cc-slot-flash 0.5s ease-out;
}
.cc-logo-anim--slot.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(2) {
  animation: cc-slot-flash 0.5s ease-out 0.15s;
}
.cc-logo-anim--slot.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(3) {
  animation: cc-slot-flash 0.5s ease-out 0.3s;
}
.cc-logo-anim--slot.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(4) {
  animation: cc-slot-flash 0.5s ease-out 0.45s;
}

/* ── 2. SHIMMER SWEEP ─────────────────────────────────── */
@keyframes cc-shimmer-sweep {
  0%       { filter: brightness(1); }
  20%      { filter: brightness(2); }
  40%      { filter: brightness(1); }
  100%     { filter: brightness(1); }
}

.cc-logo-anim--shimmer.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(1) {
  animation: cc-shimmer-sweep 0.8s ease-in-out;
}
.cc-logo-anim--shimmer.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(2) {
  animation: cc-shimmer-sweep 0.8s ease-in-out 0.1s;
}
.cc-logo-anim--shimmer.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(3) {
  animation: cc-shimmer-sweep 0.8s ease-in-out 0.2s;
}
.cc-logo-anim--shimmer.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(4) {
  animation: cc-shimmer-sweep 0.8s ease-in-out 0.3s;
}

/* ── 3. COLOUR SHUFFLE ────────────────────────────────── */
@keyframes cc-shuffle-1 {
  0%, 100% { background: var(--sage); }
  25%      { background: var(--sky); }
  50%      { background: var(--rust); }
  75%      { background: var(--amber); }
}
@keyframes cc-shuffle-2 {
  0%, 100% { background: var(--rust); }
  25%      { background: var(--sage); }
  50%      { background: var(--amber); }
  75%      { background: var(--sky); }
}
@keyframes cc-shuffle-3 {
  0%, 100% { background: var(--amber); }
  25%      { background: var(--rust); }
  50%      { background: var(--sky); }
  75%      { background: var(--sage); }
}
@keyframes cc-shuffle-4 {
  0%, 100% { background: var(--sky); }
  25%      { background: var(--amber); }
  50%      { background: var(--sage); }
  75%      { background: var(--rust); }
}

.cc-logo-anim--shuffle.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(1) {
  animation: cc-shuffle-1 0.8s ease-in-out;
}
.cc-logo-anim--shuffle.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(2) {
  animation: cc-shuffle-2 0.8s ease-in-out;
}
.cc-logo-anim--shuffle.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(3) {
  animation: cc-shuffle-3 0.8s ease-in-out;
}
.cc-logo-anim--shuffle.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(4) {
  animation: cc-shuffle-4 0.8s ease-in-out;
}

/* ── 4. WAVE ──────────────────────────────────────────── */
@keyframes cc-wave-ripple {
  0%, 100% { transform: scaleY(1); }
  30%      { transform: scaleY(3.5); }
  60%      { transform: scaleY(0.5); }
  80%      { transform: scaleY(1.3); }
}

.cc-logo-anim--wave.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(1) {
  animation: cc-wave-ripple 0.7s ease-in-out;
}
.cc-logo-anim--wave.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(2) {
  animation: cc-wave-ripple 0.7s ease-in-out 0.12s;
}
.cc-logo-anim--wave.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(3) {
  animation: cc-wave-ripple 0.7s ease-in-out 0.24s;
}
.cc-logo-anim--wave.cc-logo-anim--playing .cc-nav__logo-line span:nth-child(4) {
  animation: cc-wave-ripple 0.7s ease-in-out 0.36s;
}