/**
 * Virtual operator hero — living orb + hands-on demo console.
 * Loaded only on page-virtual-operator.php.
 */

.op-hero {
	--op-ink: #040b18;
	--op-text: #f3f8ff;
	--op-muted: #a7bbd1;
	--op-line: rgba(160, 200, 235, .14);
	--op-teal: #5eead4;
	--op-sky: #7dd3fc;
	--op-violet: #b4a2ff;
	--op-glass: rgba(10, 24, 44, .58);
	--op-ease: cubic-bezier(.22, 1, .36, 1);
	--op-spring: cubic-bezier(.34, 1.56, .64, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(100svh - 77px, 1080px);
	display: flex;
	align-items: center;
	padding-block: clamp(44px, 5vw, 80px);
	color: var(--op-text);
	background: var(--op-ink);
}
.service-page .op-hero::before,
.service-page .op-hero::after { display: none; }

/* ---------- Atmosphere ---------- */
.op-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 72% 38%, #0c2340 0%, #06142a 42%, var(--op-ink) 78%); }
.op-hero__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .0; animation: op-fade 1.6s var(--op-ease) .1s forwards; }
.op-hero__glow--a { top: -18%; right: 4%; width: min(60vw, 760px); aspect-ratio: 1; background: conic-gradient(from 200deg, rgba(94, 234, 212, .28), rgba(125, 211, 252, .08), rgba(180, 162, 255, .26), rgba(94, 234, 212, .28)); animation: op-fade 1.6s var(--op-ease) .1s forwards, op-spin 28s linear infinite; }
.op-hero__glow--b { left: -12%; bottom: -30%; width: min(48vw, 560px); aspect-ratio: 1; background: radial-gradient(circle, rgba(35, 119, 255, .3), transparent 70%); }
.op-hero__grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(125, 211, 252, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 10%, transparent 70%); animation: op-grid 18s linear infinite; }
.op-hero__field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Layout ---------- */
.op-hero__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); align-items: center; gap: clamp(36px, 5vw, 90px); }
.op-hero__copy { position: relative; }

