html {
  overflow-y: scroll;
}

/* Prevent scroll during intro animation */
body.intro-loading {
  overflow: hidden;
  height: 100vh;
}

/* Hide header navigation initially */
body.intro-loading .header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

/* Smooth reveal of header upon completion */
body.anim-complete .header {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Hide scroll indicator until ready */
.hero-section .scroll-indicator {
  opacity: 0;
  pointer-events: none;
}

body.anim-complete .hero-section .scroll-indicator {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.8s ease;
}

/* Hero Logo SVG Container Sizing */
.hero-logo-svg-container {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2774.8 / 1118;
  overflow: visible;
}

.hero-logo-svg-container svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Step-by-step horizontal centering of the combined logo inside SVG */
.hero-logo-svg-container #Layer-1 {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(827px); /* Align symbol center to SVG center initially */
}
.hero-logo-svg-container.step-2 #Layer-1 {
  transform: translateX(600px);
}
.hero-logo-svg-container.step-3 #Layer-1 {
  transform: translateX(400px);
}
.hero-logo-svg-container.step-4 #Layer-1 {
  transform: translateX(200px);
}
.hero-logo-svg-container.step-5 #Layer-1 {
  transform: translateX(0px);
}

/* Symbol Group with geometric transform center (842.2px, 1180.9px) */
body:not(.scrolling) #hero-symbol-group {
  transform-origin: 842.2px 1180.9px;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: rotate(0deg);
}

/* Fly-in corner components of left symbol (snappier 0.8s duration) */
.hero-logo-svg-container .logo-part {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Offset positions at the 4 screen corners using calculated CSS variables */
.hero-logo-svg-container:not(.step-1) .part-tl {
  transform: translate(var(--part-tl-x, -100vw), var(--part-tl-y, -100vh)) !important;
}
.hero-logo-svg-container:not(.step-1) .part-tr {
  transform: translate(var(--part-tr-x, 100vw), var(--part-tr-y, -100vh)) !important;
}
.hero-logo-svg-container:not(.step-1) .part-bl {
  transform: translate(var(--part-bl-x, -100vw), var(--part-bl-y, 100vh)) !important;
}
.hero-logo-svg-container:not(.step-1) .part-br {
  transform: translate(var(--part-br-x, 100vw), var(--part-br-y, 100vh)) !important;
}

/* Step 1: Parts move 25% inwards with bounce-out */
.hero-logo-svg-container.step-1:not(.step-1b) .logo-part {
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-logo-svg-container.step-1:not(.step-1b) .part-tl {
  transform: translate(calc(var(--part-tl-x) * 0.75), calc(var(--part-tl-y) * 0.75)) !important;
}
.hero-logo-svg-container.step-1:not(.step-1b) .part-tr {
  transform: translate(calc(var(--part-tr-x) * 0.75), calc(var(--part-tr-y) * 0.75)) !important;
}
.hero-logo-svg-container.step-1:not(.step-1b) .part-bl {
  transform: translate(calc(var(--part-bl-x) * 0.75), calc(var(--part-bl-y) * 0.75)) !important;
}
.hero-logo-svg-container.step-1:not(.step-1b) .part-br {
  transform: translate(calc(var(--part-br-x) * 0.75), calc(var(--part-br-y) * 0.75)) !important;
}

/* Step 1b: Rapid assembly in center (ease-in) */
.hero-logo-svg-container.step-1b .logo-part {
  transition: transform 0.45s cubic-bezier(0.85, 0, 0.15, 1);
}
.hero-logo-svg-container.step-1b .part-tl,
.hero-logo-svg-container.step-1b .part-tr,
.hero-logo-svg-container.step-1b .part-bl,
.hero-logo-svg-container.step-1b .part-br {
  transform: translate(0, 0) !important;
}

/* Step 2-5 Rotations */
body:not(.scrolling) .hero-logo-svg-container.step-2 #hero-symbol-group {
  transform: rotate(90deg);
}
body:not(.scrolling) .hero-logo-svg-container.step-3 #hero-symbol-group {
  transform: rotate(180deg);
}
body:not(.scrolling) .hero-logo-svg-container.step-4 #hero-symbol-group {
  transform: rotate(270deg);
}
body:not(.scrolling) .hero-logo-svg-container.step-5 #hero-symbol-group {
  transform: rotate(360deg);
}

/* Word & Bar Groups Sizing and Opacities (Always opaque, reveal handled via clip-path) */
#hero-word-marcus {
  opacity: 1;
  transform-origin: 2478px 891px;
}

#hero-word-mages {
  opacity: 1;
  transform-origin: 2170px 1468px;
}

#hero-connector-bars {
  opacity: 1;
}

/* Dynamic SVG ClipPath Rect Width Transitions for Wipe Reveal via Scale */
#clip-hero-marcus rect {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-logo-svg-container.step-2 #clip-hero-marcus rect {
  transform: scaleX(1);
}

#clip-hero-mages rect {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-logo-svg-container.step-3 #clip-hero-mages rect {
  transform: scaleX(1);
}

#clip-hero-bars rect {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-logo-svg-container.step-4 #clip-hero-bars rect {
  transform: scaleX(1);
}

/* Slogan subline reveal at Step 5 */
.hero-subtitle {
  opacity: 0;
  transform: translateX(43.05%) translateY(80px);
  clip-path: inset(0 100% 0 0);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.8s ease;
}

