/* =========================================================
   Section: Holo-Wall (#holowall)
   Section-level styling only. The wall component itself lives in
   assets/css/lib/holowall.css (.holowall / .hw-*).
   ========================================================= */
section#holowall {
  /* the component adds .holowall to its mount; undo its no-select on the section copy */
  -webkit-user-select: text; user-select: text;
  isolation: isolate; overflow: clip;
  padding-bottom: clamp(64px, 8vw, 110px);
}

/* ---------- backdrop: tech-lab corridor under a heavy dark scrim ---------- */
.holowall-bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 70%, rgba(41, 231, 255, .10), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, rgba(3, 5, 13, .55) 22%, rgba(3, 5, 13, .70) 62%, var(--bg) 100%);
}
#holowall.is-near .holowall-bg {
  background:
    radial-gradient(60% 46% at 50% 72%, rgba(41, 231, 255, .12), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, transparent 30%, rgba(3, 5, 13, .85) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(3, 5, 13, .66) 20%, rgba(3, 5, 13, .74) 60%, var(--bg) 100%),
    url("../img/brand/bg-02.jpg") 50% 58% / cover no-repeat;
}

.holowall-head { position: relative; z-index: 3; }

/* ---------- stage: the wall + podium + flanking HUD ---------- */
.holowall-stage {
  position: relative;
  width: 100%;
  margin: clamp(26px, 3.4vw, 46px) auto 0;
}
.holowall-mount { position: relative; z-index: 2; }

/* reserve room before the component mounts (avoids a jump) */
.holowall-mount:not(.holowall) { min-height: calc(2.61 * clamp(150px, 17vw, 260px) + 330px); }
.holowall-skeleton {
  position: absolute; inset: 60px 0 54px; display: grid; place-items: end center; pointer-events: none;
}
.holowall-skeleton span {
  width: min(520px, 76%); height: 90px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(143, 243, 255, .28), rgba(41, 231, 255, .06) 60%, transparent 72%);
  filter: blur(4px);
}

/* chips get a touch more air over the backdrop */
#holowall .hw-chips { position: relative; z-index: 3; padding-inline: var(--gutter); }
#holowall .hw-chip { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#holowall .hw-nav { position: relative; z-index: 3; }
/* the component's idle bob + beam flicker rest while the section is off-screen or paused */
#holowall:not(.is-live) .hw-stage,
#holowall:not(.is-live) .hw-beam,
#holowall.is-paused .hw-stage,
#holowall.is-paused .hw-beam { animation-play-state: paused; }

/* ---------- Pause / Play (added by holowall.js between the rotate arrows) ---------- */
#holowall .hw-nav .hw-arrow:first-child { order: 1; }
#holowall .holowall-pause { order: 2; }
#holowall .hw-nav .hw-arrow:last-child { order: 3; }
#holowall .hw-hint { order: 4; }
.holowall-pause {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(10, 16, 40, .7); color: #8ff3ff;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.holowall-pause .ico { width: 16px; height: 16px; }
.holowall-pause:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(41, 231, 255, .5), 0 0 44px rgba(41, 231, 255, .22); }
.holowall-pause:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 50%; }
#holowall.is-paused .holowall-pause { color: #041018; background: linear-gradient(92deg, var(--cyan), #8a7dff); border-color: transparent; }

/* ---------- panels that have not loaded yet: lit glass with a soft sweep, never a dead screen ---------- */
#holowall .hw-media {
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(143, 243, 255, .10), transparent 70%),
    linear-gradient(160deg, rgba(41, 231, 255, .14), rgba(138, 92, 255, .20)),
    #0a1028;
}
#holowall .hw-media:not(.holowall-loaded)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(143, 243, 255, .16) 45%, rgba(255, 255, 255, .22) 50%, rgba(143, 243, 255, .16) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: holowall-shimmer 1.5s var(--ease) infinite;
}
@keyframes holowall-shimmer { to { transform: translateX(100%); } }
#holowall:not(.is-live) .hw-media:not(.holowall-loaded)::before { animation-play-state: paused; } /* off-screen / hidden tab */
#holowall .hw-media img { opacity: 1; transition: opacity .35s; }
#holowall .hw-media:not(.holowall-loaded) img { opacity: 0; }