.op-hero__back { display: flex; width: fit-content; margin-bottom: 30px; color: var(--op-muted); transition: color .2s; }
.op-hero__back:hover { color: #fff; }

.op-hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 7px 11px; border: 1px solid rgba(125, 211, 252, .22); border-radius: 999px; color: #c9d9ea; background: rgba(6, 20, 40, .6); font-size: .74rem; font-weight: 650; backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); animation: op-rise .9s var(--op-ease) .15s both; }
.op-hero__badge i { width: 8px; height: 8px; border-radius: 50%; background: #3ee0a6; box-shadow: 0 0 0 0 rgba(62, 224, 166, .5); animation: op-ping 1.8s ease-out infinite; }
.op-hero__badge span { padding-right: 10px; border-right: 1px solid rgba(125, 211, 252, .22); color: var(--op-teal); font: 750 .64rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; text-transform: uppercase; }
.op-hero__badge b { font-weight: 650; font-variant-numeric: tabular-nums; }

.service-page .op-hero .op-hero__title { max-width: 12.5ch; margin: 26px 0 24px; color: #fff; font-size: clamp(2.7rem, 5.2vw, 5.1rem); line-height: 1.02; letter-spacing: -.045em; }
.op-word { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.op-word > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; animation: op-word .95s var(--op-ease) both; animation-delay: calc(.35s + var(--i) * 75ms); }
.op-word--accent > span { color: var(--op-teal); background: linear-gradient(95deg, #a7f3e4 0%, var(--op-sky) 35%, var(--op-violet) 70%, #a7f3e4 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: op-word .95s var(--op-ease) both, op-shimmer 7s linear 1.6s infinite; animation-delay: calc(.35s + var(--i) * 75ms), 1.6s; }

.op-hero__lead { max-width: 40rem; color: var(--op-muted); font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.72; animation: op-rise 1s var(--op-ease) .95s both; }

.op-hero__actions { margin-top: 32px; animation: op-rise 1s var(--op-ease) 1.1s both; }
.op-hero .button--primary { min-height: 54px; padding-inline: 26px; background: linear-gradient(135deg, #2c86ff, #1767ec) !important; border-color: rgba(125, 211, 252, .5) !important; box-shadow: 0 14px 36px rgba(35, 119, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .25); }
.op-hero .button--ghost { min-height: 54px; gap: 10px; color: #eef6ff; border-color: rgba(197, 220, 241, .28); background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); }
.op-hero .button--ghost:hover { color: #fff; border-color: rgba(94, 234, 212, .6); background: rgba(94, 234, 212, .12); }
.op-hero__talk-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.op-hero__talk-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--op-teal); transform-origin: center; animation: op-eq 1s ease-in-out infinite; }
.op-hero__talk-wave i:nth-child(2) { animation-delay: .15s; }
.op-hero__talk-wave i:nth-child(3) { animation-delay: .3s; }
.op-hero__talk-wave i:nth-child(4) { animation-delay: .45s; }

.op-hero__channels { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: 40rem; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--op-line); list-style: none; color: #c3d3e4; font-size: .84rem; font-weight: 650; animation: op-rise 1s var(--op-ease) 1.25s both; }
.op-hero__channels li { display: inline-flex; align-items: center; gap: 8px; }
.op-hero__channels svg { width: 17px; height: 17px; fill: none; stroke: var(--op-teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Stage: orb ---------- */
.op-hero__stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.op-hero__orb { position: relative; width: min(300px, 74vw); aspect-ratio: 1; display: grid; place-items: end center; }
.op-hero__halo { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid rgba(125, 211, 252, .07); animation: op-halo 4.8s ease-in-out infinite; }
.op-hero__halo::after { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(180, 162, 255, .16); content: ""; animation: op-spin 40s linear infinite; }
.op-hero__state { position: relative; z-index: 3; transform: translateY(-6px); display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border: 1px solid rgba(125, 211, 252, .2); border-radius: 999px; color: #d8e6f5; background: rgba(4, 14, 30, .72); font: 700 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); transition: border-color .3s, color .3s; }
.op-hero__state::before { width: 6px; height: 6px; border-radius: 50%; background: #3ee0a6; content: ""; transition: background .3s; }
.op-hero[data-state="listening"] .op-hero__state { border-color: rgba(125, 211, 252, .55); color: #fff; }
.op-hero[data-state="listening"] .op-hero__state::before { background: var(--op-sky); animation: op-blink .6s steps(2) infinite; }
.op-hero[data-state="thinking"] .op-hero__state { border-color: rgba(180, 162, 255, .6); }
.op-hero[data-state="thinking"] .op-hero__state::before { background: var(--op-violet); animation: op-blink .35s steps(2) infinite; }
.op-hero[data-state="speaking"] .op-hero__state { border-color: rgba(94, 234, 212, .6); color: #fff; }
.op-hero[data-state="speaking"] .op-hero__state::before { background: var(--op-teal); box-shadow: 0 0 10px var(--op-teal); }

.op-hero__tally { display: grid; justify-items: end; gap: 3px; margin: 0 0 0 auto; text-align: right; white-space: nowrap; color: #8fa6bf; font: 650 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; opacity: 0; animation: op-fade .8s ease 1.8s forwards; }
.op-hero__tally b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.op-hero__tally-live { color: var(--op-teal); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.op-hero__tally-live::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #3ee0a6; content: ""; vertical-align: 1px; animation: op-blink 1.4s steps(2) infinite; }
.op-hero__tally .is-bump { display: inline-block; animation: op-bump .5s var(--op-spring); }

/* Incoming request toasts that fly into the orb */
.op-toast { position: absolute; z-index: 3; top: 0; left: 0; display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 7px 11px 7px 8px; border: 1px solid rgba(125, 211, 252, .22); border-radius: 12px; color: #e4eefa; background: rgba(8, 22, 42, .82); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-size: .74rem; font-weight: 600; line-height: 1.25; white-space: nowrap; pointer-events: none; backdrop-filter: blur(8px); will-change: transform, opacity; }
.op-toast small { padding: 2px 6px; border-radius: 6px; color: #04111f; background: var(--op-teal); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.op-toast[data-channel="1"] small { background: var(--op-sky); }
.op-toast[data-channel="2"] small { background: #5ee08e; }
.op-toast[data-channel="3"] small { background: var(--op-violet); }

/* ---------- Console ---------- */
.op-console { position: relative; z-index: 2; width: 100%; margin-top: 14px; overflow: hidden; border: 1px solid rgba(160, 205, 240, .18); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 32, 58, .72), rgba(6, 16, 32, .82)); box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: op-console 1.1s var(--op-ease) .9s both; }
.op-console::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; content: ""; background: linear-gradient(140deg, rgba(94, 234, 212, .55), transparent 30%, transparent 70%, rgba(180, 162, 255, .5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; }
.op-console__head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; line-height: 1.3; border-bottom: 1px solid var(--op-line); }
.op-console__head strong { display: block; color: #fff; font-size: .9rem; line-height: 1.2; }
.op-console__head small { display: block; color: #8fa6bf; font-size: .72rem; white-space: nowrap; }
.op-console__avatar { position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d6fff6, var(--op-teal) 35%, #2c86ff 70%, #6b4df0); box-shadow: 0 0 18px rgba(94, 234, 212, .45); }
.op-console__avatar i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 2px solid #0b1b33; border-radius: 50%; background: #3ee0a6; }
.op-hero[data-state="speaking"] .op-console__avatar { animation: op-talk .5s ease-in-out infinite alternate; }

.op-console__thread { display: flex; flex-direction: column; gap: 9px; height: clamp(170px, 24vh, 240px); padding: 16px 16px 10px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(125, 211, 252, .25) transparent; mask-image: linear-gradient(180deg, transparent 0, #000 22px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px); }
.op-msg { max-width: 86%; margin: 0; padding: 10px 13px; border-radius: 16px; font-size: .88rem; line-height: 1.5; transform-origin: 0 100%; animation: op-pop .5s var(--op-spring) both; }
.op-msg--bot { align-self: flex-start; color: #e8f1fb; background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .14); border-bottom-left-radius: 5px; }
.op-msg--user { align-self: flex-end; color: #04111f; background: linear-gradient(135deg, #a7f3e4, var(--op-teal)); border-bottom-right-radius: 5px; font-weight: 600; transform-origin: 100% 100%; }
.op-msg__typed.is-typing::after { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--op-teal); content: ""; vertical-align: -2px; animation: op-blink .8s steps(2) infinite; }
.op-msg--typing { display: inline-flex; gap: 5px; padding: 13px 14px; }
.op-msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--op-sky); animation: op-dot 1.1s ease-in-out infinite; }
.op-msg--typing i:nth-child(2) { animation-delay: .15s; }
.op-msg--typing i:nth-child(3) { animation-delay: .3s; }
.op-msg__source { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: -3px 0 2px 4px; color: #8fa6bf; font-size: .7rem; font-weight: 650; animation: op-rise .5s var(--op-ease) both; }
.op-msg__source::before { width: 14px; height: 14px; border-radius: 4px; background: rgba(94, 234, 212, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat; content: ""; }
.op-msg__handoff { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px 4px; padding: 8px 14px; border: 1px solid rgba(94, 234, 212, .45); border-radius: 999px; color: #fff; background: rgba(94, 234, 212, .12); font-size: .8rem; font-weight: 750; text-decoration: none; animation: op-pop .5s var(--op-spring) both; transition: background .2s, transform .2s; }
.op-msg__handoff:hover { color: #fff; background: rgba(94, 234, 212, .24); transform: translateX(3px); }

.op-console__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 16px 12px; }
.op-console__chips button { padding: 7px 12px; border: 1px solid rgba(125, 211, 252, .25); border-radius: 999px; color: #d6e6f7; background: rgba(125, 211, 252, .06); cursor: pointer; font-size: .76rem; font-weight: 650; opacity: 0; transform: translateY(8px); transition: background .2s, border-color .2s, color .2s, opacity .45s var(--op-ease), transform .45s var(--op-ease); }
.op-console__chips.is-in button { opacity: 1; transform: none; }
.op-console__chips.is-in button:nth-child(2) { transition-delay: 0s, 0s, 0s, .07s, .07s; }
.op-console__chips.is-in button:nth-child(3) { transition-delay: 0s, 0s, 0s, .14s, .14s; }
.op-console__chips.is-in button:nth-child(4) { transition-delay: 0s, 0s, 0s, .21s, .21s; }
.op-console__chips button:hover { color: #fff; border-color: rgba(94, 234, 212, .6); background: rgba(94, 234, 212, .14); }
.op-console__chips button.is-used { display: none; }
.op-console__chips:empty { display: none; }

.op-console__composer { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 16px; border: 1px solid rgba(160, 205, 240, .2); border-radius: 999px; background: rgba(2, 10, 22, .55); transition: border-color .25s, box-shadow .25s; }
.op-console__composer:focus-within { border-color: rgba(94, 234, 212, .6); box-shadow: 0 0 0 4px rgba(94, 234, 212, .12), 0 0 30px rgba(94, 234, 212, .15); }
.op-console__composer input { flex: 1; min-width: 0; padding: 8px 0; border: 0; color: #fff; background: transparent; font-size: .92rem; outline: none; }
.op-console__composer input::placeholder { color: #7f96b0; }
.op-console__composer button { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform .2s var(--op-spring), background .2s; }
.op-console__composer button:hover { transform: scale(1.08); }
.op-console__composer svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-console__send { color: #04111f; background: linear-gradient(135deg, #a7f3e4, var(--op-teal)); }
.op-console__mic { position: relative; color: #fff; background: rgba(125, 211, 252, .14); }
.op-console__mic::after { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(125, 211, 252, .6); content: ""; animation: op-ring 2.2s ease-out infinite; }
.op-console__note { margin: 10px 18px 14px; color: #7189a4; font-size: .68rem; line-height: 1.45; }

/* ---------- Keyframes ---------- */
@keyframes op-fade { to { opacity: 1; } }
@keyframes op-spin { to { transform: rotate(360deg); } }
@keyframes op-grid { to { background-position: 56px 56px, 56px 56px; } }
@keyframes op-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes op-word { to { transform: none; } }
@keyframes op-shimmer { to { background-position: -220% 0; } }
@keyframes op-ping { 0% { box-shadow: 0 0 0 0 rgba(62, 224, 166, .55); } 100% { box-shadow: 0 0 0 10px rgba(62, 224, 166, 0); } }
@keyframes op-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes op-halo { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes op-blink { 50% { opacity: .2; } }
@keyframes op-bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); color: var(--op-teal); } 100% { transform: scale(1); } }
@keyframes op-console { from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes op-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes op-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes op-talk { from { box-shadow: 0 0 10px rgba(94, 234, 212, .35); transform: scale(1); } to { box-shadow: 0 0 26px rgba(94, 234, 212, .8); transform: scale(1.07); } }
@keyframes op-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-height: 860px) and (min-width: 1061px) {
	.op-hero__orb { width: 240px; }
	.op-console__thread { height: 170px; }
	.op-hero__channels { margin-top: 28px; padding-top: 18px; }
	.service-page .op-hero .op-hero__title { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
}
@media (max-width: 1060px) {
	.op-hero { min-height: 0; }
	/* Flatten the copy column so the living orb sits right under the headline. */
	.op-hero__layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.op-hero__copy { display: contents; }
	.op-hero__back { order: 1; }
	.op-hero__badge { order: 2; align-self: flex-start; }
	.op-hero__title { order: 3; }
	.op-hero__stage { order: 4; width: min(540px, 100%); margin: 0 auto 36px; }
	.op-hero__lead { order: 5; }
	.op-hero__actions { order: 6; }
	.op-hero__channels { order: 7; }
	.service-page .op-hero .op-hero__title { max-width: 14ch; }
}
@media (max-width: 780px) {
	.op-hero { padding-block: 40px 56px; }
	.op-hero__back { margin-bottom: 24px; }
	.service-page .op-hero .op-hero__title { margin-block: 20px 18px; font-size: clamp(2.35rem, 11vw, 3.4rem); }
	.op-hero__channels { margin-top: 28px; padding-top: 18px; gap: 10px 16px; font-size: .78rem; }
	.op-hero__orb { width: min(250px, 66vw); margin-top: -8px; }
	.op-hero__tally-live { display: none; }
	.op-toast { max-width: 180px; font-size: .68rem; }
	.op-console__thread { height: 240px; }
	.op-msg { max-width: 92%; font-size: .85rem; }
}
@media (max-width: 420px) {
	.op-hero .button-row .button { width: 100%; }
	.op-hero .button--ghost { padding-inline: 14px; font-size: .92rem; }
	.op-toast small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Calm, not frozen: fades and pulses stay; sliding, drifting and spinning go. */
	.op-word > span { transform: none; animation-name: op-fade-in; }
	.op-word--accent > span { animation-name: op-fade-in, op-shimmer; }
	.op-hero__badge,
	.op-hero__lead,
	.op-hero__actions,
	.op-hero__channels,
	.op-console,
	.op-msg__source { animation-name: op-fade-in; }
	.op-msg,
	.op-msg__handoff { animation-name: op-fade-in; animation-timing-function: ease; }
	.op-hero__glow--a { animation: op-fade 1.6s ease .1s forwards; }
	.op-hero__grid,
	.op-hero__halo,
	.op-hero__halo::after { animation: none; }
	.op-console__chips button { transform: none; }
	.op-console__thread { scroll-behavior: auto; }
}
@keyframes op-fade-in { from { opacity: 0; } to { opacity: 1; } }