/* ==========================================================================
   NASHORN – Alternative header + hero exploration (website2 only)
   Developed by webndo

   Transparent overlay header, full-frame hero, furniture hotspots.
   The approved website/ styles are unchanged.
   ========================================================================== */

@property --spot-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --spot-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 70%;
}

@property --spot-rx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 34%;
}

@property --spot-ry {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}

/* --------------------------------------------------------------------------
   Header: transparent over the hero, light once scrolled or menu is open
   -------------------------------------------------------------------------- */
.site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.is-locked .site-header {
  background: rgba(250, 251, 253, 0.96);
  border-bottom-color: rgba(12, 26, 41, 0.08);
  box-shadow: var(--shadow-header);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.site-header__logos {
  display: grid;
}

.site-header__logos img {
  grid-area: 1 / 1;
  transition:
    opacity var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out);
}

.site-header:not(.is-scrolled) .site-header__logo-dark {
  opacity: 0;
}

.site-header.is-scrolled .site-header__logo-light,
body.is-locked .site-header .site-header__logo-light {
  opacity: 0;
}

body.is-locked .site-header .site-header__logo-dark {
  opacity: 1;
}

.site-header:not(.is-scrolled) .primary-nav__link,
.site-header:not(.is-scrolled) .primary-nav__toggle,
.site-header:not(.is-scrolled) .menu-toggle {
  color: #fff;
}

.site-header:not(.is-scrolled) .primary-nav__link:hover,
.site-header:not(.is-scrolled) .primary-nav__link:focus-visible,
.site-header:not(.is-scrolled) .primary-nav__item.is-open > .primary-nav__link {
  color: #fff;
}

body.is-locked .site-header .menu-toggle,
body.is-locked .site-header .primary-nav__link,
body.is-locked .site-header .primary-nav__toggle {
  color: var(--text-dark);
}

body.is-locked .site-header .primary-nav__link:hover,
body.is-locked .site-header .primary-nav__link:focus-visible,
body.is-locked .site-header .primary-nav__item.is-open > .primary-nav__link {
  color: var(--nashorn-blue);
}

.site-header .btn--header,
.hero .btn--primary {
  --btn-bg: var(--nashorn-blue);
  --btn-border: var(--nashorn-blue);
  --btn-fg: #fff;
  --btn-fill: var(--navy-900);
}

/* --------------------------------------------------------------------------
   Hero frame: full viewport width, source ratio, bottom edge kept
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  padding-top: 0;
  overflow: hidden;
  background: #0C1A29;
}

.hero__stage {
  position: relative;
  width: 100%;
  height: min(100dvh, calc(100vw * 9 / 16));
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__veil,
.hero__veil-focus,
.hero__veil-keep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(12, 26, 41, 0.92) 0%,
    rgba(12, 26, 41, 0.74) 26%,
    rgba(12, 26, 41, 0.34) 52%,
    rgba(12, 26, 41, 0.1) 74%,
    rgba(12, 26, 41, 0.02) 100%
  );
}

/* Pre-masked copy of the hero gradient. Only its opacity changes, so the
   lower-left window crossfades instead of the mask snapping into place. */
.hero__veil-focus {
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    transparent 0%,
    transparent 52%,
    rgba(0, 0, 0, 0.06) 64%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.4) 84%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.92) 97%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    transparent 0%,
    transparent 52%,
    rgba(0, 0, 0, 0.06) 64%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.4) 84%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.92) 97%,
    #000 100%
  );
}

.js.is-loaded .hero__veil,
.hero__veil-focus,
.hero__veil-keep {
  transition: opacity 380ms var(--ease-out);
}

/* Restores most of the cinematic gradient inside the existing lower-left
   window. 0.9 keeps a slight lift so the corner stays readable, without
   opening it up brighter than the other hero hotspots. */
