/* Home hero: layered logo, then the 3D PC with seven service cards (see Assets/JS/hero-animation.js
 * and Assets/JS/hero-pc.js).
 * Base rules = the static layout (no JS, reduced motion, no WebGL, phones): intro beside the logo,
 * then a still of the PC with the services as cards underneath; on phones everything stacks.
 * Desktop 3D (≥981px + .js-3d, set before first paint): the stage pins over a 500vh runway, the
 * canvas fills it, the logo docks onto the monitor and each service shows as a text label beside
 * its part of the PC. */

.bd-hero {
  --bd-logo: min(62vmin, 520px, 42vw);
  --glide-max: calc(min(80vw, 1080px) / 2 - var(--bd-logo) / 2);
  position: relative;
  background: var(--surface-soft);
  color: var(--text);
}

.bd-hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bd-logo);
  grid-template-areas: "intro logo" "pc pc";
  align-items: center;
  column-gap: 40px;
  width: min(80%, var(--bd-container));
  margin: 0 auto;
  padding: 70px 0 150px;
}
.bd-hero__intro { grid-area: intro; }
.bd-hero__title { font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; letter-spacing: -.5px; margin: 6px 0 20px; max-width: 640px; }
.bd-hero__lead { font-size: 18px; max-width: 470px; margin-bottom: 32px; }

.bd-hero__logo { grid-area: logo; display: grid; place-items: center; }
.bd-logo { width: var(--bd-logo); aspect-ratio: 1; }
.bd-logo__glide, .bd-logo__dock { width: 100%; height: 100%; }
.bd-logo__glide { --glide: 1; }
.bd-logo__dock { transform-origin: center; }
.bd-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Pieces spin around their own centre; the ring text around the logo centre. */
.bd-piece, .bd-piece__hover, .bd-piece__idle, #bd-ring { transform-box: fill-box; transform-origin: center; }
#bd-ring-text { transform-box: view-box; transform-origin: 250px 250px; }

.bd-hero__canvas { display: none; }

.bd-hero__pc { grid-area: pc; margin-top: 50px; }
.bd-hero__poster { width: min(100%, 640px); aspect-ratio: 1.6; margin: 0 auto; overflow: hidden; }
/* The render has wide empty margins: zoom in so the PC fills the frame (PC centre at 54% 53% of the image). */
.bd-hero__poster img { display: block; width: 210%; max-width: none; height: auto; margin: -30.8% 0 0 -63.2%; }

/* Services: a card per service; the whole card is the link. */
.bd-hero__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 30px 0 0; padding: 0;
  list-style: none;
}
.bd-hero-card {
  --piece: var(--royal);
  position: relative;
  display: flex; gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border-left: 4px solid var(--piece);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 43, 100, .12);
  transition: box-shadow var(--bd-t), border-color var(--bd-t);
}
.bd-hero-card:hover, .bd-hero-card:focus-within { box-shadow: 0 10px 34px rgba(0, 43, 100, .24); }
.bd-hero-card--red { --piece: var(--brand-2); }
.bd-hero-card--navy { --piece: var(--brand-1); }
.bd-hero-card__icon { flex: 0 0 42px; height: 42px; padding: 7px; border-radius: 10px; background: var(--tint); }
.bd-hero-card__title { margin: 0 0 4px; font-size: 16px; line-height: 1.25; }
.bd-hero-card__title a { color: var(--brand-1); text-decoration: none; }
.bd-hero-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }   /* whole card clickable */
.bd-hero-card__title a:hover { color: var(--brand-2); }
.bd-hero-card__title a:focus-visible { outline: none; }
.bd-hero-card__title a:focus-visible::after { outline: 3px solid var(--brand-2); outline-offset: 4px; }
.bd-hero-card__text { margin: 0; font-size: 13.5px; line-height: 1.45; }

.bd-hero__cue, .bd-hero__outro { display: none; }

/* ---- animated start state (JS running, motion allowed) ---- */
.js-anim .bd-hero-card, .js-anim .bd-piece, .js-anim #bd-ring, .js-anim #bd-ring-text { opacity: 0; }
.js-anim .bd-piece { will-change: transform; }

