/* ==========================================================================
   AREPO — the spikes' motion pieces (js/arepo/motion.js)
   A full-screen canvas, the lines over it (one word at a time), a thin progress line, RETURN / REPLAY.
   black / off-white / greys / red
   ========================================================================== */
.amo { position: fixed; inset: 0; z-index: 45; background: #050505; color: var(--offwhite); opacity: 0; transition: opacity .45s ease; }
.amo[hidden] { display: none; }
.amo.is-open { opacity: 1; }
.amo__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the glass cube (point 02, js/arepo/glasscube.js): its two canvases, over the black; dimmed at the end (REPLAY) */
.amo__cube { position: absolute; inset: 0; transition: opacity .6s ease; }
.amo__cube[hidden] { display: none; }
.amo__cube canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.amo.is-end .amo__cube { opacity: .45 !important; transition: opacity .8s ease; }

/* the lines: one at a time, each word its own span (the script sets their opacity / position) */
.amo__lines { position: absolute; inset: 0; pointer-events: none; }
.amo__line { position: absolute; margin: 0; max-width: min(620px, 84vw); opacity: 0; transition: opacity .2s linear;
  font: 500 clamp(28px, 3.7vw, 62px)/1.08 'Cormorant Garamond', 'Times New Roman', serif; letter-spacing: .01em; }
.amo__line.is-on { opacity: 1; }
.amo__w { display: inline-block; opacity: 0; will-change: transform, opacity; }
.amo__line.is-dark { color: #0b0b0b; }
.amo__line.is-light { color: #f1ede4; }
.amo__w.is-accent { color: var(--red); }
.amo__line.scene-crow .amo__w.is-accent { color: #f1ede4; }             /* on the red field the accent is white */
.amo__line.scene-fever .amo__w.is-accent { color: #f1ede4; text-shadow: 0 0 18px rgba(255, 40, 30, .8); }
.amo__line.pos-right { right: 6vw; top: 16vh; text-align: right; max-width: min(760px, 46vw); }
.amo__line.pos-top { left: 50%; top: 8vh; transform: translateX(-50%); text-align: center; width: max-content; max-width: 90vw; white-space: nowrap; }
.amo__line.pos-bottom-right { right: 7vw; bottom: 14vh; text-align: right; }
.amo__line.pos-left { left: 7vw; top: 22vh; }
.amo__line.pos-center { left: 50%; top: 12vh; transform: translateX(-50%); text-align: center; width: max-content; white-space: nowrap; }

/* progress, RETURN, the end */
.amo__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(138, 135, 132, .25); }
.amo__bar span { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
.amo__close { position: absolute; left: clamp(16px, 4vw, 64px); top: clamp(20px, 5vh, 48px); display: inline-flex; gap: .7em; align-items: center;
  padding: 8px 0; border: 0; background: none; color: rgba(241, 237, 228, .75); cursor: pointer; mix-blend-mode: difference;
  font: 500 11px/1 var(--font-grotesk); letter-spacing: .34em; }
.amo__close span:first-child { font-size: 18px; letter-spacing: 0; }
.amo__close:hover, .amo__close:focus-visible { color: #fff; outline: none; }
.amo__close:focus-visible { text-decoration: underline; text-underline-offset: 6px; }
.amo__end { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); text-align: center; }
.amo__end[hidden] { display: none; }
.amo__label { margin: 0 0 18px; font: 500 11px/1 var(--font-grotesk); letter-spacing: .38em; color: var(--grey); }
.amo__btn { padding: 12px 20px; border: 1px solid rgba(241, 237, 228, .3); border-radius: 999px; background: none; color: var(--offwhite);
  font: 500 11px/1 var(--font-grotesk); letter-spacing: .34em; cursor: pointer; transition: border-color .3s, color .3s; }
.amo__btn:hover, .amo__btn:focus-visible { border-color: var(--red); color: #fff; outline: none; }

@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .amo__line { font-size: clamp(26px, 8vw, 40px); }
  .amo__line.pos-right, .amo__line.pos-left { left: 8vw; right: 8vw; top: 12vh; bottom: auto; text-align: left; }
  .amo__line.pos-bottom-right { left: 8vw; right: auto; top: auto; bottom: 9vh; max-width: 46vw; text-align: left; }   /* in the dark corner */
  .amo__line.pos-top, .amo__line.pos-center { width: auto; max-width: 84vw; left: 8vw; right: 8vw; transform: none; text-align: center; white-space: normal; }
}

/* ---------- video pieces (point.video) ---------- */
.amo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050505; display: block; }
.amo__video[hidden] { display: none; }
.amo.is-end .amo__video { opacity: .3; transition: opacity .8s ease; }
.amo--fadeblack.is-end .amo__video { opacity: 0 !important; }      /* a piece that fades to black (point.fadeOut): it stays black */
.amo--video.is-end .amo__canvas { opacity: .45 !important; transition: opacity .8s ease !important; }
@media (max-aspect-ratio: 9/10) { .amo__video { object-fit: contain; } }       /* phones: the whole frame, black above and below */
.amo--contain .amo__video { object-fit: contain; }
.amo--video .amo__line.pos-closing { left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 84vw; text-align: center;
  font-size: clamp(19px, 1.7vw, 30px); }
/* the closing line: the words come slower, the whole line stays a long breath */
.amo--contain .amo__video { transition: opacity 1.2s ease; }
.amo--video .amo__line.pos-closing::before { margin-left: auto; margin-right: auto; }
/* the lines: small and quiet, like an auteur's subtitles — Cormorant Garamond light italic, wide air, a soft shade
   behind each word so it reads on white as on black */
.amo--video .amo__line { font: italic 300 clamp(17px, 1.45vw, 26px)/1.45 'Cormorant Garamond', 'Times New Roman', serif;
  letter-spacing: .045em; color: #f4f1eb; max-width: min(460px, 40vw);
  text-shadow: 0 0 2px rgba(0, 0, 0, .55), 0 1px 14px rgba(0, 0, 0, .65); }
.amo--video .amo__w { margin-right: .02em; }
.amo--video .amo__w.is-accent { color: #ff3a30; font-weight: 500; }
.amo--video .amo__line.accent-ink .amo__w.is-accent { color: #fff; font-weight: 500; }   /* on the red field: white, a touch heavier */
.amo--video .amo__line::before { content: ''; display: block; width: 22px; height: 1px; margin-bottom: .7em; background: var(--red); opacity: .9; }
.amo--video .amo__line.pos-top-right { right: 7vw; top: 12vh; text-align: right; }
.amo--video .amo__line.pos-top-right::before { margin-left: auto; }
.amo--video .amo__line.pos-top-left { left: 7vw; top: 12vh; }
.amo--video .amo__line.pos-left { left: 7vw; top: 44vh; }
.amo--video .amo__line.pos-center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; text-align: center; }
.amo--video .amo__line.pos-center::before, .amo--video .amo__line.pos-center-low::before { margin-left: auto; margin-right: auto; }
.amo--video .amo__line.pos-center .amo__w { color: #0b0b0b; text-shadow: 0 0 10px rgba(255, 255, 255, .8); }   /* the white flash */
.amo--video .amo__line.pos-center .amo__w.is-accent { color: var(--red); }
.amo--video .amo__line.pos-bottom-right { right: 7vw; bottom: 13vh; text-align: right; }
.amo--video .amo__line.pos-bottom-right::before { margin-left: auto; }
.amo--video .amo__line.pos-center-low { left: 50%; top: 12vh; transform: translateX(-50%); width: max-content; text-align: center; }
.amo--video .amo__line.pos-side-left { left: 6vw; top: 50%; transform: translateY(-50%); max-width: min(440px, 27vw); }
.amo--video .amo__line.pos-side-right { right: 6vw; top: 50%; transform: translateY(-50%); max-width: min(440px, 27vw); text-align: right; }
.amo--video .amo__line.pos-side-right::before { margin-left: auto; }
/* ink 'shade': light words with a dark halo; 'veil' (cue.veil) adds a wide soft dark cloud behind the line (a gradient,
   no filter) — legible over bright fog; it comes and goes with the line */
.amo--video .amo__line.is-shade { color: #f4f1eb; isolation: isolate; }
.amo--video .amo__line.is-veil::after { content: ''; position: absolute; left: -18%; right: -18%; top: -160%; bottom: -160%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 10, 10, .42), rgba(10, 10, 10, .28) 40%, rgba(10, 10, 10, .1) 70%, rgba(10, 10, 10, 0));
  opacity: 0; transition: opacity 1.4s ease; }
.amo--video .amo__line.is-veil.is-on::after { opacity: 1; }
.amo--video .amo__line.is-shade .amo__w { text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 1px 12px rgba(0, 0, 0, .6); }
/* a piece whose words carry it (point.bigWords): the lines larger */
.amo--big .amo__line, .amo--big .amo__line.pos-closing { font-size: clamp(22px, 2.05vw, 36px); }
.amo--big .amo__line.pos-closing { max-width: 64vw; white-space: normal; }
.amo--big .amo__line.pos-side-left, .amo--big .amo__line.pos-side-right { max-width: min(520px, 30vw); }
/* point.wordsFont = 'grotesk': the lines in the player's own type (as RETURN and the end label) — Space Grotesk, capitals,
   spaced out; smaller than the serif (capitals and tracking take room), the accents still red */
.amo--grotesk .amo__line, .amo--grotesk .amo__line.pos-closing { font: 500 clamp(13px, 1.02vw, 18px)/2 var(--font-grotesk);
  letter-spacing: .26em; text-transform: uppercase; }
.amo--grotesk .amo__w { margin-right: .12em; }
.amo--grotesk .amo__w.is-accent { font-weight: 600; }
.amo--grotesk .amo__line.pos-side-left, .amo--grotesk .amo__line.pos-side-right { max-width: min(470px, 29vw); }
.amo--grotesk .amo__line.pos-closing { max-width: 58vw; }
.amo--video .amo__canvas { pointer-events: none; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .amo--video .amo__line { font-size: clamp(17px, 4.8vw, 22px); max-width: 80vw; }
  .amo--big .amo__line { font-size: clamp(19px, 5.4vw, 25px); }
  .amo--big .amo__line.pos-closing { left: 9vw; right: 9vw; top: auto; bottom: 14vh; transform: none; width: auto; max-width: none; text-align: left; }   /* phones: in the black below the picture */
  .amo--big .amo__line.pos-closing::before { margin-left: 0; }
  .amo--big .amo__line.is-veil::after { display: none; }
  .amo--grotesk .amo__line, .amo--grotesk .amo__line.pos-closing { font-size: clamp(12px, 3.4vw, 15px); letter-spacing: .2em; line-height: 1.9; }
  .amo--video .amo__line.pos-top-right, .amo--video .amo__line.pos-top-left, .amo--video .amo__line.pos-center,
  .amo--video .amo__line.pos-center-low, .amo--video .amo__line.pos-left,
  .amo--video .amo__line.pos-side-left, .amo--video .amo__line.pos-side-right { left: 9vw; right: 9vw; top: 14vh; bottom: auto; transform: none; width: auto; max-width: none; text-align: left; }
  .amo--video .amo__line.pos-center .amo__w { color: #f4f1eb; text-shadow: 0 0 2px rgba(0, 0, 0, .55), 0 1px 14px rgba(0, 0, 0, .65); }
  .amo--video .amo__line.pos-top-right::before, .amo--video .amo__line.pos-center::before, .amo--video .amo__line.pos-center-low::before { margin-left: 0; }
  .amo--video .amo__line.pos-bottom-right { left: 9vw; right: 9vw; top: auto; bottom: 13vh; text-align: right; }
}