/* ============================================================
   BRU DESIGN STUDIO — overrides.css
   Loaded AFTER styles.css, so rules here win.
   Holds: car-wash timing sync, museum modal reposition + 5s
   toggle, bigger desktop previews, taller mobile previews.
   ============================================================ */

/* ---------------------------------------------------------
   1) SHOWCASE PREVIEWS — bigger on desktop
   Give the website-mockup column more width on large screens.
   --------------------------------------------------------- */
@media (min-width: 901px) {
  .showcase-case { grid-template-columns: 0.86fr 1.22fr; }
  .showcase-case.reverse { grid-template-columns: 1.22fr 0.86fr; }
}

/* ---------------------------------------------------------
   2) SHOWCASE PREVIEWS — taller on mobile
   The museum & car-wash scenes pack a lot of absolutely-
   positioned content; on a short box it overlaps / hides
   ("things not populating"). Taller boxes give it room.
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .gallery, .carwash { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  /* content-heavy scenes get a tall portrait box so nothing crowds */
  .gallery, .carwash { aspect-ratio: 2 / 3; }
  /* hero showreel mockup also taller on phones */
  .browser .screen { aspect-ratio: 4 / 5; }
  /* case-study downtown reel: elongate from the wide 2:1 strip */
  .reel { aspect-ratio: 4 / 5; }
  /* car wash: ALL three plan pills (Express / Deluxe / Ultimate) on ONE line —
     span the scene's width, center them, shrink type so they never wrap */
  .carwash .c-plans { left: clamp(10px, 3vw, 28px); right: clamp(10px, 3vw, 28px);
    justify-content: center; flex-wrap: nowrap; gap: 5px; max-width: none; }
  .carwash .c-plans .pl:not(.feat) { display: flex; }
  .carwash .c-plans .pl { padding: 5px 9px; font-size: 8.5px; gap: 4px;
    white-space: nowrap; flex: 0 1 auto; min-width: 0; }
}

/* ---------------------------------------------------------
   3) MUSEUM — the "Now on display" exhibit card behaves like
   an ad popup: springs in top-right with an overshoot bounce,
   stays ~4 seconds, pops away, returns ~9 seconds later.
   --------------------------------------------------------- */
.gallery .g-modal {
  top: clamp(52px, 16%, 84px);
  right: clamp(14px, 3vw, 26px);
  left: auto;
  width: clamp(140px, 30%, 230px);
  transform: translateY(16px) scale(.5);
  transform-origin: top right;
}
.showcase-case.in .g-modal {
  animation: modalAd 13s cubic-bezier(.22,.61,.36,1) 1.4s infinite;
}
@keyframes modalAd {
  0%    { opacity: 0; transform: translateY(16px) scale(.5); }
  3.5%  { opacity: 1; transform: translateY(-4px) scale(1.07); }
  5.5%  { opacity: 1; transform: translateY(1px)  scale(.99); }
  7%    { opacity: 1; transform: translateY(0)    scale(1); }
  30%   { opacity: 1; transform: translateY(0)    scale(1); }
  34%   { opacity: 0; transform: translateY(10px) scale(.7); }
  100%  { opacity: 0; transform: translateY(10px) scale(.7); }
}
/* keep the popup modest on phones */
@media (max-width: 560px) {
  .gallery .g-modal { width: clamp(110px, 34%, 150px); }
}
/* ad-style close button (decorative) */
.gallery .g-modal-x {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Inter", sans-serif; font-size: 8.5px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
}

/* ---------------------------------------------------------
   4) CAR WASH — slow the sliding car and lock it in step
   with the six wash stages (constant speed, arrives at each
   stage exactly as that stage lights up).
   --------------------------------------------------------- */
.carwash .c-fill { animation: cwFill 10.5s linear infinite; }
.carwash .c-car  { animation: cwCar  10.5s linear infinite; }
@keyframes cwFill { 0% { width: 8%; } 82% { width: 95%; } 100% { width: 95%; } }
@keyframes cwCar  { 0% { left: 8%; } 82% { left: 92%; } 100% { left: 92%; } }

.carwash .c-stages .st { animation: stPulse 10.5s linear infinite; }
.carwash .c-stages .st-1 { animation-delay: 0s;    }
.carwash .c-stages .st-2 { animation-delay: 1.71s; }
.carwash .c-stages .st-3 { animation-delay: 3.42s; }
.carwash .c-stages .st-4 { animation-delay: 5.13s; }
.carwash .c-stages .st-5 { animation-delay: 6.84s; }
.carwash .c-stages .st-6 { animation-delay: 8.55s; }
@keyframes stPulse {
  0%   { color: #bfe6ff; }
  13%  { color: #bfe6ff; }
  20%  { color: rgba(234,244,255,.45); }
  100% { color: rgba(234,244,255,.45); }
}

/* ---------------------------------------------------------
   5) Reduced-motion: keep the modal in its new spot, visible.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gallery .g-modal { opacity: 1; transform: none; }
}