/* Photo Illusions — Holo-Wall (media navigator) */
/* ==========================================================================
   HOLO-WALL
   ========================================================================== */
.holowall { position: relative; user-select: none; -webkit-user-select: none; }
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 18px; padding-inline: 8px; }
.hw-chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(10, 16, 40, .6);
  font: 500 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.hw-chip:hover { color: var(--ink); border-color: var(--cyan); }
/* phones, tablets and any touch screen: 44px tap targets */
@media (max-width: 860px), (pointer: coarse) {
  .hw-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }
}
.hw-chip.is-on { color: #041018; background: linear-gradient(92deg, var(--cyan), #8a7dff); border-color: transparent; box-shadow: 0 0 18px rgba(41,231,255,.5), 0 0 44px rgba(41,231,255,.22); }

.hw-viewport {
  position: relative; height: var(--hw-h, 720px);
  perspective: var(--hw-persp, 1000px); perspective-origin: 50% 40%;
  overflow: hidden; cursor: grab; touch-action: pan-y; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.hw-viewport.is-drag { cursor: grabbing; }
.hw-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); border-radius: 18px; }
.hw-stage {
  position: absolute; left: 50%; top: 41%; width: 0; height: 0;
  transform-style: preserve-3d; z-index: 2;
  animation: hw-bob 7s ease-in-out infinite;
}
@keyframes hw-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }

.hw-tile {
  position: absolute; left: 0; top: 0; width: var(--hw-tw); height: var(--hw-th);
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 10px; transform-origin: 50% 50%;
  transition: transform .45s var(--ease), opacity .3s, box-shadow .3s, filter .3s;
  will-change: transform;
  backface-visibility: hidden;
}
.holowall .hw-viewport.is-drag .hw-tile { transition: opacity .3s, box-shadow .3s; }
.hw-media {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: #0a1028;
  border: 1px solid rgba(143, 243, 255, .55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 14px rgba(41, 231, 255, .35), inset 0 0 18px rgba(41, 231, 255, .15);
}
.hw-media img, .hw-media video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hw-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.hw-media.is-playing video { opacity: 1; }
.hw-media::after { /* holographic scanlines + tint */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, rgba(41,231,255,.10), transparent 40%, rgba(138,92,255,.12));
  mix-blend-mode: screen;
}
.hw-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 45%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--ease);
}
.hw-tile.is-hot .hw-glare { background-position: -40% 0; }
.hw-tile.is-hot .hw-media { border-color: #8ff3ff; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 26px rgba(41,231,255,.75), 0 0 70px rgba(138,92,255,.35); }
.hw-cap {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 9px;
  padding: 26px 10px 9px; border-radius: 0 0 10px 10px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(3, 6, 20, .88) 55%);
  pointer-events: none;
}
.hw-type {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--cyan); color: #8ff3ff; background: rgba(41,231,255,.12); box-shadow: 0 0 12px rgba(41,231,255,.45);
}
.hw-type svg { width: 15px; height: 15px; }
.hw-type[data-type="link"] { border-color: var(--violet); color: #dcb8ff; background: rgba(138,92,255,.14); box-shadow: 0 0 12px rgba(138,92,255,.45); }
.hw-type[data-type="image"] { border-color: var(--gold); color: #ffe3a3; background: rgba(246,198,107,.1); box-shadow: 0 0 12px rgba(246,198,107,.35); }
.hw-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hw-txt strong { font: 600 13px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-txt em { font: 400 11px/1.3 var(--sans); font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* materialize when the wall (re)loads */
.hw-materialize .hw-media { animation: hw-in .9s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes hw-in {
  0% { opacity: 0; filter: brightness(3) saturate(0) blur(6px); clip-path: inset(48% 0 48% 0); }
  45% { opacity: 1; clip-path: inset(0 0 0 0); }
  60% { filter: brightness(1.8) saturate(.6) blur(0); }
  100% { opacity: 1; filter: none; }
}

/* podium + projector beam */
.hw-podium { position: absolute; left: 50%; bottom: 0; width: min(560px, 80%); transform: translateX(-50%); z-index: 1; pointer-events: none; }
.hw-base { width: 100%; position: relative; z-index: 2; }
.hw-beam {
  position: absolute; left: 50%; bottom: 56%; width: 150%; height: calc(var(--hw-h, 720px) * .9); transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(143,243,255,.36), rgba(41,231,255,.12) 45%, transparent 75%);
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
  filter: blur(2px); mix-blend-mode: screen; animation: hw-flicker 5s steps(1) infinite;
}
.hw-rays {
  position: absolute; left: 50%; bottom: 56%; width: 120%; height: calc(var(--hw-h, 720px) * .7); transform: translateX(-50%);
  background: repeating-conic-gradient(from 180deg at 50% 100%, rgba(143,243,255,.13) 0deg 1.2deg, transparent 1.2deg 7deg);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%); mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0, 0 0); mix-blend-mode: screen; opacity: .8;
}
.hw-floor { position: absolute; left: 50%; bottom: -10%; width: 140%; height: 40%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 30%, rgba(41,231,255,.22), transparent 65%); }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 48% { opacity: 1; } 73% { opacity: .9; } 74% { opacity: 1; } }

.hw-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.hw-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: rgba(10, 16, 40, .7); color: #8ff3ff; transition: all .2s; }
.hw-arrow:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(41,231,255,.5), 0 0 44px rgba(41,231,255,.22); }
.hw-arrow svg { width: 20px; height: 20px; }
.hw-hint { font: 500 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .hw-stage, .hw-beam { animation: none; }
  .hw-materialize .hw-media { animation: none; }
  .hw-tile { transition: opacity .2s; }
}


/* sound badge on video panels that carry audio (hover preview stays silent; click plays with sound) */
.hw-sound {
  flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: #ffe9a8; background: rgba(246, 198, 107, .14); border: 1px solid rgba(246, 198, 107, .6);
  box-shadow: 0 0 10px rgba(246, 198, 107, .35);
}
.hw-sound svg { width: 14px; height: 14px; }
.hw-tile.is-hot .hw-sound { animation: hw-sound-pulse 1.2s ease-in-out infinite; }
@keyframes hw-sound-pulse { 50% { box-shadow: 0 0 18px rgba(246, 198, 107, .8); } }
@media (prefers-reduced-motion: reduce) { .hw-tile.is-hot .hw-sound { animation: none; } }