/* ============================================================
   home-office.css — "The Living Office" v2
   Large, full-width, highly-detailed isometric dental clinic.
   Pairs with home-office.js (builds the SVG) + index.html hero.
   ============================================================ */

:root {
  --of-bg:#eef1f7; --of-surface:#ffffff; --of-ink:#20304d;
  --of-accent:#5a82c2; --of-deep:#3d63a4; --of-data:#34d3c2; --of-alert:#f0654f;
  --of-wall:#cdd8ec;
}

/* one-line headline — sized to sit comfortably, not edge-to-edge */
.hp-oneline { font-size: clamp(30px, 4.6vw, 74px); margin-top: 14px; padding: 0 24px; }
.hp-oneline .hp-tline { white-space: nowrap; }
.hp-oneline .hp-tline em { animation-delay: .33s; }

/* ============================================================
   X-RAY light colour scheme — override the dark cinematic hero
   ============================================================ */
.hp-hero { background: linear-gradient(180deg, #eef1f7 0%, #e8ecf6 60%, #e3e8f3 100%) !important; }
.hp-hero-aurora, .hp-hero-spot, .hp-hero-particles, .hp-beam { display: none !important; }
.hp-hero-grid { opacity: .45 !important; background-image:
  linear-gradient(rgba(32,48,77,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(32,48,77,.05) 1px, transparent 1px) !important;
  background-size: 46px 46px !important; }
.hp-hero-title { color: var(--ink) !important; }
.hp-hero-title em { background-image: linear-gradient(100deg, var(--indigo), #2f9e8f) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
  /* background-clip:text only paints inside the box; the p/y/g descenders sit below the baseline box and
     were left unpainted (= clipped). padding-bottom grows the paint box below the baseline to cover them.
     inline-block is required for the padding to extend the background area. No change to size/position. */
  display: inline-block !important; padding-bottom: 0.16em !important; }
.hp-badge { background: #fff !important; border-color: #dbe3f1 !important; color: var(--ink-60) !important;
  box-shadow: 0 8px 22px -16px rgba(20,40,70,.22) !important; }
.hp-hero-sub { color: var(--ink-60) !important; }
.hp-hero-sub b { color: var(--ink) !important; }
.hp-ghost { background: #fff !important; border-color: #dbe3f1 !important; color: var(--ink) !important; }
.hp-ghost:hover { background: #f1f5fb !important; }
.hp-pl { color: var(--indigo) !important; }
.hp-stat b { background: linear-gradient(100deg, var(--indigo), #2f9e8f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; }
.hp-stat span { color: var(--ink-40) !important; }
.hp-mouse { border-color: rgba(32,48,77,.32) !important; }
.hp-mouse i { background: rgba(32,48,77,.55) !important; }
/* stats live under the CTA — even, balanced 3-column grid */
.hp-hero-copy .hp-hero-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px,1.4vw,26px); align-items: start; width: 100%; max-width: 520px;
  margin: clamp(26px,3vh,40px) 0 0; }
.hp-hero-copy .hp-hero-foot .hp-stat { align-items: flex-start; }
.hp-hero-copy .hp-hero-foot .hp-stat b { font-size: clamp(23px,2.2vw,32px); line-height: 1; white-space: nowrap; }
.hp-hero-copy .hp-hero-foot .hp-stat span { font-size: 11.5px; margin-top: 7px; max-width: 14ch; }
.hp-hero-foot .hp-scroll { display: none; }

/* ============================================================
   Split hero — copy LEFT, living office RIGHT
   ============================================================ */
.hp-hero-inner.hp-hero-split {
  display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
  align-items: center; gap: clamp(4px, 1vw, 18px);
  max-width: 1640px; width: 100%; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); text-align: left;
}
.hp-hero-copy { text-align: left; transform: translateY(-94px); }   /* lift the headline higher */
.hp-hero-copy .hp-badge { margin: 0; }
.hp-hero-copy .hp-hero-titlewrap { display: block; overflow: visible; padding: 0; }
.hp-hero-copy .hp-oneline { white-space: normal; padding: 0; margin-top: 18px; text-align: left;
  font-size: clamp(40px, 4.6vw, 78px); line-height: .98; }
.hp-hero-copy .hp-oneline .hp-tline { white-space: normal; }
.hp-hero-copy .hp-hero-sub { margin: 10px 0 0; max-width: 46ch; text-align: left; }
.hp-hero-copy .hp-hero-cta { justify-content: flex-start; margin-top: 28px; }

.hp-hero-stage[data-hp-office] {
  width: calc(100% + clamp(40px, 9vw, 200px)); max-width: none; height: auto; max-height: none;
  margin: 0 calc(-1 * clamp(40px, 9vw, 200px)) 0 calc(-1 * clamp(10px, 3vw, 70px));  /* bigger, bleeds both ways */
  pointer-events: auto; z-index: 3; grid-column: 2; overflow: visible;
}
@media (max-width: 900px) {
  .hp-hero-inner.hp-hero-split { grid-template-columns: 1fr; gap: 8px; }
  .hp-hero-copy { text-align: center; }
  .hp-hero-copy .hp-oneline, .hp-hero-copy .hp-hero-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .hp-hero-copy .hp-hero-cta { justify-content: center; }
  .hp-hero-stage[data-hp-office] { grid-column: 1; }
}

/* ============================================================
   Floating analytics widgets (cute, on-brand, decorative)
   ============================================================ */
.hp-floaters { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hp-fcard {
  position: absolute; width: 172px; padding: 13px 15px;
  background: rgba(255,255,255,.95); border: 1px solid #dde5f1; border-radius: 16px;
  box-shadow: 0 22px 48px -24px rgba(40,60,100,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; animation: fcIn .7s ease forwards var(--d, 0s), fcFloat 6.5s ease-in-out infinite var(--d, 0s);
}
@keyframes fcIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* ringed around the clinic — corners, lifted clear of the building */
.hp-fcard { width: 162px; }
.hp-fcard.f-a { left: 49%; top: 7%; }    /* Production — top, moved right */
.hp-fcard.f-c { left: 76%; top: 11%; }   /* Calls — top-right (kept) */
.hp-fcard.f-b { left: 48.5%; top: 60%; }   /* Chair util — nudged left to clear the office edge */
.hp-fcard.f-d { left: 84%; top: 70%; }   /* Reviews — bottom-right, moved right */
.hp-fc-stars { font-size: 12px; color: #f2b53c; letter-spacing: 1px; }
.hp-fc-sub { display: block; margin-top: 7px; font-size: 11px; color: #7385a3; }
.hp-fc-sub b { color: #1f9e7f; font-weight: 700; }

.hp-fc-label { font: 600 10px/1 inherit; letter-spacing: .08em; text-transform: uppercase; color: #7385a3; }
.hp-fc-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.hp-fc-row b { font: 700 23px/1 inherit; color: var(--ink, #20304d); letter-spacing: -.02em; }
.hp-fc-up { font: 600 11px/1 inherit; color: #1f9e7f; }
.hp-fc-live { display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: #1f9e7f; }
.hp-fc-live i { width: 7px; height: 7px; border-radius: 50%; background: #34d3c2; box-shadow: 0 0 0 0 rgba(52,211,194,.5); animation: fcPulse 1.6s infinite; }
@keyframes fcPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,194,.5); } 70% { box-shadow: 0 0 0 7px rgba(52,211,194,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,194,0); } }

/* bar chart */
.hp-fc-bars { display: flex; align-items: flex-end; gap: 5px; height: 32px; margin-top: 11px; }
.hp-fc-bars i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #5a82c2, #9ab6e6);
  transform: scaleY(var(--h)); transform-origin: bottom; animation: fcBar 2.6s ease-in-out infinite; }
.hp-fc-bars i:nth-child(2) { animation-delay: .3s; } .hp-fc-bars i:nth-child(3) { animation-delay: .6s; }
.hp-fc-bars i:nth-child(4) { animation-delay: .9s; } .hp-fc-bars i:nth-child(5) { animation-delay: 1.2s; }
@keyframes fcBar { 0%, 100% { transform: scaleY(calc(var(--h) * .62)); } 50% { transform: scaleY(var(--h)); } }

/* utilization ring */
.hp-fc-ring { position: relative; width: 80px; height: 80px; margin: 6px auto 0; }
.hp-fc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-fc-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.hp-fc-ring circle.t { stroke: #e6ecf6; }
.hp-fc-ring circle.v { stroke: url(#fcGrad); stroke: #34d3c2; stroke-dasharray: 195; stroke-dashoffset: 195; animation: fcRing 1.4s cubic-bezier(.3,.9,.3,1) forwards .5s; }
@keyframes fcRing { to { stroke-dashoffset: 12; } } /* ~94% of 195 */
.hp-fc-ringval { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px/1 inherit; color: var(--ink, #20304d); }

/* sparkline */
.hp-fc-spark { width: 100%; height: 34px; margin-top: 9px; display: block; }
.hp-fc-spark path { fill: none; stroke: #5a82c2; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: fcDraw 2.2s ease forwards .4s; }
@keyframes fcDraw { to { stroke-dashoffset: 0; } }

@media (max-width: 1100px) { .hp-floaters { display: none; } }
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .hp-fcard { animation: fcIn .01s forwards; opacity: 1; }
  .hp-fc-bars i, .hp-fc-live i { animation: none; }
  .hp-fc-ring circle.v { animation: none; stroke-dashoffset: 12; }
  .hp-fc-spark path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- stage ---------- */
.of-stage { position: relative; width: 100%; margin: 0 auto; aspect-ratio: 1720 / 1020; isolation: isolate; }
.of-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }

.of-building { transform-box: fill-box; transform-origin: 50% 60%; animation: ofBob 8s ease-in-out infinite; }
@keyframes ofBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.of-sweep { mix-blend-mode: screen; opacity: 0; animation: ofSweep 11s ease-in-out infinite; }
@keyframes ofSweep { 0%,72%,100% { opacity:0; transform: translateX(-30%); } 86% { opacity:.45; transform: translateX(30%); } }

/* ---------- rooms ---------- */
.of-room { cursor: pointer; transition: opacity .35s ease, filter .35s ease; transform-box: fill-box; }
/* no ugly browser focus box — click/focus already lifts the room, glows the floor + opens the card */
.of-room:focus, .of-room:focus-visible { outline: none; }
.of-room .of-room-lift { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; transform-origin: 50% 100%; }
.of-room:hover .of-room-lift, .of-room.is-active .of-room-lift { transform: translateY(-9px); }
.of-stage.has-focus .of-room { opacity: .34; filter: saturate(.6); }
.of-stage.has-focus .of-room.is-active { opacity: 1; filter: none; }
.of-room .of-floor-glow { opacity: 0; transition: opacity .35s ease; }
.of-room.is-active .of-floor-glow { opacity: 1; }

/* ---------- data core + pulse lines ---------- */
.of-core-glow { animation: ofCorePulse 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ofCorePulse { 0%,100% { opacity:.5; transform: scale(1); } 50% { opacity:.95; transform: scale(1.09); } }
.of-srv-led { animation: ofBlip 1.6s ease-in-out infinite; } .of-srv-led.b2{ animation-delay:.5s;} .of-srv-led.b3{ animation-delay:1s;}
.of-line { stroke: #a7b0e6; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 5 11; opacity:.5; animation: ofFlow 1.5s linear infinite; }
@keyframes ofFlow { to { stroke-dashoffset: -36; } }

/* ---------- characters (variety via idle-loop classes; stagger via inline delay) ---------- */
.of-actor { transform-box: fill-box; transform-origin: 50% 100%; }
.of-actor > g { transform-box: fill-box; transform-origin: 50% 100%; }
.of-idleA { animation: ofIdleA 3.4s ease-in-out infinite; }
.of-idleB { animation: ofIdleB 3.0s ease-in-out infinite; }
.of-idleC { animation: ofIdleC 3.8s ease-in-out infinite; }
@keyframes ofIdleA { 0%,100%{ transform: rotate(0); } 50%{ transform: rotate(-5deg) translateY(-1px); } }
@keyframes ofIdleB { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
@keyframes ofIdleC { 0%,100%{ transform: rotate(0); } 50%{ transform: rotate(4deg); } }

/* blips / bubbles / pings */
.of-blip { animation: ofBlip 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.of-blip.b2 { animation-delay: .7s; } .of-blip.b3 { animation-delay: 1.3s; }
@keyframes ofBlip { 0%,100%{ opacity:.18; } 50%{ opacity:1; } }
.of-bubble { transform-box: fill-box; transform-origin: 50% 100%; animation: ofRise 3.8s ease-in-out infinite; opacity:0; }
.of-bubble.u2 { animation-delay: 1.3s; } .of-bubble.u3 { animation-delay: 2.5s; }
@keyframes ofRise { 0%{opacity:0;transform:translateY(4px) scale(.7);} 18%{opacity:1;transform:translateY(-6px) scale(1);} 72%{opacity:1;transform:translateY(-22px) scale(1);} 100%{opacity:0;transform:translateY(-32px) scale(.9);} }
.of-ping { transform-box: fill-box; transform-origin: 50% 50%; animation: ofPing 3s ease-out infinite 1.2s; opacity:0; }
@keyframes ofPing { 0%{opacity:0;transform:scale(.4);} 12%{opacity:1;} 42%{opacity:0;transform:scale(2.4);} 100%{opacity:0;} }

/* x-ray content sweep on monitors / pano head */
.of-xsweep { animation: ofXsweep 2.8s ease-in-out infinite; }
@keyframes ofXsweep { 0%,100%{ transform:translateX(-12px); opacity:.25; } 50%{ transform:translateX(12px); opacity:.9; } }
.of-flicker { animation: ofFlicker 4s steps(1) infinite; }
@keyframes ofFlicker { 0%,92%,100%{opacity:1;} 94%{opacity:.7;} 96%{opacity:1;} }

/* pano machine arm slow oscillate (rotate around column) */
.of-panoarm { transform-box: fill-box; transform-origin: 0% 50%; animation: ofPano 6s ease-in-out infinite; }
@keyframes ofPano { 0%,100%{ transform: rotate(-3deg); } 50%{ transform: rotate(3deg); } }

/* overhead op light glow pulse */
.of-lightcone { animation: ofCone 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0%; }
@keyframes ofCone { 0%,100%{ opacity:.30; } 50%{ opacity:.6; } }

/* coffee steam */
.of-steam { transform-box: fill-box; transform-origin: 50% 100%; animation: ofSteam 2.6s ease-in-out infinite; opacity:0; }
.of-steam.s2{ animation-delay:.8s; } .of-steam.s3{ animation-delay:1.6s; }
@keyframes ofSteam { 0%{opacity:0;transform:translateY(0) scale(.7);} 30%{opacity:.7;} 100%{opacity:0;transform:translateY(-12px) scale(1.1);} }

/* claim packet -> payer + EOB check (billing) */
.of-claim { animation: ofClaim 3.6s ease-in-out infinite; opacity:0; }
@keyframes ofClaim { 0%{opacity:0;transform:translate(0,0) scale(.8);} 10%{opacity:1;} 60%,72%{opacity:1;transform:translate(42px,-24px) scale(.9);} 100%{opacity:0;transform:translate(42px,-24px) scale(.6);} }
.of-eob { animation: ofEob 3.6s ease-in-out infinite 2s; opacity:0; transform-box: fill-box; transform-origin:50% 50%; }
@keyframes ofEob { 0%,55%{opacity:0;transform:scale(.4);} 65%{opacity:1;transform:scale(1);} 90%{opacity:1;} 100%{opacity:0;} }

/* manager monitor mini-bars */
.of-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: ofBar 2.4s ease-in-out infinite; }
.of-bar.k2{animation-delay:.3s;} .of-bar.k3{animation-delay:.6s;} .of-bar.k4{animation-delay:.9s;}
@keyframes ofBar { 0%,100%{ transform: scaleY(.6);} 50%{ transform: scaleY(1);} }

/* ---------- moving patients ---------- */
.of-patient { transform-box: fill-box; transform-origin: 50% 100%; }
.of-patient .of-pbob { animation: ofWalk .5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ofWalk { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-1.5px);} }

/* ---------- hover room card ---------- */
.of-card {
  position:absolute; z-index:7; pointer-events:none; min-width:210px; max-width:264px; padding:13px 15px;
  background: rgba(255,255,255,.97); border:1px solid #d4ddee; border-radius:14px;
  box-shadow:0 18px 44px -16px rgba(32,48,77,.4); opacity:0; transform:translateY(6px) scale(.97);
  transition:opacity .2s ease, transform .2s ease;
}
.of-card.show { opacity:1; transform:translateY(0) scale(1); }
.of-card .of-card-ey { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--of-deep); display:flex; align-items:center; gap:7px; }
.of-card .of-card-ey i { width:7px; height:7px; border-radius:50%; background:var(--of-data); box-shadow:0 0 0 3px rgba(52,211,194,.2); }
.of-card h4 { margin:7px 0 4px; font-size:15px; font-weight:600; color:var(--of-ink); }
.of-card p { margin:0; font-size:12.5px; line-height:1.45; color:#4a5a76; }

/* ---------- automation notification toasts (HTML overlay) ---------- */
.of-noti-layer { position:absolute; inset:0; pointer-events:none; z-index:6; transition:opacity .25s ease; }
/* hovering a room clears the background notifications; they resume on unhover */
.of-stage.has-focus .of-noti-layer { opacity:0; }
.of-noti {
  position:absolute; transform:translate(-50%,-100%) translateY(8px); opacity:0;
  display:flex; gap:8px; align-items:flex-start; width:max-content; max-width:224px;
  padding:8px 11px; background:rgba(255,255,255,.99); border:1px solid #dbe3f1;
  border-radius:11px; box-shadow:0 12px 30px -14px rgba(32,48,77,.4);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.of-noti.show { opacity:1; transform:translate(-50%,-100%) translateY(0); }
.of-noti::after { content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; background:inherit; border-right:1px solid #dbe3f1; border-bottom:1px solid #dbe3f1; transform:translateX(-50%) rotate(45deg); }
.of-noti .of-noti-ic { flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:13px; background:#eef3fb; }
.of-noti .of-noti-tx { font-size:11.5px; line-height:1.32; color:var(--of-ink); }
.of-noti .of-noti-tx b { color:var(--of-deep); font-weight:600; }
.of-noti .of-noti-auto { display:flex; width:max-content; align-items:center; gap:4px; margin-top:5px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1f9e7f; }
.of-noti .of-noti-auto i { width:11px; height:11px; border-radius:50%; background:var(--of-data); display:grid; place-items:center; }
.of-noti .of-noti-auto i::after { content:"✓"; color:#fff; font-size:8px; line-height:1; }

/* day chip during fast-forward */
.of-day { position:absolute; top:6px; left:50%; transform:translateX(-50%); font:600 12px/1 inherit; letter-spacing:.04em; color:var(--of-deep); background:rgba(255,255,255,.94); border:1px solid #d4ddee; border-radius:999px; padding:6px 13px; opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:8; }
.of-stage.is-fast .of-day { opacity:1; }
.of-stage.is-fast .of-building .of-line,
.of-stage.is-fast .of-idleA,.of-stage.is-fast .of-idleB,.of-stage.is-fast .of-idleC,
.of-stage.is-fast .of-bubble,.of-stage.is-fast .of-xsweep,.of-stage.is-fast .of-ping,
.of-stage.is-fast .of-claim,.of-stage.is-fast .of-eob,.of-stage.is-fast .of-steam,
.of-stage.is-fast .of-blip,.of-stage.is-fast .of-bar,.of-stage.is-fast .of-panoarm { animation-duration: var(--ff, .5s) !important; }

@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .of-building,.of-sweep,.of-core-glow,.of-srv-led,.of-line,.of-idleA,.of-idleB,.of-idleC,
  .of-blip,.of-bubble,.of-ping,.of-xsweep,.of-flicker,.of-panoarm,.of-lightcone,.of-steam,
  .of-claim,.of-eob,.of-bar,.of-patient .of-pbob { animation: none !important; }
  .of-bubble,.of-claim,.of-eob,.of-ping,.of-steam { opacity:.8; }
}

/* ============================================================
   Phone hardening (≤700px): the isometric office scene is too
   fussy/small to read at phone width even with animation frozen
   (dozens of rooms, characters, cards, notification toasts) — hide
   the whole decorative stage rather than let it render cramped or
   overflow, and let the hero copy take the full single column.
   ============================================================ */
@media (max-width: 700px) {
  .hp-hero-copy { transform: none; }
  .hp-hero-stage[data-hp-office] { display: none !important; }
  .hp-hero-copy .hp-hero-foot { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .hp-hero-copy .hp-hero-foot .hp-stat { align-items: center; text-align: center; }
}

@media (max-width: 460px) {
  .hp-oneline { padding: 0 12px; }
  .hp-hero-copy .hp-hero-foot { gap: 10px; margin-top: 20px; }
}