/* ==========================================================================
   Weserhanse Logistik GmbH, scene.css
   Scroll-driven journey scene: layout, panels, dots, ambient animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   Journey layout (sticky storytelling)
   -------------------------------------------------------------------------- */
#journey {
  position: relative;
  height: 520vh;
  background: var(--sky-a);
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.stage #scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* will-change strictly limited: 3 parallax groups + 4 actor groups */
#layer-bg,
#layer-mg,
#layer-fg {
  will-change: transform;
}
#truck,
#ship,
#van,
#container-hero {
  will-change: transform;
}

.journey-title {
  position: absolute;
  top: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  background: rgba(250, 246, 239, 0.75);
  padding: 0.5em 1.2em;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.journey-title.is-on {
  opacity: 1;
}

/* ---- Intro hero card -------------------------------------------------- */
.intro-card {
  position: absolute;
  z-index: 7;
  top: 18%;
  left: clamp(1.2rem, 6vw, 5rem);
  max-width: 540px;
  background: rgba(250, 246, 239, 0.93);
  border: 1px solid rgba(228, 221, 209, 0.9);
  border-radius: 8px;
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: 0 18px 50px rgba(16, 38, 63, 0.18);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.intro-card h1 {
  margin-bottom: 0.4rem;
}
.intro-card .sub {
  color: var(--mut);
  font-size: 1.08rem;
  margin-bottom: 1.4rem;
  max-width: 42ch;
}
.intro-card .intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.intro-card.is-gone {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}
.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mut);
}
.scroll-hint .mouse {
  width: 18px;
  height: 28px;
  border: 2px solid var(--mut);
  border-radius: 10px;
  position: relative;
}
.scroll-hint .mouse::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
  animation: hint-wheel 1.6s ease-in-out infinite;
}
@keyframes hint-wheel {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  55% {
    transform: translateY(7px);
    opacity: 0.2;
  }
}

/* ---- Outro card -------------------------------------------------------- */
.outro-card {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: clamp(4.5rem, 12vh, 8rem);
  transform: translate(-50%, 24px);
  width: min(440px, calc(100vw - 2.4rem));
  background: rgba(250, 246, 239, 0.95);
  border: 1px solid rgba(228, 221, 209, 0.9);
  border-radius: 8px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 18px 50px rgba(16, 38, 63, 0.22);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.outro-card.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.outro-card h3 {
  margin-bottom: 0.3rem;
}
.outro-card p {
  color: var(--mut);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}
.outro-card .minimap {
  margin: 0 auto 1.1rem;
  width: 240px;
}

/* ---- Step panels -------------------------------------------------------- */
.step-panels {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: clamp(1.2rem, 5vw, 4.5rem);
  transform: translateY(-50%);
  width: min(360px, 34vw);
  pointer-events: none;
}
.step-panel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(calc(-50% + 12px));
  background: rgba(250, 246, 239, 0.94);
  border: 1px solid rgba(228, 221, 209, 0.9);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow: 0 14px 40px rgba(16, 38, 63, 0.16);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1),
    visibility 0s linear 0.45s;
}
.step-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 0.8, 0.3, 1);
  pointer-events: auto;
}
.step-panel .step-num {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.step-panel .step-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 0.1rem;
}
.step-panel h3 {
  font-size: 1.3rem;
  margin-bottom: 0.45rem;
}
.step-panel p {
  color: var(--ink);
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}
.step-panel .step-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-2);
  background: var(--sky-a);
  border-radius: 3px;
  padding: 0.3em 0.9em;
}

/* ---- Step dots ----------------------------------------------------------- */
.step-dots {
  position: absolute;
  z-index: 8;
  right: clamp(0.9rem, 2.5vw, 2.2rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.step-dot {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-direction: row-reverse;
  background: none;
  border: 0;
  padding: 0.2em;
  color: var(--navy);
}
.step-dot .dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(250, 246, 239, 0.9);
  border: 2px solid var(--navy-2);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}
.step-dot .dot-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  background: rgba(250, 246, 239, 0.85);
  border-radius: 3px;
  padding: 0.25em 0.8em;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}
.step-dot:hover .dot-label,
.step-dot:focus-visible .dot-label,
.step-dot[aria-current="step"] .dot-label {
  opacity: 1;
  transform: none;
}
.step-dot[aria-current="step"] .dot {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: #3a1c08;
  transform: scale(1.12);
}

