/*
 | THE STORY, scenes 2–4: direction "Mata" (owner, 2026-10-21). Night in
 | the hall: a wall of majlis photos that never stops filling, one photo in
 | a camera's viewfinder ("Dari mata anda."), then the photos on the hall
 | screen and what comes next. Phone first; a desk gets more columns and a
 | bigger frame, never bigger type than reads comfortably.
 */

.scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* ── Scene 2: the living wall ────────────────────────────────────── */

.scene--wall {
  height: 100svh;
  display: grid;
  place-items: center;
}

/* Three columns on a phone, six on a desk; each holds its photos twice and slides by half its height, so the loop has no seam. */
.wall {
  --wall-gap: clamp(8px, 2.2vw, 16px);
  position: absolute;
  inset: -12vh -4vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wall-gap);
  pointer-events: none;
}

.wall__col {
  display: flex;
  flex-direction: column;
  gap: var(--wall-gap);
  padding-bottom: var(--wall-gap);
  animation: wall-up var(--loop, 14s) linear infinite;
  will-change: transform;
}

.wall__col--2 { --loop: 18s; animation-name: wall-down; }
.wall__col--3 { --loop: 11s; }
.wall__col--4 { --loop: 16s; animation-name: wall-down; }
.wall__col--5 { --loop: 12.5s; }
.wall__col--6 { --loop: 20s; animation-name: wall-down; }

.wall__col:nth-child(n + 4) {
  display: none;
}

@media (min-width: 900px) {
  .wall {
    inset: -12vh -1vw;
    grid-template-columns: repeat(6, 1fr);
  }

  .wall__col:nth-child(n + 4) {
    display: flex;
  }
}

.wall.is-paused .wall__col {
  animation-play-state: paused;
}

@keyframes wall-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes wall-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* A photo still on its way shows the ground, never a broken image, and holds its size. */
.wall picture {
  display: block;
  flex: none;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(10px, 3vw, 18px);
  background: color-mix(in srgb, var(--ink) 6%, var(--ground));
}

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

/* The ground pools in the middle under the brand, and at the top under REC. */
.wall__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 42% at 50% 50%, color-mix(in srgb, var(--ground) 94%, transparent), color-mix(in srgb, var(--ground) 60%, transparent) 70%, color-mix(in srgb, var(--ground) 12%, transparent)),
    linear-gradient(to bottom, color-mix(in srgb, var(--ground) 92%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--ground) 60%, transparent));
}

@media (min-width: 900px) {
  .wall__scrim {
    background:
      radial-gradient(ellipse 40% 46% at 50% 50%, color-mix(in srgb, var(--ground) 94%, transparent), color-mix(in srgb, var(--ground) 60%, transparent) 70%, color-mix(in srgb, var(--ground) 12%, transparent)),
      linear-gradient(to bottom, color-mix(in srgb, var(--ground) 92%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--ground) 60%, transparent));
  }
}

/* A camera's recording badge: its own dark chip, so it reads over any photo the wall brings past. */
.rec {
  position: absolute;
  top: max(env(safe-area-inset-top), clamp(20px, 7vw, 40px));
  left: clamp(14px, calc(8vw - 8px), 40px);
  margin: 0;
  padding: 5px 9px 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  font: 600 clamp(12px, 3.4vw, 14px)/1 'Jost', system-ui, sans-serif;
  letter-spacing: .15em;
}

.rec__dot {
  color: var(--accent);
  animation: rec-blink 1s step-end infinite;
}

@keyframes rec-blink {
  50% { opacity: 0; }
}

/* The brand sits exactly where the preloader left it: the same column, the same units, the same lockup. */
.lockup {
  position: relative;
  width: min(100%, 760px, 90svh);
  height: 100%;
  container-type: inline-size;
  display: grid;
  place-content: center;
}

.lockup__brand {
  display: grid;
  justify-items: center;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.lockup .jsp__word,
.lockup .jsp__okey {
  animation: none;
}

.lockup .jsp__okey {
  display: block;
}

.soon {
  position: absolute;
  left: 0;
  right: 0;
  /* Below the brand by the brand's own measure (the lockup's width), so it stays in the scrim's dark middle on any screen. */
  top: calc(50% + min(100vw, 760px, 90svh) * .18);
  margin: 0;
  text-align: center;
  font: 500 clamp(12px, 3.6vw, 16px)/1 'Jost', system-ui, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* ── The words of scenes 3 and 4 ─────────────────────────────────── */

/* Capped by the window's height too, so a phone on its side never has a heading taller than its room. */
.title {
  margin: 0 0 .3em;
  font: 600 clamp(26px, min(8vw, 6.5vh), 56px)/1.05 'Jost', system-ui, sans-serif;
  letter-spacing: -.02em;
}

.title .line {
  display: block;
}

.lede {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(15px, min(4vw, 2.6vh), 19px);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* A phone on its side has little height: REC moves up, clear of the photo. */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .rec {
    top: 12px;
  }
}

/* ── Scene 3: "Dari mata anda." ──────────────────────────────────── */

.mata {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(16px, 4vh, 32px);
  padding: clamp(56px, 12vh, 96px) clamp(20px, 8vw, 48px) clamp(28px, 7vh, 64px);
}

.vf {
  position: relative;
  min-height: 0;
  width: 100%;
  border-radius: 6px;
}

.vf__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0% 0% 0% 0% round 6px);
}

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

