/* ============================================================
   PRINTPRO HERO SLIDER — Premium Revolution-Style
   Add to style.css or import as a separate file.
   Sits in the existing design system / color tokens.
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --hs-primary:        #E53935;          /* existing brand red   */
  --hs-primary-dark:   #B71C1C;
  --hs-primary-light:  rgba(229,57,53,.15);
  --hs-accent:         #FF7043;          /* warm orange accent   */
  --hs-white:          #ffffff;
  --hs-white-80:       rgba(255,255,255,.80);
  --hs-white-60:       rgba(255,255,255,.60);
  --hs-white-12:       rgba(255,255,255,.12);
  --hs-white-08:       rgba(255,255,255,.08);
  --hs-dark:           #0d0d0d;
  --hs-dark-alt:       #1a1a2e;

  /* Slide-specific gradient palettes */
  --hs-grad-1: linear-gradient(135deg, #1a0a0a 0%, #2d0c0c 40%, #1a1a2e 100%);
  --hs-grad-2: linear-gradient(135deg, #0a1628 0%, #142240 40%, #1a1a2e 100%);
  --hs-grad-3: linear-gradient(135deg, #0d0d1a 0%, #1a0d33 40%, #2d1b2e 100%);
  --hs-grad-4: linear-gradient(135deg, #0a1a0d 0%, #0d2614 40%, #1a1a2e 100%);
  --hs-grad-5: linear-gradient(135deg, #1a1200 0%, #2d1f00 40%, #1a1a2e 100%);

  /* Timing */
  --hs-transition-dur:  750ms;
  --hs-autoplay-dur:    5000ms;

  /* Heights */
  --hs-h-desktop: 850px;
  --hs-h-tablet:  700px;
  --hs-h-mobile:  600px;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.hero-slider-section {
  position:   relative;
  width:      100%;
  height:     var(--hs-h-desktop);
  overflow:   hidden;
  background: var(--hs-dark-alt);
  /* Prevent layout shift while JS initialises */
  contain: layout style;
}

/* ── Track ──────────────────────────────────────────────────── */
.hs-track {
  position: relative;
  width:    100%;
  height:   100%;
}

/* ── Individual Slide ───────────────────────────────────────── */
.hs-slide {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  /* Hidden by default; active class reveals */
  opacity:    0;
  visibility: hidden;
  pointer-events: none;
  /* Smooth fade */
  transition:
    opacity      var(--hs-transition-dur) cubic-bezier(.4,0,.2,1),
    visibility   var(--hs-transition-dur) cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}

.hs-slide.hs-slide--active {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  z-index:        2;
}

/* ── Background Layer ───────────────────────────────────────── */
.hs-bg {
  position: absolute;
  inset:    0;
  z-index:  0;
  overflow: hidden;
  /* Subtle ken-burns zoom on active slide */
  transform: scale(1.04);
  transition: transform calc(var(--hs-transition-dur) + 3000ms) ease-out;
}

.hs-slide--active .hs-bg {
  transform: scale(1);
}

/* Per-slide gradient backgrounds */
.hs-bg--1 { background: var(--hs-grad-1); }
.hs-bg--2 { background: var(--hs-grad-2); }
.hs-bg--3 { background: var(--hs-grad-3); }
.hs-bg--4 { background: var(--hs-grad-4); }
.hs-bg--5 { background: var(--hs-grad-5); }

/* Noise/grain texture overlay for depth */
.hs-bg-overlay {
  position: absolute;
  inset:    0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%,
                    rgba(229,57,53,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%,
                    rgba(255,255,255,.03) 0%, transparent 60%);
  z-index: 1;
}

/* ── Decorative Floating Shapes ─────────────────────────────── */
.hs-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.hs-shape--circle-lg {
  width:  500px;
  height: 500px;
  top:    -120px;
  right:  -100px;
  background: radial-gradient(circle,
    rgba(229,57,53,.12) 0%,
    rgba(229,57,53,.04) 50%,
    transparent 70%);
  animation: hs-float-slow 8s ease-in-out infinite;
}

.hs-shape--circle-sm {
  width:  220px;
  height: 220px;
  bottom: 60px;
  left:   -60px;
  background: radial-gradient(circle,
    rgba(255,112,67,.10) 0%,
    transparent 70%);
  animation: hs-float-slow 6s ease-in-out infinite reverse;
}

.hs-shape--blob {
  width:  340px;
  height: 340px;
  top:    40%;
  left:   38%;
  transform: translateY(-50%);
  background: radial-gradient(circle,
    rgba(255,255,255,.025) 0%,
    transparent 70%);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%;
  animation: hs-blob 12s ease-in-out infinite;
}

.hs-shape--ring {
  width:  180px;
  height: 180px;
  top:    15%;
  left:   5%;
  border: 1px solid rgba(255,255,255,.06);
  background: transparent;
  animation: hs-spin 20s linear infinite;
}

.hs-shape--dots {
  width:  200px;
  height: 200px;
  bottom: 10%;
  right:  8%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: transparent;
  border-radius: 0;
  animation: hs-float-slow 10s ease-in-out infinite;
}

/* ── Inner Layout ───────────────────────────────────────────── */
.hs-inner {
  position:        relative;
  z-index:         10;
  display:         flex;
  align-items:     center;
  height:          100%;
  gap:             3rem;
  padding-top:     2rem;
  padding-bottom:  2rem;
}

/* LEFT: Content */
.hs-content {
  flex:      0 0 52%;
  max-width: 52%;
}

/* RIGHT: Visual */
.hs-visual {
  flex:      1;
  display:   flex;
  justify-content: flex-end;
  align-items:     center;
}

/* ── Content Elements ───────────────────────────────────────── */

/* Badge */
.hs-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  padding:        .45rem 1rem;
  background:     rgba(229,57,53,.18);
  border:         1px solid rgba(229,57,53,.35);
  border-radius:  50px;
  color:          #FF8A80;
  font-size:      .8rem;
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom:  1.25rem;
  /* Glassmorphism */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hs-badge i {
  font-size: .85rem;
  color:     var(--hs-primary);
}

/* Title */
.hs-title {
  font-family:   'Poppins', sans-serif;
  font-size:     clamp(2rem, 3.5vw, 3.2rem);
  font-weight:   800;
  line-height:   1.15;
  color:         var(--hs-white);
  margin-bottom: 1.1rem;
  letter-spacing: -.02em;
}

.hs-title-accent {
  color: var(--hs-primary);
  position: relative;
  display: inline-block;
}

/* Underline decoration on accent word */
.hs-title-accent::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  width:      100%;
  height:     3px;
  background: linear-gradient(90deg, var(--hs-primary), var(--hs-accent));
  border-radius: 2px;
}

/* Subtitle */
.hs-subtitle {
  font-size:     clamp(.9rem, 1.5vw, 1.1rem);
  font-weight:   400;
  color:         var(--hs-white-80);
  line-height:   1.7;
  margin-bottom: 2rem;
  max-width:     480px;
}

/* CTA row */
.hs-cta-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       .85rem;
  margin-bottom: 2rem;
}

/* Buttons */
.hs-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  padding:         .85rem 1.75rem;
  border-radius:   50px;
  font-family:     'Poppins', sans-serif;
  font-size:       .9rem;
  font-weight:     600;
  text-decoration: none;
  letter-spacing:  .02em;
  transition:      transform .25s ease, box-shadow .25s ease, background .25s ease;
  cursor:          pointer;
  border:          none;
  white-space:     nowrap;
}

.hs-btn:focus-visible {
  outline:        3px solid rgba(255,255,255,.7);
  outline-offset: 3px;
}

.hs-btn--primary {
  background:  linear-gradient(135deg, var(--hs-primary), var(--hs-accent));
  color:       var(--hs-white);
  box-shadow:  0 8px 30px rgba(229,57,53,.45);
}

.hs-btn--primary:hover {
  transform:   translateY(-3px) scale(1.02);
  box-shadow:  0 14px 40px rgba(229,57,53,.6);
  color:       var(--hs-white);
}

.hs-btn--whatsapp {
  background:  rgba(37,211,102,.15);
  color:       #4ADE80;
  border:      1.5px solid rgba(37,211,102,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hs-btn--whatsapp:hover {
  background:  rgba(37,211,102,.28);
  transform:   translateY(-3px) scale(1.02);
  box-shadow:  0 10px 30px rgba(37,211,102,.3);
  color:       #4ADE80;
}

/* Trust row */
.hs-trust {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem 1.5rem;
}

.hs-trust-item {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   .8rem;
  font-weight: 500;
  color:       var(--hs-white-60);
}

.hs-trust-item i {
  font-size: .9rem;
  color:     var(--hs-primary);
}

/* ── Image / Visual Side ────────────────────────────────────── */
.hs-image-wrap {
  position: relative;
  width:    100%;
  max-width: 480px;
}

/* Glassmorphism card container */
.hs-image-glass {
  position:     relative;
  border-radius: 28px;
  padding:       2.5rem 2rem;
  background:   rgba(255,255,255,.04);
  border:       1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 40px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Per-slide accent glow on the card */
.hs-slide[data-index="0"] .hs-image-glass { box-shadow: 0 40px 80px rgba(229,57,53,.20), 0 0 0 1px rgba(229,57,53,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.hs-slide[data-index="1"] .hs-image-glass { box-shadow: 0 40px 80px rgba(30,136,229,.20), 0 0 0 1px rgba(30,136,229,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.hs-slide[data-index="2"] .hs-image-glass { box-shadow: 0 40px 80px rgba(156,39,176,.20), 0 0 0 1px rgba(156,39,176,.12), inset 0 1px 0 rgba(255,255,255,.08); }
.hs-slide[data-index="3"] .hs-image-glass { box-shadow: 0 40px 80px rgba(56,142,60,.20),  0 0 0 1px rgba(56,142,60,.12),  inset 0 1px 0 rgba(255,255,255,.08); }
.hs-slide[data-index="4"] .hs-image-glass { box-shadow: 0 40px 80px rgba(255,193,7,.20),  0 0 0 1px rgba(255,193,7,.12),  inset 0 1px 0 rgba(255,255,255,.08); }

/* Image placeholder  */
.hs-img-placeholder {
  position:        relative;
  width:           100%;
  aspect-ratio:    1 / .85;
  border-radius:   18px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  overflow:        hidden;
}

/* Per-slide colour themes for the placeholder */
.hs-img-placeholder--1 { background: radial-gradient(circle at 50% 40%, rgba(229,57,53,.18) 0%, rgba(229,57,53,.04) 70%); }
.hs-img-placeholder--2 { background: radial-gradient(circle at 50% 40%, rgba(30,136,229,.18) 0%, rgba(30,136,229,.04) 70%); }
.hs-img-placeholder--3 { background: radial-gradient(circle at 50% 40%, rgba(156,39,176,.18) 0%, rgba(156,39,176,.04) 70%); }
.hs-img-placeholder--4 { background: radial-gradient(circle at 50% 40%, rgba(56,142,60,.18)  0%, rgba(56,142,60,.04)  70%); }
.hs-img-placeholder--5 { background: radial-gradient(circle at 50% 40%, rgba(255,193,7,.18)  0%, rgba(255,193,7,.04)  70%); }

/* Icon rings */
.hs-img-icon-ring {
  position: relative;
  width:    140px;
  height:   140px;
  display:  flex;
  align-items: center;
  justify-content: center;
}

.hs-ring {
  position:     absolute;
  border-radius: 50%;
  border:       1px solid rgba(255,255,255,.10);
  animation:    hs-spin-ring 12s linear infinite;
}

.hs-ring--1 { width:  80px; height:  80px; animation-duration: 8s; }
.hs-ring--2 { width: 115px; height: 115px; animation-duration: 12s; animation-direction: reverse; }
.hs-ring--3 { width: 145px; height: 145px; animation-duration: 18s; }

.hs-img-icon {
  font-size: 2.8rem;
  position:  relative;
  z-index:   2;
  filter:    drop-shadow(0 0 20px currentColor);
}

/* Per-slide icon colours */
.hs-img-placeholder--1 .hs-img-icon { color: #EF5350; }
.hs-img-placeholder--2 .hs-img-icon { color: #42A5F5; }
.hs-img-placeholder--3 .hs-img-icon { color: #CE93D8; }
.hs-img-placeholder--4 .hs-img-icon { color: #66BB6A; }
.hs-img-placeholder--5 .hs-img-icon { color: #FFD54F; }

.hs-img-caption {
  font-size:   .8rem;
  font-weight: 600;
  color:       var(--hs-white-60);
  text-align:  center;
  margin:      0;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Floating stat badges on the image card */
.hs-stat-badge {
  position:        absolute;
  display:         flex;
  align-items:     center;
  gap:             .6rem;
  padding:         .6rem 1rem;
  background:      rgba(255,255,255,.07);
  border:          1px solid rgba(255,255,255,.13);
  border-radius:   14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color:           var(--hs-white);
  box-shadow:      0 8px 24px rgba(0,0,0,.3);
  white-space:     nowrap;
  z-index:         5;
}

.hs-stat-badge--a {
  top:   -20px;
  right: -16px;
  animation: hs-float-slow 4s ease-in-out infinite;
}

.hs-stat-badge--b {
  bottom: -20px;
  left:   -16px;
  animation: hs-float-slow 5.5s ease-in-out infinite reverse;
}

.hs-stat-badge i {
  font-size: 1.1rem;
  color:     var(--hs-primary);
}

.hs-stat-badge strong {
  display:     block;
  font-size:   .85rem;
  font-weight: 700;
  line-height: 1.1;
}

.hs-stat-badge small {
  font-size:  .7rem;
  color:      var(--hs-white-60);
  line-height: 1.2;
}

/* ── Content Animations ─────────────────────────────────────── */
/*
  Elements start hidden/shifted.
  When the slide becomes active (.hs-slide--active),
  .hs-slide--anim-in is added by JS, triggering staggered reveals.
*/

.hs-anim {
  opacity:   0;
  transform: translateY(28px);
  transition:
    opacity   .55s cubic-bezier(.22,1,.36,1),
    transform .55s cubic-bezier(.22,1,.36,1);
}

/* Stagger delays */
.hs-anim--badge    { transition-delay: .10s; }
.hs-anim--title    { transition-delay: .22s; }
.hs-anim--subtitle { transition-delay: .34s; }
.hs-anim--cta      { transition-delay: .46s; }
.hs-anim--trust    { transition-delay: .58s; }

/* Image: slide in from right + scale up */
.hs-anim--image {
  opacity:   0;
  transform: translateX(48px) scale(.94);
  transition:
    opacity   .65s cubic-bezier(.22,1,.36,1),
    transform .65s cubic-bezier(.22,1,.36,1);
  transition-delay: .20s;
}

/* Active state — animated in */
.hs-slide--anim-in .hs-anim {
  opacity:   1;
  transform: translateY(0);
}

.hs-slide--anim-in .hs-anim--image {
  opacity:   1;
  transform: translateX(0) scale(1);
}

/* ── Navigation Arrows ──────────────────────────────────────── */
.hs-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         20;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  border:          1.5px solid rgba(255,255,255,.18);
  background:      rgba(255,255,255,.06);
  color:           var(--hs-white);
  font-size:       1rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.hs-arrow--prev { left:  clamp(10px, 2.5vw, 28px); }
.hs-arrow--next { right: clamp(10px, 2.5vw, 28px); }

.hs-arrow:hover {
  background:   rgba(229,57,53,.25);
  border-color: rgba(229,57,53,.55);
  box-shadow:   0 0 0 4px rgba(229,57,53,.12);
  transform:    translateY(-50%) scale(1.08);
}

.hs-arrow:focus-visible {
  outline:        3px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}

/* ── Dot Navigation ─────────────────────────────────────────── */
.hs-dots {
  position:        absolute;
  bottom:          28px;
  left:            50%;
  transform:       translateX(-50%);
  z-index:         20;
  display:         flex;
  gap:             8px;
  align-items:     center;
}

.hs-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    rgba(255,255,255,.3);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:
    width      .35s cubic-bezier(.22,1,.36,1),
    background .35s ease;
}

.hs-dot--active,
.hs-dot:focus-visible {
  width:      28px;
  border-radius: 5px;
  background: var(--hs-primary);
}

.hs-dot:focus-visible {
  outline:        2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}

/* ── Progress Bar ───────────────────────────────────────────── */
.hs-progress {
  position: absolute;
  bottom:   0;
  left:     0;
  width:    100%;
  height:   3px;
  background: rgba(255,255,255,.08);
  z-index:  20;
}

.hs-progress-bar {
  height:     100%;
  width:      0%;
  background: linear-gradient(90deg, var(--hs-primary), var(--hs-accent));
  border-radius: 0 2px 2px 0;
  transition: width .1s linear;
  /* JS drives this via inline style */
}

/* ── Slide Counter ──────────────────────────────────────────── */
.hs-counter {
  position:    absolute;
  bottom:      32px;
  right:       clamp(16px, 3vw, 40px);
  z-index:     20;
  display:     flex;
  align-items: baseline;
  gap:         3px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.hs-counter-current {
  font-size: 1.4rem;
  color:     var(--hs-white);
  line-height: 1;
}

.hs-counter-sep,
.hs-counter-total {
  font-size: .8rem;
  color:     var(--hs-white-60);
}

/* ── Keyframe Animations ────────────────────────────────────── */
@keyframes hs-float-slow {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  50%       { transform: translateY(-14px) rotate(3deg); }
}

@keyframes hs-blob {
  0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%; transform: translateY(-50%) rotate(0deg);  }
  33%       { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; transform: translateY(-52%) rotate(4deg);  }
  66%       { border-radius: 55% 45% 60% 40% / 45% 55% 45% 60%; transform: translateY(-48%) rotate(-3deg); }
}

@keyframes hs-spin {
  to { transform: rotate(360deg); }
}

@keyframes hs-spin-ring {
  to { transform: rotate(360deg); }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hs-bg,
  .hs-shape,
  .hs-ring,
  .hs-stat-badge,
  .hs-progress-bar { animation: none !important; transition: none !important; }

  .hs-anim,
  .hs-anim--image { transition-duration: .01ms !important; }
}

/* ── Responsive: Tablet (≤ 991px) ──────────────────────────── */
@media (max-width: 991.98px) {
  .hero-slider-section { height: var(--hs-h-tablet); }

  .hs-inner {
    flex-direction: column;
    justify-content: center;
    gap:    1.75rem;
    padding-top: 4rem;
    text-align: center;
  }

  .hs-content {
    flex:      none;
    max-width: 600px;
    width:     100%;
    order:     1;
  }

  .hs-visual {
    justify-content: center;
    width:    100%;
    order:    2;
    /* Slightly smaller on tablet */
  }

  .hs-image-wrap   { max-width: 340px; }
  .hs-cta-row      { justify-content: center; }
  .hs-trust        { justify-content: center; }
  .hs-subtitle     { margin-left: auto; margin-right: auto; }

  .hs-badge        { margin-left: auto; margin-right: auto; display: inline-flex; }

  .hs-stat-badge--a { right: -8px; top: -12px; }
  .hs-stat-badge--b { left: -8px; bottom: -12px; }

  /* Scale down arrow buttons on tablet */
  .hs-arrow { width: 42px; height: 42px; font-size: .9rem; }
}

/* ── Responsive: Mobile (≤ 575px) ──────────────────────────── */
@media (max-width: 575.98px) {
  .hero-slider-section { height: var(--hs-h-mobile); }

  .hs-title   { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .hs-subtitle { font-size: .875rem; }

  .hs-inner {
    gap:         1.25rem;
    padding-top: 3rem;
  }

  .hs-image-wrap { max-width: 260px; }

  .hs-btn {
    padding: .72rem 1.3rem;
    font-size: .82rem;
  }

  /* Hide one stat badge on very small screens to avoid overflow */
  .hs-stat-badge--b { display: none; }

  /* Arrows a bit smaller */
  .hs-arrow { width: 36px; height: 36px; font-size: .8rem; }
  .hs-arrow--prev { left: 8px; }
  .hs-arrow--next { right: 8px; }

  .hs-image-glass { padding: 1.5rem 1rem; }
  .hs-img-icon    { font-size: 2rem; }

  /* Hide trust row on very small screens for space */
  .hs-trust { display: none; }

  .hs-counter { display: none; }
}