/* SATYA live habitat: surfaces (js/habitat-live.js), the terminal's live strip and call, the portal card.
   Uses the host's --mono / --imp / --sans when it has them (satya.bot, Studio), with the same stacks as fallbacks. */

.hl { position: absolute; inset: 0; overflow: hidden; background: #0d0b12; }
.hl__p, .hl__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hl__v { opacity: 0; transition: opacity .12s linear; }
.hl__v.on { opacity: 1; }
.hl.is-still .hl__v { display: none; }
/* stills mode (data saver, or the visitor paused motion): a slow push-in so the frame still breathes */
.hl.is-still .hl__p { animation: hl-push 14s ease-out both; }
@keyframes hl-push { from { transform: scale(1); } to { transform: scale(1.03); } }
/* a camera switch: one scanline flash */
.hl::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 3px), rgba(254, 216, 4, .05); }
.hl.is-cut::after { animation: hl-cut .16s steps(2) 1; }
@keyframes hl-cut { 0% { opacity: 1; } 100% { opacity: 0; } }
/* night-vision tint on empty rooms after dark: the security feed, never on her */
.hl[data-kind="sweep"].is-night .hl__p, .hl[data-kind="sweep"].is-night .hl__v { filter: saturate(.55) hue-rotate(-28deg) brightness(1.05); }

