/* VESPER COMMUNITY — MotoHub landing page ( fullscreen design canvas ) */

/* Norwester ships with the plugin — drop norwester.woff2 ( or .otf ) into
   this assets folder and the page picks it up; until then every rule below
   falls back to Oswald, which the theme already loads. */
@font-face {
  font-family: "Norwester";
  src: url("norwester.woff2") format("woff2"),
       url("norwester.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- page */

.vmh {
  --red: #f10000;
  --icon-opacity: .85;
  position: relative;
  z-index: 50;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Norwester", "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  isolation: isolate;
  -webkit-tap-highlight-color: rgba(241, 0, 0, .25);
}

.vmh,
.vmh * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.vmh a {
  color: inherit;
  text-decoration: none;
}

.vmh__abs {
  position: absolute;
  display: block;
}

svg.vmh__abs {
  overflow: visible;
}

/* ------------------------------------------------- background ( video ) */

/* The main menu's video, poster and overlay settings drive this layer —
   the dark radial gradient is the design's fallback when neither is set. */
.vmh__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #050505;
  background-image: radial-gradient(circle at 50% 55%, #0b0b0b, #000 70%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.vmh__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity .45s ease;
}

.vmh__video.is-on {
  opacity: 1;
}

.vmh__veil {
  position: absolute;
  inset: 0;
  background: #050507;
}

/* --------------------------------------------------- the fixed canvas */

/* 900x1599 design canvas, scaled to the screen by motohub.js ( same
   scale-to-fit behaviour as the original design file ). */
.vmh__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 900px;
  height: 1599px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  overflow: hidden;
  z-index: 1;
}

/* 1080-wide top group scaled down to the 900 canvas ( 5/6 ). */
.vmh__tb {
  position: absolute;
  left: 0;
  top: 9.2px;
  width: 1080px;
  height: 200px;
  transform-origin: 0 0;
  transform: scale(0.8333333333333334);
}

/* ------------------------------------------------- shared top strip ( vmp )

   The strip markup comes straight from the main menu
   ( vesper_mainpage_stage_top ), so the icons, words and destinations are
   identical on both pages. mainpage.css scopes every .vmp__ rule under
   .vmp__stage — the menu's mobile-only fullscreen stage — so the pieces
   this canvas needs are restated here, scoped to its own top group. */

.vmh__tb .vmp__abs {
  position: absolute !important;
  display: block !important;
}

.vmh__tb svg.vmp__abs { overflow: visible; }

.vmh__tb a.vmp__abs,
.vmh__tb button.vmp__abs {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), opacity .16s ease;
}

.vmh__tb a.vmp__abs:focus-visible,
.vmh__tb button.vmp__abs:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 4px;
}

.vmh__tb .vmp__abs:active {
  transform: scale(.92);
  opacity: .85;
}

