/* Home (index.html). Loaded only on the home page, after style.css */

/* ==========================================================================
   Boot screen
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  background: var(--bg);
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
}

.boot__inner {
  display: grid;
  justify-items: center;
  gap: 28px;
  width: min(360px, 80vw);
}

.boot__logo {
  width: min(180px, 46vw);
}

.boot__logo rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: px-in 0.45s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 90ms + 150ms);
}

.boot__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.08em;
  animation: fade-up 0.6s 0.8s var(--ease-out) both;
}

.boot__status {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.boot__status [data-boot-percent] {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.boot__bar {
  width: 100%;
  height: 10px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  margin-top: -18px;
}

.boot__bar span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 10px);
  transform: scaleX(0);
  transform-origin: left;
}

.boot__skip {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.08em;
  animation: blink 1.4s steps(2, start) infinite;
}

.sidenav__hint {
  --depth: 8;
  margin: 12px 0 0;
  padding-left: 32px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.copyright__link {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.copyright__link:hover,
.copyright__link:focus-visible {
  color: var(--green-hi);
}

.kicker__num {
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* Narrower width to break short titles into two lines (e.g. "Mundos / que ficam") */

.section-title--narrow {
  max-width: 10ch;
}

.btn--start .tri {
  animation: blink 1s steps(2, start) infinite;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Reserves the area for the "Scroll" indicator at the bottom */
  padding-bottom: calc(var(--bottom-safe) + 136px);
  isolation: isolate;
}

.hero::before {
  display: none;
}

/* The canvas covers the entire viewport, including behind the menu */

.hero__canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--nav-w) * -1);
  z-index: -2;
  width: calc(100% + var(--nav-w));
  max-width: none;
  height: 100%;
}

.hero__fade {
  position: absolute;
  inset: auto 0 0 calc(var(--nav-w) * -1);
  z-index: -1;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* The frame follows the container area (centered when the screen is wider than it) */

.hero__hud {
  --hud-x: calc(var(--gutter) + max(0px, (100% - 2 * var(--gutter) - var(--container)) / 2));
  position: absolute;
  inset: calc(var(--top-safe) - 4px) var(--hud-x) calc(var(--bottom-safe) + 4px);
  pointer-events: none;
}

.hero__hud i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--line-strong);
}

.hero__hud i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }

.hero__hud i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }

.hero__hud i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }

.hero__hud i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.hero__hud-label {
  position: absolute;
  top: 6px;
  left: 34px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
}

.hero__hud-label b {
  color: var(--green);
  font-weight: 500;
}

.hero__hud-label b::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--green);
  vertical-align: 1px;
  animation: blink 1.2s steps(2, start) infinite;
}

.hero__content {
  position: relative;
  max-width: 780px;
  padding-block: 40px;
}

