/* ==========================================================================
   Hydraulic Systems — cinematic hero
   Premium industrial visual identity. The videos carry the visual weight, so
   the interface stays minimal, high-contrast and readable.
   ========================================================================== */

:root {
  /* Palette */
  --color-bg: #05080b;
  --color-surface: #0a0f14;
  --color-text: #f5f7f9;
  --color-muted: rgba(245, 247, 249, 0.68);
  --color-orange: #ff6a00;
  --color-amber: #ffc300;
  --color-blue: #35b9ff;

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --pad-x: clamp(1.5rem, 6vw, 6rem);
  --content-max: clamp(320px, 52vw, 650px);

  /* Motion */
  --crossfade: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Scroll story + sticky hero
   ========================================================================== */
.story {
  position: relative;
  /* ~500vh runway: 5 stages x one viewport each. svh keeps mobile stable. */
  height: 500svh;
}

.hero {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Invisible scroll steps that simply add height. */
.scroll-steps {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scroll-step {
  height: 100svh;
}

/* ==========================================================================
   Video stack
   ========================================================================== */
.video-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000; /* base colour so a not-yet-loaded frame is never white */
}

.stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 0;
  /* Stacking order is driven inline by the controller so the incoming clip is
     always on top and fades in OVER the outgoing one (no dip to the black
     backdrop). Only opacity animates. */
  transition: opacity var(--crossfade) linear;
  pointer-events: none;
}
.stage-video.is-active {
  opacity: 1;
  will-change: opacity;
}

/* ==========================================================================
   Cinematic scrims + grain
   Stronger dark on the left (behind the copy), subtle on the right, with
   soft top/bottom vignetting. Machinery on the right stays visible.
   ========================================================================== */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 11, 0.88) 0%,
      rgba(5, 8, 11, 0.66) 28%,
      rgba(5, 8, 11, 0.22) 60%,
      rgba(5, 8, 11, 0.05) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 8, 11, 0.42) 0%,
      rgba(5, 8, 11, 0) 22%,
      rgba(5, 8, 11, 0) 62%,
      rgba(5, 8, 11, 0.66) 100%
    );
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05; /* extremely low, as specified */
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ==========================================================================
   Content layer
   ========================================================================== */
.hero__content {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--pad-x);
  transform: translateY(-50%);
  width: min(var(--content-max), calc(100% - 2 * var(--pad-x)));
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: clamp(0.7rem, 1vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-amber);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--color-orange), transparent);
}

.title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}

.description {
  margin: 0 0 2rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--color-muted);
}

/* ---- CTAs --------------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn {
  --btn-fg: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.6rem;
  border-radius: 2px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--btn-fg);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.btn[hidden] {
  display: none;
}

.btn--primary {
  background: linear-gradient(135deg, var(--color-orange), var(--color-amber));
  color: #120a02;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(255, 106, 0, 0.7);
}

.btn--secondary {
  background: rgba(245, 247, 249, 0.04);
  border-color: rgba(245, 247, 249, 0.22);
  color: var(--color-text);
}
.btn--secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 247, 249, 0.5);
  background: rgba(245, 247, 249, 0.08);
}

/* ==========================================================================
   Vertical stage navigation (right)
   ========================================================================== */
.stage-nav {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: clamp(1rem, 2.5vw, 2.4rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0; /* revealed by Motion after the intro */
}

.stage-nav__rail {
  position: absolute;
  right: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(245, 247, 249, 0.14);
  overflow: hidden;
}
.stage-nav__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-orange), var(--color-amber));
}

.stage-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.stage-nav__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(245, 247, 249, 0.45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out),
    background-color 200ms var(--ease-out);
}
.stage-nav__dot:hover {
  border-color: var(--color-amber);
  transform: scale(1.2);
}
.stage-nav__dot.is-active {
  background: var(--color-amber);
  border-color: var(--color-amber);
  box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.15);
}

.stage-nav__label {
  position: absolute;
  right: calc(100% + 0.9rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(10, 15, 20, 0.7);
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.stage-nav__dot:hover .stage-nav__label,
.stage-nav__dot:focus-visible .stage-nav__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   Stage counter (top-left) + scroll hint (bottom-left)
   ========================================================================== */
.stage-counter {
  position: absolute;
  z-index: 5;
  top: clamp(1.4rem, 4vh, 2.6rem);
  left: var(--pad-x);
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
#counter-current {
  color: var(--color-text);
}
.stage-counter__sep {
  opacity: 0.5;
}

.scroll-hint {
  position: absolute;
  z-index: 5;
  left: var(--pad-x);
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
}
.scroll-hint__text {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.scroll-hint__line {
  position: relative;
  width: 46px;
  height: 1px;
  background: rgba(245, 247, 249, 0.2);
  overflow: hidden;
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--color-amber);
  animation: scroll-sweep 2.4s var(--ease-out) infinite;
}
@keyframes scroll-sweep {
  0% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(320%); }
}

/* ==========================================================================
   Loading overlay
   ========================================================================== */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, #0a0f14 0%, #05080b 60%);
  transition: opacity 500ms var(--ease-out), visibility 500ms;
}
.loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-overlay__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem;
}

.loader {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: 0.8rem;
}
.loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245, 247, 249, 0.12);
  border-top-color: var(--color-orange);
  animation: spin 0.9s linear infinite;
}
.loader__core {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--color-amber);
  opacity: 0.85;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay__brand {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-amber);
}
.loading-overlay__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.btn--start {
  margin-top: 1rem;
  background: linear-gradient(135deg, var(--color-orange), var(--color-amber));
  color: #120a02;
}
.btn--start:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(255, 106, 0, 0.7);
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 760px) {
  :root {
    --pad-x: clamp(1.1rem, 6vw, 2rem);
  }

  .stage-video {
    /* Keep the excavator / pump in frame on tall portrait screens. */
    object-position: 62% center;
  }

  /* Stronger bottom gradient, copy pinned to the lower third. */
  .scrim {
    background:
      linear-gradient(
        180deg,
        rgba(5, 8, 11, 0.55) 0%,
        rgba(5, 8, 11, 0.1) 30%,
        rgba(5, 8, 11, 0.55) 62%,
        rgba(5, 8, 11, 0.92) 100%
      );
  }

  .hero__content {
    top: auto;
    bottom: clamp(4.5rem, 16vh, 8rem);
    transform: none;
    width: calc(100% - 2 * var(--pad-x));
  }
  .description {
    max-width: 34ch;
  }
  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn {
    width: 100%;
    min-height: 3.25rem; /* thumb-friendly */
  }

  /* Vertical nav -> compact horizontal strip near the top. */
  .stage-nav {
    top: clamp(3.2rem, 9vh, 4.5rem);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
  }
  .stage-nav__rail {
    display: none;
  }
  .stage-nav__list {
    flex-direction: row;
    gap: 0.9rem;
  }
  .stage-nav__label {
    display: none; /* avoid overflow on small screens */
  }

  .stage-counter {
    top: clamp(1rem, 4vh, 1.6rem);
  }
  .scroll-hint {
    display: none;
  }
}

/* ==========================================================================
   Reduced motion — disable non-essential animation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .stage-video {
    transition: none;
  }
  .scroll-hint__line::after {
    animation: none;
  }
  .loader__ring {
    animation-duration: 2s;
  }
  .btn {
    transition: none;
  }
}