/* ---- Animation toggle ----------------------------------------------------- */
.anim-toggle {
  position: absolute;
  z-index: 8;
  bottom: 1.1rem;
  right: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1.5px solid var(--navy-2);
  background: rgba(250, 246, 239, 0.92);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius);
  padding: 0.5em 1.1em;
}
.anim-toggle:hover {
  background: #fff;
}
.anim-toggle .ico {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   Ambient SVG animations (CSS-driven, transform/opacity only)
   Pattern: wrapper g carries the positioning transform attribute,
   the inner element carries the CSS animation.
   -------------------------------------------------------------------------- */

/* Clouds: slow horizontal drift */
.cloud-drift {
  animation: cloud-drift 26s ease-in-out infinite alternate;
}
.cloud-drift--slow {
  animation-duration: 38s;
}
.cloud-drift--fast {
  animation-duration: 19s;
}
@keyframes cloud-drift {
  from {
    transform: translateX(-26px);
  }
  to {
    transform: translateX(26px);
  }
}

/* Wind turbine rotors */
.rotor {
  animation: rotor-spin 7s linear infinite;
}
.rotor--b {
  animation-duration: 9.5s;
  animation-delay: -3s;
}
@keyframes rotor-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Office window glow pulse (Versender) */
.office-glow {
  animation: office-pulse 2.6s ease-in-out infinite;
}
@keyframes office-pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* Warehouse bay light shimmer */
.bay-light {
  animation: office-pulse 3.8s ease-in-out infinite;
  animation-delay: -1.4s;
}

/* Ship flag flutter */
.flag-flutter {
  animation: flag-wave 1.1s ease-in-out infinite alternate;
}
@keyframes flag-wave {
  from {
    transform: skewY(-4deg) scaleX(1);
  }
  to {
    transform: skewY(4deg) scaleX(0.92);
  }
}

/* Ship ambient bob (inner group; JS moves the outer group) */
.ship-bob {
  animation: ship-bob 4.2s ease-in-out infinite;
}
@keyframes ship-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0.3deg);
  }
  50% {
    transform: translateY(-3px) rotate(-0.4deg);
  }
}

/* Smoke puffs: rise + fade, staggered */
.smoke-puff {
  animation: smoke-rise 2.8s ease-out infinite;
  opacity: 0;
}
.smoke-puff:nth-child(2) {
  animation-delay: 0.9s;
}
.smoke-puff:nth-child(3) {
  animation-delay: 1.8s;
}
@keyframes smoke-rise {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  100% {
    transform: translate(-26px, -46px) scale(1.5);
    opacity: 0;
  }
}

/* Truck exhaust: one-shot puffs, triggered via .puff-go */
#exhaust .exhaust-puff {
  opacity: 0;
}
#exhaust.puff-go .exhaust-puff {
  animation: exhaust-pop 0.9s ease-out forwards;
}
#exhaust.puff-go .exhaust-puff:nth-child(2) {
  animation-delay: 0.18s;
}
@keyframes exhaust-pop {
  0% {
    transform: translate(0, 0) scale(0.4);
    opacity: 0;
  }
  18% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-20px, -26px) scale(1.4);
    opacity: 0;
  }
}

/* Water: two counter-scrolling wave strips (seamless 120px wavelength) */
.wave-scroll-a {
  animation: wave-a 7s linear infinite;
}
.wave-scroll-b {
  animation: wave-b 11s linear infinite;
}
@keyframes wave-a {
  to {
    transform: translateX(-120px);
  }
}
@keyframes wave-b {
  to {
    transform: translateX(120px);
  }
}

/* Bow wave ripple (visible only while ship sails; JS gates opacity) */
.bow-ripple {
  animation: bow-ripple 1.4s ease-out infinite;
  transform-origin: 0 0;
}
.bow-ripple:nth-child(2) {
  animation-delay: 0.7s;
}
@keyframes bow-ripple {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Gull wing flap */
.gull-flap {
  animation: gull-flap 0.9s ease-in-out infinite alternate;
}
.gull-flap--b {
  animation-duration: 1.15s;
  animation-delay: -0.4s;
}
@keyframes gull-flap {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.55);
  }
}

/* Harbour beacon blink */
.beacon {
  animation: beacon-blink 2.2s ease-in-out infinite;
}
@keyframes beacon-blink {
  0%,
  78%,
  100% {
    opacity: 0.15;
  }
  85%,
  93% {
    opacity: 1;
  }
}