.hero__kicker {
  margin: 0 0 18px;
  /* Grows from 12px to 14px over the same screen range in which the title goes from 32px to 76px (~600px to ~1460px) */
  font-size: clamp(12px, 10.6px + 0.233vw, 14px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
}

.hero__kicker::before {
  content: '// ';
  color: var(--dim);
}

.hero__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: clamp(32px, 5.2vw, 76px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Max width + balance break the start of the sentence into balanced lines, with no fixed per-language <br> */

.hero__title-lead {
  display: block;
  max-width: 16ch;
  text-wrap: balance;
}

/* "versão zero." always on its own line, outlined in green */

.hero__title-outline {
  display: block;
  width: fit-content;
  margin-top: 0.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--green);
  text-shadow: 0 0 40px rgba(112, 191, 69, 0.25);
}

.hero__title-outline::before {
  -webkit-text-stroke: 0;
}

/* Lighter than --muted: the hero's animated background (glow, grid and blocks) runs behind the text */

.hero__text {
  max-width: 562px;
  margin: 0 0 36px;
  font-size: 18px;
  color: #bac6b4;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__scroll {
  position: absolute;
  bottom: calc(var(--bottom-safe) + 24px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transform: translateX(-50%);
  transition: color 0.25s, text-shadow 0.25s, transform 0.35s var(--ease-out);
}

.hero__scroll::after {
  content: '';
  width: 2px;
  height: 36px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: scroll-hint 1.8s ease-in-out infinite;
  transform-origin: top;
  transition: height 0.35s var(--ease-out), margin-bottom 0.35s var(--ease-out);
}

/* Hover: text lights up and moves down, line grows and pulses faster */

.hero__scroll:hover {
  color: var(--green-hi);
  text-shadow: 0 0 12px var(--green-glow);
  transform: translate(-50%, 4px);
}

/* The negative margin offsets the extra height: the line grows downward without pushing the text */

.hero__scroll:hover::after {
  height: 52px;
  margin-bottom: -16px;
  animation-duration: 1s;
}

/* Hero elements entrance */

.hero__content > * {
  animation: fade-up 0.9s var(--ease-out) both;
}

/* Title and text enter with offset only, not from zero opacity: this way they are painted
   from the first frame and count toward LCP without waiting for the animation */

.hero__content > .hero__title,
.hero__content > .hero__text {
  animation-name: rise;
}

.hero__content > :nth-child(1) { animation-delay: 0.1s; }

.hero__content > :nth-child(2) { animation-delay: 0.2s; }

.hero__content > :nth-child(3) { animation-delay: 0.35s; }

.hero__content > :nth-child(4) { animation-delay: 0.45s; }

.hero__content > :nth-child(5) { animation-delay: 0.55s; }

body.is-booting .hero__content > * {
  animation-play-state: paused;
}

/* ==========================================================================
   Games — chapter selector
   ========================================================================== */

.chapters {
  --gap: clamp(16px, 2vw, 28px);
  /* Card locked to the art's aspect ratio (1061 × 1482) */
  --locked-w: calc(var(--card-h) * 1061 / 1482);
  /* Two games fill the container width; the remaining cards sit to the right, outside it.
     The % is relative to the track's content area, which has the container's width */
  --card-w: max(300px, calc((100% - var(--gap)) / 2));
  --card-h: clamp(340px, 44vh, 400px);
  position: relative;
}

.chapters__track {
  position: relative;
  display: flex;
  gap: var(--gap);
  /* Room around the cards so the active card's glow (22px drop-shadow) is not cut off
     by the track, which clips whatever overflows it. The negative margins keep the cards in place:
     the first one stays 6px past the container, so the outer frame fits */
  --track-pad: min(40px, var(--gutter));
  margin: -24px calc(var(--bleed, 0px) * -1) -20px calc((var(--track-pad) - 6px) * -1);
  /* The track extends to the right edge of the screen (--bleed, computed in home.js) */
  padding: 48px var(--bleed, 0px) 48px var(--track-pad);
  scroll-padding-left: var(--track-pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}

/* Mouse drag: snapping is suspended until release */

/* When scrolled, the track fades at the left edge so the cards do not end in a hard cut.
   --edge-fade (home.js) follows the scroll: 0 at the start, up to the gap before the snapped card */

.chapters__track {
  mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade, 0px));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade, 0px));
}

.chapters__track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.chapters__track.is-dragging a {
  pointer-events: none;
}

.chapters__track::-webkit-scrollbar {
  display: none;
}

.chapter {
  will-change: transform;
  flex: 0 0 var(--card-w);
  scroll-snap-align: start;
  transition: filter 0.35s, transform 0.45s var(--ease-out);
}

.chapter--locked {
  flex-basis: var(--locked-w);
}

/* Unfocused chapters are dimmed, like in a level selector. Only the art fades: the text
   keeps full color so contrast stays above 4.5:1 */

.chapters.has-active .chapter:not(.is-active) .chapter__art {
  opacity: 0.45;
  filter: saturate(0.55);
}

.chapter.is-active {
  transform: translateY(-8px);
  filter: drop-shadow(0 0 22px rgba(112, 191, 69, 0.28));
}

.chapter__card {
  --frame: #6f7d4f;
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--card-h);
  color: inherit;
  text-decoration: none;
}

.chapter__card:focus-visible {
  outline: none;
}

.chapter.is-active .chapter__card {
  --frame: var(--green);
}

/* Frame generated in home.js (frameCard): 2px line outside the card, with varying intensity */

.chapter__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* Without the global svg max-width: the frame is 8px wider than the card */
  max-width: none;
  color: var(--frame);
  pointer-events: none;
  transition: color 0.3s, filter 0.3s;
}

.chapter__frame line {
  stroke-width: 2;
  stroke-linecap: square;
}

.chapter.is-active .chapter__frame {
  filter: drop-shadow(0 0 4px var(--green-glow));
}

.chapter__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-solid);
  overflow: hidden;
}

.chapter__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 28px;
  background: linear-gradient(to bottom, rgba(6, 8, 7, 0.9), transparent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The art covers the whole card, behind the header and the content */

.chapter__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 0.35s, filter 0.35s;
}

.chapter__art img,
.chapter__art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter__art img,
.chapter__art video {
  transition: transform 0.8s var(--ease-out);
  /* Keeps the cover always on the same compositing layer: otherwise the browser promotes it only
     during the transition and, at the end, goes back to drawing it pixel-aligned, which causes a jump */
  will-change: transform;
  backface-visibility: hidden;
}

.chapter.is-active .chapter__art img,
.chapter.is-active .chapter__art video {
  transform: scale(1.06);
}

/* Darkens the bottom and the left side, where the text is */