@media (hover: hover) and (pointer: fine) {
  .vmh__tb .vmp__abs:hover { transform: scale(1.05); }
  .vmh__tb .vmp__abs:active { transform: scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .vmh__tb .vmp__abs { transition: none; }
  .vmh__tb .vmp__abs:active { transform: none; opacity: 1; }
}

.vmh__tb .vmp__icon { opacity: var(--icon-opacity); }

.vmh__tb .vmp__word {
  position: absolute !important;
  font-family: "Norwester", "Oswald", sans-serif !important;
  font-weight: 400;
  line-height: 1 !important;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0;
  pointer-events: none;
  transform: translateX(-50%) !important;
}

.vmh__tb .vmp__navword {
  font-size: 42.3px !important;
  color: #000 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

/* Pin the icons' painted colours like the menu does, so theme / builder
   resets cannot recolour them. */
.vmh__tb svg [fill="#fff"],
.vmh__tb svg[fill="#fff"] { fill: #fff !important; }
.vmh__tb svg [fill="#000"] { fill: #000 !important; }
.vmh__tb svg [fill="#b6b6b6"] { fill: #b6b6b6 !important; }
.vmh__tb svg [fill="#f10000"] { fill: #f10000 !important; }
.vmh__tb svg[fill="none"],
.vmh__tb svg [fill="none"] { fill: none !important; }
.vmh__tb svg [stroke="#fff"] { stroke: #fff !important; }
.vmh__tb svg [stroke="#000"] { stroke: #000 !important; }

/* --------------------------------------------------------- hot-spots */

.vmh__hot {
  position: absolute;
  display: block;
}

a.vmh__hot:focus-visible,
button.vmh__hot:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* A soon state renders as a real <button>: strip every UA default — the
   white button face is what showed through the transparent canvas. */
button.vmh__hot {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: default;
}

/* ------------------------------------------------------------ words */

/* Button labels — motohub.js scales each one horizontally to its data-w. */
.vmh__t {
  position: absolute;
  font-weight: 400;
  line-height: 50px;
  white-space: nowrap;
  text-transform: uppercase;
  transform-origin: left center;
  pointer-events: none;
}

/* --------------------------------------------------------- buttons */

/* Design tabs: red outline + red offset shadow, floating over the canvas. */
.vmh__btn,
button.vmh__hot.vmh__btn {
  height: 62px;
  background: transparent;
  border: 3px solid #ff1010;
  box-shadow: -10px 8px 0 #ff1010;
  transition: background .15s ease;
}

.vmh__btn.vmh__btn--r {
  box-shadow: 10px 8px 0 #ff1010;
}

.vmh__btn:not(.is-soon):hover {
  background: rgba(255, 255, 255, .07);
}

/* --------------------------------------------------- stage layers */

.vmh__halo {
  position: absolute;
  left: 0;
  top: 430px;
  width: 900px;
  height: 700px;
  opacity: .06;
  background: radial-gradient(ellipse at 50% 50%, #fff 0, transparent 60%);
  pointer-events: none;
}

/* Flag + glow art: the black field was baked out of the PNGs ( alpha now
   carries the artwork ), so no blend mode is needed — the images paint as
   exported. */
.vmh__glow {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* --------------------------------------------------- scroll + footer */

.vmh__scroll {
  left: 14px;
  width: 7px;
  border-radius: 4px;
  background: #7f7f81;
}

/* The red diamond links back to the main menu: block the inline line box,
   brighten on hover, white focus ring ( red-on-red would vanish ). */
a.vmh__bolt { transition: filter .15s ease; }
a.vmh__bolt svg { display: block; }
a.vmh__bolt:hover { filter: brightness(1.3); }
a.vmh__bolt:focus-visible { outline-color: #fff; }

.vmh__bar:not(.is-soon):hover {
  background: #ff2a2a;
}

/* MOTORSPORTS — pinned to the centre of the red bar. */
.vmh__t--bar {
  transform: translateX(-50%);
  text-shadow: 0 2px 3px #800;
}

/* ------------------------------------------------- coming soon toast */

.vmh__toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  padding: 10px 20px;
  background: #F10000;
  color: #fff;
  font-family: "Norwester", "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -38%);
  transition: opacity .2s ease, transform .2s ease;
}

.vmh__toast.is-on {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------- fullscreen takeover ( page ) */

/* The page owns the screen: it is pinned to the viewport so it always fills
   it, whatever container or column the shortcode ends up sitting in.
   NOTE: rules mentioning :has() are kept SEPARATE from the plain ones — one
   unsupported selector in a list would drop the whole rule. */
body.vmh-page { overflow: hidden; }

body.vmh-page .vmh {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: auto;
  min-height: 0;
}

body:has(.vmh) .vmh {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: auto;
  min-height: 0;
}

/* Anything else on the page ( page titles, extra rows ) steps aside. */
body.vmh-page .site-main > *:not(.vmh):not(:has(.vmh)),
body.vmh-page .entry-content > *:not(.vmh):not(:has(.vmh)),
body.vmh-page .ct-content-builder > *:not(.vmh):not(:has(.vmh)),
body.vmh-page .ct-container > *:not(.vmh):not(:has(.vmh)) {
  display: none !important;
}

body.vmh-page .site-main,
body.vmh-page .entry-content,
body.vmh-page .ct-content-builder,
body.vmh-page .ct-container {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

body.vmh-page #masthead,
body.vmh-page #main-header,
body.vmh-page .site-header,
body.vmh-page .ct-header,
body.vmh-page .main-header,
body.vmh-page #colophon,
body.vmh-page .site-footer,
body.vmh-page .ct-footer,
body.vmh-page .main-footer,
body.vmh-page .vchat--docked {
  display: none !important;
}

/* Same takeover for browsers without body_class detection. */
body:has(.vmh) #masthead,
body:has(.vmh) #main-header,
body:has(.vmh) .site-header,
body:has(.vmh) .ct-header,
body:has(.vmh) .main-header,
body:has(.vmh) #colophon,
body:has(.vmh) .site-footer,
body:has(.vmh) .ct-footer,
body:has(.vmh) .main-footer,
body:has(.vmh) .vchat--docked {
  display: none !important;
}

/* Keep the canvas clear of the WordPress admin bar ( 32px desktop,
   46px from 782px down ). */
html.admin-bar .vmh,
body.admin-bar .vmh {
  top: 32px;
}

@media screen and (max-width: 782px) {
  html.admin-bar .vmh,
  body.admin-bar .vmh {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vmh__video,
  .vmh__toast,
  .vmh__btn {
    transition: none;
  }
}