/* =========================================================
   STEELS — HERO SLIDER STYLES
   ========================================================= */

.hero-slider {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
  min-height: 560px;
  max-height: 900px;
  overflow: hidden;
  background: var(--color-charcoal);
}

/* ----------------------------------------------------------
   TRACK & SLIDES
   ---------------------------------------------------------- */
.hero-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ----------------------------------------------------------
   BACKGROUND IMAGE
   ---------------------------------------------------------- */
.hero-slide__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 8s ease-out;
}

.hero-slider[data-active] .hero-slide.is-active .hero-slide__img {
  transform: scale(1.06);
}

/* Placeholder backgrounds (used when no image is set) */
.hero-slide__img--placeholder,
.hero-slide__img--default {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a5c 50%, var(--color-charcoal) 100%);
}

.hero-slide__img--default.hero-slide__img--1 {
  background:
    linear-gradient(135deg, rgba(10,34,64,.92) 0%, rgba(14,48,96,.8) 60%, rgba(26,35,50,.95) 100%),
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 40px,
      rgba(255,255,255,.02) 40px, rgba(255,255,255,.02) 41px
    );
}

.hero-slide__img--default.hero-slide__img--2 {
  background:
    linear-gradient(to bottom right, rgba(232,49,26,.18) 0%, rgba(10,34,64,.92) 40%, rgba(10,34,64,.98) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 60px
    );
}

.hero-slide__img--default.hero-slide__img--3 {
  background:
    linear-gradient(135deg, rgba(26,35,50,.95) 0%, rgba(10,34,64,.88) 50%, rgba(74,127,181,.25) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 30px,
      rgba(255,255,255,.015) 30px, rgba(255,255,255,.015) 31px
    );
}

/* Overlay */
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,34,64,1) 0%,
    rgba(10,34,64,.7) 40%,
    rgba(10,34,64,.2) 70%,
    transparent 100%
  );
}

/* ----------------------------------------------------------
   SLIDE CONTENT
   ---------------------------------------------------------- */
.hero-slide__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: var(--space-16) 0;
}

.hero-slide__content--center {
  justify-content: center;
  text-align: center;
}

.hero-slide__content--center .container > * { margin-left: auto; margin-right: auto; }

.hero-slide__content--right {
  justify-content: flex-end;
  text-align: right;
}

.hero-slide__content .container {
  max-width: var(--container-max);
  padding: 0 var(--space-6);
  width: 100%;
}

/* Eyebrow label */
.hero-slide__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;
}

/* Main title */
.hero-slide__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--text-hero));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
  max-width: 14ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s 0.35s, transform 0.6s 0.35s;
}

/* Description */
.hero-slide__desc {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-xl));
  color: rgba(255,255,255,.82);
  max-width: 52ch;
  line-height: 1.65;
  margin-top: var(--space-5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.5s, transform 0.6s 0.5s;
}

/* Actions */
.hero-slide__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s 0.65s, transform 0.6s 0.65s;
}

.hero-slide__content--center .hero-slide__actions { justify-content: center; }
.hero-slide__content--right .hero-slide__actions { justify-content: flex-end; }

/* Animate in when active */
.hero-slide.is-active .hero-slide__eyebrow,
.hero-slide.is-active .hero-slide__title,
.hero-slide.is-active .hero-slide__desc,
.hero-slide.is-active .hero-slide__actions {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   CONTROLS
   ---------------------------------------------------------- */
.hero-controls {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  z-index: 10;
}

.hero-controls__btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
  backdrop-filter: blur(4px);
}
.hero-controls__btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); transform: scale(1.08); }

/* Dots */
.hero-controls__dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base), width var(--transition-base);
  padding: 0;
}

.hero-dot.is-active {
  background: var(--color-white);
  width: 24px;
  border-radius: 4px;
  transform: none;
}

/* ----------------------------------------------------------
   PROGRESS BAR
   ---------------------------------------------------------- */
.hero-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.15);
  z-index: 10;
}

.hero-progress__bar {
  height: 100%;
  background: var(--color-accent);
  width: 0%;
  transition: width linear;
}

/* ----------------------------------------------------------
   SCROLL CUE
   ---------------------------------------------------------- */
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,.55);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 10;
  animation: scrollFade 2s ease-in-out infinite;
}

@keyframes scrollFade {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(4px); }
}

.hero-scroll-cue__mouse {
  width: 22px; height: 34px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.hero-scroll-cue__wheel {
  width: 4px; height: 6px;
  background: rgba(255,255,255,.6);
  border-radius: 2px;
  animation: scrollWheel 1.5s ease-in-out infinite;
}

@keyframes scrollWheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(8px); opacity: 0; }
}

/* ----------------------------------------------------------
   PAGE HERO (inner pages)
   ---------------------------------------------------------- */
.page-hero {
  padding: var(--space-12) 0 var(--space-10);
  position: relative;
}

.page-hero--small { padding: var(--space-10) 0 var(--space-8); }

.page-hero__inner { max-width: 800px; }

.page-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.75);
  margin-top: var(--space-4);
  max-width: 600px;
  line-height: 1.7;
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .hero-slider { height: calc(100svh - 60px); min-height: 480px; }
  .hero-slide__overlay {
    background: rgba(10,34,64,.65);
  }
  .hero-slide__content { align-items: flex-end; padding: var(--space-8) 0; }
  .hero-slide__title { max-width: none; }
  .hero-slide__actions { gap: var(--space-3); }
  .hero-scroll-cue { display: none; }
  .hero-controls { bottom: var(--space-5); }
}

@media (max-width: 480px) {
  .hero-slide__actions .btn { width: 100%; justify-content: center; }
  .hero-slide__actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { transition: none; }
  .hero-slide__img { transition: none; }
  .hero-slide__eyebrow, .hero-slide__title, .hero-slide__desc, .hero-slide__actions { transition: none; opacity: 1; transform: none; }
  .hero-scroll-cue { animation: none; }
  .hero-scroll-cue__wheel { animation: none; }
}