/* ---- desktop 3D: pinned stage, the PC on a canvas, cards beside its parts ---- */
@media (min-width: 981px) {
  .js-3d .bd-hero { height: 500vh; }
  .js-3d .bd-hero__stage {
    position: sticky; top: var(--bd-header-h);
    display: block;
    width: auto;
    height: calc(100vh - var(--bd-header-h));
    height: calc(100svh - var(--bd-header-h));
    padding: 0; overflow: hidden;
  }
  .js-3d .bd-hero__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .js-3d .bd-hero__intro {
    position: absolute; z-index: 3; top: 0; bottom: 0;
    left: calc((100% - min(80%, var(--bd-container))) / 2);
    width: calc(min(80%, var(--bd-container)) - var(--bd-logo) - 40px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .js-3d .bd-hero__logo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .js-3d .bd-logo__glide { transform: translateX(calc(var(--glide-max) * var(--glide))); }
  .js-3d .bd-logo__dock { will-change: transform; }

  .js-3d .bd-hero__pc { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; }
  .js-3d .bd-hero__poster { display: none; }
  .js-3d .bd-hero__cards { display: block; margin: 0; }
  /* card chrome off: a text label beside its part, with a red connector pointing at it */
  .js-3d .bd-hero-card {
    position: absolute; top: 0; left: 0;
    display: block; width: 260px;
    padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    will-change: translate, transform, opacity;
  }
  .js-3d .bd-hero-card__icon { display: none; }
  .js-3d .bd-hero-card__title { font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
  .js-3d .bd-hero-card__title a { transition: color var(--bd-t); }
  .js-3d .bd-hero-card__title a::after { inset: -8px; border-radius: 6px; }
  .js-3d .bd-hero-card__text { font-size: 13.5px; line-height: 1.45; }
  /* the connector sits beside the title (never wraps under it), on the side facing the part */
  .js-3d .bd-hero-card__title { display: flex; align-items: center; gap: 12px; }
  .js-3d .bd-hero-card__title::before, .js-3d .bd-hero-card__title::after {
    content: ""; display: none; flex: 0 0 36px; height: 2px; background: var(--brand-2);
  }
  .js-3d .bd-hero-card--left { text-align: right; }
  .js-3d .bd-hero-card--left .bd-hero-card__title { justify-content: flex-end; }
  .js-3d .bd-hero-card--left .bd-hero-card__title::after { display: block; }
  .js-3d .bd-hero-card--right { text-align: left; }
  .js-3d .bd-hero-card--right .bd-hero-card__title::before { display: block; }
  .js-3d .bd-hero-card.is-hot .bd-hero-card__title a { color: var(--brand-2); }

  /* Cards only take the pointer while they're shown (keyboard focus still reaches them and moves
     the sequence to the cards); while they're shown, the faded intro gets out of the way. */
  .js-3d .bd-hero.is-cards .bd-hero-card { pointer-events: auto; }
  .js-3d .bd-hero.is-cards .bd-hero__intro { pointer-events: none; }
  .js-3d .bd-hero:not(.is-outro) .bd-hero__outro { pointer-events: none; }

  .js-3d .bd-hero__outro {
    position: absolute; left: 0; right: 0; bottom: 120px; z-index: 3;
    display: flex; align-items: center; justify-content: center; gap: 24px;
    opacity: 0;
  }
  .bd-hero__outro-title { margin: 0; font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); color: var(--brand-1); text-transform: uppercase; }

  .js-3d .bd-hero__cue {
    position: absolute; left: 0; right: 0; bottom: 72px; z-index: 1;   /* over the 3D parts, under the labels */
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: max-content; margin: 0 auto; padding: 8px 10px; color: var(--royal);
    /* stays up while the PC comes apart: a backing (--surface-soft, the hero background) keeps it readable */
    background: rgb(244 246 251 / .9); border-radius: 14px;
    pointer-events: none;
    /* --cue 0 -> 1 on scroll: from centre to the bottom-right of the container, clear of the parts */
    --cue: 0;
    transform: translate(calc(var(--cue) * (min(80vw, 1080px) / 2 - 50%)), calc(var(--cue) * 48px));
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  }
  .bd-hero__mouse { position: relative; width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; }
  .bd-hero__mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--brand-2); animation: bd-cue 1.6s ease-in-out infinite; }
}
@keyframes bd-cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(8px); opacity: .3; } }

/* ---- tablet + phone: everything stacks, cards as a list ---- */
@media (max-width: 980px) {
  .bd-hero { --bd-logo: min(70vw, 400px); }
  .bd-hero__stage { display: block; width: min(80%, 640px); padding: 40px 0 90px; }
  .bd-hero__intro { margin-bottom: 30px; }
  .bd-logo { margin: 30px auto; }
  .bd-hero__pc { margin-top: 30px; }
  .bd-hero__cards { display: flex; flex-direction: column; gap: 14px; }
}
@media (max-width: 767px) {
  .bd-hero__stage { width: 88%; padding-top: 32px; }
  .bd-hero__lead { font-size: 16px; }
  .bd-hero-card__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .bd-hero-card, .js-anim .bd-piece, .js-anim #bd-ring, .js-anim #bd-ring-text { opacity: 1; }
}