.hero-logo-svg-container.step-5 ~ .hero-subtitle {
  opacity: 1;
  transform: translateX(0) translateY(0);
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   WORD EVASION (WELLENBEWEGUNG) KEYFRAMES (Segment-eased wave reveal)
   ========================================================================== */

@keyframes evade-wave-2 {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  30% { transform: translateX(240px); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  100% { transform: translateX(0); }
}

@keyframes evade-wave-3 {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  30% { transform: translateX(240px); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  100% { transform: translateX(0); }
}

@keyframes evade-wave-4 {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  30% { transform: translateX(240px); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  100% { transform: translateX(0); }
}

@keyframes evade-wave-5 {
  0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  30% { transform: translateX(240px); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  100% { transform: translateX(0); }
}

/* Trigger evasion animations on state changes (perfectly parallel, zero delay) */
.hero-logo-svg-container.step-2 #hero-word-marcus {
  animation: evade-wave-2 0.8s forwards;
}

.hero-logo-svg-container.step-3 #hero-word-marcus {
  animation: evade-wave-3 0.8s forwards;
}
.hero-logo-svg-container.step-3 #hero-word-mages {
  animation: evade-wave-3 0.8s forwards;
}

.hero-logo-svg-container.step-4 #hero-word-marcus {
  animation: evade-wave-4 0.8s forwards;
}
.hero-logo-svg-container.step-4 #hero-word-mages,
.hero-logo-svg-container.step-4 #hero-connector-bars {
  animation: evade-wave-4 0.8s forwards;
}

.hero-logo-svg-container.step-5 #hero-word-marcus {
  animation: evade-wave-5 0.8s forwards;
}
.hero-logo-svg-container.step-5 #hero-word-mages,
.hero-logo-svg-container.step-5 #hero-connector-bars {
  animation: evade-wave-5 0.8s forwards;
}


/* ==========================================================================
   HERO BACKGROUND PHASE TRANSITIONS
   ========================================================================== */

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 30% center;
  transform: scale(1.05); /* Baseline scale 1.05, no starting zoom of 1.25 */
  pointer-events: none;
  transition: background-size 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-bg-layer.phase-0 {
  background-image: url('../assets/hero-bg-phase0.jpg');
  z-index: 1;
  opacity: 1;
}
.hero-bg-layer.phase-1 {
  background-image: url('../assets/hero-bg-phase1.jpg');
  z-index: 2;
  opacity: 1;
}
.hero-bg-layer.phase-2 {
  background-image: url('../assets/hero-bg-phase2.jpg');
  z-index: 3;
  opacity: 1;
}
.hero-bg-layer.phase-3 {
  background-image: url('../assets/hero-bg-phase3.jpg');
  z-index: 4;
  opacity: 1;
}
.hero-bg-layer.phase-4 {
  background-image: url('../assets/hero-bg.png'); /* Original real photo */
  z-index: 5;
  opacity: 1;
}

/* Ensure responsiveness matches .hero-section exactly */
@media (min-aspect-ratio: 1/1) {
  .hero-bg-layer {
    background-size: 110% auto;
    background-position: 10% center;
  }
}

@media (min-width: 769px) {
  body.menu-open .hero-bg-layer {
    background-size: calc(100vw - var(--menu-width)) auto !important;
    background-position: left center !important;
  }
}

/* ==========================================================================
   INTERACTIVE WINKING EYES & PUPILS STYLING
   ========================================================================== */

/* Pupils are initially hidden, and fade in smoothly after the blink finishes */
#eye-pupil-left,
#eye-pupil-right {
  opacity: 0;
  transform: translate(0, 0);
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

body.pupils-visible #eye-pupil-left,
body.pupils-visible #eye-pupil-right {
  opacity: 1;
}

/* Stacking Context Adjustments to keep logo, vignette, and scroll arrow on top of backgrounds */
.hero-section .hero-overlay {
  z-index: 6 !important;
}
.hero-section .hero-content,
.hero-section .scroll-indicator {
  z-index: 7 !important;
}

/* ==========================================================================
   HEADER COLLISION / SCROLL TRIGGER TIMED TRANSITIONS
   ========================================================================== */

/* Enable smooth transitions on header elements when transitioning states */
.header-center .nav-logo--symbol,
.header-right .social-icon-btn,
.header-right .lang-toggle {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
}

/* Scrolled state style hooks can be placed here if needed, but positioning is driven by JS */

/* ==========================================================================
   SCROLLING INTERACTION OVERRIDES
   ========================================================================== */

/* Disable intro CSS keyframe animations and transitions once scroll begins,
   so JS styles have immediate, unblocked control. */
body.scrolling #hero-word-marcus,
body.scrolling #hero-word-mages,
body.scrolling #hero-connector-bars,
body.scrolling #hero-text-group,
body.scrolling .hero-subtitle,
body.scrolling .header-center .nav-logo--symbol,
body.scrolling .header-right .social-icon-btn,
body.scrolling .header-right .lang-toggle {
  animation: none !important;
  transition: none !important;
}


/* ==========================================================================
   SCROLL PIN DEPTH SPACER
   ========================================================================== */

@media (min-width: 769px) {
  .hero-scroll-spacer {
    height: 1600px;
    width: 100%;
    pointer-events: none;
    display: block;
  }
  body.menu-open .hero-scroll-spacer {
    display: none;
  }
}
@media (max-width: 768px) {
  .hero-scroll-spacer {
    display: none;
  }
}