.hero-title/* ===== HERO SECTION STYLES ===== */

#hero {
  background: #103946;
}
#hero-text-layer {
    padding-top: 60px;
}

#hero-text-layer > p:first-child {
    border: .2px solid var(--h-white);
    width: fit-content;
    padding: 8px 16px;
    color: var(--h-white);
    display: flex;
    align-items: center;
}
#hero-text-layer > p small {
    padding-right: 16px
}
#hero-text-layer > p small::before {
    content: "";
    width: 7px;
    height:7px;
    background-color: var(--h-white);
    border-radius: 50%;
    display: flex;
}
.hero-l-1 {
  background-image: linear-gradient(90deg,#103946 0%,#103946eb 38%,#10394673 100%) !important
}
.hero-l-2 {
  background-image: radial-gradient(circle at 72% 44%,#d9d4ce40,#0000 34%),radial-gradient(circle at 20% 70%,#d9d4ce29,#0000 34%);
  mix-blend-mode: multiply;
}
.hero-l-3, .hero-l-4 {
  border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
}

.hero-title {
    font-size: 140px !important;
}
.hero-title span {
    background-clip: text;
    background-image: linear-gradient(to right in oklab, rgb(255, 255, 255) 0%, rgb(217, 212, 206) 50%, rgb(169, 161, 152) 100%)
}

/* float card */
@keyframes floatCardY {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}
@keyframes floatCardX {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(0px);
    }
}
/* @keyframes floatCardZ {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(-20px) rotate(3deg);
    }
} */

@keyframes floatCardZ {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
    100% {
        transform: translateY(-20px) rotate(3deg);
    }
}

.floatCard {
    animation: floatCardY 5s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.floatCard-V {
    animation: floatCardZ 5s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.floatCard-X {
    animation: floatCardX 5s ease-in-out infinite alternate;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}
.floatCard.sm-top { animation-delay: 1s; }
.floatCard.sm-bottom { animation-delay: 1.8s; }
.floatCard.lg-hero { animation-delay: 3s; }


.scroll-cue {
    width: 100%;
    left : 0;
}
.scroll-cue strong {
    width: fit-content;
    display: flex;
    justify-content: center;
    letter-spacing: 4px;
    font-size: 10px;
    color: rgb(183, 255, 74);
    text-transform: uppercase;
}

.scroll-cue span {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(183, 255, 74, 0.9) 0px 0px 18px 0px;
}
.hero-text-layer-btn a {
    cursor: pointer;
}
.hero-text-layer-btn a:first-child {
    background: var(--cream);
}
.hero-text-layer-btn a:last-child {
    color: var(--cream);
    background-color: var(--sn-deep-teal);
}
.hero-text-layer-btn a:first-child  .spinner-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--sn-deep-teal);
    border-top-color: var(--sn-warm-gray);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.hero-text-layer-btn a:last-child .spinner-loader {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
/* Visual panel container */
.hero-visual-panel {
  position: relative;
  min-height: 620px;
}

/* Ensure floating cards are properly positioned */
.hero-visual-panel .absolute {
  pointer-events: none;
  min-width: 135px;
}
.hero-location-title {
    color: var(--sn-green);
}
/* Make cards interactive */
.hero-visual-panel .absolute .flex,
.hero-visual-panel .absolute .rounded-\[2rem\] {
  pointer-events: auto;
}

/* Video card hover effect */
.hero-visual-panel .rounded-\[3rem\] {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-visual-panel .rounded-\[3rem\]:hover {
  transform: translateY(-20px) rotate(0deg) scale(1.02) !important;
}

/* Floating card animations */
.hero-visual-panel .absolute .rounded-\[2rem\] {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hero-visual-panel .absolute .rounded-\[2rem\]:hover {
  transform: translateY(-8px) scale(1.04) !important;
  box-shadow: 0 32px 120px rgba(0, 0, 0, 0.40) !important;
}

/* Glow effect on the large blur circle */
.hero-visual-panel .rounded-full.bg-\[\#D9D4CE\]\/15 {
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

/* Scroll cue animation */
.scroll-cue span {
  display: block;
  width: 1.5px;
  height: 40px;
  background: linear-gradient(rgb(183, 255, 74) 0%, lab(92.8565 -42.0091 73.7401 / 0.7) 50%, rgba(0, 0, 0, 0) 100%);
  animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { 
    opacity: 0.2; 
    transform: translateY(0) scaleY(0.6);
  }
  50% { 
    opacity: 1; 
    transform: translateY(8px) scaleY(1);
  }
}

/* ===== TEXT LAYER STYLES ===== */
.hero-main-content {
    margin-top: -90px;
}
#her-text-layer {
  position: relative;
  z-index: 20;
}

#her-text-layer h1 {
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.2);
}

#her-text-layer .text-gold {
  color: #caa46c;
}

#mobileNavLang {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
}




.open-video-btn {
    display : flex;
}
.open-video-btn button {
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    padding-right: 12px;
    z-index: 11;
    margin: 0 2px;
    position: relative;
    display: flex;
    align-items: center;
}
.open-video-btn button::before {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px dashed #344549;
    position: absolute;
    top: 0;right: 0;
    z-index: 10;
    border-radius: 9px;
}

.open-video-btn button i {
    margin-right: 6px;
    transition: all .1s ease-in;
    font-size: 10px;
}
.open-video-btn button:hover i,
.open-video-btn button:hover {
    color: greenyellow;
}



/* ── Button styles ── */
.download-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 160px;
}



