/* =========================================================
   VILIANTE FINAL POLISH V2
   Desktop: floating glass header.
   Mobile: photo-first hero with bottom premium content card.
   ========================================================= */

/* ================= DESKTOP HEADER ================= */

@media (min-width: 901px) {
  .site-header {
    position: fixed !important;
    top: 20px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 300 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .site-header .container.nav {
    width: min(1280px, calc(100% - 80px)) !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 14px 0 18px !important;
    display: grid !important;
    grid-template-columns: 170px 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    background: rgba(255, 253, 248, .68) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 999px !important;
    box-shadow: 0 18px 50px rgba(8,12,20,.13) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
  }

  .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .brand-logo img {
    height: 52px !important;
    width: auto !important;
    max-width: 145px !important;
    object-fit: contain !important;
  }

  .brand-logo .brand-fallback {
    display: none !important;
  }

  .nav-links {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    color: #263244 !important;
  }

  .nav-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .site-header .nav-actions .btn {
    width: auto !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
}

/* ================= DESKTOP HERO CLEANUP ================= */

.hero-product-float {
  display: none !important;
}

.hero-slide-bg {
  z-index: 1 !important;
}

.hero-shade {
  z-index: 2 !important;
  background: transparent !important;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,247,235,.48) 0%, rgba(255,247,235,.28) 38%, rgba(8,12,20,.18) 100%),
    linear-gradient(180deg, rgba(8,12,20,.05) 0%, rgba(8,12,20,.20) 100%) !important;
}

.hero-showcase-content {
  z-index: 5 !important;
}

/* ================= MOBILE HEADER ================= */

@media (max-width: 900px) {
  .site-header {
    position: fixed !important;
    top: 14px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .site-header .container.nav {
    width: calc(100% - 28px) !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .nav-links {
    display: none !important;
  }

  .brand-logo {
    width: auto !important;
    height: 48px !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,253,248,.78) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(8,12,20,.12) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
  }

  .brand-logo img {
    height: 36px !important;
    width: auto !important;
    max-width: 96px !important;
    object-fit: contain !important;
  }

  .brand-logo .brand-fallback {
    display: none !important;
  }

  .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  .site-header .nav-actions .btn-secondary {
    display: none !important;
  }

  .site-header .nav-actions .btn-primary {
    width: auto !important;
    min-height: 42px !important;
    padding: 10px 17px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 28px rgba(19,87,183,.25) !important;
  }

  .site-header .btn {
    width: auto !important;
  }
}

/* ================= MOBILE HERO: PHOTO + CONTENT CARD ================= */

@media (max-width: 900px) {
  .hero-showcase {
    position: relative !important;
    height: 100svh !important;
    min-height: 720px !important;
    max-height: 840px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    background: #f7f1e7 !important;
  }

  .hero-slider,
  .hero-slide {
    height: 100% !important;
    min-height: 100% !important;
  }

  .hero-slide-bg {
    height: 100% !important;
    min-height: 100% !important;
    background-size: cover !important;
    background-position: center top !important;
    transform: none !important;
    animation: none !important;
  }

  /* Very light image overlay only. No heavy fog. */
  .hero-slide::after {
    background:
      linear-gradient(180deg, rgba(8,12,20,.04) 0%, rgba(8,12,20,.02) 44%, rgba(8,12,20,.26) 72%, rgba(8,12,20,.42) 100%) !important;
  }

  .hero-shade {
    background: transparent !important;
  }

  /* Content becomes a premium card at the bottom */
  .hero-showcase-content {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    width: auto !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 18px !important;
    margin: 0 !important;

    display: block !important;

    background: rgba(255, 253, 248, .88) !important;
    border: 1px solid rgba(255,255,255,.78) !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 60px rgba(8,12,20,.22) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
  }

  .hero-showcase .eyebrow {
    display: inline-flex !important;
    font-size: 9px !important;
    line-height: 1 !important;
    padding: 7px 10px !important;
    max-width: 100% !important;
    margin: 0 0 11px !important;
    background: #ffffff !important;
    color: var(--blue-dark) !important;
    box-shadow: 0 8px 20px rgba(8,12,20,.08) !important;
  }

  .hero-showcase h1 {
    color: #172033 !important;
    font-size: clamp(32px, 10.5vw, 46px) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    text-shadow: none !important;
  }

  .hero-showcase p {
    color: #5f6673 !important;
    font-size: 13px !important;
    line-height: 1.38 !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-shadow: none !important;
    font-weight: 750 !important;
  }

  .hero-showcase .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 15px 0 0 !important;
  }

  .hero-showcase .hero-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  .hero-showcase .hero-actions .hero-ghost {
    display: none !important;
  }

  .hero-slider-dots {
    display: none !important;
  }
}

/* ================= SMALL PHONES ================= */

@media (max-width: 420px) {
  .brand-logo {
    height: 44px !important;
    padding: 5px 9px !important;
    border-radius: 16px !important;
  }

  .brand-logo img {
    height: 32px !important;
    max-width: 84px !important;
  }

  .site-header .nav-actions .btn-primary {
    min-height: 40px !important;
    padding: 9px 15px !important;
    font-size: 12px !important;
  }

  .hero-showcase {
    min-height: 690px !important;
  }

  .hero-showcase-content {
    left: 12px !important;
    right: 12px !important;
    bottom: 14px !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  .hero-showcase h1 {
    font-size: clamp(30px, 10.8vw, 42px) !important;
  }

  .hero-showcase p {
    font-size: 12.5px !important;
  }
}

/* =========================================================
   Viliante Hero Crossfade Sync + Logo Shine Hover
   Added: image + text change together, premium logo reflection
   ========================================================= */

/* Make the entire slide fade together: background + text + buttons */
.viliante-final-hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 1400ms ease-in-out,
    visibility 1400ms ease-in-out !important;
}

