/* ==========================================================================
   STUDIO OLIMPO — ORION SRL
   Custom CSS
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO — UNDERLINE ANIMATO SU <strong>
   -------------------------------------------------------------------------- */

[data-hero] strong {
  border-bottom: none !important;
  display: inline;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: auto;
  text-underline-position: from-font;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.7s ease;
}

[data-hero] strong.u-underline-visible {
  text-decoration-color: currentColor;
}


/* --------------------------------------------------------------------------
   SPLIT TEXT — HEADING MASK + REVEAL
   -------------------------------------------------------------------------- */

[data-split="heading"] {
  visibility: hidden;
}

.wf-design-mode [data-split="heading"],
.w-editor [data-split="heading"] {
  visibility: visible !important;
}

.line {
  overflow: hidden;
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}

h1 .line {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

[data-hero] .line {
  overflow: visible;
}


/* --------------------------------------------------------------------------
   LOADER
   -------------------------------------------------------------------------- */

body.wf-design-mode [data-load-wrap] {
  visibility: hidden !important;
}

[data-load-reset],
[data-load-logo],
[data-load-icon] {
  opacity: 0;
}

[data-load-text] {
  display: inline-block;
  width: 4ch;
  text-align: center;
}

.loader__bg-bar {
  box-shadow: 0 0 18px 4px var(--swatch--light-100-o20);
}

.loader__loading-wrap {
  position: relative;
  flex-shrink: 0;
  margin-inline: auto;
  width: 14px;
  height: 14px;
}

.loading_dot_center {
  position: absolute;
  width: 2px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
  animation: pulse 1050ms ease-in-out infinite;
}

.loading_dot_top {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: rotX 1050ms ease-in-out infinite;
  transform-origin: center center;
}

.loading_dot_bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: rotY 1050ms ease-in-out infinite;
  transform-origin: center center;
}

.loading_dot_top::before,
.loading_dot_top::after,
.loading_dot_bottom::before,
.loading_dot_bottom::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.loading_dot_top::before    { top: 0;    left: 50%; transform: translateX(-50%); }
.loading_dot_top::after     { bottom: 0; left: 50%; transform: translateX(-50%); }
.loading_dot_bottom::before { left: 0;   top: 50%;  transform: translateY(-50%); }
.loading_dot_bottom::after  { right: 0;  top: 50%;  transform: translateY(-50%); }

