/* Portal hero (js/portal-hero.mjs): full-resolution 360 + glass portals, always in motion. */

/* No play/pause anywhere: the show always runs, the visitor can still take over by dragging. */
#Hero[data-portal] .hp-play,#Hero[data-portal] .hp-hint{display:none!important}
[data-portal] .ys-motion-toggle,.demo-hero .ys-motion-toggle{display:none!important}
.hero-demo .demo-controls button[aria-pressed]{display:none!important}

/* Homepage: the 360 is visible from the start (not only after Explore). */
#Hero[data-portal][data-ready=true] .hp-viewer{opacity:1}
#Hero[data-portal] .ph-orbs{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
[data-portal] .ph-warp{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s ease;
  background:radial-gradient(circle at 50% 50%,#e9fff4ee 0%,#9fe3cfcc 22%,#2f8f8ccc 55%,#071716 92%)}
#Hero[data-portal] .ph-labels{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#Hero[data-portal] .ph-pin{position:absolute;left:0;top:0;will-change:transform;transition:opacity .5s}
#Hero[data-portal] .ph-pin.is-hidden{opacity:0}
#Hero[data-portal] .ph-pin.is-hidden .ph-orb{pointer-events:none}
#Hero[data-portal] .ph-orb{position:relative;display:block;transform:translateX(-50%)!important;pointer-events:auto;margin:0;padding:0!important;min-height:0!important;
  background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;color:#fff!important}
#Hero[data-portal] .ph-orb-text{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 13px 8px;border-radius:12px;background:#051613cc;border:1px solid #ffffff33;
  backdrop-filter:blur(10px);font:500 13px/1.15 Outfit,Arial,sans-serif;white-space:nowrap;transition:background .25s,border-color .25s,transform .25s}
#Hero[data-portal] .ph-orb-text b{font:500 10px/1 "JetBrains Mono",ui-monospace,Consolas,monospace;color:#99cc33;letter-spacing:.12em}
#Hero[data-portal] .ph-orb-text small{font-size:11px;color:#bfe9d2;opacity:.85}
#Hero[data-portal] .ph-orb:hover .ph-orb-text,#Hero[data-portal] .ph-orb:focus-visible .ph-orb-text{background:#174735f0;border-color:#b0e0c4;transform:translateY(-2px)}
#Hero[data-portal] .ph-orb:focus-visible{outline:none!important}
#Hero[data-portal] .ph-orb:focus-visible .ph-orb-text{outline:3px solid #67c8c9;outline-offset:3px}

/* Case studies: a slowly turning 360 behind the copy; the interactive card stays the hand-off. */
.ph-case{position:relative!important;isolation:isolate;overflow:hidden}
html body .ph-case.ph-case>.ph-bg{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important;z-index:0!important;pointer-events:none;grid-area:auto!important}
.ph-case>.container,.ph-case>.hero-demo,.ph-case>.demo-source{position:relative;z-index:2}
.ph-case .ph-bg-stage{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.ph-case[data-portal-state=live] .ph-bg-stage{opacity:1}
.ph-case .ph-bg-stage .pnlm-load-box,.ph-case .ph-bg-stage .pnlm-about-msg,.ph-case .ph-bg-stage .pnlm-controls-container{display:none!important}
.ph-case .ph-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#041411e8 0%,#041411b0 32%,#04141155 58%,#04141122 78%),linear-gradient(180deg,#041411aa 0%,transparent 24%,transparent 70%,#041411d0 100%)}
html body .ph-case[data-portal-state=live]>.ys-brand-tunnel{display:none!important}
.ph-case .ph-enter{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:13px 20px;border-radius:999px;cursor:pointer;
  font:500 14px/1 Outfit,Arial,sans-serif;color:#fff;background:#071916b3;border:1px solid #ffffff55;backdrop-filter:blur(12px);transition:background .25s,border-color .25s,transform .25s}
.ph-case .ph-enter:hover{background:#174735;border-color:#b0e0c4;transform:translateY(-1px)}
.ph-case .ph-enter:focus-visible{outline:3px solid #67c8c9;outline-offset:4px}
.ph-case .ph-enter-dot{width:8px;height:8px;border-radius:50%;background:#99cc33;animation:ph-pulse 2s infinite}
@keyframes ph-pulse{0%{box-shadow:0 0 0 0 #99cc3399}70%{box-shadow:0 0 0 9px #99cc3300}100%{box-shadow:0 0 0 0 #99cc3300}}
@media(max-width:900px){.ph-case .ph-bg::after{background:linear-gradient(180deg,#041411c0 0%,#04141177 40%,#041411e0 100%)}}