/* NWS home page hero: 3D stage (TableServ / website set) with a slider on top.
   Markup: index.html (.nws-hero), logic: js/nws/hero-slider.js. */

/* The template styles bare headings and paragraphs – neutralise that inside the hero. */
.nws-hero h2,
.nws-hero h3,
.nws-hero h4,
.nws-hero p,
.nws-hero ul {
  margin: 0;
  padding: 0;
  letter-spacing: normal;
}
.nws-hero h2,
.nws-hero h3,
.nws-hero h4 {
  font-family: var(--nws-font-heading);
}
.nws-hero p {
  font-family: var(--nws-font-body);
  line-height: 1.5;
}
.nws-hero button {
  font: inherit;
  cursor: pointer;
}
.nws-hero .nws-ctrl svg {
  display: block;
}
.nws-hero .nws-slide__text .nws-btn,
.nws-hero .nws-slide__text .nws-btn:hover {
  color: #fff;
}
.nws-hero {
  display: block;
  /* The 3D stage starts below the fixed navigation, so the scene (e.g. the floating N mark) is never
     hidden behind it; the strip behind the navigation shows the studio colour. (The template pads
     every <section> – reset.) */
  margin: 0;
  padding: calc(var(--nws-bar-top) + var(--nws-topbar-h)) 0 0;
  background: var(--nws-c-stage-bg);
}
.nws-hero .nws-stage .nws-stage__viewport {
  height: calc(100vh - var(--nws-bar-top) - var(--nws-topbar-h));
  height: calc(100svh - var(--nws-bar-top) - var(--nws-topbar-h));
  min-height: 560px;
  max-height: 1080px;
}
.nws-hero .nws-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.nws-hero .nws-slide {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s var(--nws-ease-out), visibility 0s linear 1.2s;
}
.nws-hero .nws-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s var(--nws-ease-out);
}
.nws-hero .nws-slide__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding-block: clamp(16px, 4vh, 56px) 112px;
}
@media (max-width: 1068px) {
  .nws-hero .nws-slide__inner {
    justify-content: flex-end;
    gap: 0;
    padding-block: 0 104px;
  }
}
.nws-hero .nws-slide__text {
  display: grid;
  justify-items: start;
  gap: 16px;
  max-width: 560px;
  text-align: left;
}
.nws-hero .nws-slide__text > * {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 1s var(--nws-ease-out), opacity 1s var(--nws-ease-out);
}
.nws-hero .is-active .nws-slide__text > * {
  transform: none;
  opacity: 1;
}
.nws-hero .nws-slide__text > :nth-child(1) {
  transition-delay: 290ms;
}
.nws-hero .nws-slide__text > :nth-child(2) {
  transition-delay: 380ms;
}
.nws-hero .nws-slide__text > :nth-child(3) {
  transition-delay: 470ms;
}
.nws-hero .nws-slide__text > :nth-child(4) {
  transition-delay: 560ms;
}
.nws-hero .nws-slide__text > :nth-child(5) {
  transition-delay: 650ms;
}
@media (max-width: 1068px) {
  .nws-hero .nws-slide__text {
    max-width: none;
    gap: 12px;
  }
}
@media (max-width: 734px) {
  .nws-hero .nws-slide__text {
    justify-items: stretch;
  }
  .nws-hero .nws-slide__text .nws-btn {
    justify-content: center;
    width: 100%;
  }
}
.nws-hero .nws-slide__title {
  color: var(--nws-c-stage-fg);
  font-size: clamp(2.125rem, 4.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.nws-hero .nws-slide__teaser {
  max-width: 32ch;
  color: var(--nws-c-stage-fg);
  font-family: var(--nws-font-heading);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.nws-hero .nws-slide__note {
  color: var(--nws-c-stage-fg-2);
  font-size: 0.875rem;
}
.nws-hero .nws-extras {
  display: grid;
  gap: 10px;
  max-width: 560px;
  list-style: none;
}
.nws-hero .nws-extras li {
  padding: 12px 18px;
  border: 1px solid var(--nws-c-stage-line);
  border-left: 3px solid var(--nws-c-primary);
  border-radius: 4px var(--nws-radius-s) var(--nws-radius-s) 4px;
  background: var(--nws-c-stage-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--nws-c-stage-fg-2);
  font-size: 0.875rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(16px);
  transition: transform 1s var(--nws-ease-out), opacity 1s var(--nws-ease-out);
}
.nws-hero .is-active .nws-extras li {
  opacity: 1;
  transform: none;
}
.nws-hero .nws-extras li:nth-child(1) {
  transition-delay: 620ms;
}
.nws-hero .nws-extras li:nth-child(2) {
  transition-delay: 740ms;
}
.nws-hero .nws-extras li:nth-child(3) {
  transition-delay: 860ms;
}
.nws-hero .nws-extras li h4 {
  margin-bottom: 2px;
  color: var(--nws-c-stage-fg);
  font-size: 0.9375rem;
}
@media (max-width: 1068px) {
  .nws-hero .nws-extras {
    display: none;
  }
}
@media (max-height: 780px) {
  .nws-hero .nws-extras {
    display: none;
  }
}
.nws-hero .nws-controls {
  position: absolute;
  inset: auto 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}
.nws-hero .nws-ctrl {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nws-c-stage-line);
  border-radius: 50%;
  background: var(--nws-c-stage-card);
  color: var(--nws-c-stage-fg);
  transition: background-color var(--nws-dur-fast) ease, color var(--nws-dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nws-hero .nws-ctrl:hover {
    background: var(--nws-grad-brand);
    color: #fff;
  }
}
.nws-hero .nws-ctrl--pause {
  margin-left: auto;
}
.nws-hero .nws-counter {
  flex: none;
  min-width: 56px;
  color: var(--nws-c-stage-fg);
  font-family: var(--nws-font-heading);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nws-hero .nws-dots {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: 8px;
}
.nws-hero .nws-dot {
  width: 48px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
}
.nws-hero .nws-dot::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--nws-c-stage-line);
}
@media (max-width: 734px) {
  .nws-hero .nws-dot {
    width: 28px;
  }
}
.nws-hero .nws-dot__bar {
  display: block;
  height: 3px;
  margin-top: -3px;
  border-radius: 2px;
  background: var(--nws-c-stage-fg);
  transform-origin: left;
  transform: scaleX(0);
}
.nws-hero .nws-dot.is-active .nws-dot__bar {
  transform: scaleX(1);
}
.nws-hero .nws-dot__bar.is-running {
  animation: nws-progress 8s linear forwards;
}
@keyframes nws-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* nextweb: on desktops the three points sit side by side (like the template slider's row), so
   text, points and controls fit below the fixed navigation even on 900 px tall screens. */
@media (min-width: 1069px) {
  .nws-hero .nws-extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 780px;
  }
}

/* The template pushes #content down by 50 px up to 992 px width (for its old mobile header); the
   hero already leaves room for the navigation itself, so it moves up by exactly that amount. */
@media (max-width: 992px) {
  .nws-hero {
    margin-top: -50px;
  }
}

/* The floating TableServ and cookie buttons sit in the bottom corners (22 px + 52 px). Phones: the
   slider controls move up above them; tablets/laptops up to 1419 px: the controls keep a side clearance
   (wider screens have enough margin anyway) – arrows and pause always stay reachable. */
@media (max-width: 734px) {
  .nws-hero .nws-controls {
    bottom: 92px;
  }
  .nws-hero .nws-slide__inner {
    padding-bottom: 168px;
  }
}
@media (min-width: 735px) and (max-width: 1419px) {
  .nws-hero .nws-controls {
    padding-inline: 92px;
  }
}

/* Phones/tablets: the text sits over the illustration (intended). No box – only a few pixels of soft
   halo in the studio colour directly around the letters keep them readable on dark/light parts of the
   scene; the illustration stays fully visible.
   Two small blur layers (3 + 10 px). The former four layers up to 28 px overloaded older graphics chips over the
   running video: on a Galaxy S21 the whole landing area stuttered and turned pixelated during the flights (Chrome
   fell back to low-resolution tiles). Tested on the device with Luka (08.11.2026): smooth, no pixel errors. */
@media (max-width: 1068px) {
  .nws-hero .nws-slide__title,
  .nws-hero .nws-slide__teaser,
  .nws-hero .nws-slide__note {
    text-shadow:
      0 0 3px var(--nws-c-stage-bg),
      0 0 10px var(--nws-c-stage-bg);
  }
}
@media (max-width: 1068px) {
  /* the small label gets a solid tint, so it stays readable over dark parts of the scene */
  .nws-hero .nws-t-eyebrow {
    background: #e9f0fb;
  }
  [data-theme='dark'] .nws-hero .nws-t-eyebrow {
    background: #16203d;
  }
}

/* Pre-rendered 3D videos (hero-slider.js): the active slide's video fades in over the studio colour. */
.nws-hero .nws-stage__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate; /* the clip layers below stay inside the stage, under the hero text */
  background: var(--nws-c-stage-bg);
}
.nws-hero .nws-hero-video {
  /* one rendered video per stage shape (hero-slider.js FORMATS, data-format on .nws-hero): it fills the stage edge to
     edge on every screen – from phones to 34″ ultrawide – without borders; the closest aspect ratio is chosen, so only
     a few percent are cropped. Text beside the scene: the scene (right) is kept, a little more is cropped below. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 40%;
  opacity: 0;
  z-index: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
/* hand-over layers (hero-slider.js show): the starting clip lies visible under the current one – Safari starts
   muted videos it considers invisible late or not at all; the old one fades out on top */
.nws-hero .nws-hero-video.is-next {
  opacity: 1;
  z-index: 1;
  transition: none;
}
.nws-hero .nws-hero-video.is-active {
  opacity: 1;
  z-index: 2;
}
.nws-hero .nws-hero-video.is-leaving {
  opacity: 0;
  z-index: 3;
}
/* text below the scene (≤ 1068 px): the scene is centred and lifted – keep the top */
.nws-hero[data-format='portrait'] .nws-hero-video,
.nws-hero[data-format='square'] .nws-hero-video,
.nws-hero[data-format='band'] .nws-hero-video {
  object-position: 50% 0%;
}
/* far wider than the widest video (32:9 monitors): full height on the right, soft fade into the studio colour on the
   left (the text side) – instead of cropping a third of its height */
.nws-hero[data-wider] .nws-hero-video {
  left: auto;
  width: auto;
  /* the template (style.css) gives every video min-width: 100% – that stretched the 3:1 video over the whole stage
     (2× 27″ = 5120 px: 1.58× upscaled and pixelated, 3 screens 2.64×) instead of keeping it at its own size */
  min-width: 0;
  aspect-ratio: 3 / 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
/* phones: the 9:16 video spans the full width (nothing cut off at the sides) and fades into the studio colour at the
   bottom, where the text sits anyway */
.nws-hero[data-format='phone'] .nws-hero-video {
  inset: 0 0 auto 0;
  height: auto;
  aspect-ratio: 9 / 16;
  object-position: 50% 0%;
}
/* The soft fade at the bottom is a gradient in the studio colour *over* the videos, not a mask *on* them: a mask made
   the GPU redraw every video frame into an extra offscreen surface (two during a cross-fade) – older phones
   (Galaxy S21) stuttered while scrolling into the hero and when swiping. The container's background is the same studio
   colour, so the picture is identical. Same box as the video (width, 9:16, at least the stage height). */
.nws-hero[data-format='phone'] .nws-stage__video::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4; /* above every clip layer (0–3) */
  aspect-ratio: 9 / 16;
  min-height: 100%;
  background: linear-gradient(180deg, transparent 78%, var(--nws-c-stage-bg) 100%);
  pointer-events: none;
}

/* Floating light motes over the hero video (hero-slider.js): drawn by the page, not in the video, so
   they keep floating through every clip change (intro, loops, flights, theme). Compositor-only animation
   (transform/opacity), still while the hero is paused / out of view, off with reduced motion. */
.nws-hero .nws-hero-motes {
  --nws-mote-a: #8db0ee;
  --nws-mote-b: #a99bff;
  position: absolute;
  inset: 8% 0 0 40%;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  /* no mix-blend-mode: it made the browser recomposite the whole layer every frame (measured ~6 % CPU) */
}
[data-theme='light'] .nws-hero .nws-hero-motes {
  --nws-mote-a: #4a81d3;
  --nws-mote-b: #514a9d;
}
.nws-hero .nws-hero-motes i {
  position: absolute;
  bottom: -30px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 38%, transparent 70%);
  opacity: 0;
  animation: nws-mote var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
[data-theme='light'] .nws-hero .nws-hero-motes i {
  opacity: 0;
  --o-scale: 0.6;
}
@keyframes nws-mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: calc(var(--o) * var(--o-scale, 1)); }
  70% { opacity: calc(var(--o) * var(--o-scale, 1)); }
  100% { transform: translate3d(var(--dx), calc(-1 * var(--rise, 70vh)), 0); opacity: 0; }
}
.nws-hero.is-still .nws-hero-motes i {
  animation-play-state: paused;
}
/* text below the scene: only in the picture above the text */
.nws-hero[data-format='phone'] .nws-hero-motes,
.nws-hero[data-format='portrait'] .nws-hero-motes,
.nws-hero[data-format='square'] .nws-hero-motes,
.nws-hero[data-format='band'] .nws-hero-motes {
  inset: 0 0 48% 0;
  --rise: 40vh;
}
@media (prefers-reduced-motion: reduce) {
  .nws-hero .nws-hero-motes {
    display: none;
  }
}