/* ================================
   Griploc Backstage — scalable 16:9 hero
   ================================ */

:root {
  --griploc-red: #a51f1f;
  --griploc-white: #ffffff;
  --page-black: #141414;
  --divider: rgba(255, 255, 255, 0.32);
  --focus-ring: rgba(255, 255, 255, 0.9);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--page-black);
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Inter", Arial, sans-serif;
}

/* Centres the complete 16:9 composition in the browser. */
.backstage-page {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--page-black);
  overflow: hidden;
}

/*
  The hero always preserves the same 16:9 shape.
  container-type allows the controls to use cqw units, which scale from
  the hero itself instead of from the browser window.
*/
.backstage-hero {
  position: relative;
  width: min(100vw, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: inline-size;

  background-image: url("../assets/images/backgrounds/backstage-hero.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  overflow: hidden;
}

/* Wraps every HTML control so it shares one coordinate space. */
.hero-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------- Bottom action dock ---------- */

.action-dock {
  position: absolute;
  left: 7.8%;
  bottom: 8.5%;

  display: flex;
  align-items: flex-start;
  gap: 1.354cqw; /* 26px on a 1920px-wide master */
}

.action-link {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.417cqw; /* 8px */

  min-width: 3.75cqw; /* 72px */
  padding: 0.417cqw 0.104cqw; /* 8px 2px */

  color: #111111;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.573cqw; /* 11px */
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
  white-space: nowrap;

  transition:
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.action-link span {
  font-size: 0.677cqw; /* 13px */
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--griploc-white);
  text-transform: uppercase;
  text-shadow: 0 0.052cqw 0.156cqw rgba(0, 0, 0, 0.55);
}

.action-link img {
  display: block;
  width: 1.771cqw; /* 34px */
  height: 1.771cqw;
  object-fit: contain;

  filter:
    brightness(0)
    saturate(100%)
    invert(17%)
    sepia(77%)
    saturate(3547%)
    hue-rotate(351deg)
    brightness(90%)
    contrast(93%);

  transition:
    filter 260ms ease,
    transform 260ms ease;
}

/* Individual icon size adjustments */
.call-icon img,
.facebook-icon img {
  width: 1.875cqw; /* 36px */
  height: 1.875cqw;
}

.apple-icon img,
.instagram-icon img,
.youtube-icon img {
  width: 1.771cqw; /* 34px */
  height: 1.771cqw;
}

/* Thin vertical separators. */
.action-link:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -0.677cqw; /* half of the 26px dock gap */

  width: max(1px, 0.052cqw);
  height: 80%;
  background: var(--divider);
}

.action-link:hover,
.action-link:focus-visible {
  transform: translateY(-0.208cqw); /* 4px */
}

.action-link:hover img,
.action-link:focus-visible img {
  transform: translateY(-0.104cqw) scale(1.08);
  filter:
    brightness(1.15)
    drop-shadow(0 0 0.313cqw rgba(220, 40, 40, 0.45))
    drop-shadow(0 0 0.729cqw rgba(220, 40, 40, 0.25));
}

.action-link:hover span,
.action-link:focus-visible span {
  color: var(--griploc-white);
}

.action-link:focus-visible,
.studio-mix:focus-visible,
.lounge-link:focus-visible {
  outline: max(2px, 0.104cqw) solid var(--focus-ring);
  outline-offset: 0.26cqw;
}

/* ---------- Copyright ---------- */

.copyright {
    position: absolute;

    left: 7.0%;
    bottom: 5.0%;

    margin: 0;

    color: rgba(255,255,255,0.68);

    font-family: "Inter", Arial, sans-serif;
    font-size: 0.68cqw;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;

    z-index: 5;
}


/* ---------- Studio Mix + Lounge ---------- */

.hero-links {
  position: absolute;
  right: 4.8%;
  bottom: 4.6%;

  display: flex;
  align-items: center;
  gap: 1.771cqw; /* 34px */
}

.studio-mix,
.lounge-link {
  border: 0;
  background: transparent;
  color: var(--griploc-white);

  font: inherit;
  font-size: 0.82cqw; /* 13px */
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.studio-mix,
.lounge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.365cqw;
  padding: 0.521cqw 0.208cqw; /* 10px 4px */
}

.studio-mix:hover,
.studio-mix:focus-visible,
.lounge-link:hover,
.lounge-link:focus-visible {
  color: var(--griploc-red);
  transform: translateY(-0.156cqw);
}

.lounge-link span {
  transition: transform 180ms ease;
}

.lounge-link:hover span,
.lounge-link:focus-visible span {
  transform: translateX(0.26cqw);
}

/*
  No width-based media queries are used here. They previously changed the
  dock layout independently of the artwork. The whole 16:9 composition now
  scales as one unit.
*/

@media (prefers-reduced-motion: reduce) {
  .action-link,
  .action-link img,
  .studio-mix,
  .lounge-link,
  .lounge-link span {
    transition: none;
  }
}