/* ---------------------------------------------------------------------
   Shared chrome for every close-up scene: Foundation, Contact, Global
   Network, Responsibility and the five responsibility cards.

   Same construction as the headquarters: a frame locked to the render's
   16:9 and sized to cover the viewport, then the wrapper scrolls on
   whichever axis overflows. Fitting the whole render inside the viewport
   instead leaves bars all round and reads as half a page.
   --------------------------------------------------------------------- */

@font-face {
  font-family: Ppmonumentextended;
  src: url("https://cdn.prod.website-files.com/6797f64056f05c411bde4dd7/679bf1833858cb7ba6a351df_PPMonumentExtended-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #002365;
  --ink: #04070f;
  --brand: Ppmonumentextended, Impact, "Arial Narrow", sans-serif;
  --body: "Sofia Sans", Lato, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  overflow: hidden;
}

.scene-wrap {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: auto;
  scrollbar-width: none;
}

.scene-wrap::-webkit-scrollbar {
  display: none;
}

.scene-frame {
  position: relative;
}

/* taller than 16:9 - fill the height, overflow sideways */
@media (max-aspect-ratio: 16/9) {
  .scene-frame {
    height: 100svh;
    width: calc(100svh * 1.7778);
  }
}

/* wider than 16:9 - fill the width, overflow downward */
@media (min-aspect-ratio: 16/9) {
  .scene-frame {
    width: 100%;
    height: calc(100svw / 1.7778);
  }
}

.scene-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scene-rise 1s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes scene-rise {
  from {
    opacity: 0;
    filter: blur(7px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.mark {
  position: fixed;
  top: clamp(16px, 2.4vw, 28px);
  left: clamp(18px, 2.6vw, 30px);
  width: clamp(32px, 3.4vw, 46px);
  z-index: 5;
}

/* the headquarters' double chevron, drawn inline: as a lazy CDN png it had
   no intrinsic height until it arrived, so the control collapsed - and it
   put the only way out of the scene behind a third-party request */
.back {
  position: fixed;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(22px, 4.5vh, 40px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  opacity: .82;
  transition: opacity .35s ease, transform .35s ease;
}

.back:hover {
  opacity: 1;
  transform: translateX(-4px);
}

.back svg {
  display: block;
  width: clamp(42px, 4.6vw, 60px);
  height: auto;
  transform: scaleX(-1);
  stroke: #fff;
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 8px rgba(4, 6, 12, .85));
}

.back span {
  font-family: var(--brand);
  font-size: clamp(.58rem, 1.1vw, .7rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(4, 6, 12, .9);
  white-space: nowrap;
}

/* Below this width the fixed mark and the menu's first link overlap - the
   mark sits 18-50px in, "home" starts at 41. The menu already carries home
   to the same destination, so the mark stands down rather than colliding.
   Only the scenes are affected: the placeholders centre their logo inside
   the page rather than pinning it to the corner. */
@media (max-width: 640px) {
  .mark {
    display: none;
  }
}

/* --- hotspots inside a scene ----------------------------------------
   Same marker as the headquarters so a scene with its own hotspots reads
   as the same system. Positioned by --x / --y percentages of the frame,
   so they hold wherever the render is cropped.
   --------------------------------------------------------------------- */
.rs-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}

.rs-hotspot.is-visible {
  opacity: 1;
  visibility: visible;
}

.rs-hotspot__dot {
  position: relative;
  z-index: 2;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  /* every layer carries a dark edge so the marker survives the cream tags
     as well as the dark foliage behind them */
  box-shadow:
    0 0 0 1.5px rgba(4, 6, 12, .38),
    0 2px 9px rgba(4, 6, 12, .5),
    0 0 20px rgba(255, 246, 224, .55);
  transition: transform .3s ease;
}

.rs-hotspot__dot:before,
.rs-hotspot__dot:after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(4, 6, 12, .3), inset 0 0 0 1px rgba(4, 6, 12, .16);
  animation: rs-pulse 3.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

.rs-hotspot__dot:before {
  animation-delay: -1.7s;
}

@keyframes rs-pulse {
  0% {
    transform: scale(.7);
    opacity: 0;
  }

  16% {
    opacity: .9;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.rs-hotspot:hover .rs-hotspot__dot:before,
.rs-hotspot:hover .rs-hotspot__dot:after {
  animation: none;
  transform: scale(1.75);
  opacity: 1;
  border-color: #fff;
}

.rs-hotspot:active .rs-hotspot__dot {
  transform: scale(.55);
}

.rs-hotspot__glow {
  position: absolute;
  z-index: 1;
  width: var(--glow, 160px);
  height: var(--glow, 160px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 199, .28) 0%, rgba(255, 238, 199, 0) 65%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

.rs-hotspot:hover .rs-hotspot__glow {
  opacity: 1;
}

.rs-hotspot__name {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--brand);
  /* not rem: these scenes have no Webflow root scale to inherit, and a
     fixed floor keeps the name readable rather than noise */
  font-size: clamp(10px, .85vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(4, 6, 12, .95),
    0 0 10px rgba(4, 6, 12, .85),
    0 0 22px rgba(4, 6, 12, .7);
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Hover label, for the hotspots that have no resting name of their own.

   A marker that already names itself keeps that name on hover - "Brand"
   stays "Brand", it does not become "Brand & Positioning". The label on
   those is only a longer form of the word already under the dot, so it is
   not shown at all; the ring and the glow carry the hover instead.

   The responsibility tree is the case this is still for: the render's own
   tags carry the copy there, so those hotspots run label-only with no
   resting name, and the label is the only text they have. */
.rs-hotspot__label {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-family: var(--brand);
  font-size: clamp(10px, .85vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  /* the same stack the resting name carries, so it survives the bright
     halves of a render without a panel behind it */
  text-shadow:
    0 1px 3px rgba(4, 6, 12, .95),
    0 0 10px rgba(4, 6, 12, .85),
    0 0 22px rgba(4, 6, 12, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.rs-hotspot:hover .rs-hotspot__label {
  opacity: 1;
}

/* :has, so a hotspot added later behaves correctly without anyone having
   to remember a modifier class. Where it is unsupported the label simply
   shows as it used to, which is a soft landing rather than a break. */
.rs-hotspot:has(.rs-hotspot__name) .rs-hotspot__label {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .scene-frame > img,
  .rs-hotspot,
  .rs-hotspot__dot,
  .rs-hotspot__glow,
  .rs-hotspot__label,
  .back {
    animation: none;
    transition: none;
  }

  .rs-hotspot__dot:before {
    opacity: 0;
  }

  .rs-hotspot__dot:after {
    animation: none;
    transform: scale(1.4);
    opacity: .55;
  }

  .back:hover {
    transform: none;
  }
}