/* POD badge spring pop (class is toggled by JS) */
#pod-badge {
  opacity: 0;
}
#pod-badge.is-popped {
  opacity: 1;
  animation: pod-pop 0.55s cubic-bezier(0.34, 1.6, 0.64, 1) both;
}
@keyframes pod-pop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.18) rotate(6deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Idle gate: pause every ambient loop while the scene is off-screen */
.scene--idle .cloud-drift,
.scene--idle .rotor,
.scene--idle .office-glow,
.scene--idle .bay-light,
.scene--idle .flag-flutter,
.scene--idle .ship-bob,
.scene--idle .smoke-puff,
.scene--idle .wave-scroll-a,
.scene--idle .wave-scroll-b,
.scene--idle .bow-ripple,
.scene--idle .gull-flap,
.scene--idle .beacon {
  animation-play-state: paused;
}

/* Zone badges (static overview only) */
#zone-badges {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Scan beam sweep (opacity gated by JS via #scan-group) */
.scan-beam {
  animation: scan-sweep 1.6s ease-in-out infinite alternate;
  transform-origin: 0 0;
}
@keyframes scan-sweep {
  from {
    transform: rotate(-26deg);
  }
  to {
    transform: rotate(26deg);
  }
}
.scene--idle .scan-beam {
  animation-play-state: paused;
}

/* Spreader twist-lock pulse (animates children, not the JS-positioned group) */
.is-locked rect {
  animation: lock-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes lock-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(1);
  }
}

#pod-badge.is-popped {
  transform-box: fill-box;
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   Mobile (<768px): SVG window on top, step card below, horizontal dots
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hide-m {
    display: none;
  }
  .journey-title {
    display: none;
  }
  .stage #scene {
    height: 55vh;
    bottom: auto;
  }
  .intro-card {
    top: auto;
    bottom: 13vh;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 1.8rem);
    max-width: 440px;
    padding: 1.15rem 1.25rem;
  }
  .intro-card h1 {
    font-size: 1.55rem;
  }
  .intro-card .sub {
    font-size: 0.94rem;
    margin-bottom: 0.9rem;
  }
  .intro-card .scroll-hint {
    margin-top: 0.9rem;
  }
  .intro-card.is-gone {
    transform: translateX(-50%) translateY(-12px);
  }
  .step-panels {
    top: auto;
    bottom: 17vh;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(100vw - 1.6rem);
    max-width: 440px;
  }
  .step-panel {
    padding: 1.05rem 1.15rem 1rem;
  }
  .step-panel .step-num {
    font-size: 1.9rem;
  }
  .step-panel h3 {
    font-size: 1.1rem;
  }
  .step-panel p {
    font-size: 0.88rem;
  }
  .step-dots {
    top: auto;
    transform: none;
    left: auto;
    right: 0.9rem;
    bottom: 3.4rem; /* keeps clear of the fixed demo ribbon */
    flex-direction: row;
    gap: 0.5rem;
  }
  .step-dot {
    flex-direction: row;
    padding: 0.1em;
  }
  .step-dot .dot {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
  }
  .step-dot .dot-label {
    display: none;
  }
  .anim-toggle {
    bottom: auto;
    top: 0.8rem;
    right: 0.8rem;
    font-size: 0.76rem;
    padding: 0.45em 0.9em;
  }
  .outro-card {
    bottom: 15vh;
    padding: 1.2rem 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Static overview (reduced motion, toggle, or tiny viewports):
   full world scaled to fit, numbered zone badges, panels as a stacked list
   -------------------------------------------------------------------------- */
#journey.journey--static {
  height: auto;
  background: var(--sky-a);
}
.journey--static .stage {
  position: static;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.2rem clamp(1rem, 4vw, 3rem) 2.6rem;
}
.journey--static .stage #scene {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 3600 / 675;
  border-radius: 12px;
}
.journey--static .journey-title {
  display: none;
}
.journey--static .intro-card {
  position: static;
  order: -3;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  max-width: 720px;
  width: auto;
}
.journey--static .intro-card .scroll-hint {
  display: none;
}
.journey--static .anim-toggle {
  position: static;
  order: -2;
  align-self: flex-start;
}
.journey--static .step-panels {
  position: static;
  order: 1;
  transform: none;
  width: auto;
  max-width: none;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.journey--static .step-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.journey--static .step-dots {
  display: none;
}
.journey--static .outro-card {
  position: static;
  order: 2;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  width: auto;
  max-width: 540px;
  margin-inline: auto;
}
.journey--static #zone-badges {
  opacity: 1;
}
.journey--static #pod-badge {
  opacity: 1;
}