/* =====================================================================
   CUTSCENE — BASE: reset, page shell, header
   ===================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

a{ color: inherit; text-decoration: none; }
img, video{ max-width: 100%; }

:focus-visible{ outline: 1px solid var(--fg); outline-offset: 4px; }

/* One-screen shell. The stage fills the whole screen so the strip is
   always centred on the screen itself; the header floats on top and
   can change size without moving anything. */
.app{
  position: relative;
  height: 100%;
  overflow: hidden;
}

/* ---- Blurred footage behind everything ---- */
.backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--backdrop-alpha);
}
.backdrop img{
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  filter: blur(var(--backdrop-blur)) saturate(1.1);
}

/* ---- Film grain (above the backdrop, below the frames) ----
   Drawn by js/grain.js at the screen's own pixel density. */
.grain{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: var(--grain-alpha);
}

/* ---- Header ---- */
.site-head{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--gutter);
  padding-block: 24px 0;
  align-items: flex-start;
}

/* Logo + "malaysia" lockup */
.brand{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;             /* default: under the logo, right-aligned */
  gap: calc(var(--logo-h) * .16);
  color: var(--fg);
}
.brand-sub{
  font-family: var(--font-display);
  font-size: calc(var(--logo-h) * var(--brand-sub-scale));
  font-weight: var(--brand-sub-weight);
  font-stretch: 115%;
  letter-spacing: var(--brand-sub-track);
  margin-right: calc(var(--brand-sub-track) * -1);   /* ends flush with the logo */
  line-height: 1;
  text-transform: lowercase;
}
.brand-sub .short{ display: none; }

[data-brand="under-left"] .brand{ align-items: flex-start; }
[data-brand="beside"] .brand,
[data-brand="my"] .brand{
  flex-direction: row;
  align-items: baseline;
  gap: calc(var(--logo-h) * .3);
}
[data-brand="beside"] .brand-sub,
[data-brand="my"] .brand-sub{ margin-right: 0; }
[data-brand="my"] .brand-sub .long{ display: none; }
[data-brand="my"] .brand-sub .short{ display: inline; }
[data-brand="none"] .brand-sub{ display: none; }

/* The logo takes the site's text colour (drawing: css/logo.css) */
.site-head .logo{
  display: block;
  height: var(--logo-h);
  aspect-ratio: 1800 / 317;
  color: var(--fg);
}

.site-nav{
  display: flex;
  align-items: center;
  min-height: var(--logo-h);            /* lines up with the middle of the logo */
  gap: clamp(18px, 2.6vw, 40px);
  font-size: var(--nav-size);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.site-nav a{ color: var(--fg-2); transition: color .2s ease; }
.site-nav a:hover,
.site-nav a[aria-current="page"]{ color: var(--fg); }

@media (max-width: 760px){
  /* on phones the strip runs under the header, so give it a soft fade */
  .site-head{
    padding-block: 18px 28px;
    background: linear-gradient(var(--bg) 55%, rgb(11 11 10 / 0));
  }
  .site-nav{ gap: 14px; letter-spacing: .14em; }
}

/* ---- Words: the letter-by-letter entrance (js/words.js) ---- */
.wl{
  display: inline-block;
  overflow: hidden;                    /* letters only show inside the slot */
  vertical-align: bottom;
  padding-bottom: .12em;               /* room for descenders */
  margin-bottom: -.12em;
  max-width: 100%;
}
.wl-w{ display: inline-block; white-space: nowrap; }
.wl-c{
  display: inline-block;
  transform: translateY(calc(var(--dir, 1) * 115%));
  opacity: 0;
  transition: transform var(--word-rise) cubic-bezier(.16, 1, .3, 1),
              opacity calc(var(--word-rise) * .5) ease;
  transition-delay: calc(var(--k, 0) * var(--word-line-step) + var(--i, 0) * var(--word-letter-step));
}
.words-in .wl-c{ transform: none; opacity: 1; }
.words-reset .wl-c{ transition: none !important; }