.hero__veil-keep {
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    #000 0%,
    #000 52%,
    rgba(0, 0, 0, 0.94) 64%,
    rgba(0, 0, 0, 0.84) 74%,
    rgba(0, 0, 0, 0.6) 84%,
    rgba(0, 0, 0, 0.28) 92%,
    rgba(0, 0, 0, 0.08) 97%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    #000 0%,
    #000 52%,
    rgba(0, 0, 0, 0.94) 64%,
    rgba(0, 0, 0, 0.84) 74%,
    rgba(0, 0, 0, 0.6) 84%,
    rgba(0, 0, 0, 0.28) 92%,
    rgba(0, 0, 0, 0.08) 97%,
    transparent 100%
  );
}

.hero__stage:has(.hero-spots.is-stuhl) .hero__veil {
  opacity: 0;
}

.hero__stage:has(.hero-spots.is-stuhl) .hero__veil-focus {
  opacity: 1;
}

.hero__stage:has(.hero-spots.is-stuhl) .hero__veil-keep {
  opacity: 0.9;
}

.hero__panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  min-height: 0;
  pointer-events: none;
}

.hero__panel::before {
  content: none;
}

.hero__content {
  pointer-events: none;
  width: min(var(--container-wide), calc(100% - 2 * min(var(--gutter), 40px)));
  margin-inline: auto;
  padding-top: calc(var(--header-h) + clamp(36px, 4vw, 64px));
  padding-bottom: 0;
}

.hero__content > * {
  max-width: none;
}

.hero__content a,
.hero__content button {
  pointer-events: auto;
}

.hero .eyebrow {
  gap: 12px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.78);
}

.hero .hero__title {
  margin-bottom: 22px;
}

.hero .hero__lead {
  max-width: 600px;
  margin-bottom: 28px;
}

.hero .hero__actions {
  margin-bottom: 0;
}

.hero .eyebrow::before {
  content: none;
}

.hero__mark {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.hero__mark-accent {
  fill: var(--nashorn-cyan);
}

.hero .hero__title,
.hero h1 {
  color: #fff;
}

.hero .hero__line--soft {
  color: rgba(255, 255, 255, 0.9);
}

.hero .hero__lead {
  color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   Furniture hotspots
   -------------------------------------------------------------------------- */
.hero-spots {
  position: absolute;
  inset: 0;
  z-index: 2;
  --spot-x: 50%;
  --spot-y: 75%;
  --spot-rx: 34%;
  --spot-ry: 40%;
  transition:
    --spot-x 420ms var(--ease-out),
    --spot-y 420ms var(--ease-out),
    --spot-rx 420ms var(--ease-out),
    --spot-ry 420ms var(--ease-out);
}

.hero-spots.is-instant {
  transition: none;
}

.hero-spots__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),
    rgba(7, 19, 29, 0) 0%,
    rgba(7, 19, 29, 0) 38%,
    rgba(7, 19, 29, 0.2) 58%,
    rgba(7, 19, 29, 0.52) 80%,
    rgba(7, 19, 29, 0.7) 100%
  );
  transition: opacity 380ms var(--ease-out);
}

.hero-spots.is-active .hero-spots__shade:not(.hero-spots__shade--stuhl) {
  opacity: 1;
}

.hero-spots.is-active.is-stuhl .hero-spots__shade:not(.hero-spots__shade--stuhl) {
  opacity: 0;
}

/* Same 0.70 darkening as the other hotspots, with the lower-left window
   already cut out so the chair and desk are not covered again. */
.hero-spots__shade--stuhl {
  background: rgba(7, 19, 29, 0.7);
  -webkit-mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    transparent 0%,
    transparent 52%,
    rgba(0, 0, 0, 0.06) 64%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.4) 84%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.92) 97%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 40% 56% at 10% 106%,
    transparent 0%,
    transparent 52%,
    rgba(0, 0, 0, 0.06) 64%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.4) 84%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.92) 97%,
    #000 100%
  );
}

.hero-spots.is-stuhl .hero-spots__shade--stuhl {
  opacity: 1;
}

.hero-spots__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-spots__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 400ms var(--ease-expo);
}

.hero-spots__lines path.is-drawn {
  stroke-dashoffset: 0;
}

