@keyframes logo-rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.logo-animated {
  animation: logo-rotate 800ms ease-out 1;
}
@keyframes pulse-border {
  0% { border-bottom-color: #993556; }
  50% { border-bottom-color: #4B1528; }
  100% { border-bottom-color: #993556; }
}
.warnbar {
  animation: pulse-border 3s infinite;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}
.operators-grid .operator-card {
  opacity: 0;
  transform: translateY(40px) rotateY(15deg);
  transition: opacity 600ms cubic-bezier(0.25, 1, 0.5, 1), transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
  backface-visibility: hidden;
}
.operators-grid .operator-card.active {
  opacity: 1;
  transform: translateY(0) rotateY(0deg);
}
.operator-card:hover,
.region-panel:hover {
  box-shadow: 0 12px 32px rgba(133, 79, 11, 0.25);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
}
.btn--primary:hover::before {
  left: 150%;
  transition: left 800ms ease-in-out;
}
.journal-card {
  position: relative;
}
.journal-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0%;
  background-color: var(--joker-or);
  transition: height 800ms ease-out;
}
.journal-card.active::before {
  height: 100%;
}
.journal-card--full.regional::before { background-color: var(--carreau); }
.journal-card--full.operator::before { background-color: var(--joker-or); }
.journal-card--full.reglementation::before { background-color: var(--pique); }
.journal-card--full.responsable::before { background-color: var(--trefle); }