/* floor reflection + horizon line under the projector */
.holowall-stage::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; bottom: 30px; width: min(1100px, 120%); height: 150px; transform: translateX(-50%);
  background:
    radial-gradient(50% 40% at 50% 50%, rgba(41, 231, 255, .22), transparent 70%),
    radial-gradient(30% 22% at 50% 50%, rgba(138, 92, 255, .25), transparent 75%);
  filter: blur(6px);
}
.holowall-stage::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 6%; right: 6%; bottom: 96px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(41, 231, 255, .4) 30%, rgba(255, 63, 208, .35) 70%, transparent);
  box-shadow: 0 0 14px rgba(41, 231, 255, .45);
  opacity: .55;
}

/* rising light motes over the projector (paused off-screen / reduced motion) */
.holowall-sparks {
  position: absolute; z-index: 1; left: 50%; bottom: 120px; width: min(420px, 60%); height: 62%;
  transform: translateX(-50%); pointer-events: none;
}
.holowall-sparks i {
  position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #bdf8ff; box-shadow: 0 0 8px 1px rgba(41, 231, 255, .9);
  opacity: 0;
  animation: holowall-rise 6s linear infinite; animation-play-state: paused;
}
.holowall-sparks i:nth-child(1)  { left: 12%; animation-delay: -.4s; }
.holowall-sparks i:nth-child(2)  { left: 22%; animation-delay: -2.1s; animation-duration: 7s; }
.holowall-sparks i:nth-child(3)  { left: 31%; animation-delay: -3.6s; }
.holowall-sparks i:nth-child(4)  { left: 40%; animation-delay: -1.2s; animation-duration: 5.4s; background: #e8d4ff; box-shadow: 0 0 8px 1px rgba(138, 92, 255, .9); }
.holowall-sparks i:nth-child(5)  { left: 47%; animation-delay: -4.4s; }
.holowall-sparks i:nth-child(6)  { left: 53%; animation-delay: -.9s; animation-duration: 6.6s; }
.holowall-sparks i:nth-child(7)  { left: 59%; animation-delay: -2.8s; background: #ffd6f5; box-shadow: 0 0 8px 1px rgba(255, 63, 208, .85); }
.holowall-sparks i:nth-child(8)  { left: 66%; animation-delay: -5.2s; animation-duration: 7.4s; }
.holowall-sparks i:nth-child(9)  { left: 73%; animation-delay: -1.7s; }
.holowall-sparks i:nth-child(10) { left: 81%; animation-delay: -3.1s; animation-duration: 5.8s; background: #e8d4ff; box-shadow: 0 0 8px 1px rgba(138, 92, 255, .9); }
.holowall-sparks i:nth-child(11) { left: 88%; animation-delay: -4.9s; }
.holowall-sparks i:nth-child(12) { left: 44%; animation-delay: -5.7s; animation-duration: 8s; }
#holowall.is-live .holowall-sparks i { animation-play-state: running; }
#holowall.is-live.is-paused .holowall-sparks i { animation-play-state: paused; }
@keyframes holowall-rise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { transform: translate3d(var(--dx, 14px), -420px, 0) scale(.4); opacity: 0; }
}
.holowall-sparks i:nth-child(even) { --dx: -18px; }

/* ---------- flanking HUD readouts (wide screens only) ---------- */
.holowall-hud {
  position: absolute; z-index: 3; bottom: 112px;
  display: none; flex-direction: column; gap: 6px;
  padding: 12px 16px 13px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(16, 24, 58, .62), rgba(8, 12, 30, .5));
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  pointer-events: none;
}
.holowall-hud b { font-family: var(--sans); font-size: 15px; letter-spacing: .01em; text-transform: none; color: var(--ink); font-weight: 650; }
.holowall-hud-l { left: max(var(--gutter), calc(50% - 760px)); }
.holowall-hud-r { right: max(var(--gutter), calc(50% - 760px)); text-align: right; align-items: flex-end; }
.holowall-hud-bar { display: block; width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.holowall-hud-bar i { display: block; height: 100%; width: 40%; background: var(--grad); box-shadow: 0 0 10px var(--cyan); animation: holowall-scan 3.2s var(--ease) infinite alternate; animation-play-state: paused; }
#holowall.is-live .holowall-hud-bar i { animation-play-state: running; }
#holowall.is-live.is-paused .holowall-hud-bar i { animation-play-state: paused; }
@keyframes holowall-scan { from { transform: translateX(-10%); } to { transform: translateX(160%); } }
.holowall-hud-dots { display: inline-flex; gap: 5px; }
.holowall-hud-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.holowall-hud-dots i:nth-child(2) { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.holowall-hud-dots i:nth-child(3) { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
@media (min-width: 1180px) { .holowall-hud { display: flex; } }

.holowall-noscript { text-align: center; color: var(--muted); padding: 40px var(--gutter); }
.holowall-noscript a { color: var(--cyan); }

/* ---------- footer: what's on the wall + CTAs ---------- */
.holowall-foot {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap;
  margin-top: clamp(26px, 3vw, 40px); padding-top: 26px;
  border-top: 1px solid var(--line);
}
.holowall-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.holowall-stats li { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: 14px; }
.holowall-stats b {
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.holowall-cta { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 760px) {
  .holowall-mount:not(.holowall) { min-height: calc(1.74 * clamp(150px, 42vw, 260px) + 250px); }
  /* one swipeable chip row instead of three wrapped rows */
  #holowall .hw-chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); margin-bottom: 12px; padding: 2px var(--gutter) 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
  }
  #holowall .hw-chips::-webkit-scrollbar { display: none; }
  #holowall .hw-chip { flex: none; scroll-snap-align: start; }
  #holowall .hw-nav { padding-inline: var(--gutter); gap: 12px; }
  #holowall .hw-nav { flex-wrap: wrap; row-gap: 10px; }
  #holowall .hw-hint { flex: 1 0 100%; text-align: center; font-size: 10.5px; letter-spacing: .12em; line-height: 1.5; }
  .holowall-stage::before { bottom: 84px; }
  .holowall-stage::after { bottom: 34px; height: 110px; }
  .holowall-sparks { bottom: 100px; height: 54%; }
  .holowall-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .holowall-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .holowall-stats li { flex-direction: column; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; }
  .holowall-cta { flex-direction: column; }
  .holowall-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .holowall-sparks { display: none; }
  .holowall-hud-bar i { animation: none; }
  #holowall .hw-media:not(.holowall-loaded)::before { animation: none; transform: none; opacity: .5; }
}
html.reduced .holowall-sparks { display: none; }

/* ---- side arrows over the wall (Oct 28: half see-through, full on hover); the bottom row keeps Pause + hint ---- */
#holowall .hw-side { position: absolute; top: 46%; z-index: 1200; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; border: 1px solid var(--line-2); background: rgba(10, 16, 40, .55); color: var(--ink); opacity: .5;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .2s var(--ease), transform .2s var(--ease); left: 7.5%; }  /* inside the viewport's 7% edge fade */
#holowall .hw-side.next { left: auto; right: 7.5%; }
#holowall .hw-side.next svg { transform: scaleX(-1); }
#holowall .hw-side svg { width: 24px; height: 24px; }
#holowall .hw-side:hover { opacity: 1; transform: scale(1.06); }
#holowall .hw-side:active { transform: scale(.94); }
#holowall .hw-nav .hw-arrow { display: none; }
@media (max-width: 759px) { #holowall .hw-side { width: 44px; height: 44px; margin-top: -22px; } #holowall .hw-side svg { width: 20px; height: 20px; } }