/*
 * Rocket Hero — isolated animation component.
 *
 * Integration rule: keep this component positioned relative and put the real
 * header content above it with z-index: 10 or higher. All visual animation
 * layers are pointer-transparent and cannot block links or controls.
 */

.rocket-hero {
  /* Main layout controls. Override them on the component or in a media query. */
  --rocket-hero-height: 100svh;
  --rocket-hero-min-height: 640px;
  --rocket-hero-background: #031523;
  --rocket-top: 60%;
  --rocket-right: 5.5vw;
  --rocket-width: min(84svh, 68vw);
  --rocket-opacity: 1;

  /* The texture canvas and this aspect ratio must stay proportional. */
  --rocket-aspect-ratio: 1858 / 2578;

  /* Gentle floating movement of the complete rocket/fire group. */
  --rocket-wiggle-duration: 5.5s;
  --rocket-wiggle-x: -0.175rem;
  --rocket-wiggle-y: 0.275rem;

  /* Values below are written by rocket-hero.js. */
  --scene-cover-scale: 1.08;
  --canvas-fade-duration: 180ms;
  --sky-offset-x: 0px;
  --sky-offset-y: 0px;
  --gradient-offset-x: 0px;
  --gradient-offset-y: 0px;
  --rocket-offset-x: 0px;
  --rocket-offset-y: 0px;

  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--rocket-hero-height);
  min-height: var(--rocket-hero-min-height);
  overflow: hidden;
  background: var(--rocket-hero-background);
  contain: layout paint;
}

/* CSS layers are a graceful fallback while WebGL textures are loading. */
.rocket-hero__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center;
  will-change: transform;
}

.rocket-hero__sky {
  z-index: 0;
  background-image: url("assets/sky.webp");
  transform: translate3d(
      var(--sky-offset-x),
      var(--sky-offset-y),
      0
    ) scale(var(--scene-cover-scale));
}

/* Gradient intentionally stays above the rocket and fire. */
.rocket-hero__gradient {
  z-index: 4;
  opacity: 0.86;
  background-image: url("assets/gradient.webp");
  mix-blend-mode: multiply;
  transform: translate3d(
      var(--gradient-offset-x),
      var(--gradient-offset-y),
      0
    ) scale(var(--scene-cover-scale));
}

/*
 * WebGL renders the complete scene (sky + rocket + fire + gradient) so heat
 * refraction can affect every layer without a bright compositing halo.
 */
.rocket-hero__canvas {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--canvas-fade-duration) ease-out;
}

.rocket-hero__canvas[data-webgl="active"] {
  opacity: 1;
}

.rocket-hero__rocket-scene {
  position: absolute;
  z-index: 3;
  top: var(--rocket-top);
  right: var(--rocket-right);
  width: var(--rocket-width);
  aspect-ratio: var(--rocket-aspect-ratio);
  opacity: var(--rocket-opacity);
  pointer-events: none;
  transform: translate3d(
    var(--rocket-offset-x),
    calc(-50% + var(--rocket-offset-y)),
    0
  );
  transform-origin: 54% 45%;
  will-change: transform;
}

.rocket-hero__rocket-float {
  position: absolute;
  inset: 0;
  animation: rocket-hero-wiggle var(--rocket-wiggle-duration) ease-in-out infinite;
}

.rocket-hero__rocket,
.rocket-hero__fire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.rocket-hero__rocket {
  z-index: 2;
}

.rocket-hero__fire {
  z-index: 3;
  transform-origin: 72% 78%;
  filter: saturate(1.18) contrast(1.04);
  animation: rocket-hero-fire-burn 0.38s ease-in-out infinite alternate;
  will-change: transform, filter, opacity;
}

@keyframes rocket-hero-wiggle {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(
      var(--rocket-wiggle-x),
      var(--rocket-wiggle-y),
      0
    );
  }
}

/* DOM fallback while WebGL loads, or when canvas cannot start. */
@keyframes rocket-hero-fire-burn {
  0% {
    opacity: 0.88;
    transform: scale(0.985, 0.97) translate3d(0, 0, 0);
    filter: saturate(1.1) contrast(1.02) brightness(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1.035, 1.055) translate3d(0.35%, 0.9%, 0);
    filter: saturate(1.38) contrast(1.1) brightness(1.14);
  }
}

/* Baseline mobile framing; projects can replace this breakpoint entirely. */
@media (max-width: 900px) {
  .rocket-hero {
    --rocket-hero-min-height: 520px;
    --rocket-top: 58%;
    --rocket-right: -18rem;
    --rocket-width: 43rem;
    --rocket-opacity: 0.82;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rocket-hero__rocket-float,
  .rocket-hero__fire {
    animation: none;
  }

  .rocket-hero__canvas {
    transition: none;
  }
}

/* Only for the included index.html preview; it does not affect a host site. */
body.rocket-hero-demo {
  min-height: 100%;
  margin: 0;
  background: #02070d;
}