/*
  Entopy Home Hero
  Clean responsive Elementor widget.
*/

.entopy-home-hero{
  --hero-padding-top: 40px;
  --hero-padding-right: 60px;
  --hero-padding-bottom: 60px;
  --hero-padding-left: 60px;

  --intro-top-offset: 0px;
  --intro-left-offset: 0px;
  --headline-left-offset: 0px;
  --headline-bottom-offset: 0px;
  --card-right-offset: 0px;
  --card-bottom-offset: 0px;

  --hero-white: #ffffff;
  --hero-intro-stack-spacing: 20px;
  --hero-headline-stack-spacing: 30px;

  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 520px;
  overflow: hidden;
  font-family: Montserrat, Arial, sans-serif;
  color: var(--hero-white);
  background: #050a14;
  box-sizing: border-box;
}

.entopy-home-hero *,
.entopy-home-hero *::before,
.entopy-home-hero *::after{
  box-sizing: border-box;
}

.entopy-home-hero-media{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.entopy-home-hero-video,
.entopy-home-hero-vimeo-wrap{
  z-index: 1;
}

.entopy-home-hero-image{
  z-index: 0;
}

.entopy-home-hero-vimeo-wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
}

.entopy-home-hero-vimeo-iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77777778vh;
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.entopy-home-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 10, 20, 0.35);
  pointer-events: none;
}

.entopy-home-hero-intro{
  position: absolute;
  top: calc(var(--hero-padding-top) + var(--intro-top-offset));
  left: calc(var(--hero-padding-left) + var(--intro-left-offset));
  z-index: 3;
  max-width: 220px;
  font-size: clamp(13px, 0.9vw, 14px);
  line-height: 1.6;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
}

.entopy-home-hero-headline{
  position: absolute;
  left: calc(var(--hero-padding-left) + var(--headline-left-offset));
  bottom: calc(80px + var(--headline-bottom-offset));
  z-index: 3;
}

.entopy-home-hero-title{
  margin: 0;
  font-size: clamp(48px, 8vw, 110px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--hero-white);
}

.entopy-home-hero-cursor{
  display: inline-block;
  animation: entopyHomeHeroCursorBlink 1s steps(1) infinite;
}

@keyframes entopyHomeHeroCursorBlink{
  50%{ opacity: 0; }
}

.entopy-home-hero-card{
  position: absolute;
  right: calc(var(--hero-padding-right) + var(--card-right-offset));
  bottom: calc(var(--hero-padding-bottom) + var(--card-bottom-offset));
  z-index: 4;
  display: block;
  width: min(320px, 100%);
  max-width: 420px;
  padding: 26px 24px 18px;
  overflow: hidden;
  color: var(--hero-white);
  text-decoration: none;
  background: rgba(70,70,70,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
}

.entopy-home-hero-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 30% 70%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0) 55%);
  opacity:0;
  transform:scale(.9);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}

.entopy-home-hero-card:hover{
  border-color:rgba(255,255,255,0.28);
  background:rgba(85,85,85,0.34);
  transform:translateY(-1px);
}

.entopy-home-hero-card:hover::before{
  opacity:1;
  transform:scale(1);
}

.entopy-home-hero-card-title,
.entopy-home-hero-card-footer{
  position:relative;
  z-index:1;
}

.entopy-home-hero-card-title{
  max-width:260px;
  margin-bottom:28px;
  font-size:clamp(18px,1.6vw,24px);
  line-height:1.25;
  font-weight:400;
  color:var(--hero-white);
}

.entopy-home-hero-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.22);
}

.entopy-home-hero-card-footer span{
  font-size:clamp(12px,0.9vw,14px);
  color:rgba(255,255,255,0.9);
}

.entopy-home-hero-fade{
  opacity:0;
  transform:translateY(12px);
  animation:entopyHomeHeroFadeUp 1.1s ease forwards;
}

