/* ==========================================================
   The Apps Brewery © 2026
   Client: AutoTechnik Australia
   Component: Hero Photograph / Video Crossfade

   Original hero layout remains controlled by styles.css.
   ========================================================== */

/* ==========================================================
   VIDEO LAYER
   ========================================================== */

.hero-video-layer {
  position: absolute;
  inset: 0;
  z-index: 1;

  overflow: hidden;
  background-color: #fff;

  /* Initially display original hero photograph */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Smooth photographic crossfade */
  transition:
    opacity 1500ms ease-in-out,
    visibility 0s linear 1500ms;
}

/* Fade from photograph into video */
.hero-video-layer.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 1500ms ease-in-out,
    visibility 0s linear 0s;
}

/* ==========================================================
   RACING VIDEO
   ========================================================== */

.hero-racing-video {
  display: block;

  width: 100%;
  height: 100%;

  /* Preserve full video without cropping */
  object-fit: contain;
  object-position: center center;

  /* White instead of black sidebars */
  background: #fff;
}

/* ==========================================================
   LEFT-HAND WHITE FADE
   ========================================================== */

.hero-video-fade {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.65) 8%,
    rgba(255, 255, 255, 0) 24%
  );
}

/* ==========================================================
   MUTE / UNMUTE BUTTON

   White speaker icon only.
   No square, circle, border or background.

   Position calculated dynamically by hero-video.js
   to remain inside the actual visible video frame.
   ========================================================== */

.hero-video-sound {
  position: absolute;

  /* Dynamic positioning */
  left: var(--speaker-left, 190px);
  right: auto;
  bottom: var(--speaker-bottom, 20px);

  /* Above video and fade overlay */
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  padding: 10px;

  /* White icon */
  color: #fff;

  /* Completely transparent */
  background: transparent;
  background-color: transparent;

  /* Remove visible button framing */
  border: none;
  border-radius: 0;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
  pointer-events: auto;

  transition: color 200ms ease;
}

/* Speaker SVG icon */
.hero-video-sound svg {
  display: block;
  width: 25px;
  height: 25px;

  pointer-events: none;

  /* Visible against light video scenes */
  filter: drop-shadow(
    0 1px 3px rgba(0, 0, 0, 0.85)
  );
}

/* Porsche red icon on hover */
.hero-video-sound:hover {
  color: #e10600;
  background: transparent;
  background-color: transparent;
}

/* Keyboard accessibility */
.hero-video-sound:focus-visible {
  outline: 2px solid #e10600;
  outline-offset: 2px;
}

/* Hide control when video is not playing */
.hero-video-sound[hidden] {
  display: none !important;
}

/* ==========================================================
   DESKTOP HERO CLICK FIX

   styles.css places .hero-content above .hero-visual.

   Allow clicks to pass through empty areas of the
   text container while retaining clickable links.
   ========================================================== */

@media (min-width: 1241px) {

  .hero-content {
    pointer-events: none;
  }

  .hero-content a,
  .hero-content button {
    pointer-events: auto;
  }

}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1240px) {

  .hero-video-sound {
    left: var(--speaker-left, 20px);
    right: auto;
    bottom: var(--speaker-bottom, 20px);
  }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

  .hero-video-sound {
    left: var(--speaker-left, 12px);
    right: auto;
    bottom: var(--speaker-bottom, 12px);

    width: 42px;
    height: 42px;
  }

}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero-video-layer {
    transition: none;
  }

}