.hero-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.hero-spot:focus-visible {
  outline: none;
}

.hero-spot:focus-visible .hero-spot__marker {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hero-spot__marker {
  width: 11px;
  height: 11px;
  border: 1.5px solid #fff;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(12, 26, 41, 0.28);
  opacity: 0.78;
  animation: hero-marker-pulse 3.6s ease-in-out infinite;
  transition:
    background-color 280ms var(--ease-out),
    opacity 280ms var(--ease-out),
    scale 280ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}

@keyframes hero-marker-pulse {
  0%,
  100% {
    opacity: 0.68;
    scale: 1;
  }

  50% {
    opacity: 0.94;
    scale: 1.07;
    box-shadow:
      0 0 0 1px rgba(12, 26, 41, 0.28),
      0 0 0 3px rgba(255, 255, 255, 0.14);
  }
}

.hero-spot.is-active .hero-spot__marker {
  background: var(--nashorn-cyan);
  opacity: 1;
  scale: 1.2;
  animation: none;
  box-shadow: 0 0 0 1px rgba(12, 26, 41, 0.35);
}

.hero-spot__label {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(7, 19, 29, 0.65);
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: opacity 380ms var(--ease-out), translate 400ms var(--ease-out);
}

.hero-spot__label.is-active {
  opacity: 1;
  translate: 0 0;
}

.hero-spots__panel {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  max-width: min(240px, calc(100% - 32px));
  margin: 0;
  padding: 8px 12px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  background: rgba(12, 26, 41, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.hero-spots__panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hero__panel {
    position: relative;
    inset: auto;
    order: -1;
    background:
      linear-gradient(180deg, rgba(12, 26, 41, 0.12), rgba(12, 26, 41, 0)),
      #0C1A29;
  }

  .hero__stage {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hero__content {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: calc(var(--header-h) + 36px) var(--gutter) 36px;
  }

  .hero__media img {
    object-position: center bottom;
  }

  .hero__panel::before {
    content: none;
  }

  .hero__veil,
  .hero__veil-focus,
  .hero__veil-keep {
    background:
      linear-gradient(180deg, rgba(12, 26, 41, 0.55) 0%, rgba(12, 26, 41, 0) 28%),
      linear-gradient(125deg, rgba(12, 26, 41, 0.22) 0%, rgba(12, 26, 41, 0) 50%);
  }

  .hero-spot__label,
  .hero-spots__lines {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .hero__panel {
    position: relative;
    inset: auto;
    order: -1;
    background:
      linear-gradient(180deg, rgba(12, 26, 41, 0.2), rgba(12, 26, 41, 0)),
      #0C1A29;
  }

  .hero__stage {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hero__content {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: calc(var(--header-h) + 28px) var(--gutter) 32px;
  }

  .hero__veil,
  .hero__veil-focus,
  .hero__veil-keep {
    background:
      linear-gradient(180deg, rgba(12, 26, 41, 0.72) 0%, rgba(12, 26, 41, 0.08) 24%, rgba(12, 26, 41, 0) 40%),
      linear-gradient(125deg, rgba(12, 26, 41, 0.28) 0%, rgba(12, 26, 41, 0) 58%);
  }

  .hero__media img {
    object-position: center bottom;
  }

  .hero-spot__label,
  .hero-spots__lines {
    display: none;
  }

  .hero-spot {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spots,
  .hero-spots__shade,
  .hero__veil,
  .hero__veil-focus,
  .hero__veil-keep,
  .hero-spot__marker,
  .hero-spot__label,
  .hero-spots__lines path,
  .site-header__logos img {
    transition: none;
    animation: none;
  }
}

/* Same winning rules as website12/css/final-touches.css. This file loads
   after the theme copy, so the blue plus has to be restated here. */
.hero-spot__marker {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  background: var(--nashorn-blue);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.hero-spot__marker::before {
  content: "+";
  grid-area: 1 / 1;
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.hero-spot.is-active .hero-spot__marker {
  background: var(--nashorn-blue);
}