/* ============================================================
   IMMERSIVE STUDIO — DESIGN SYSTEM
   Single source of truth for shared tokens and UI components.
   Link this BEFORE any page-level <style> so a page can still
   override a token locally (e.g. the car configurator's bg).
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --bg:            #000000;
  --white:         #FFFFFF;
  --muted:         rgba(255, 255, 255, 0.55);
  --line:          rgba(255, 255, 255, 0.10);

  --purple-mid:    #7B2FFF;
  --purple-hi:     #B264FF;
  --pink:          #D44EFF;

  /* Accent blues — experiences & homepage card glows */
  --blue:          #2E6EFF;
  --blue-hi:       #5A96FF;

  /* ── Glass surfaces (pills, control bars) ── */
  --surface:            rgba(10, 10, 10, 0.55);
  --surface-line:       rgba(255, 255, 255, 0.18);
  --surface-line-hover: rgba(255, 255, 255, 0.45);

  /* ── Shape & motion ── */
  --radius-pill:   100px;
  --blur:          8px;

  /* Height of the studio top bar (.studio-topbar). Copycat pages offset their
     own sticky headers by this so both bars stack cleanly. */
  --is-topbar-h:   46px;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Home link — the "Immersive Studio" wordmark pinned top-left, returning to
   the homepage. This is the ONE element that persists across every page,
   including the copycat brand pages (purse, agentic-ai) that otherwise adopt a
   real site's look and do NOT use the rest of this design system.

   It is therefore fully self-contained: it declares its own box model, font,
   and LITERAL colours (no themeable tokens a host page could override), and
   carries its own frosted-glass surface so it stays legible on any background —
   light or dark — without the host page doing anything. */
.studio-home {
  position: fixed;
  top: 22px;
  left: 22px;
  z-index: 2000;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 14, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);

  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease;
}
.studio-home:hover {
  background: rgba(20, 20, 24, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
}

/* Studio top bar — a full-width bar in the Immersive Studio style that sits
   ABOVE a copycat page's own website. Used on pages that have their own look
   (purse, agentic-ai): the bar is the studio "frame", the custom site lives
   under it. Sticky so the back affordance is always available. Self-contained
   (literal colours, own font) so the host page's styles can't distort it.

   `__back` goes up ONE level, not always home, and is labelled with wherever
   that is. A page reached from the homepage says "Immersive Studio"; the four
   listed configurators are reached from product-configuration.html and say
   "Product Configuration". Back should undo the click that got you here. */
.studio-topbar {
  position: sticky;
  top: 0;
  z-index: 3000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--is-topbar-h);
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
}
/* Subtle studio-purple glow line along the bottom edge */
.studio-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(178, 100, 255, 0.55), transparent);
}
.studio-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.studio-topbar__back .ico {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.studio-topbar__back:hover .ico { background: #fff; color: #000; transform: translateX(-2px); }
.studio-topbar__tag {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Glass pill — floating control / label chip (back buttons, hints,
   toggles). Compose with utility markup as needed. */
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--surface-line);
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ui-pill:hover { border-color: var(--surface-line-hover); color: #fff; }

/* ── Dev-mode marker ──
   The purple pill that says the unfinished pages are reachable. Added by
   common/js/dev-mode.js on every page, so it is never a guess whether the
   flag took. Lives here rather than on the homepage because it is site-wide.
   z-index sits above the experiences' own overlays; pointer-events: none so it
   can never eat a click meant for the page underneath. */
.dev-marker {
  position: fixed;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 2147483647;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(178, 100, 255, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Literal purple, NOT var(--purple-hi): pages retint that token for their own
     theme (car.css turns it blue), and this marker must look the same on every
     page to be recognisable at a glance. */
  color: #B264FF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ============================================================
   CARDS
   ============================================================ */

/* The grid of experience cards.
   Lives here rather than in `index.html` because more than one page shows
   them: the homepage lists every experience, and `product-configuration.html`
   lists the three configurators. One copy, so a hover that gets tuned gets
   tuned once.

   A card sets `--glow` for the radial wash that comes up on hover, and a
   `.card--photo` also sets `--photo` for its cover image and optionally
   `--photo-pos` to say which part of it to show. All inline styles on the
   element, because they are per-card content rather than per-card styling. */

/* ── Cards ── */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s, background 0.4s;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 120%, var(--glow, rgba(123,47,255,0.35)), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.05);
}
.card:hover::after { opacity: 1; }

/* Photo card — cover image on a clipped layer that zooms gently on hover */
.card--photo { border-color: rgba(255,255,255,0.16); }
.card--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg,
      rgba(3,6,18,0.70) 0%,
      rgba(3,6,18,0.42) 45%,
      rgba(3,6,18,0.86) 100%),
    var(--photo);
  background-size: cover;
  /* `--photo-pos` because a card's image is whatever shape the shot was, and
     `cover` on a tall photo in a short card crops to the middle — which for a
     showroom render is the empty floor above the car. The scrim stays centred;
     only the photo moves. */
  background-position: center, var(--photo-pos, center);
  z-index: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.card--photo:hover::before { transform: scale(1.05); }

.card-index {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--muted);
}
.card-body { position: relative; z-index: 1; }
.card-title {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}
/* Reserve room for the status badge so it never overlaps the title. */
.card:has(.badge) .card-title { padding-right: 3.6rem; }
.card:has(.badge--wide) .card-title { padding-right: 7.4rem; }
.card-desc {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}
.card-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
.card-cta .arrow { transition: transform 0.3s; }
.card:hover .card-cta .arrow { transform: translateX(5px); }

/* ── Soon cards ──
   Locked: an inert <div>, but styled and animated exactly like a Ready card —
   full strength, same hover lift, glow and photo zoom. The grid is the
   portfolio, so every card should feel alive under the cursor. What tells you
   it's locked is the badge, the muted CTA and the arrow that never appears; the
   only affordance removed is the pointer cursor, so the card never promises a
   click it can't honour. Dev mode (see common/js/soon-cards.js) replaces the div
   with an <a class="unlocked">, which makes it a real link and brings the CTA
   arrow back, while keeping the badge. */
.card.soon:not(.unlocked) { cursor: default; }
.card.soon:not(.unlocked) .card-cta { color: var(--muted); }

.badge {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6FA8FF;
  border: 1px solid rgba(90,150,255,0.4);
  border-radius: 100px;
  padding: 0.3rem 0.7rem;
}