/* ==========================================================================
   Homepage hero — the engineered Swiss alpine environment.

   Four separable layers, so each can move and re-position independently:

     .hero-env-base    brushed aluminium ground
     .hero-env-alps    distant alpine silhouettes in mist
     .hero-env-chrome  foreground machined planes
     .hero-env-marks   engineering-drawing detailing

   Drawn in CSS and SVG rather than shipped as an image. Three reasons: the
   layers have to move independently, they have to re-compose at every
   breakpoint, and the whole thing costs a few KB of markup instead of a
   multi-megabyte photograph.

   The top half stays deliberately empty. The headline sits there and nothing
   is allowed to compete with it.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  /* Glacier aluminium, brightest at the top where the headline sits. */
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FDFDFE 34%, #FAFBFC 56%, #F4F6F8 100%);
}

.hero-env {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ------------------------------------------------------ brushed aluminium -- */

.hero-env-base {
  position: absolute;
  inset: 0;
  /* Two grains at different pitches, both barely above the noise floor. This
     is the only thing that makes the surface read as metal rather than paper. */
  background:
    repeating-linear-gradient(96deg,
      rgba(16,24,40,0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(96deg,
      rgba(255,255,255,0.5) 0 2px, transparent 2px 7px);
  /* Fades out towards the top so the headline sits on clean white. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
}

/* A single slow directional sheen, the one moving thing in the composition. */
.hero-env-sheen {
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(101deg,
    transparent 38%, rgba(255,255,255,0.55) 47%, rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.55) 53%, transparent 62%);
  opacity: .5;
  animation: hero-sheen 28s ease-in-out infinite;
}
@keyframes hero-sheen {
  0%, 100% { transform: translateX(-6%); }
  50%      { transform: translateX(6%); }
}

/* ------------------------------------------------------------ the layers -- */

.hero-env-alps,
.hero-env-chrome,
.hero-env-marks {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  display: block;
  will-change: transform;
}

/* The hero is tall because the product frame is tall, so a literal "starts at
   halfway" put the whole environment behind the frame where none of it read.
   The layers are taller instead: their peaks rise to about 38% — still far
   below the headline, which ends around 22% — so the ridge is visible in the
   margins beside the frame and just above its top edge. */
.hero-env-alps   { height: 66%; }
.hero-env-chrome { height: 58%; }
.hero-env-marks  { top: 0; height: 100%; }

/* ------------------------------------------------- glacier glow + fade ----- */

/* Separation behind the product frame, so it reads as emerging from the
   landscape rather than pasted onto it. */
.hero-env-glow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: min(1180px, 92%);
  height: 62%;
  transform: translateX(-50%);
  background: radial-gradient(48% 54% at 50% 46%,
    rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.40) 44%,
    rgba(255,255,255,0) 76%);
}

/* The environment dissolves into the next section instead of ending on a line. */
.hero-env-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(180deg,
    rgba(247,249,251,0) 0%, rgba(250,251,252,0.72) 52%, #FFFFFF 100%);
}

/* The product frame sits above all of it. */
.hero-center { position: relative; z-index: 1; }
.hero-shot { position: relative; z-index: 1; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
  /* Tablet: less foreground geometry, and the ridge sits lower. */
  .hero-env-chrome { height: 38%; opacity: .85; }
  .hero-env-alps { height: 44%; }
  .hero-env-marks { display: none; }
  .hero-env-sheen { animation: none; opacity: .35; }
}

@media (max-width: 760px) {
  /* Phone: one simplified ridge behind the product, nothing else. The top of
     the hero has to stay completely clean at this size. */
  .hero-env-alps { display: none; }
  .hero-env-chrome { height: 30%; opacity: .8; }
  /* The grain is two repeating gradients at a 1-2px pitch. At phone widths,
     on fractional device pixel ratios, those stripes alias into smudges that
     read as blurred text sitting behind the hero CTA. Verified by isolation:
     hiding this layer removes them and nothing else does.

     A flat wash keeps the surface from reading as plain paper without any
     repeating geometry to alias. */
  .hero-env-base {
    background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(16,24,40,0.012) 60%,
      rgba(16,24,40,0.02) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 62%, #000 100%);
  }
  .hero-env-glow { width: 108%; height: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-env-sheen { animation: none; }
  .hero-env-alps, .hero-env-chrome { transform: none !important; }
}

/* ==========================================================================
   Headline sheen.

   A brushed-metal highlight passes across the letters once every three
   seconds: 1.2s of travel, then 1.8s at rest. The pause is the point — a
   continuously moving headline reads as a loading state.

   The highlight peaks at #5A6A7C rather than a true chrome white. Light
   enough to read as metal, dark enough that the text still clears 5.4:1
   against the hero at the brightest moment of the sweep.
   ========================================================================== */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-headline .rv-text {
    background-image: linear-gradient(101deg,
      #101828 0%, #101828 44%,
      #3B4655 47%, #5A6A7C 50%, #3B4655 53%,
      #101828 56%, #101828 100%);
    /* 300% wide and positioned between 100% and 0%: at every point in that
       range the gradient still covers the whole element, so the clipped text
       can never go transparent, and no tiling is needed.
       Tiling was the earlier bug — it parked a second highlight against the
       left edge of the text and held it there for the whole rest phase, which
       is what read as stuck. Here the highlight is off the element at both
       ends of the travel, so the rest phase is plain ink. */
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: hero-title-sheen 3s cubic-bezier(.4, 0, .2, 1) infinite;
  }
  /* Each half of the headline is one gradient, offset so the highlight reads
     as a single pass across the whole line rather than two separate ones. */
  .hero-headline .rv-text:nth-child(2) { animation-delay: .22s; }
}

@keyframes hero-title-sheen {
  0%        { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline .rv-text {
    animation: none;
    background-image: none;
    color: #0f172a;
  }
}