/* ---- Fonts ---- */
@font-face {
  font-family: "Stamp RSPK One";
  src: url("fonts/Meat_Style_2.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --text: #f5f5f5;
  --bg: #000;
  /* Tint over video so text stays readable. Tune alpha. */
  --tint: rgba(0, 0, 0, 0.45);
  --maxw: 84ch;
  /* Single gap used for: top margin above title, title-box -> text,
     and bottom-of-page -> text. Keeps all three spaces equal. */
  --gap: clamp(1.5rem, 6vh, 3.5rem);
}

html {
  /* Native smooth anchor scrolling */
  scroll-behavior: smooth;
  background: var(--bg);
  /* Respect notches on iOS */
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  /* iOS momentum scrolling */
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

/* Kill smooth scroll for users who get motion sick */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Fixed video background ---- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Fallback color shows instantly before poster/video paint */
  background: var(--bg);
  /* Fade in on page load */
  opacity: 0;
  transition: opacity 3.5s ease;
}

.bg.is-ready {
  opacity: 1;
}

.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Cover the whole viewport, no distortion, on every aspect ratio */
  object-fit: cover;
  /* Center the crop */
  object-position: center;
  display: block;
  /* Crossfade between the two buffers */
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}

.bg__video.is-active {
  opacity: 1;
}

.bg__tint {
  position: absolute;
  inset: 0;
  background: var(--tint);
  /* Optional gradient for stronger contrast at top/bottom */
  /* background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 25%,
    rgba(0, 0, 0, 0.30) 75%,
    rgba(0, 0, 0, 0.55) 100%
  ); */
}

/* ---- blur-regions feature ----
   Frosted strips at top (under the header) and bottom. Text scrolling behind
   them blurs out, so it "disappears" into the header / off the bottom, leaving
   a sharp reading zone in the middle. The strip's blur fades in and out via a
   mask gradient (soft edges, no hard line). */
.edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 5;            /* above text (1), below header (10) */
  height: 44px;          /* blur region thickness */
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Blur fades in then out across the strip (clear -> blur -> clear) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 50%, transparent 100%);
  /* Hidden until the user scrolls */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Show the blur lines once scrolled */
body.is-scrolled .edge {
  opacity: 1;
}

.edge--top {
  /* Sits just under the header, not over it */
  top: var(--header-h, 0px);
}

.edge--bottom {
  bottom: 0;
  height: 22px;   /* half the top region */
}

/* ---- Fixed scroll container + symmetric fade mask ----
   Text fades out before it reaches the bottom of the title box (--header-h
   from the top) and fades in the same distance up from the bottom. The clear
   reading band is centered; the masked-out text reveals the video behind it. */
