/* Philips Wall TV mini demo (index row 03). Fake monitor + live coded replica. */
.project-showcase__media--walltv { --tv-bezel: clamp(8px, 1.4vw, 14px); }
.project-showcase__media--walltv .project-showcase__media-link { width: 100%; flex-direction: column; }
.phillips-tv { width: min(100%, 620px); margin-inline: auto; filter: drop-shadow(0 24px 36px rgba(0,0,0,0.7)); transition: transform .45s ease, filter .45s ease; }
.project-showcase__media--walltv .project-showcase__media-link:hover .phillips-tv { transform: scale(1.02); filter: drop-shadow(0 28px 42px rgba(0,0,0,0.75)) drop-shadow(0 0 28px rgba(110,7,243,0.4)); }
.phillips-tv__frame { position: relative; display: block; border-radius: 18px; padding: var(--tv-bezel); background: linear-gradient(155deg,#3a3a44 0%,#17171c 45%,#08080b 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 0 0 2px rgba(0,0,0,0.55); }
.phillips-tv__frame::before { content: ""; position: absolute; top: calc(var(--tv-bezel) * 0.32); left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: #05070c; box-shadow: inset 0 0 0 1px rgba(130,150,200,0.5), 0 0 6px rgba(110,7,243,0.6); }
.phillips-tv__screen { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: calc(var(--tv-bezel) * 0.6); overflow: hidden; background: #fff; isolation: isolate; }
.phillips-tv__screen::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 22%, transparent 35%); }
.mini-wall { position: absolute; inset: 0; display: block; pointer-events: none; user-select: none; font-family: "Plus Jakarta Sans", sans-serif; background: #fff; }
.mini-grid { position: absolute; top: 14px; left: 14px; right: 14px; bottom: 12px; display: block; }
.mini-grid::before, .mini-grid::after { content: ""; position: absolute; background: rgba(15,23,42,0.28); }
.mini-grid::before { left: 50%; top: 18px; bottom: 18px; width: 1px; transform: translateX(-50%); }
.mini-grid::after { top: 50%; left: 28px; right: 28px; height: 1px; transform: translateY(-50%); }
.mini-axis { position: absolute; font-size: 5.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a2e; text-shadow: none; white-space: nowrap; }
.mini-axis--t { top: -8px; left: 50%; transform: translateX(-50%); }
.mini-axis--b { bottom: -8px; left: 50%; transform: translateX(-50%); }
.mini-axis--l { left: -6px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.mini-axis--r { right: -6px; top: 50%; transform: translateY(-50%) rotate(90deg); }
/* Bubbles are pinned to the grid — no float/bob animation (the old miniFloat
   keyframes made the clusters drift up and down, which read as jitter). */
.mini-bubble { position: absolute; border-radius: 50%; transform: translate(-50%,-50%); border: 1.5px solid rgba(255,255,255,0.5); box-shadow: 0 2px 8px rgba(15,23,42,0.25), inset 0 0 12px rgba(255,255,255,0.15); transition: box-shadow .5s ease, opacity .5s ease; }
.mini-bubble.is-spot { box-shadow: 0 0 0 2px #6e07f3, 0 0 16px rgba(110,7,243,0.55), 0 4px 14px rgba(15,23,42,0.25); z-index: 6 !important; }
.mini-bubble.is-spot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(110,7,243,0.8); animation: tvPing 1.1s ease-out infinite; }
.mini-bubble.is-your { box-shadow: 0 0 0 3px #000, 0 0 16px rgba(0,0,0,0.6), 0 4px 14px rgba(15,23,42,0.35); }
.mini-bubble__you { position: absolute; top: -8px; right: -8px; font-size: clamp(4px,0.8vw,6px); font-weight: 700; color: #fff; background: #1e1b4b; border-radius: 999px; padding: 1px 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(255,255,255,0.35); }
@keyframes tvPing { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.mini-fan { position: absolute; inset: 0; z-index: 10; display: block; background: rgba(255,255,255,0.88); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s ease; }
.mini-fan.is-open { opacity: 1; visibility: visible; }
/* Question circle no longer used; question lives on each card. */
.mini-question { display: none; }
.mini-cards { position: absolute; left: 0; right: 0; bottom: 14px; height: 170px; display: block; }
/* Card — mirrors the parallax .answer-card: portrait pastel rounded card with a
   top-center dot, the question, the answer body and a right-pill badge
   (YOU / number). The visitor's card (card 0) shows a "YOU" badge with a
   black emphasis ring and dismisses once viewed. Wider than before to match
   the parallax proportion better. */
.mini-card { position: absolute; left: 50%; bottom: 0; width: 104px; height: 128px; margin-left: -52px; border-radius: 11px; border: 1.5px solid rgba(255,255,255,0.85); box-shadow: 0 6px 14px rgba(15,23,42,0.22); display: flex; flex-direction: column; align-items: stretch; padding: 0; color: #1e1b4b; font-family: "Plus Jakarta Sans", sans-serif; font-size: 5.8px; line-height: 1.35; text-align: center; overflow: hidden; transition: transform .55s cubic-bezier(0.175,0.885,0.32,1.275), opacity .4s ease, box-shadow .4s ease; opacity: 0; }
.mini-fan.is-open .mini-card { opacity: 1; }
.mini-card.is-focus { box-shadow: 0 14px 26px rgba(15,23,42,0.35), 0 0 18px rgba(110,7,243,0.45); border-color: #fff; z-index: 30 !important; }
/* Your card — black emphasis ring around the YOU badge (always visible while open). */
.mini-card.mini-card--you { box-shadow: 0 0 0 2px #000, 0 6px 14px rgba(15,23,42,0.22); border-color: #fff; }
.mini-card__dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,0.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.12); z-index: 2; pointer-events: none; }
.mini-card__badge { position: absolute; top: 4px; right: 4px; font-size: 5px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55); border-radius: 999px; padding: 1px 4px; z-index: 3; pointer-events: none; }
.mini-card__badge.is-you { background: #1e1b4b; color: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(255,255,255,0.35); }
.mini-card__question { position: relative; z-index: 2; color: #1e1b4b; font-weight: 600; padding: 14px 4px 2px; line-height: 1.25; }
.mini-card__answer { position: relative; z-index: 2; color: #1e1b4b; font-weight: 400; padding: 0 4px 10px; line-height: 1.35; flex: 1; overflow: hidden; }

/* Footer counter pill — mirrors the parallax .card-footer-counter */
.mini-card-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: rgba(17, 24, 39, 0.9);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}
.mini-card-counter.active { opacity: 1; }
.phillips-tv__stand { display: flex; flex-direction: column; align-items: center; }
.phillips-tv__neck { display: block; width: clamp(56px, 12%, 90px); height: 22px; background: linear-gradient(180deg,#2c2c34,#101014); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0% 100%); }
.phillips-tv__base { display: block; width: clamp(180px, 46%, 300px); height: 10px; border-radius: 999px; background: linear-gradient(180deg,#3d3d48,#0c0c10); box-shadow: 0 10px 22px rgba(0,0,0,0.6); }
@media (max-width: 768px) { .phillips-tv { width: min(100%, 380px); } }
@media (prefers-reduced-motion: reduce) { .mini-bubble.is-spot::after { animation: none !important; } .mini-card, .mini-question, .mini-fan { transition: none !important; } }