/*-----------------------------------*\
  #HERO.CSS
\*-----------------------------------*/

.hero .slider-btn { display: none; }

.hero {
  position: relative;
  padding-block: 120px;
  min-height: 100vh;
  overflow: hidden;
  z-index: 1;
}

.hero .slider-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  padding-block-start: 100px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-3);
  z-index: 1;
}
.hero .slider-item.active { opacity: 1; visibility: visible; }

.hero .slider-bg {
  position: absolute;
  inset: 0;
  transform: scale(1.15);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero .slider-item.active .slider-bg { animation: smoothScale 7s linear forwards; }

@keyframes smoothScale {
  0%   { transform: scale(1); }
  100% { transform: scale(1.15); }
}

.hero .section-subtitle::after { margin-block: 14px 20px; }
.hero-text { margin-block: 10px 40px; }
.hero .btn  { margin-inline: auto; }

.hero-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
  background-color: var(--gold-crayola);
  width: 110px;
  height: 110px;
  padding: 12px;
  transform: scale(0.6);
}
.hero-btn img     { margin-inline: auto; margin-block-end: 6px; }
.hero-btn .span   {
  color: var(--black);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letterSpacing-1);
  line-height: var(--lineHeight-3);
}
.hero-btn::after  { inset: 0; border: 1px solid var(--gold-crayola); animation: rotate360 15s linear infinite; }

/* Slider reveal animation */
.slider-reveal { transform: translateY(30px); opacity: 0; }
.hero .slider-item.active .slider-reveal { animation: sliderReveal 1s ease forwards; }

@keyframes sliderReveal {
  0%   { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.hero .slider-item.active .section-subtitle { animation-delay: 500ms; }
.hero .slider-item.active .hero-title       { animation-delay: 1000ms; }
.hero .slider-item.active .hero-text        { animation-delay: 1.5s; }
.hero .slider-item.active .btn              { animation-delay: 2s; }

/*--- Responsive ---*/
@media (min-width: 575px) {
  .hero-btn { transform: scale(0.7); }
}

@media (min-width: 768px) {
  .hero .slider-btn {
    display: grid;
    position: absolute;
    z-index: 1;
    color: var(--gold-crayola);
    font-size: 2.4rem;
    border: 1px solid var(--gold-crayola);
    width: 45px;
    height: 45px;
    place-items: center;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: var(--transition-1);
  }
  .hero .slider-btn ion-icon { transform: rotate(-45deg); }
  .hero .slider-btn.prev { left: 30px; }
  .hero .slider-btn.next { right: 30px; }
  .hero .slider-btn:is(:hover, :focus-visible) { background-color: var(--gold-crayola); color: var(--black); }
}

@media (min-width: 1200px) {
  .hero       { height: 880px; }
  .hero-btn   { bottom: 50px; right: 50px; transform: scale(1); }
}