/* SHOWFLOOR: what the epoxy site adds on top of the shared engine (the headline mirrored in the finished floor,
   and the hero loop behind the closing screen). */

/* The site is dark by design: native controls and scrollbars follow. */
:root { color-scheme: dark; }

/* Garage sizes: small labels under each icon. */
.car span { font-size: 11px; }

/* Top-placed copy clears the chip on short screens. */
.copy.top { top: max(19vh, 142px); }

/* The garage is white, so headlines get a soft dark pool behind them to stay readable on any frame. */
.copy::before { content: ""; position: absolute; z-index: -1; inset: -28% -22% -30% -14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 6, 8, 0.62), rgba(5, 6, 8, 0.32) 55%, transparent); }

/* Headlines: a towering condensed poster face, solid white with a solid amber second beat. */
.copy h2, .copy.top h2, .outro h2, .refl {
  font-family: "Anton", "Archivo", Impact, sans-serif; font-stretch: normal; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.88;
  font-size: clamp(56px, min(10.5vw, 15vh), 210px);
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.5);
}
.copy h2 em, .outro h2 em, .refl em { color: var(--amber); -webkit-text-stroke: 0; font-family: inherit; font-style: normal; text-shadow: 0 6px 36px rgba(0, 0, 0, 0.5); }
.copy h2 .w { transform-origin: 0 90%; }
.copy, .copy.top { max-width: min(64vw, 1200px); }
.copy.top { top: max(14vh, 118px); }
.copy p { font-size: clamp(17px, 1.45vw, 24px); font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-top: 16px; max-width: 22em; }
.copy .n { font-size: 13px; font-weight: 600; }
.outro h2 { font-size: clamp(64px, min(11vw, 18vh), 220px); }

/* The payoff: the headline stands on the back wall (main.js sets its top so its foot meets the floor line),
   and its mirror image lies in the glossy floor below, fading with depth. */
.copy.floor { left: 0; right: 0; bottom: auto; max-width: none; text-align: center; }
.copy.floor::before { inset: -10% 18% 40% 18%; }
.copy.floor h2 .w { transform-origin: 50% 100%; }
.copy.floor p { margin-left: auto; margin-right: auto; margin-top: 6px; }
.refl { display: block; margin-top: -0.04em; color: #fff; transform: scaleY(-1); transform-origin: 50% 50%; opacity: 0; filter: blur(1.5px);
  text-shadow: none; -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.35) 45%, transparent 85%); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.35) 45%, transparent 85%); }
.refl em { text-shadow: none; }
.refl .beat { display: block; white-space: nowrap; }

@media (max-width: 860px) {
  .copy h2, .copy.top h2, .refl { font-size: clamp(52px, min(15vw, 11vh), 110px); }
  .copy, .copy.top { max-width: none; }
  .copy.top { top: 178px; right: var(--pad); }
  .copy.floor { left: var(--pad); right: var(--pad); }
  /* the phone crop puts the installer right under the top-left headline, so it moves down onto the floor */
  .copy.top.low-phone { top: auto; bottom: max(22vh, 180px); }
}

/* The closing screen: the finished floor's hero loop, pushed dark, with an amber glow behind the type.
   It feathers in from the film above instead of starting on a hard edge. */
.nav, .play { z-index: 32; }
.outro { background: #040506; border-top: 0; isolation: isolate; overflow: hidden; min-height: 112vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather, 24vh)); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather, 24vh)); }
.outro-bg { position: absolute; left: 0; top: -12%; z-index: -2; width: 100%; height: 124%; object-fit: cover; object-position: 50% 58%;
  filter: brightness(0.45) saturate(1.1) contrast(1.06); transform: translate3d(0, var(--py, 0px), 0) scale(1.04); pointer-events: none; }
.outro::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 42% at 50% 50%, rgba(255, 166, 64, 0.2), transparent 72%),
    linear-gradient(to bottom, rgba(4, 5, 6, 0.6), rgba(4, 5, 6, 0.12) 38%, rgba(4, 5, 6, 0.2) 62%, rgba(4, 5, 6, 0.9)); }
.outro h2 { transform-origin: 50% 60%; text-shadow: 0 10px 60px rgba(0, 0, 0, 0.65); }
.outro .kicker { color: var(--amber); letter-spacing: 0.18em; text-transform: uppercase; }
.outro .concept { color: rgba(255, 255, 255, 0.7); }
.cta.big { box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.4), 0 14px 50px rgba(255, 166, 64, 0.35); }

/* Pick your floor: four flake swatches on a glass bar under the finished floor. Each swatch is its own little
   flake mix (base colour plus two chip colours), and the picked one gets the amber ring. */
.picker { position: fixed; z-index: 16; left: 50%; bottom: 30px; transform: translateX(-50%); opacity: 0;
  display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 22px; border-radius: 999px;
  background: var(--glass); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.picker .kicker { font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
.swatches { display: flex; gap: 8px; }
.sw { display: grid; justify-items: center; gap: 5px; padding: 4px 6px; border: 0; background: none; cursor: pointer; color: var(--dim); font-size: 11px; font-weight: 600; }
.sw i { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 28% 30%, var(--c) 0 9%, transparent 10%), radial-gradient(circle at 66% 22%, var(--b) 0 11%, transparent 12%),
    radial-gradient(circle at 74% 64%, var(--c) 0 8%, transparent 9%), radial-gradient(circle at 36% 72%, var(--b) 0 12%, transparent 13%),
    radial-gradient(circle at 52% 48%, var(--c) 0 6%, transparent 7%), radial-gradient(circle at 18% 58%, var(--c) 0 6%, transparent 7%),
    var(--a);
  transition: box-shadow 0.2s, transform 0.2s; }
.sw:hover i { transform: scale(1.06); }
.sw.on { color: var(--ink); }
.sw.on i { box-shadow: 0 0 0 2px #0a0b0d, 0 0 0 4px var(--amber), 0 0 18px rgba(255, 179, 71, 0.4); }
.picker .cta { white-space: nowrap; padding: 13px 22px; }

@media (max-width: 860px) {
  .picker { bottom: 156px; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 12px 14px; border-radius: 24px; width: calc(100vw - 2 * var(--pad)); }
  .picker .kicker { width: 100%; text-align: center; }
  .picker .cta { width: 100%; text-align: center; }
  .sw i { width: 30px; height: 30px; }
}
.demo .picker { display: none; }