/* The designer's opening and header (guide p. 1–3): Mortend Light/Regular in capitals with 0.06em, the only
   orange is #FF2200 (var(--signal)) */

/* ───── Header: shortcuts at both sides, the logo in the middle, a shadow under the bar ───── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  height: clamp(4.25rem, 5.6vw, 6.75rem);
  padding: 0 clamp(1.25rem, 6.2vw, 7.5rem);
}
/* Shown from the start: the bar is part of the opening now */
.js .nav:not(.is-shown) { opacity: 1; pointer-events: auto; }
/* Nearly solid behind the bar itself, so what scrolls under it doesn't read through, then fading out */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 180%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.88) 42%, rgba(0, 0, 0, 0.45) 72%, transparent);
  pointer-events: none;
}

/* The logo sits in the exact middle; the mouse's slot opens as the mouse flies in (js/rat.js sets the sizes) */
.nav .nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
}
.nav__slot {
  display: block;
  flex: none;
  width: calc(var(--rat-w, 0px) + var(--rat-gap, 0px));
  height: var(--rat-h, 0px);
}
.nav .nav__logo .nav__rat {
  display: block;
  width: var(--rat-w, 0px);
  height: var(--rat-h, 0px);
  max-width: none;
  opacity: 0;
}
.nav .nav__logo .nav__word { display: block; height: clamp(26px, 3.33vw, 64px); width: auto; }

.nav .nav__links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.nav__side { display: flex; align-items: center; gap: clamp(1.25rem, 3.1vw, 3.75rem); }
.nav .nav__links a {
  font-family: var(--font);
  font-stretch: normal;
  font-weight: 400;
  font-size: clamp(0.72rem, 0.82vw, 1rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.25s;
}
/* The section on screen: its shortcut in the brand orange (the line stays for the pointer only) */
.nav .nav__links a[aria-current] { color: var(--signal); }
.nav .nav__links a[aria-current]::after { scale: 0 1; }
.nav__end { margin-left: clamp(1rem, 2vw, 2.25rem); }
/* On a phone the «Menú» panel marks the section on screen the same way */
.menu__links a[aria-current]:not(.btn) { color: var(--signal); }

/* A tablet on its side or a small laptop: the shortcuts close in so they never touch the logo.
   In em, so the cuts move with the text size set in the browser: larger text needs a wider window */
@media (min-width: 901px) and (min-width: 60.001em) and (max-width: 73.75em) {
  .nav { padding: 0 2rem; }
  .nav__side { gap: 1.1rem; }
  .nav__end { margin-left: 0.75rem; }
}

/* Phone, or a window too narrow for the shortcuts around the logo (960 px with normal text): they live in «Menú»,
   so the logo goes back to the left as before */
@media (max-width: 900px), (max-width: 60em) {
  .nav { height: 4.25rem; }
  .nav .nav__logo { position: static; translate: none; }
  .nav .nav__links { display: none; }
  .nav__end { margin-left: auto; }
}

/* ───── Opening ───── */

/* Longer than before: the first stretch belongs to the mouse's flight into the header */
.intro { height: 240vh; }

/* While the clips load, the designer's background shows as the poster; the LED matrix fades in over it
   once the video has a frame (js/main.js adds .is-playing) */
.intro__stage { background: var(--void) url('../assets/hero/fondo.webp') center / cover no-repeat; }
.intro__feed { position: absolute; inset: 0; pointer-events: none; }
.intro__canvas { opacity: 0; transition: opacity 0.6s; }
.intro.is-playing .intro__canvas { opacity: 1; }
.intro.is-native-led.is-playing .intro__stage { background-image: none; }
.intro.is-native-led .intro__feed {
  opacity: 0;
  mask-image: radial-gradient(ellipse 2.6px 2.3px at center, #000b 45%, #000a 66%, #0002 95%);
  mask-size: 6px 5px;
}
.intro.is-native-led.is-playing .intro__feed { opacity: 1; }
.intro.is-native-led .intro__feed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--signal);
  opacity: .22;
}
.intro.is-native-led .intro__source {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.intro.is-native-led .intro__canvas { opacity: 0; pointer-events: none; }
.intro.is-native-led.is-playing .intro__canvas.is-tearing { opacity: 1; }

.intro__cue {
  z-index: 2;
  color: var(--ash);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* The mouse: fixed over the page and centred, so it can fly up into the bar */
.rat {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.rat__box {
  transform-origin: 0 0;
  width: min(44vw, 72vh * 1.163, 860px);
  width: min(44vw, 72svh * 1.163, 860px);
  aspect-ratio: 898 / 772;
}
.rat__punch { position: relative; width: 100%; height: 100%; }
.rat__img,
.rat__fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.rat.is-gl .rat__img { visibility: hidden; }
.rat:not(.is-on) .rat__punch { opacity: 0; }
.rat.is-landed,
html:has(.menu[open]) .rat { visibility: hidden; }

/* The phone's address bar changes the visual viewport during a swipe. Keep
   the centre and the flight distance anchored to the same stable viewport. */
@media (pointer: coarse) {
  .intro { height: 240svh; }
  .rat { bottom: auto; height: 100vh; height: 100svh; }
}
.rat.is-mobile-flight.is-landed { visibility: visible; }
.rat.is-travelling .rat__img { visibility: visible; }
.rat.is-travelling .rat__fx { visibility: hidden; }
.rat__white {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: grayscale(1) brightness(3);
}
@media (max-width: 760px) {
  .rat__box {
    width: min(84vw, 50vh * 1.163);
    width: min(84vw, 50svh * 1.163);
  }
}
/* Low screens (a phone on its side): a smaller mouse and a shorter cue, so «Desliza» stays clear of the tail */
@media (max-height: 560px) {
  .rat__box {
    width: min(44vw, 60vh * 1.163);
    width: min(44vw, 60svh * 1.163);
  }
  .intro__cue { bottom: 0.75rem; gap: 0.4rem; }
  .intro__cue i { height: 26px; }
}