/* A camera's four brackets, just outside the photo. */
.vf__corner {
  --arm: clamp(18px, 6vw, 34px);
  --bar: 3px;
  --off: calc(var(--bar) * -3);
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  border: 0 solid var(--ink);
}

.vf__corner--tl { top: var(--off); left: var(--off); border-width: var(--bar) 0 0 var(--bar); }
.vf__corner--tr { top: var(--off); right: var(--off); border-width: var(--bar) var(--bar) 0 0; }
.vf__corner--bl { bottom: var(--off); left: var(--off); border-width: 0 0 var(--bar) var(--bar); }
.vf__corner--br { bottom: var(--off); right: var(--off); border-width: 0 var(--bar) var(--bar) 0; }

/* A desk: a landscape frame, centred, never wider than 900 px. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .mata {
    justify-items: center;
    text-align: center;
  }

  .vf {
    max-width: 900px;
  }

  .mata__copy .lede {
    margin-inline: auto;
  }
}

/* A phone on its side: the frame on the left, the words on the right. */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .mata {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    padding-block: clamp(36px, 10vh, 56px) clamp(20px, 6vh, 32px);
  }

  .vf {
    height: 100%;
  }
}

/* ── Scene 4: the hall screen, and what comes next ─────────────────── */

.dewan {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 3vh, 28px);
  justify-items: center;
  padding: clamp(56px, 11vh, 96px) clamp(20px, 7vw, 48px) clamp(20px, 4vh, 40px);
  text-align: center;
}

.dewan__title {
  margin: 0;
}

.tv-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: size;
}

/* The screen fits its room by width and by height, whichever runs out first. */
.tv {
  --tv-gap: clamp(3px, 1vw, 8px);
  position: relative;
  width: min(100cqw, 820px, (100cqh - 22px) * 16 / 9);
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: grid;
  /* minmax(0, …): the photos' own heights must never stretch the screen off 16:9. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--tv-gap);
  padding: var(--tv-gap);
  border-radius: clamp(6px, 1.6vw, 12px);
  background: color-mix(in srgb, var(--ink) 10%, var(--ground));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent),
    0 24px 80px -24px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tv picture {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, var(--ground));
}

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

.tv__main {
  grid-row: span 2;
}

.tv__stand {
  width: clamp(40px, 12%, 96px);
  height: 14px;
  margin-top: 8px;
  border-radius: 0 0 6px 6px;
  background: color-mix(in srgb, var(--ink) 10%, var(--ground));
}

.dewan__cta {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ground);
  font: 600 clamp(15px, 4vw, 18px)/1.2 'Jost', system-ui, sans-serif;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
}

.partner svg {
  width: 1.1em;
  height: 1.1em;
}

.partner:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A phone on its side: the screen on the left, the words on the right. */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  .dewan {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "tv title" "tv cta";
    align-content: center;
    padding-block: clamp(24px, 7vh, 40px);
  }

  .dewan__title { grid-area: title; align-self: end; }
  .tv-wrap { grid-area: tv; height: 100%; }
  .dewan__cta { grid-area: cta; align-self: start; gap: 8px; }
}

/* ── The pinned story: three scenes as layers of one stage ───────── */

.story {
  position: relative;
}

.story.is-pinned {
  height: 100svh;
  overflow: hidden;
}

.story.is-pinned .scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A link takes taps only once its scene is on show; until then it is unseen (opacity 0) but still there for the keyboard and screen readers. */
.story.is-pinned .scene.is-live a {
  pointer-events: auto;
}

/* The viewfinder's photo travels on into the screen's big slot, so it rides above the screen's layer, and the slot's own copy waits unseen. */
.story.is-pinned .scene--dewan { z-index: 2; }
.story.is-pinned .scene--mata { z-index: 3; }
.story.is-pinned .rec { z-index: 4; }

.story.is-pinned .tv__main img {
  visibility: hidden;
}

.scene--wall.is-gone .wall__col {
  animation-play-state: paused;
}

/* ── Reduced motion: the wall and the light hold still ──────────── */

@media (prefers-reduced-motion: reduce) {
  .wall__col,
  .rec__dot {
    animation: none;
  }
}