.scroller {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  --fade: 26px;   /* softness of each fade transition */
  /* Top: hidden behind title box (--header-h) + an empty --gap, then text.
     Bottom: text, then an empty --gap before the page bottom. All gaps == --gap. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--header-h, 0px) + var(--gap)),
    #000 calc(var(--header-h, 0px) + var(--gap) + var(--fade)),
    #000 calc(100% - var(--gap) - var(--fade)),
    transparent calc(100% - var(--gap))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--header-h, 0px) + var(--gap)),
    #000 calc(var(--header-h, 0px) + var(--gap) + var(--fade)),
    #000 calc(100% - var(--gap) - var(--fade)),
    transparent calc(100% - var(--gap))
  );
}

/* ---- Scrolling content ---- */
.content {
  position: relative;
  /* Center column, padding scales with viewport */
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
  /* Safe-area for notched phones */
  padding-inline: max(clamp(1rem, 5vw, 3rem), env(safe-area-inset-left));
}

/* Hero = empty spacer; the fixed .brand fills it visually */
.hero {
  min-height: 100svh;
  min-height: 100dvh;
}

/* Each content section fills the screen, content centered in the reading band */
.section-bg {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- Brand: centered title -> sticky header ---- */
.brand {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  /* Header height once collapsed; padding respects notch */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Hidden until JS reveals it; the animation below does the camera-focus fade */
  opacity: 0;
}

/* Camera-focus reveal: out-of-focus + faint -> sharp, over 3s. A keyframe
   animation always plays when .is-ready is added (no transition snap). */
@keyframes brand-focus-in {
  from { opacity: 0; filter: blur(16px); }
  to   { opacity: 1; filter: blur(0); }
}

.brand.is-ready {
  opacity: 1;
  filter: blur(0);
  animation: brand-focus-in 3s ease both;
}

/* Header backdrop: frosted glass so text scrolling under the title is blurred
   away (disappears behind the header). Opacity is scroll-driven in JS. */
.brand__bar {
  position: absolute;
  inset: 0;
  height: 100%;
  background: transparent;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  will-change: opacity;
}

.brand__title {
  position: relative;
  line-height: 0;             /* no extra inline-box space around the image */
  font-size: 0;
  /* width set by JS to match the previous text title width (TITLE_RATIO) */
  width: 50%;                 /* fallback before JS runs */
  /* Animate the morph: top center origin so it shrinks toward the header */
  transform-origin: top center;
  will-change: transform;
  /* Top margin above the title == --gap (same as title->text and bottom gaps) */
  padding-top: max(var(--gap), env(safe-area-inset-top));
}

/* Title image: scales with the h1 width, white over the dark video */
.brand__title img {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 2px 24px rgba(0, 0, 0, 0.7));
}

.block {
  /* Small top padding so the first paragraph sits right after the hero and
     appears as soon as the user starts scrolling. */
  padding-block: clamp(0.5rem, 2vh, 1.5rem) clamp(3rem, 10vh, 7rem);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.block h2 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 1rem;
}

.block p {
  font-family: "Stamp RSPK One Thin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin-bottom: clamp(1.75rem, 4vh, 3rem);   /* bigger gaps between paragraphs */
}

.block p:last-child {
  margin-bottom: 0;
}

/* ---- Credits ---- */
.credits {
  text-align: center;
}

.credits .credit-role {
  font-family: "Stamp RSPK One", system-ui, sans-serif;   /* Meat_Style_2.otf */
  font-weight: 700;          /* bold role labels */
  margin-bottom: 0.35rem;
}

/* Tighten the gap between a role and its name */
.credits p {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

/* ---- Corner nav (CONTACTS + IT|EN) ----
   Fixed in the top corners, vertically centered on the header. Fades in
   top-to-bottom with blur once the user scrolls (same cue as the text). */
.nav-link {
  position: fixed;
  top: calc(var(--header-h, 64px) / 2);
  transform: translateY(-50%);
  z-index: 20;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;          /* light, like the paragraphs */
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  letter-spacing: 0.04em;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
  /* Fade-in: top -> bottom reveal + blur, shown only after scroll */
  opacity: 0;
  filter: blur(10px);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.9s ease, filter 0.9s ease, clip-path 0.9s ease;
}

body.is-scrolled .nav-link {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}

.nav-contacts { left: clamp(1rem, 4vw, 3rem); }
.nav-lang     { right: clamp(1rem, 4vw, 3rem); }

/* Language toggle: active = white, inactive = light grey, pipe always white */
.lang-sep { color: #fff; margin: 0 0.15em; }
.lang-opt { color: #9a9a9a; cursor: pointer; transition: color 0.2s ease; }
.lang-opt.active { color: #fff; }

/* Contact section */
.contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.contact a:hover { border-bottom-color: #fff; }

/* ---- coloring feature ----
   Slight per-section color wash over the video. --section-tint is set in JS
   when the active section changes; transition makes the shift smooth.
   To revert: remove this block, the .coloring div, data-tint attrs, and the
   JS lines marked "coloring". */
.coloring {
  position: fixed;
  inset: 0;
  z-index: 0;                 /* above video (-1), below content (1) */
  pointer-events: none;
  background-color: var(--section-tint, transparent);
  transition: background-color 0.8s ease;
}