/* ==========================================================================
 Hero: scroll-controlled car animation
 Styles for #experience. The animation itself is in js/car-animation.js.
 ========================================================================== */

#experience {
  --hero-floor: #15171a;
  position: relative;
  height: 360vh;
  /* Phones grow the viewport past 100svh when the address bar hides: this fills that gap under the stage */
  background: var(--hero-floor);
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
/* Dark studio, shown until the room picture loads */
.hero-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-floor);
}
/* The room behind the car, moved by js/car-animation.js. An <img>, not a CSS background: phones hand an image straight
   to the graphics chip, while a background would be redrawn at screen resolution and use many times the memory */
.hero-room {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 1200px;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
}
/* Dark edges around a pool of light: the car stays against the lighter centre, so it stands out from the room.
   Fixed to the stage, between the room and the car, so it never darkens the car and never needs repainting */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(82% 68% at 54% 48%, transparent 40%, rgba(10, 12, 14, 0.5) 74%, rgba(8, 9, 11, 0.88) 100%),
    linear-gradient(rgba(8, 9, 11, 0.72), transparent 26%, transparent 80%, rgba(8, 9, 11, 0.72));
}
/* Only the source of the canvas's picture. If it showed before the script ran, it would be far too large on phones */
#car-scene {
  position: absolute;
  width: 1280px;
  height: 900px;
  visibility: hidden;
  pointer-events: none;
}
#car-scene img {
  display: block;
  width: 1280px;
  height: 900px;
  max-width: none;
}
/* The canvas fades in once it has its first frame, so the opening is always the finished car */
#car-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-exit);
}
.is-drawn #car-canvas {
  opacity: 1;
}
.hero-caption {
  position: absolute;
  left: 56px;
  bottom: 64px;
  max-width: 360px;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
}
/* Captions cross the black paint and the dark back wall, so each sits on its own card */
.hero-caption {
  padding: 18px 22px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-2);
}
.hero-caption.hero-intro {
  opacity: 1;
  visibility: visible;
  /* The car's nose sits at 44% of the screen in the opening shot: this keeps the card clear of it at every width */
  max-width: min(380px, calc(42vw - 56px));
}
.caption-step {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.caption-step b {
  color: var(--blue);
  font-weight: 700;
  margin-right: 6px;
}
.hero-caption h1 {
  font-size: clamp(32px, 3.4vw, 50px);
  margin-top: 6px;
}
.hero-caption p {
  color: var(--ink-2);
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 30em;
}
.hero-caption .caption-title {
  font-size: clamp(28px, 2.8vw, 40px);
  margin-top: 6px;
  color: var(--ink);
}
.hero-caption .caption-step {
  margin-top: 0;
  color: var(--muted);
  font-size: 13px;
}
.hero-caption .caption-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-caption .caption-actions .btn {
  padding: 10px 16px;
  font-size: 14px;
}
/* The site's glass button is white for dark photos. On the light stage it needs dark text and edges */
.hero-caption .btn-glass {
  background: rgba(20, 26, 34, 0.05);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(20, 26, 34, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-caption .btn-glass:hover {
  background: rgba(20, 26, 34, 0.1);
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.scroll-cue i {
  display: block;
  width: 1px;
  height: 16px;
  background: linear-gradient(var(--blue), transparent);
  transform-origin: top;
  animation: scroll-cue-pulse 2.4s var(--ease-spring) infinite;
}
@keyframes scroll-cue-pulse {
  0% {
    transform: scaleY(0);
    opacity: 1;
  }
  70% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
.step-rail {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(10, 12, 15, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  list-style: none;
}
.step-rail li {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  opacity: 0.68;
  text-align: right;
  transition: opacity 0.4s ease;
}
.step-rail li.is-on {
  opacity: 1;
}
.step-rail li.is-on::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--blue-light);
}
.hero-progress {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.hero-progress i {
  position: absolute;
  inset: 0;
  background: var(--blue-light);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}
/* Phones and portrait tablets (same breakpoints as the portrait camera): the rail runs as one row under the header, clear of the car and captions */
@media (max-width: 899px), (max-width: 1100px) and (orientation: portrait) {
  .step-rail {
    top: 88px;
    left: 56px;
    right: 56px;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 28px;
    padding: 8px 14px;
  }
  .step-rail li {
    font-size: 14px;
    opacity: 0.68;
    text-align: left;
    white-space: nowrap;
  }
  .step-rail li.is-on::after {
    margin-left: 7px;
  }
}
@media (max-width: 1100px) and (orientation: portrait) {
  /* Centred in the space between the car and the progress line. The top is where the wheels end in the portrait
     opening shot, and auto margins do the centring, because GSAP owns this card's transform */
  #hero-screen .hero-caption.hero-intro {
    top: calc(40vh + 15.3vw);
    top: calc(40svh + 15.3vw);
    bottom: 22px;
    height: fit-content;
    margin-block: auto;
    max-width: 420px;
  }
}
@media (max-width: 767px) {
  .step-rail {
    top: 76px;
    left: 22px;
    right: 22px;
    justify-content: space-between;
    gap: 6px 12px;
  }
  .step-rail li {
    font-size: 12px;
  }
  .step-rail li.is-on::after {
    width: 5px;
    height: 5px;
    margin-left: 5px;
  }
  /* Scroll length of the whole animation: about four swipes on a phone. Lower is faster */
  #experience {
    height: 340vh;
  }
  .hero-caption,
  .hero-caption.hero-intro {
    left: 22px;
    right: 22px;
    bottom: 36px;
    max-width: none;
  }
  .hero-caption {
    padding: 13px 16px 14px;
  }
  .hero-caption h1 {
    margin-top: 0;
  }
  .hero-caption p {
    margin-top: 6px;
    font-size: 14px;
  }
  /* WhatsApp and Call side by side, See services under them */
  .hero-caption .caption-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }
  .hero-caption .caption-actions .btn:last-child {
    grid-column: 1 / -1;
  }
  .scroll-cue {
    display: none;
  }
  .hero-caption h1 {
    font-size: 32px;
  }
  .hero-caption.hero-intro .caption-step {
    display: none;
  }
  .hero-caption .caption-title {
    font-size: 26px;
  }
  .hero-caption p {
    font-size: 15px;
  }
  .hero-caption .caption-actions .btn {
    flex: 1 1 0;
    padding-inline: 10px;
    font-size: 14px;
    white-space: nowrap;
  }
  .hero-progress {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }
}
/* Short phones: a tighter opening, so the headline stays clear of the car. The hidden text is still in the HTML */
@media (max-width: 767px) and (max-height: 640px) {
  .scroll-cue,
  .hero-intro > p:not(.caption-step) {
    display: none;
  }
  .hero-caption h1 {
    font-size: 30px;
  }
}
/* Phones held sideways: little height, so a compact caption beside the car and no step rail */
@media (orientation: landscape) and (max-height: 500px) {
  .step-rail,
  .scroll-cue,
  .hero-caption.hero-intro .caption-step,
  .hero-intro > p:not(.caption-step),
  .hero-caption:not(.hero-intro) > p:not(.caption-step, .caption-title) {
    display: none;
  }
  .hero-caption,
  .hero-caption.hero-intro {
    left: 20px;
    right: auto;
    bottom: 26px;
    max-width: 250px;
  }
  .hero-caption {
    padding: 12px 16px 14px;
  }
  .hero-caption h1 {
    font-size: 26px;
    margin-top: 0;
  }
  .hero-caption .caption-title {
    font-size: 24px;
  }
  .hero-caption .caption-actions {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 12px;
  }
  .hero-caption .caption-actions .btn {
    flex: 1 1 0;
    padding-inline: 8px;
    font-size: 13px;
    white-space: nowrap;
  }
  .hero-caption .caption-actions .btn svg {
    display: none;
  }
  .hero-progress {
    left: 20px;
    right: 20px;
    bottom: 12px;
  }
}
/* GSAP failed to load: a still of the car, no pinning. It fills the screen, with the caption clear of the browser's bars */
.static-hero #experience {
  height: auto;
}
.static-hero .hero-stage {
  position: relative;
  height: 100vh;
  height: 100lvh;
}
@media (max-width: 767px) {
  .static-hero .hero-caption.hero-intro {
    bottom: calc(44px + 100lvh - 100svh);
  }
}
.static-hero :is(.hero-caption:not(.hero-intro), .step-rail, .hero-progress, .scroll-cue) {
  display: none;
}