html {
  scroll-behavior: smooth;
}

::selection {
  background: #EA580C;
  color: #fff;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.img-skeleton {
  position: relative;
  overflow: hidden;
  background: #eee;
}
.img-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dot-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,.15) 1.4px, transparent 0);
  background-size: 26px 26px;
}

.toast {
  animation: toast-in .3s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* Header gains a soft shadow once the page scrolls */
#site-header.header-scrolled {
  box-shadow: 0 8px 30px -12px rgb(0 0 0 / 0.12);
}

/* Gentle floating motion for decorative accents */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-14px) translateX(6px); }
}
@keyframes float-slow-rev {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(12px) translateX(-8px); }
}
.float-a { animation: float-slow 7s ease-in-out infinite; }
.float-b { animation: float-slow-rev 8.5s ease-in-out infinite; }

/* Slow continuous spin for decorative ring/orbit motifs */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 18s linear infinite; transform-box: fill-box; transform-origin: center; }
.spin-slow-rev { animation: spin-slow 24s linear infinite reverse; transform-box: fill-box; transform-origin: center; }

/* Soft breathing pulse for badges/dots */
@keyframes pulse-soft {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
.pulse-soft { animation: pulse-soft 2.6s ease-in-out infinite; }

/* Fill-in animation for the recruitment-process connector line */
[data-reveal].line-fill {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.22,.9,.32,1);
}
[data-reveal].line-fill.reveal-visible {
  transform: scaleX(1);
}

/* Step number badge pop */
[data-reveal] .step-badge {
  transform: scale(.6);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
}
[data-reveal].reveal-visible .step-badge {
  transform: scale(1);
  opacity: 1;
}

/* Subtle icon nudge on card hover */
.icon-badge {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease;
}
.group:hover .icon-badge {
  transform: scale(1.12) rotate(-6deg);
}