.hl-btn.hl-btn { font: 600 8.5px/1 var(--mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .18em; text-transform: uppercase; color: #E8E6E0;
  background: rgba(10, 10, 11, .72); border: 1px solid rgba(255, 255, 255, .22); padding: 7px 9px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; }
.hl-btn.hl-btn:hover { border-color: #FED804; color: #FED804; }
.hl-btn.hl-btn--y { background: #FED804; border-color: #FED804; color: #0A0A0B; }
.hl-btn.hl-btn--y:hover { color: #0A0A0B; filter: brightness(1.06); }
.hl-btn:focus-visible { outline: 2px solid #FED804; outline-offset: 2px; }

/* ---------- the terminal strip ---------- */
.hab--live .hab__bust, .hab--live .hab__say { display: none; }
.hab--live .hab__win { background: #0d0b12; }
.hl-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font: 600 8px/1 var(--mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .18em; text-transform: uppercase; color: #F4F2EC; }
.hl-hud > span { position: absolute; display: flex; align-items: center; gap: 6px; }
.hl-hud__cam, .hl-hud__time { top: 7px; padding: 4px 6px; background: rgba(10, 10, 11, .62); }
.hl-hud__cam { left: 7px; }
.hl-hud__cam i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px rgba(255, 59, 59, .9); animation: hl-rec 1.6s steps(2) infinite; }
@keyframes hl-rec { 50% { opacity: .25; } }
.hl-hud__time { right: 7px; color: #c9c7c1; }
.hl-hud > .hl-hud__line { left: 9px; bottom: 9px; right: 80px; flex-direction: column; align-items: flex-start; gap: 5px; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
.hl-hud__line i { font-style: normal; color: #FED804; font-size: 7.5px; }
.hl-hud__line b { font: 400 17px/1 var(--imp, Impact, Anton, sans-serif); letter-spacing: .03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hl-hud__ctl { right: 7px; bottom: 7px; pointer-events: auto; opacity: 0; transition: opacity .15s; }
.hab__win:hover .hl-hud__ctl, .hab__win:focus-within .hl-hud__ctl { opacity: 1; }
@media (hover: none) { .hl-hud__ctl { opacity: .85; } .hl-hud__ctl .hl-btn { width: 34px; height: 34px; } .hl-card__btns .hl-btn { min-height: 44px; } }
.hl-hud__ctl .hl-btn { width: 26px; height: 26px; padding: 0; justify-content: center; font-size: 11px; letter-spacing: 0; }
.hl-hud__ctl .hl-btn[hidden] { display: none; }

/* call: ringing → (asleep) → on → ending */
.hl-call { position: absolute; inset: 0; display: none; }
.hl-hud[data-call] .hl-call { display: block; }
.hl-hud[data-call] .hl-hud__cam, .hl-hud[data-call] .hl-hud__ctl { display: none; }
.hab__win:has(.hl-hud[data-call="ringing"]) .hl, .hab__win:has(.hl-hud[data-call="asleep"]) .hl { filter: blur(6px) brightness(.55); transform: scale(1.06); transition: filter .3s, transform .3s; }
.hl-call__ring { position: absolute; left: 50%; top: 42%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #FED804; display: none; }
.hl-hud[data-call="ringing"] .hl-call__ring { display: block; animation: hl-ring 1s ease-out infinite; }
@keyframes hl-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.hl-call__say { position: absolute; left: 0; right: 0; top: 66%; margin: 0; text-align: center; font: 400 15px/1 var(--imp, Impact, Anton, sans-serif); letter-spacing: .04em; color: #fff; display: none; }
.hl-hud[data-call="ringing"] .hl-call__say, .hl-hud[data-call="asleep"] .hl-call__say { display: block; }
.hl-hud[data-call="asleep"] .hl-call__say { top: 30%; }
.hl-call__ask { position: absolute; left: 0; right: 0; top: 56%; display: none; justify-content: center; gap: 8px; pointer-events: auto; }
.hl-hud[data-call="asleep"] .hl-call__ask { display: flex; }
.hl-call__you { position: absolute; right: 7px; top: 30px; width: 40px; height: 34px; display: none; place-items: center; text-align: center; line-height: 1.25; background: #050506;
  border: 1px solid rgba(255, 255, 255, .25); color: #8C8C93; font-size: 6.5px; letter-spacing: .12em; flex-direction: column; justify-content: center; }
.hl-call__tag { position: absolute; left: 7px; top: 7px; display: none; align-items: center; gap: 6px; padding: 4px 6px; background: rgba(254, 216, 4, .92); color: #0A0A0B; }
.hl-call__tag i { width: 6px; height: 6px; border-radius: 50%; background: #0A0A0B; animation: hl-rec 1.2s steps(2) infinite; }
.hl-hud[data-call="on"] .hl-call__you, .hl-hud[data-call="on"] .hl-call__tag, .hl-hud[data-call="ending"] .hl-call__tag { display: flex; }
.hl-hud[data-call="ending"] .hl-call__tag { background: rgba(10, 10, 11, .7); color: #c9c7c1; }
.hl-call__cap { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); margin: 0;
  padding: 5px 8px; background: rgba(5, 5, 6, .78); font: 400 12px/1.35 var(--sans, "Avenir Next", system-ui, sans-serif); letter-spacing: 0; text-transform: none; color: #fff; text-align: center; }
.hl-call__cap:empty { display: none; }
.hl-hud[data-call="on"] ~ * .hl-hud__line, .hl-hud[data-call] .hl-hud__line { display: none; }
.hl-call__bust { position: absolute; left: 50%; bottom: -6px; height: 150%; transform: translateX(-50%); }
.hl-call__bust[hidden] { display: none; }

/* the webcam call: her sprite in front of her own room, softly out of focus */
.hl-cam { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.hl-cam.on { opacity: 1; }
.hl-cam__body { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.hl-cam__sprite { position: absolute; background-repeat: no-repeat; opacity: 0; will-change: opacity; }   /* two layers; the engine crossfades frames */
.hab__win.is-cam .hl { filter: blur(2.5px) brightness(.78) saturate(1.1); transform: scale(1.05); transition: filter .3s, transform .3s; }

/* the collapsed slot: her face from the live shot */
.hab__slot .hl-face { position: absolute; max-width: none; opacity: 0; transition: opacity .4s; }
.hab__slot.is-live .hl-face { opacity: 1; }
.hab__slot.is-live > img:not(.hl-face) { opacity: 0; }

/* ---------- the portal card: a window into her habitat above the collapsed terminal ---------- */
.hl-card { position: fixed; z-index: 1001; width: 300px; background: #0E0E11; color: #F4F2EC; border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7); font-family: var(--sans, "Avenir Next", system-ui, sans-serif); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
  pointer-events: none; }
.hl-card.on { opacity: 1; transform: none; pointer-events: auto; }
.hl-card[hidden] { display: none; }
.hl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; background: #FED804; box-shadow: 0 0 10px rgba(254, 216, 4, .7); }
.hl-card__win { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hl-card__meta { display: flex; justify-content: space-between; padding: 9px 10px 0; font: 600 8px/1 var(--mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .18em; text-transform: uppercase; color: #8C8C93; }
.hl-card__meta b { color: #F4F2EC; font-weight: 600; }
.hl-card__now { margin: 8px 10px 0; font: 400 12px/1.4 var(--sans, "Avenir Next", system-ui, sans-serif); color: #d6d4cd; }
.hl-card__now b { font: 600 8px/1 var(--mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .18em; text-transform: uppercase; color: #FED804; }
.hl-card__ring { display: none; margin: 10px 10px 0; font: 400 20px/1 var(--imp, Impact, Anton, sans-serif); letter-spacing: .03em; text-transform: uppercase; }
.hl-card[data-kind="ring"] .hl-card__ring { display: block; }
.hl-card__fine { display: none; margin: 6px 10px 0; font: 600 7.5px/1.4 var(--mono, ui-monospace, "SF Mono", Menlo, monospace); letter-spacing: .12em; text-transform: uppercase; color: #8C8C93; }
.hl-card[data-kind="ring"] .hl-card__fine { display: block; }
.hl-card[data-kind="ring"] .hl-card__now { display: none; }
.hl-card[data-kind="ring"] { animation: hl-shake 2.2s ease-in-out infinite; }
@keyframes hl-shake { 0%, 70%, 100% { transform: none; } 74% { transform: translateX(-3px) rotate(-.6deg); } 78% { transform: translateX(3px) rotate(.6deg); } 82% { transform: translateX(-2px); } 86% { transform: none; } }
.hl-card__btns { display: flex; gap: 8px; padding: 10px; }
.hl-card__btns .hl-btn { flex: 1; justify-content: center; padding: 10px 9px; }
.hl-card.is-phone { width: min(300px, calc(100vw - 28px)); }

.hl-pipv { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hl.is-still .hl__p, .hl.is-cut::after, .hl-hud__cam i, .hl-call__tag i, .hl-card[data-kind="ring"], .hl-hud[data-call="ringing"] .hl-call__ring { animation: none; }
  .hl__v, .hl-card, .hl-cam { transition: opacity .4s linear; transform: none; }
}