/* ============================================================
   TYYNI — Spacetime Helsinki
   Four full-viewport "pages" that snap-scroll over the fixed
   animated sand background. Cream type (#F2E6C7) on darkened sand.
   One responsive page: desktop is the base, the max-width:640px
   block at the bottom retunes everything for narrow phones.
   ============================================================ */

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  background: #7c4f2b;               /* dark sand — matches the darkened photo, avoids load flash */
  -webkit-font-smoothing: antialiased;
}

:root {
  --cream: #F2E6C7;
  --cream-dim: rgba(246, 242, 233, 0.72);
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter: max(22px, env(safe-area-inset-left));
  --tyyni-logo: url("./assets/tyyni-logo.png");
}

/* Everything real sits above the fixed z-index:0 background */
.page { position: relative; z-index: 1; }

/* ---- Persistent brand, upper left ------------------------------------ */
.topbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  padding: 26px clamp(22px, 4vw, 48px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.topbar.show { opacity: 1; transform: none; }
.brandmark-logo {
  display: block;
  height: 20px;
  width: auto;
  filter:
    invert(93%) sepia(17%) saturate(450%) hue-rotate(348deg) brightness(108%) contrast(91%)
    drop-shadow(0 1px 10px rgba(38, 20, 8, 0.5));
}

/* ---- Language toggle, upper right ------------------------------------ */
.lang {
  position: fixed;
  top: 26px; right: clamp(22px, 4vw, 48px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(38, 20, 8, 0.5);
  opacity: 0;                       /* hidden on the landing… */
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.lang.show { opacity: 1; transform: none; pointer-events: auto; }  /* …fades in with the brand */
.lang button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  min-width: 1.7em;                 /* fixed slot so bolding doesn't shift layout */
  font: inherit;
  color: inherit;
  text-align: center;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.lang button:hover { opacity: 0.85; }
.lang button.on { opacity: 1; font-weight: 700; }
.lang .sep { opacity: 0.4; }

/* ---- Section scaffold ------------------------------------------------ */
.snap {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12vh clamp(24px, 6vw, 96px);
  text-align: center;
}

/* 1 · Landing ---------------------------------------------------------- */
.hero { position: relative; }
.sand-pressed-logo {
  position: relative;
  width: min(760px, 82vw);
  aspect-ratio: 413 / 39;
  isolation: isolate;
}
.sand-pressed-logo::before,
.sand-pressed-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: var(--tyyni-logo) center / contain no-repeat;
  mask: var(--tyyni-logo) center / contain no-repeat;
}
.sand-pressed-logo::before {
  background: rgba(255, 239, 204, 0.48);
  filter: blur(0.5px);
  mix-blend-mode: screen;
  transform: translate3d(-1.2px, -1.4px, 0);
  opacity: 0.76;
  z-index: -1;
}
.sand-pressed-logo::after {
  background: rgba(39, 22, 10, 0.52);
  filter: blur(0.85px);
  mix-blend-mode: multiply;
  transform: translate3d(1.5px, 1.8px, 0);
  opacity: 0.82;
  z-index: -1;
}
.sand-pressed-logo .title {
  user-select: none;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.2;
  filter: blur(0.28px) contrast(0.7);
  mix-blend-mode: multiply;
}

/* 2 · About ------------------------------------------------------------ */
.about { text-align: left; }
.col {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.col p {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.62;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-shadow: 0 0 26px rgba(38, 20, 8, 0.6), 0 1px 2px rgba(38, 20, 8, 0.45);
}
.col p:first-child { font-weight: 700; }

/* 3 · Details ---------------------------------------------------------- */
.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 96px;
  text-align: left;
}
.info-block { display: flex; flex-direction: column; }
.info .label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  margin-bottom: 9px;
}
.info .value {
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;                 /* heavier so it stands off the sand */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(60, 34, 14, 0.35);
}

/* 4 · Partners --------------------------------------------------------- */
.partners-inner { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
/* Partner names */
.partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 7vw, 100px);
}
.partner-list li { display: flex; align-items: center; }
/* Cream partner logos (recolored from the supplied marks) — sized per logo so
   the emblem and the wordmarks read at a balanced optical weight on the row. */
