/*
 * Tamiyouz Alrowad / Marketing Packages — four over-image hero cards.
 * Dedicated CSS, scoped to .hero-media-card; no header/footer changes.
 * Motion starts only when .tyz-card-entering is added by hero-cards-motion.js.
 * Positions remain owned by existing hero CSS / responsive overrides.
 */
.hero .hero-media-card > :is(.hero-overlay,.hero-stat-card) {
  --tyz-card-drift-x: 3px;
  --tyz-card-drift-y: -8px;
  --tyz-card-entry-x: 0px;
  --tyz-card-entry-y: 19px;
  --tyz-card-delay: 0ms;
  --tyz-card-float-duration: 5400ms;
  --tyz-card-phase: -400ms;
  opacity: 1;
  transform-origin: center;
  backface-visibility: hidden;
  transition: border-color .32s ease, box-shadow .32s ease, translate .32s ease, scale .32s ease;
}
.hero .hero-media-card > .hero-overlay-top {
  --tyz-card-entry-x: 14px;
  --tyz-card-entry-y: -19px;
  --tyz-card-delay: 90ms;
  --tyz-card-drift-x: -3px;
  --tyz-card-drift-y: -10px;
  --tyz-card-float-duration: 5200ms;
  --tyz-card-phase: -300ms;
}
.hero .hero-media-card > .hero-stat-1 {
  --tyz-card-entry-x: -17px;
  --tyz-card-entry-y: -6px;
  --tyz-card-delay: 250ms;
  --tyz-card-drift-x: 5px;
  --tyz-card-drift-y: -7px;
  --tyz-card-float-duration: 6100ms;
  --tyz-card-phase: -1800ms;
}
.hero .hero-media-card > .hero-overlay-bottom-right {
  --tyz-card-entry-x: -15px;
  --tyz-card-entry-y: 16px;
  --tyz-card-delay: 410ms;
  --tyz-card-drift-x: 4px;
  --tyz-card-drift-y: 8px;
  --tyz-card-float-duration: 5700ms;
  --tyz-card-phase: -3000ms;
}
.hero .hero-media-card > .hero-stat-2 {
  --tyz-card-entry-x: 15px;
  --tyz-card-entry-y: 17px;
  --tyz-card-delay: 560ms;
  --tyz-card-drift-x: -4px;
  --tyz-card-drift-y: -9px;
  --tyz-card-float-duration: 6600ms;
  --tyz-card-phase: -4400ms;
}
.hero .hero-media-card > .tyz-card-entering {
  animation: tyz-card-arrive 820ms cubic-bezier(.17,.83,.2,1) var(--tyz-card-delay) both;
}
.hero .hero-media-card > .tyz-card-floating {
  animation: tyz-card-float var(--tyz-card-float-duration) ease-in-out var(--tyz-card-phase) infinite;
}
@keyframes tyz-card-arrive {
  from {
    opacity: 0;
    transform: translate3d(var(--tyz-card-entry-x),var(--tyz-card-entry-y),0) scale(.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
}
@keyframes tyz-card-float {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(var(--tyz-card-drift-x),var(--tyz-card-drift-y),0); }
}
@media (hover:hover) and (pointer:fine) {
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card):hover {
    translate: 0 -7px;
    scale: 1.035;
    border-color: rgba(245,198,107,.7);
    box-shadow:
      0 22px 50px rgba(0,0,0,.36),
      0 0 0 1px rgba(242,197,116,.12) inset,
      0 0 32px rgba(225,169,76,.19);
    z-index: 9;
  }
  .hero .hero-media-card > .tyz-card-floating:hover {
    animation-play-state: paused;
  }
}
@media (max-width: 650px) {
  /* Keep all four cards on their existing responsive coordinates. */
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card) {
    --tyz-card-entry-x: 0px;
    --tyz-card-entry-y: 10px;
    --tyz-card-drift-x: 0px;
    --tyz-card-drift-y: -3px;
    --tyz-card-float-duration: 7200ms;
    transition-duration: .25s;
  }
  .hero .hero-media-card > .tyz-card-entering {
    animation-duration: 600ms;
  }
}
@media (max-width: 390px) {
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card) {
    --tyz-card-drift-y: -2px;
    --tyz-card-float-duration: 8500ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card),
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card).tyz-card-entering,
  .hero .hero-media-card > :is(.hero-overlay,.hero-stat-card).tyz-card-floating {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
    transition: none !important;
  }
}