.chapter__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 14, 11, 0.85) 0%, rgba(10, 14, 11, 0.7) 40%, rgba(10, 14, 11, 0.3) 70%, rgba(10, 14, 11, 0.1) 100%),
    linear-gradient(to right, rgba(10, 14, 11, 0.4), transparent 70%);
}

.chapter__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 0 18px 20px;
}

/* Game names keep their official spelling (e.g. "stigmA"), without forced uppercase */

.chapter__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.chapter__genre {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--green-hi);
}

.chapter__desc {
  display: -webkit-box;
  margin: 0 0 14px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  /* Lighter than --muted: the art shows behind the text */
  color: #b4c0ae;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* Game phase on the left and details arrow on the right, on the same line */

.chapter__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Button with text and arrow, so it is not confused with the carousel control arrows */

.chapter__cta {
  --cut: 8px;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.chapter__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--ease-out);
}

.chapter.is-active .chapter__cta {
  border-color: var(--green);
}

.chapter__card:hover .chapter__cta,
.chapter__card:focus-visible .chapter__cta {
  background: var(--green);
  color: #071006;
}

.chapter__card:hover .chapter__cta svg,
.chapter__card:focus-visible .chapter__cta svg {
  transform: translateX(3px);
}

/* Locked chapter */

.chapter--locked .chapter__card {
  cursor: not-allowed;
}

.chapter--locked .chapter__inner {
  background: #0a0d0b;
}

/* Locked chapter background art, darkened beneath the padlock and the text */

.chapter__locked-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s, filter 0.35s;
}

.chapter--locked .chapter__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse 80% 55% at 50% 50%, rgba(6, 8, 7, 0.78), rgba(6, 8, 7, 0.35));
  pointer-events: none;
}

.chapter--locked:not(.is-active) .chapter__locked-art {
  filter: grayscale(1);
}

.chapters.has-active .chapter--locked:not(.is-active) .chapter__locked-art {
  opacity: 0.4;
}

.chapter__locked {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 16px;
  text-align: center;
}

.chapter__lock {
  width: 44px;
  height: 52px;
  color: var(--muted);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}

.chapter--locked.is-active .chapter__lock {
  color: var(--green);
  animation: lock-shake 2.4s ease-in-out infinite;
}

.chapter__locked-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.chapter__locked-text {
  max-width: 22ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b4c0ae;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.75);
}

/* Carousel controls */

.chapters__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: 8px;
}

/* ==========================================================================
   About us
   ========================================================================== */

/* Text, status and achievements in the left half; the studio image is the background of the right half */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px) clamp(32px, 4vw, 72px);
  align-items: start;
}

.about__text,
.about__stats {
  grid-column: 1;
}

/* Section background, outside the container (positioned relative to .section): anchored to the right of the
   screen, vertically centered in the section and dissolved into the site background */

.about__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  width: min(72%, 1400px);
  pointer-events: none;
}

/* The mask is on the container so the image and the effects dissolve together */

.about__screen {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: radial-gradient(ellipse 62% 58% at 62% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 62% 50%, #000 30%, transparent 100%);
}

.about__screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Static scanlines */

.about__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

/* Scan band moving down slowly */

.about__screen::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(112, 191, 69, 0.04) 70%, rgba(155, 227, 110, 0.08) 92%, transparent);
  mix-blend-mode: screen;
  transform: translateY(-100%);
  animation: screen-scan 11s linear infinite;
  pointer-events: none;
}

/* Rare glitch: a strip of the image shifts for an instant, with a greenish ghost */

.about__glitch {
  position: absolute;
  inset: 0;
  background: url('../img/studio.webp') center / 100% 100%;
  opacity: 0;
  pointer-events: none;
  animation: screen-glitch 9s steps(1) infinite;
}

.about__text p {
  margin: 0 0 18px;
  font-size: 18px;
  color: var(--muted);
}

/* First paragraph: same font as the text, just emphasized */

.about__text .about__lead {
  font-weight: 600;
  color: var(--text);
}

.achievements__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}

.achievements__title::after {
  content: '';
  flex: 1;
  height: 1px;
  border-top: 1px dashed var(--line);
}

.achievements {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.achievement {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(112, 191, 69, 0.05);
  border: 1px solid var(--line);
  transition: border-color 0.2s, background 0.2s, transform 0.3s var(--ease-out);
}

.achievement:hover {
  border-color: var(--line-strong);
  background: rgba(112, 191, 69, 0.1);
  transform: translateX(4px);
}

.achievement__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--green);
  color: #071006;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.achievement__icon svg {
  width: 24px;
  height: 24px;
}

/* Label (Mission, Vision, Values) always above the title */

.achievement__title {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.2;
  color: #fff;
}

