/* ═══════════════════════════════════════════
   HERO ENHANCEMENTS — Animated Backgrounds & 3D Elements
   ═══════════════════════════════════════════ */

/* Houdini CSS Property */
@property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* Hero Background Wrapper */
.hero-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* Animated Stripe Background - DARK VERSION (DEFAULT) */
.hero-bg-animated {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  --stripe-color: #000;
  background-image:
    repeating-linear-gradient(
      100deg,
      #000 0%,
      #000 7%,
      transparent 10%,
      transparent 12%,
      #000 16%
    ),
    repeating-linear-gradient(
      100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #60a5fa 30%
    );
  background-size: 300%, 200%;
  background-position: 0% 50%, 0% 50%;
  filter: blur(10px) opacity(50%) saturate(200%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  animation: smoothBgMain 60s linear infinite;
}

.hero-bg-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      100deg,
      #000 0%,
      #000 7%,
      transparent 10%,
      transparent 12%,
      #000 16%
    ),
    repeating-linear-gradient(
      100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #60a5fa 30%
    );
  background-size: 200%, 100%;
  background-position: 0% 50%, 0% 50%;
  animation: smoothBg 60s linear infinite;
  mix-blend-mode: difference;
}

@keyframes smoothBgMain {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 300% 50%, 300% 50%;
  }
}

@keyframes smoothBg {
  0% {
    background-position: 0% 50%, 0% 50%;
  }
  100% {
    background-position: 200% 50%, 200% 50%;
  }
}

/* Background Switch */
.hero-bg-switch {
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.hero-bg-switch-label {
  display: none !important;
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  cursor: pointer;
  transition: 0.15s linear(0 0%, 0.16 16.85%, 0.32 31.73%, 1 100%);
  will-change: transform, font-weight;
  padding: 0.5rem;
  z-index: 10;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--surface-text);
  opacity: 0.6;
  align-items: center;
  gap: var(--space-2);
}

.hero-bg-switch-label:where(:hover, :active, :focus-within) {
  transition: 0.3s ease;
  animation: animSwitch 0.2s alternate;
  opacity: 1;
}

.hero-bg-switch-label:where(:hover, :active, :focus-within) .hero-bg-icon {
  animation-play-state: paused;
}

@keyframes animSwitch {
  50% {
    transform: scale(1.2);
    font-weight: 900;
  }
}

.hero-bg-icon {
  width: 1lh;
  height: 1lh;
  aspect-ratio: 1/1;
  padding: 0.25em 0.35rem;
  border-radius: calc(1px / 0);
  border: 1px dashed currentColor;
  --blink-opacity: 1;
  animation: blink-animation 2s ease-in-out infinite running;
}

@keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0;
  }
}

/* Light mode variant (when checkbox is checked) */
:has(.hero-bg-switch:checked) .hero-bg-animated {
  --stripe-color: #fff;
  filter: blur(10px) invert(100%);
}

:has(.hero-bg-switch:checked) .hero-bg-animated::after {
  filter: none;
}

/* Blob Canvas with Silver Chromatic Aberration */
.blob-canvas {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
  touch-action: none;
  mix-blend-mode: difference;
  -webkit-mix-blend-mode: difference;
  filter:
    drop-shadow(3px 0px 0px rgba(200, 200, 220, 0.6))
    drop-shadow(-3px 0px 0px rgba(180, 180, 200, 0.6))
    drop-shadow(0px 3px 0px rgba(240, 240, 255, 0.4))
    drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.3));
  animation: chromatic-blob-pulse 4s ease-in-out infinite;
}

@keyframes chromatic-blob-pulse {
  0%, 100% {
    filter:
      drop-shadow(3px 0px 0px rgba(200, 200, 220, 0.6))
      drop-shadow(-3px 0px 0px rgba(180, 180, 200, 0.6))
      drop-shadow(0px 3px 0px rgba(240, 240, 255, 0.4))
      drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.3));
  }
  50% {
    filter:
      drop-shadow(5px 0px 0px rgba(220, 220, 240, 0.8))
      drop-shadow(-5px 0px 0px rgba(200, 200, 220, 0.8))
      drop-shadow(0px 5px 0px rgba(255, 255, 255, 0.6))
      drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.5));
  }
}

/* ═══════════════════════════════════════════
   HERO TEXT GLASSMORPHIC EFFECT
   ═══════════════════════════════════════════ */

.section-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  place-content: center;
  place-items: center;
  flex-flow: column;
  gap: 4.5%;
  text-align: center;
  z-index: 3;
  mix-blend-mode: difference;
  -webkit-mix-blend-mode: difference;
}

.section-hero__main {
  position: relative;
}

.section-hero__text {
  position: relative;
}

.section-hero__headline {
  font-size: clamp(2.5rem, 1rem + 5vw, 6rem);
  position: relative;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-hero__scroll-indicator {
  color: #ffffff;
}

/* ═══════════════════════════════════════════
   3D TEXT CUBE ANIMATION
   ═══════════════════════════════════════════ */

.hero-cube-section {
  display: none !important;
  position: absolute;
  bottom: 8%;
  right: 5%;
  width: auto;
  max-width: 300px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
}

.cube-pov {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube-tray {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cube-die {
  width: 280px;
  height: 40px;
  padding-bottom: 6px;
  perspective: 999px;
  position: relative;
}

.cube {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: cubeRotate 4s ease-in-out infinite alternate;
}

@keyframes cubeRotate {
  from {
    transform: rotateY(-90deg);
  }
  to {
    transform: rotateY(90deg);
  }
}

.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font-family: 'Montserrat', var(--font-heading);
  font-weight: 900;
  font-style: normal;
  text-transform: lowercase;
  transform-origin: 50% 50% -150px;
  z-index: 1;
  font-size: 42px !important;
}

.cube-face:nth-child(1) {
  transform: rotateY(270deg) translateZ(150px);
  color: hsl(180, 67%, 60%);
}

.cube-face:nth-child(2) {
  transform: rotateY(0deg) translateZ(150px);
  color: hsl(180, 67%, 85%);
}

.cube-face:nth-child(3) {
  transform: rotateY(90deg) translateZ(150px);
  color: hsl(280, 67%, 70%);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero-cube-section {
    bottom: 12%;
    right: 3%;
    max-width: 220px;
  }

  .cube-die {
    width: 220px;
    height: 32px;
  }

  .cube-face {
    font-size: 32px !important;
    transform-origin: 50% 50% -120px;
  }

  .cube-face:nth-child(1) {
    transform: rotateY(270deg) translateZ(120px);
  }

  .cube-face:nth-child(2) {
    transform: rotateY(0deg) translateZ(120px);
  }

  .cube-face:nth-child(3) {
    transform: rotateY(90deg) translateZ(120px);
  }
}

@media (max-width: 768px) {
  .hero-cube-section {
    display: none;
  }

  .hero-bg-switch-label {
    bottom: 1rem;
    right: 1rem;
    font-size: 0.7rem;
  }
}