@keyframes rotX {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotY {
  0%   { transform: rotate(90deg); }
  100% { transform: rotate(450deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 2px rgba(255, 255, 255, 0.3); }
  50%       { box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 3px rgba(255, 255, 255, 0.6); }
}


/* --------------------------------------------------------------------------
   PAGE TRANSITIONS — BASE
   -------------------------------------------------------------------------- */

.transition__dark {
  opacity: 0;
  background-color: var(--swatch--dark-900-o60);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* --------------------------------------------------------------------------
   PAGE TRANSITIONS — PEEK
   -------------------------------------------------------------------------- */

:root {
  --peek-offset: -7.5;
  --viewport-height: 100dvh;
}

@media (max-width: 767px) {
  :root {
    --peek-offset: -9;
  }
}

[data-wf--transition--variant="peek"] {
  position: fixed;
  bottom: 0;
  top: auto;
  left: 0;
  right: 0;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
  cursor: pointer;
  z-index: 200;
}

[data-wf--transition--variant="peek"] [data-transition-panel] {
  min-height: var(--viewport-height, 100dvh);
}


/* --------------------------------------------------------------------------
   NAVIGATION — MENU HAMBURGER HOVER
   -------------------------------------------------------------------------- */

@media (any-hover: hover) {
  .menu_btn_wrap {
    transition: opacity 0.7s ease;
    will-change: opacity;
  }

  .menu_btn_wrap:hover {
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   NAVIGATION — MENU VOCI HOVER (opacity fade)
   -------------------------------------------------------------------------- */

.nav_menu_item {
  transition: opacity 0.7s ease;
}

.nav_menu_list:has(.nav_menu_item:hover) .nav_menu_item {
  opacity: 0.3;
}

.nav_menu_list:has(.nav_menu_item:hover) .nav_menu_item:hover {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   BUTTON — HOVER SLIDE UP
   -------------------------------------------------------------------------- */

@media (any-hover: hover) {
  .button_main_element {
    overflow: hidden;
    position: relative;
    padding-bottom: 0.3em;
    margin-bottom: -0.3em;
  }

  .button_main_element:has(.u-text-style-h3) {
    padding-bottom: 0.8em;
    margin-bottom: -0.8em;
  }

  .button_main_text {
    display: inline-block;
    position: relative;
    transform: translateY(0em) rotate(0.001deg);
    transition: transform 0.8s cubic-bezier(0.625, 0.05, 0, 1);
    text-shadow: 0 1.3em 0 currentColor;
  }

  .button_main_element.is--second .button_main_text {
    transition-delay: 0.01s;
  }

  [data-trigger~="hover"]:hover .button_main_text {
    transform: translateY(-1.3em) rotate(0.001deg);
  }

  .footer_wrap [data-trigger~="hover"]:hover .button_main_text {
    transform: translateY(-1.3em) rotate(0.001deg);
  }
}


/* --------------------------------------------------------------------------
   STICKY STEPS
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  [data-sticky-steps-item-status] .sticky-steps__visual {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }

  [data-sticky-steps-item-status="before"] .sticky-steps__visual,
  [data-sticky-steps-item-status="active"] .sticky-steps__visual {
    opacity: 1;
    visibility: visible;
  }

  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.25;
  }

  [data-sticky-steps-item-status="active"] .sticky-steps__text {
    opacity: 1;
  }
}

.sticky-steps__list {
  display: flex;
  flex-flow: column;
  flex: 1 1 0%;
  gap: 15dvh 15dvh;
  padding-top: calc(-15em + (0.5 * 100dvh));
  padding-bottom: calc(-15em + (0.5 * 100dvh));
}

.sticky-steps__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.sticky-steps__sticky {
  position: sticky;
  top: 0;
  display: flex;
  width: 100%;
  min-height: 100dvh;
  align-items: center;
}

.sticky-steps__text {
  display: flex;
  width: 50%;
  padding-right: 0;
  margin-left: auto;
  flex-flow: column;
  gap: 2em;
}


/* --------------------------------------------------------------------------
   LOGO WALL CYCLE
   -------------------------------------------------------------------------- */

[data-logo-wall-list] [data-logo-wall-item]:nth-child(n+5) {
  display: none;
}

[data-logo-wall-item] {
  position: relative;
  overflow: hidden;
}

[data-logo-wall-item] img:not([data-logo-wall-target]) {
  display: none;
}


/* --------------------------------------------------------------------------
   SMOOOTHY SLIDER — GPU + FONT RENDERING FIX
   -------------------------------------------------------------------------- */

[data-smooothy="1"] .slider_w {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

[data-smooothy="1"] .slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}


/* --------------------------------------------------------------------------
   RESPONSIVE — CONTAINER QUERIES
   -------------------------------------------------------------------------- */

[data-sticky-text]{
  max-width: 32ch;
  }

@container (width < 50em) {
  .footer_bottom_list {
    flex-flow: column;
  }
}

@container (width < 38em) {
  .sticky-steps__list {
    padding-top: 10em;
    padding-bottom: 10em;
    gap: var(--_spacing---space--10);
  }

  .sticky-steps__media {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-bottom: var(--_spacing---space--9);
  }

  .sticky-steps__sticky {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .sticky-steps__text {
    width: 100%;
    padding-right: 0;
  }


  [data-sticky-text]{
  max-width: 100%;  
  }
  
  .footer_bottom_layout {
    flex-flow: column;
  }

  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n+3) {
    display: none;
  }
}

.sticky-steps__text .w-richtext p {
  text-align: justify;
  text-align-last: left;
}

/* --------------------------------------------------------------------------
   COMING SOON — override loader text width
   -------------------------------------------------------------------------- */

[data-barba-namespace="soon"] [data-load-text] {
  width: auto;
}