.partner-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(78vw, 300px);
  object-fit: contain;
  filter: drop-shadow(0 1px 12px rgba(60, 34, 14, 0.35));
}
.partner-logo--helsinki   { height: 66px; }   /* framed emblem — taller */
.partner-logo--angelfilms { height: 32px; }   /* wide wordmark */
.partner-logo--yucca      { height: 40px; }

/* 4 · Team ------------------------------------------------------------- */
.team-inner { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
.team-row { display: flex; flex-direction: column; gap: 8px; }
.team-name {
  font-family: var(--sans);
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(60, 34, 14, 0.35);
}
/* Partner logos — cream wordmarks (recolored from the black originals) that
   sit directly on the sand like the surrounding cream names, with the same
   soft shadow so they lift off the background. */
.team-logo {
  align-self: center;               /* team-row is a column; center the logo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(82vw, 440px);
}
.team-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 12px rgba(60, 34, 14, 0.35));
}
/* Per-logo heights, tuned so each mark's cap-height reads at the same weight
   as the ~23px uppercase team names. ZARU is a stacked wordmark (name over
   "STUDIO") so it needs more total height; "Not so Mellow" is one line. */
.team-logo--zaru img { height: 52px; }
.team-logo--nsm img  { height: 30px; }

/* "Spacetime Helsinki" — replicates the upper-left brandmark exactly: mixed
   case, bold, italic "Space", regular "Helsinki", tight tracking. */
.team-name--brand {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
.team-name--brand .brand-space    { font-style: italic; }
.team-name--brand .brand-helsinki { font-weight: 400; }
.team-role {
  font-family: var(--sans);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* ---- Reveal on scroll ------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   MOBILE — phones in portrait (<= 640px)
   Retuned from the desktop base: relaxed snap so tall sections
   never clip, dynamic-viewport heights that account for the
   browser chrome, safe-area gutters, and stacked layouts.
   ============================================================ */
@media (max-width: 640px) {
  html {
    /* Relaxed snap: gently rests on sections but never traps content
       that is taller than the viewport (the desktop `mandatory` did). */
    scroll-snap-type: y proximity;
  }
  html, body { overflow-x: hidden; }

  .topbar { padding: max(18px, env(safe-area-inset-top)) var(--gutter); }
  .brandmark-logo { height: 17px; }
  .lang { top: max(18px, env(safe-area-inset-top)); right: var(--gutter); }

  .snap {
    /* svh so the first/last screen isn't cut by the address bar; min-height
       (not fixed height) lets a section grow when its text needs more room. */
    min-height: 100svh;
    padding: clamp(84px, 14vh, 132px) var(--gutter);
  }

  .sand-pressed-logo {
    /* Cap to the viewport so the logo stays clear of the screen edges. */
    width: min(88vw, 520px);
  }

  .col { width: 100%; max-width: 560px; gap: 18px; }
  .col p {
    font-size: 16px;               /* fixed, comfortable reading size on phones */
    line-height: 1.6;
  }

  .info {
    flex-direction: column;        /* stack the two blocks on narrow screens */
    align-items: center;
    gap: 40px;
    text-align: center;
  }
  .info-block { align-items: center; }
  .info .label { margin-bottom: 10px; }
  .info .value { font-size: 18px; letter-spacing: 0.12em; line-height: 1.35; }

  .partners-inner { gap: 44px; }
  .eyebrow { text-align: center; }
  .partner-list {
    flex-direction: column;        /* stack partner names vertically */
    gap: 32px;
  }
  .partner-logo--helsinki   { height: 58px; }
  .partner-logo--angelfilms { height: 28px; }
  .partner-logo--yucca      { height: 36px; }

  .team-inner { gap: 36px; }
  .team-list { gap: 26px; }
  .team-logo--zaru img { height: 44px; }
  .team-logo--nsm img  { height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}