.entopy-home-hero-fade-intro{ animation-delay:.85s; }
.entopy-home-hero-fade-card{ animation-delay:1.45s; }

@keyframes entopyHomeHeroFadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

.entopy-home-hero-no-fade .entopy-home-hero-fade,
.entopy-home-hero-editor-no-fade .entopy-home-hero-fade,
.elementor-editor-active .entopy-home-hero-fade,
.elementor-editor-preview .entopy-home-hero-fade{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}





/* =========================================================
   Fluid desktop/tablet range: 1400px down to 768px
   Layout remains desktop-style absolute, but scales to avoid overlap.
   Offset controls still work in this range.
   ========================================================= */
@media (max-width:1400px) and (min-width:768px){
  .entopy-home-hero{
    --hero-padding-top: clamp(32px, 3vw, 40px);
    --hero-padding-right: clamp(28px, 4vw, 60px);
    --hero-padding-bottom: clamp(36px, 4vw, 60px);
    --hero-padding-left: clamp(28px, 4vw, 60px);
  }

  .entopy-home-hero-intro{
    max-width: clamp(190px, 20vw, 220px);
  }

  .entopy-home-hero-title{
    font-size: clamp(58px, 7.4vw, 110px);
    line-height: 0.94;
  }

  .entopy-home-hero-headline{
    max-width: calc(100% - clamp(340px, 34vw, 460px));
  }

  .entopy-home-hero-card{
    width: min(320px, 28vw);
    max-width: 360px;
  }

  .entopy-home-hero-card-title{
    font-size: clamp(18px, 1.45vw, 24px);
  }

  .entopy-home-hero-card-footer span{
    font-size: clamp(12px, 0.9vw, 14px);
  }
}

/* Tighter tablet-landscape safety range before mobile stack */
@media (max-width:980px) and (min-width:768px){
  .entopy-home-hero-title{
    font-size: clamp(50px, 7vw, 70px);
  }

  .entopy-home-hero-headline{
    max-width: calc(100% - 300px);
  }

  .entopy-home-hero-card{
    width: min(280px, 30vw);
  }

  .entopy-home-hero-card-title{
    font-size: 18px;
  }
}

@media (max-width:767px){
  .entopy-home-hero-hide-video-mobile .entopy-home-hero-video,
  .entopy-home-hero-hide-video-mobile .entopy-home-hero-vimeo-wrap{
    display:none;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:var(--hero-padding-top) var(--hero-padding-right) var(--hero-padding-bottom) var(--hero-padding-left);
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-intro{
    position:relative;
    top:auto;
    left:auto;
    max-width:320px;
    margin-bottom:var(--hero-intro-stack-spacing);
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-headline{
    position:relative;
    left:auto;
    bottom:auto;
    margin-bottom:var(--hero-headline-stack-spacing);
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-title{
    font-size:clamp(40px,12vw,52px);
    line-height:1;
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-card{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:420px;
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-card-title{
    font-size:18px;
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-card-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    text-align:left;
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-card-footer span{
    font-size:12px;
  }
}

@media (prefers-reduced-motion:reduce){
  .entopy-home-hero-fade,
  .entopy-home-hero-cursor{
    animation:none !important;
  }

  .entopy-home-hero-card,
  .entopy-home-hero-card::before{
    transition:none !important;
  }
}


/* Mobile stack offset support
   When mobile stack is active, elements are relative instead of absolute.
   Therefore offset controls use transform on mobile so they still work. */
@media (max-width:767px){
  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-intro{
    transform: translate(var(--intro-left-offset), var(--intro-top-offset));
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-headline{
    transform: translate(var(--headline-left-offset), calc(var(--headline-bottom-offset) * -1));
  }

  .entopy-home-hero-mobile-stack-yes .entopy-home-hero-card{
    transform: translate(calc(var(--card-right-offset) * -1), calc(var(--card-bottom-offset) * -1));
  }
}