.achievement__title small {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.achievement__text {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.channels li {
  display: flex;
}

/* The whole card is the channel link */

.channel {
  --cut: 12px;
  /* Chamfer diagonal: distance from the corner along the 45° gradient (cut / √2) */
  --cut-d: calc(var(--cut) * 0.7071);
  --frame: var(--line);
  --fill: #0c120e;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px 24px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  /* Frame and chamfers drawn with gradients only, no clip-path: in Firefox, clipping at
     fractional positions cut off the top border and thinned the diagonals */
  background:
    /* straight edges, which stop where the chamfers begin */
    linear-gradient(var(--frame), var(--frame)) var(--cut) 0 / calc(100% - var(--cut)) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) 100% 0 / 1px calc(100% - var(--cut)) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 0 100% / calc(100% - var(--cut)) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) 0 var(--cut) / 1px calc(100% - var(--cut)) no-repeat,
    /* quadrants: top left and bottom right with the chamfer and its diagonal */
    linear-gradient(135deg, transparent var(--cut-d), var(--frame) var(--cut-d), var(--frame) calc(var(--cut-d) + 1px), var(--fill) calc(var(--cut-d) + 1px)) 0 0 / 51% 51% no-repeat,
    linear-gradient(-45deg, transparent var(--cut-d), var(--frame) var(--cut-d), var(--frame) calc(var(--cut-d) + 1px), var(--fill) calc(var(--cut-d) + 1px)) 100% 100% / 51% 51% no-repeat,
    linear-gradient(var(--fill), var(--fill)) 100% 0 / 51% 51% no-repeat,
    linear-gradient(var(--fill), var(--fill)) 0 100% / 51% 51% no-repeat;
}

/* No focus outline: the green frame indicates focus */

.channel:hover,
.channel:focus-visible {
  --frame: var(--green);
  --fill: #121c14;
  outline: none;
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border: 1px solid var(--line-strong);
  color: var(--green);
  transition: background 0.25s, color 0.25s, transform 0.35s var(--ease-out);
}

.channel:hover .channel__icon,
.channel:focus-visible .channel__icon {
  background: var(--green);
  color: #071006;
  transform: translateY(-3px);
}

.channel__icon svg {
  width: 24px;
  height: 24px;
}

.channel__label {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.channel__value {
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
  transition: color 0.25s;
}

.channel:hover .channel__value,
.channel:focus-visible .channel__value {
  color: var(--green-hi);
}

@media (min-width: 1361px) {
  .contact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 4vw, 72px);
    align-items: center;
  }
}

@media (max-width: 1100px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  /* On narrow screens, the image joins the flow, between the text and the status */

  .about__backdrop {
    position: static;
    z-index: auto;
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
  }

  .about__screen {
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
  }
}

@media (max-height: 720px) and (min-width: 961px) {
  .sidenav__hint {
    display: none;
  }
}

@media (max-width: 960px) {
  .hero__canvas,
  .hero__fade {
    left: 0;
    width: 100%;
  }

  .hero__hud {
    display: none;
  }

  .hero__scroll {
    display: none;
  }

  .hero {
    padding-bottom: calc(var(--bottom-safe) + 56px);
  }

  /* Centered hero: texts and buttons */

  .hero__content {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .hero__title-lead,
  .hero__title-outline,
  .hero__text {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .chapters {
    --card-w: min(86vw, 440px);
    --card-h: clamp(380px, 50vh, 420px);
  }

  .chapters__track {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .chapters__hint {
    display: none;
  }

  .chapters__controls {
    justify-content: center;
  }

  /* Details button spanning the card width, below the phase */

  .chapter__cta {
    flex-basis: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .channels {
    grid-template-columns: 1fr;
  }

  .channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 16px;
    padding: 14px 16px;
    text-align: left;
  }

  .channel__icon {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    margin-bottom: 0;
  }

  .channel__label {
    align-self: end;
  }

  .channel__value {
    align-self: start;
  }
}

@keyframes px-in {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes scroll-hint {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

@keyframes rise {
  from { transform: translateY(12px); }
  to { transform: none; }
}

@keyframes lock-shake {
  0%, 80%, 100% { transform: none; }
  84% { transform: rotate(-8deg); }
  88% { transform: rotate(8deg); }
  92% { transform: rotate(-4deg); }
}

@keyframes screen-scan {
  to { transform: translateY(560%); }
}

@keyframes screen-glitch {
  0%, 93%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); filter: none; }
  93.5% { opacity: 0.9; transform: translateX(-10px); clip-path: inset(38% 0 52% 0); filter: hue-rotate(60deg) saturate(1.6); }
  94.5% { opacity: 0.7; transform: translateX(8px); clip-path: inset(61% 0 31% 0); filter: hue-rotate(60deg) saturate(1.6); }
  95.5% { opacity: 0.5; transform: translateX(-4px); clip-path: inset(22% 0 72% 0); filter: none; }
}