.download-pdf-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── Spinner loader ── */


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




#hero-btn-container {
    justify-content: end;
}
/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 1800px) {
    .hero-title {
        font-size: 90px !important;
    }
    #hero-text-layer {
        display: flex; flex-direction: column;
        padding-top: 60px;
    }
    .floatCard-V.lg-hero  {
        width: 360px !important;
        height: 400px !important;
    }
}

@media (max-width: 1024px) {
  .hero-visual-panel {
    min-height: 500px;
  }
  .menu-toggle {
    display: flex;
  }
  .hero-visual-panel .rounded-\[3rem\] {
    width: 340px !important;
    height: 390px !important;
    right: 0 !important;
    top: 40px !important;
  }
  
  .hero-visual-panel .absolute.left-4 {
    left: 0 !important;
    top: 20px !important;
  }
  
  .hero-visual-panel .absolute.bottom-24 {
    bottom: 60px !important;
    left: 0 !important;
  }
  
  .hero-visual-panel .absolute.bottom-16 {
    bottom: 0 !important;
    right: 0 !important;
    width: 240px !important;
  }
  #hero-btn-container {
    margin-top: 20px !important;
    padding: 0 4rem;
  }
  #hero-btn-container  {
    justify-content: start !important;
  }
}


@media (max-width: 768px) {

    #hero-btn-container {
        padding: 0 1.5rem;
    }

    #her-text-layer h1 {
        font-size: 2.5rem !important;
    }
  
    .hero-visual-panel {
        display: none !important;
    }
}


#hero {
    z-index: 1;
}

/* ===== VIDEO FALLBACK ===== */
#heroVideo {
  background: #103946;
}

#heroVideo::-webkit-media-controls {
  display: none !important;
}

/* ===== UTILITY ===== */
.text-gold {
  color: #caa46c;
}

.bg-gold {
  background-color: #caa46c;
}

.border-gold {
  border-color: #caa46c;
}

.hover\:border-gold:hover {
  border-color: #caa46c;
}

.hover\:text-gold:hover {
  color: #caa46c;
}

/* Smooth transitions */
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

@media only screen and (max-width: 480px) {
  .scroll-cue {
    bottom: 60px !important
  }
  #mobileNavLang #langSwitch + a {
    display: none !important;
  }
  .hero-title {
    font-size: 70px !important;
  }
}

@media only screen and (max-width: 420px) {
    #hero-text-layer > p:first-child {
        font-size: 10px !important;
    }
}