.viliante-final-hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Prevent old text-only fade/vanish effects */
.viliante-final-hero-slide .hero-showcase-content,
.viliante-final-hero-slide h1,
.viliante-final-hero-slide p,
.viliante-final-hero-slide .hero-actions,
.viliante-final-hero-slide .btn {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

/* Smooth image rendering */
.viliante-final-hero-slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Mobile crop control */
@media (max-width: 768px) {
  .viliante-final-hero-slide {
    background-position: center center !important;
  }
}

/* Logo shine hover effect */
.site-logo,
.logo,
.logo-link,
.brand,
.brand-logo,
.header-logo,
.nav-logo,
a[href="/"],
a[href="/index.html"] {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  isolation: isolate !important;
}

/* Reflection beam */
.site-logo::after,
.logo::after,
.logo-link::after,
.brand::after,
.brand-logo::after,
.header-logo::after,
.nav-logo::after,
a[href="/"]::after,
a[href="/index.html"]::after {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  left: -90% !important;
  width: 55% !important;
  height: 180% !important;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.18) 65%,
    rgba(255,255,255,0) 100%
  ) !important;
  transform: rotate(18deg) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Shine animation on hover */
.site-logo:hover::after,
.logo:hover::after,
.logo-link:hover::after,
.brand:hover::after,
.brand-logo:hover::after,
.header-logo:hover::after,
.nav-logo:hover::after,
a[href="/"]:hover::after,
a[href="/index.html"]:hover::after {
  animation: vilianteLogoShine 900ms ease-out forwards !important;
}

@keyframes vilianteLogoShine {
  0% {
    left: -90%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    left: 135%;
    opacity: 0;
  }
}

/* Slight premium lift on logo hover */
.site-logo:hover,
.logo:hover,
.logo-link:hover,
.brand:hover,
.brand-logo:hover,
.header-logo:hover,
.nav-logo:hover,
a[href="/"]:hover,
a[href="/index.html"]:hover {
  transform: translateY(-1px) !important;
  transition: transform 220ms ease !important;
}



/* =========================================================
   FORCE HERO FULL SLIDE SYNC V2
   Disable old separate text fade systems
   ========================================================= */

/* KILL OLD CONTENT FADE SYSTEMS */
.hero-slide .hero-showcase-content,
.hero-slide h1,
.hero-slide p,
.hero-slide .eyebrow,
.hero-slide .hero-actions,
.hero-slide .btn,
.hero-slide.viliante-crossfade-active .hero-showcase-content,
.hero-slide:not(.viliante-crossfade-active) .hero-showcase-content,
.hero-slide.active .hero-showcase-content,
.hero-slide.viliante-hero-active .hero-showcase-content {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* FORCE ENTIRE SLIDE TO FADE TOGETHER */
.viliante-final-hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    opacity 1.6s ease-in-out,
    visibility 1.6s ease-in-out !important;
}

.viliante-final-hero-slide.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* CONTENT ALWAYS FULLY VISIBLE INSIDE ACTIVE SLIDE */
.viliante-final-hero-slide.is-active .hero-showcase-content,
.viliante-final-hero-slide.is-active h1,
.viliante-final-hero-slide.is-active p,
.viliante-final-hero-slide.is-active .hero-actions,
.viliante-final-hero-slide.is-active .btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* NON ACTIVE SLIDES */
.viliante-final-hero-slide:not(.is-active) .hero-showcase-content,
.viliante-final-hero-slide:not(.is-active) h1,
.viliante-final-hero-slide:not(.is-active) p,
.viliante-final-hero-slide:not(.is-active) .hero-actions,
.viliante-final-hero-slide:not(.is-active) .btn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================
   STRONGER LOGO SHINE EFFECT
   ========================================================= */

.brand-logo {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.brand-logo::after {
  content: "" !important;
  position: absolute !important;
  top: -55% !important;
  left: -120% !important;

  width: 55% !important;
  height: 240% !important;

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.18) 65%,
    rgba(255,255,255,0) 100%
  ) !important;

  transform: rotate(22deg) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

.brand-logo:hover::after {
  animation: vilianteBrandShineV2 1100ms ease forwards !important;
}

@keyframes vilianteBrandShineV2 {
  0% {
    left: -120%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    left: 150%;
    opacity: 0;
  }
}

.brand-logo img {
  transition:
    transform 260ms ease,
    filter 260ms ease !important;
}

.brand-logo:hover img {
  transform: translateY(-1px) scale(1.015) !important;

  filter:
    brightness(1.04)
    drop-shadow(0 0 10px rgba(255,255,255,0.18)) !important;
}



/* =========================================================
   REAL PASSING LIGHT SHINE EFFECT
   ========================================================= */

.brand-logo {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* remove all movement */
.brand-logo,
.brand-logo:hover,
.brand-logo img,
.brand-logo:hover img {
  transform: none !important;
}

/* actual moving light beam */
.brand-logo::before {
  content: "" !important;

  position: absolute !important;
  top: -60% !important;
  left: -120% !important;

  width: 34% !important;
  height: 240% !important;

  z-index: 999 !important;
  pointer-events: none !important;
  opacity: 0 !important;

  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.12) 65%,
    rgba(255,255,255,0) 100%
  ) !important;

  transform: skewX(-24deg) !important;
}

/* animate across logo */
.brand-logo:hover::before {
  animation: vilianteRealShinePass 1s ease forwards !important;
}

@keyframes vilianteRealShinePass {
  0% {
    left: -120%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    left: 170%;
    opacity: 0;
  }
}