/* ==========================================================================
   AREPO — the room of Escher's star (js/arepo/arepo.js)
   black / greys / off-white, red only on the spikes' buttons
   ========================================================================== */
.arepo { position: fixed; inset: 0; z-index: 30; overflow: hidden; color: var(--offwhite);
  background: #000;
  font-family: var(--font-grotesk); opacity: 0; transition: opacity .8s var(--ease-out); }
.arepo[hidden] { display: none; }
.arepo.is-open { opacity: 1; }
.arepo__stage { position: absolute; inset: 0; cursor: grab; touch-action: none; transition: filter .45s ease; }
.arepo__stage.is-grabbing { cursor: grabbing; }
.arepo.is-viewing .arepo__stage { filter: brightness(.35); }
.arepo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; user-select: none; }
.arepo__halo { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  animation: arepo-halo 4.8s ease-in-out infinite alternate; }
@keyframes arepo-halo { from { opacity: .7; } to { opacity: 1; } }
.arepo__stars { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.arepo__stars-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: #f4f1eb; transform-origin: 49.5% 23.6%; }
.arepo__stars-layer--1 { animation: arepo-stars-a 7.4s ease-in-out infinite alternate; }
.arepo__stars-layer--2 { animation: arepo-stars-b 10.8s ease-in-out -3.2s infinite alternate; }
.arepo__stars-layer--3 { animation: arepo-stars-c 5.9s ease-in-out -1.7s infinite alternate; }
@keyframes arepo-stars-a { from { opacity: .38; transform: translate3d(0, 0, 0); } to { opacity: .82; transform: translate3d(.12%, -.08%, 0); } }
@keyframes arepo-stars-b { from { opacity: .68; transform: translate3d(0, 0, 0); } to { opacity: .28; transform: translate3d(-.1%, .06%, 0); } }
@keyframes arepo-stars-c { from { opacity: .25; } to { opacity: .9; } }
.arepo__canvas { position: absolute; inset: 0; z-index: 2; display: block; opacity: 0; transition: opacity 1s ease; }
.arepo.is-ready .arepo__canvas { opacity: 1; }
.arepo__pins { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* Foreground fog reuses TENET's seamless painted textures. The broad masks keep
   the drift soft and prevent a hard upper edge over the mountains. */
.arepo__fog { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 60vh; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.58) 10%, #000 24%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.58) 10%, #000 24%, #000 100%); }
.arepo__fog-band { position: absolute; left: -1024px; width: calc(100% + 2048px); background-repeat: repeat-x; will-change: transform; }
.arepo__fog-band--back { top: 0; bottom: 13%; background-image: url('../assets/tenet/fog/valley.webp'); background-size: 1024px 100%; opacity: .6;
  animation: arepo-fog-left 46s linear infinite; }
.arepo__fog-band--front { top: 25%; bottom: -8%; background-image: url('../assets/tenet/fog/floor.webp'); background-size: 1024px 100%; opacity: .68;
  animation: arepo-fog-right 32s linear infinite; }
@keyframes arepo-fog-left { from { transform: translateX(0); } to { transform: translateX(-1024px); } }
@keyframes arepo-fog-right { from { transform: translateX(-1024px); } to { transform: translateX(0); } }

.arepo__head { position: absolute; z-index: 5; left: clamp(20px, 4vw, 64px); top: clamp(22px, 5vh, 56px); pointer-events: none; }
.arepo__title { margin: 0; font: 400 clamp(40px, 5.2vw, 84px)/.88 'Bowlby One SC', var(--font-display); letter-spacing: .025em; outline: none; }
.arepo__label { margin: 12px 0 0; font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .32em; color: var(--grey); text-transform: uppercase; }
.arepo__label::after { content: ''; display: block; width: 56px; height: 2px; margin-top: 14px; background: var(--red); }
.arepo__label { pointer-events: auto; width: max-content; cursor: default; }   /* hovering it speaks it (sound: cue sicMundus) */
.arepo__head { transition: opacity .3s ease; }
.arepo.is-viewing .arepo__head { opacity: 0; }
body.in-arepo .brand { top: clamp(22px, 5vh, 56px); }
.arepo__fib { position: absolute; z-index: 5; right: clamp(16px, 3.2vw, 40px); top: calc(clamp(22px, 5vh, 56px) + clamp(29px, 2.8vw, 42px));
  width: 23em; margin: 0; text-align: right; white-space: nowrap; pointer-events: none;
  font: 500 clamp(10px, .86vw, 13px)/1 var(--font-grotesk); font-variant-numeric: tabular-nums;
  letter-spacing: .18em; color: rgba(241, 237, 228, .72); text-shadow: 0 1px 8px #000;
  transition: opacity .11s linear, letter-spacing .11s ease; }
.arepo__fib.is-shifting { opacity: .18; letter-spacing: .26em; }
.arepo.is-viewing .arepo__fib { opacity: 0; }
.arepo__hint { position: absolute; z-index: 5; left: 50%; bottom: clamp(20px, 5vh, 48px); transform: translateX(-50%); margin: 0; pointer-events: none;
  font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .36em; color: var(--grey); transition: opacity .6s ease; }
.arepo.has-turned .arepo__hint { opacity: 0; }
.arepo.no-3d .arepo__hint { display: none; }

/* the buttons on the spikes */
.apin { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; pointer-events: auto; will-change: transform; transition: opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.apin__dot { position: absolute; inset: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px rgba(241, 237, 228, .85), 0 0 14px 4px rgba(212, 15, 22, .45);
  transition: transform .3s var(--ease-out); animation: apin-breathe 2.8s ease-in-out infinite; }
@keyframes apin-breathe { 0%, 100% { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px rgba(241, 237, 228, .85), 0 0 10px 2px rgba(212, 15, 22, .35); }
  50% { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px rgba(241, 237, 228, .85), 0 0 18px 6px rgba(212, 15, 22, .55); } }
.apin__n { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font: 600 10px/1 var(--font-grotesk); letter-spacing: .14em;
  color: var(--offwhite); text-shadow: 0 1px 4px #000; }
.apin__cap { position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; opacity: 0; pointer-events: none;
  padding: 7px 10px; background: rgba(10, 10, 10, .85); font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .24em; transition: opacity .25s ease, transform .25s var(--ease-out); }
.apin:hover .apin__dot, .apin:focus-visible .apin__dot { transform: scale(1.3); }
.apin:hover .apin__cap, .apin:focus-visible .apin__cap { opacity: 1; transform: translate(0, -50%); }
.apin:focus-visible { outline: none; }
.apin:focus-visible .apin__dot { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 4px var(--offwhite), 0 0 0 7px var(--red); }
.apin.is-back { opacity: .22; pointer-events: none; }
.apin.is-back .apin__n { opacity: 0; }

/* the viewer */
.aview { position: absolute; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .28s ease; }
.aview[hidden] { display: none; }
.aview.is-open { opacity: 1; }
.aview__shade { position: absolute; inset: 0; background: rgba(4, 4, 4, .55); }
.aview__box { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .9fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; width: min(1100px, 86vw); }
.aview__art { margin: 0; justify-self: center; width: 100%; }
.aview__art img { display: block; width: 100%; max-height: 74vh; object-fit: contain; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.aview__ph { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at 40% 30%, #2a2927, #151413); box-shadow: inset 0 0 0 1px rgba(241, 237, 228, .1), 0 30px 70px rgba(0, 0, 0, .6);
  font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .3em; color: #bdb8b0; }
.aview__ph i { font-style: normal; color: var(--red-light); }
.aview__text p { margin: 0; }
.aview__kind { font: 600 11px/1 var(--font-grotesk); letter-spacing: .34em; color: var(--red-light); }
.aview__title { margin: 16px 0 0; font: 400 clamp(26px, 2.6vw, 42px)/1.02 var(--font-display); letter-spacing: .02em; outline: none; }
.aview__meta { margin-top: 14px !important; font: 500 var(--fs-meta)/1.4 var(--font-grotesk); letter-spacing: .26em; color: #bdb8b0; }
.aview__rule { display: block; width: 48px; height: 2px; margin: 22px 0; background: var(--red); }
.aview__desc { font: 400 var(--fs-body)/1.6 var(--font-body); color: #d6d1c8; max-width: 38ch; }
.aview__close { position: absolute; top: clamp(16px, 3vw, 34px); left: clamp(16px, 3.2vw, 40px); display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 4px; border: 0; background: none; color: var(--offwhite); cursor: pointer; font: 500 var(--fs-meta)/1 var(--font-grotesk); letter-spacing: .3em; }
.aview__close span:first-child { font-size: 22px; letter-spacing: 0; }

@media (max-width: 760px) {
  .aview__box { grid-template-columns: 1fr; width: 100vw; height: 100%; align-content: start; padding: 72px 20px 28px; overflow-y: auto; gap: 18px; }
  .apin__cap { display: none; }
}
.rm .apin__dot { animation: none; }
.rm .arepo, .rm .aview, .rm .arepo__canvas { transition: none; }
.rm .arepo__fog-band, .rm .arepo__stars-layer, .rm .arepo__halo { animation: none; }
.rm .arepo__fib { transition: none; }