/* Ava Display - rendered product mockups.
   Everything here is drawn in CSS with synthetic content. No customer data,
   no real serials, no real room names. */

/* ---------- screen / TV frame ---------- */
.screen {
  border-radius: 14px;
  background: #0A1419;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 70px rgba(0,0,0,0.42);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}
.screen-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem; background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.screen-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.screen-dot.live { background: #35C08A; box-shadow: 0 0 8px rgba(53,192,138,0.8); }
.screen-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.screen-body { padding: 1.15rem 1.25rem; height: 100%; color: #fff; }

/* signage layout inside a screen */
.sg-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sg-school { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.sg-time { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sg-date { font-size: 0.66rem; color: rgba(255,255,255,0.55); margin-top: 0.2rem; }
.sg-cards { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0.7rem; margin-top: 1rem; }
.sg-card {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px; padding: 0.65rem 0.75rem;
}
.sg-card h5 { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.sg-card p { font-size: 0.74rem; color: rgba(255,255,255,0.82); margin-top: 0.28rem; line-height: 1.45; }
.sg-ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(74,138,153,0.35); border-top: 1px solid rgba(255,255,255,0.12);
  padding: 0.4rem 1.25rem; font-size: 0.68rem; color: rgba(255,255,255,0.9);
  white-space: nowrap; overflow: hidden;
}

/* emergency takeover */
.screen--alert { background: #6E1614; }
.screen--alert .screen-body { display: grid; place-content: center; text-align: center; }
.alert-tag {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; background: #fff; color: #6E1614;
  padding: 0.22rem 0.6rem; border-radius: 4px; margin-bottom: 0.7rem;
}
.alert-msg { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.alert-sub { font-size: 0.72rem; color: rgba(255,255,255,0.78); margin-top: 0.5rem; }

/* cast state */
.screen--cast .screen-body { display: grid; place-content: center; text-align: center; }
.cast-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #35C08A; border: 1px solid rgba(53,192,138,0.45); border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.cast-title { font-size: 1.05rem; font-weight: 700; margin-top: 0.8rem; }
.cast-meta { font-size: 0.7rem; color: rgba(255,255,255,0.55); margin-top: 0.35rem; }

/* ---------- console mockup ---------- */
.console {
  background: #101E26; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.38); color: #fff;
}
.console-top {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem; background: rgba(255,255,255,0.045);
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.console-title { font-size: 0.86rem; font-weight: 700; }
.console-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.pill {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
}
.pill.ok   { background: rgba(53,192,138,0.16);  color: #6BDCAE; }
.pill.warn { background: rgba(255,196,61,0.16);  color: #FFCF6B; }
.pill.bad  { background: rgba(232,90,84,0.16);   color: #FF9A94; }

.console-rows { display: grid; }
.crow {
  display: grid; grid-template-columns: 1.35fr 0.85fr 0.8fr 0.8fr 0.9fr;
  gap: 0.7rem; align-items: center;
  padding: 0.72rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem;
}
.crow:last-child { border-bottom: 0; }
.crow.head {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); font-weight: 700; background: rgba(255,255,255,0.02);
}
.crow .room { font-weight: 600; }
.crow .muted { color: rgba(255,255,255,0.55); }
.bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: #35C08A; }
.bar.warn span { background: #FFC43D; }
.bar.bad span  { background: #E85A54; }

/* ---------- split feature layout ---------- */
.split { display: grid; gap: 2.4rem; align-items: center; grid-template-columns: 1fr 1fr; margin-top: 2.8rem; }
.split.rev .split-media { order: -1; }
.split-copy h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
.split-copy p { color: var(--text-soft); font-size: 1rem; }
.sec-dark .split-copy p, .sec-teal .split-copy p { color: rgba(255,255,255,0.76); }
.sec-dark .split-copy h3, .sec-teal .split-copy h3 { color: #fff; }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.4rem; }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat span { display: block; font-size: 0.82rem; color: var(--text-soft); margin-top: 0.5rem; }
.sec-dark .stat span, .sec-teal .stat span { color: rgba(255,255,255,0.65); }
.sec-dark .stat b, .sec-teal .stat b { color: var(--gold); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 1.6rem; }
  .split.rev .split-media { order: 0; }
  .crow { grid-template-columns: 1.2fr 0.9fr 0.9fr; }
  .crow .hide-sm { display: none; }
}

/* ---------- console with the real sidebar nav ---------- */
.console-shell { display: grid; grid-template-columns: 210px 1fr; }
.console-side {
  background: rgba(0,0,0,0.28); border-right: 1px solid rgba(255,255,255,0.08);
  padding: 0.9rem 0.6rem;
}
.console-org {
  font-size: 0.78rem; font-weight: 700; color: #fff;
  padding: 0.3rem 0.55rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.6rem;
}
.console-nav { display: grid; gap: 0.12rem; }
.console-nav a {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.62);
  padding: 0.42rem 0.55rem; border-radius: 7px; text-decoration: none;
}
.console-nav a .ic { font-size: 0.8rem; width: 1rem; text-align: center; }
.console-nav a.on { background: rgba(74,138,153,0.28); color: #fff; font-weight: 600; }
@media (max-width: 860px) { .console-shell { grid-template-columns: 1fr; } .console-side { display: none; } }

/* ---------- illustrations ---------- */
.illus {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.3rem; box-shadow: var(--shadow);
}
.sec-dark .illus, .sec-teal .illus {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.13); box-shadow: none;
}
.illus h4 {
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.25rem;
}
.sec-dark .illus h4, .sec-teal .illus h4 { color: #fff; }
.illus .cap { font-size: 0.86rem; color: var(--text-soft); margin-bottom: 1.1rem; }
.sec-dark .illus .cap, .sec-teal .illus .cap { color: rgba(255,255,255,0.68); }
.illus svg { width: 100%; height: auto; display: block; }

/* diagram tokens, so both diagrams read as one system */
.dg-net   { fill: rgba(74,138,153,0.08); stroke: var(--teal-mid); }
.dg-box   { fill: #fff; stroke: var(--teal-dark); }
.dg-accent{ fill: rgba(255,215,0,0.14); stroke: var(--gold-deep); }
.dg-cloud { fill: rgba(41,69,85,0.07); stroke: var(--teal-dark); }
.dg-t     { fill: var(--text); font-size: 12px; font-weight: 700; }
.dg-s     { fill: var(--text-soft); font-size: 10.5px; }
.dg-line  { stroke: var(--teal-mid); stroke-width: 2; fill: none; }
.dg-dash  { stroke: var(--text-soft); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
.dg-lbl   { fill: var(--teal-dark); font-size: 10px; font-weight: 700; }

/* ---------- numbered setup steps ---------- */
.steps { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 2.6rem; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.4rem 1.4rem; box-shadow: var(--shadow);
}
.step .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--gold); font-weight: 800; font-size: 0.85rem; margin-bottom: 0.85rem;
}
.step h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.step p { font-size: 0.9rem; color: var(--text-soft); }
.step .stepart { margin-bottom: 0.9rem; }
.step .stepart svg { width: 100%; height: 62px; display: block; }

/* ---------- phones: let the mockups breathe ----------
   The screen mockups are 16:9, which at phone width collapses to about 200px
   tall while the content inside still needs ~250px. Measured at 390px: the
   cards overran the box by 8px and covered the ticker by 41px. On small
   screens the aspect ratio is dropped, the ticker stops being absolutely
   positioned, and the type steps down. */
@media (max-width: 700px) {
  .screen { aspect-ratio: auto; }
  .screen-body { padding: 0.9rem 1rem 0.9rem; }
  .sg-time { font-size: 1.25rem; }
  .sg-school { font-size: 0.85rem; }
  .sg-cards { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.75rem; }
  .sg-card p { font-size: 0.8rem; }
  .sg-ticker {
    position: static; margin-top: 0.85rem;
    white-space: normal; padding: 0.45rem 1rem; font-size: 0.72rem;
  }
  .screen--alert .screen-body,
  .screen--cast .screen-body { padding: 2rem 1rem; }
  .alert-msg { font-size: 1.05rem; }

  /* console rows: drop to the three columns that carry meaning */
  .crow { grid-template-columns: 1.3fr 1fr 0.9fr; font-size: 0.74rem; padding: 0.6rem 0.85rem; }
  .console-top { padding: 0.7rem 0.85rem; }

  /* diagrams keep their own aspect and simply scale down */
  .illus { padding: 1.2rem 1rem 1rem; }
}

/* ---------- life ----------
   Small, purposeful motion only. Everything here is decorative and every
   rule is disabled under prefers-reduced-motion at the bottom of this file. */

/* the live dot actually pulses */
@keyframes avaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(53,192,138,0.55); }
  70%     { box-shadow: 0 0 0 7px rgba(53,192,138,0); }
}
.screen-dot.live { animation: avaPulse 2.4s ease-out infinite; }

/* the signage ticker scrolls, because a real one does */
@keyframes avaTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sg-ticker { position: absolute; }
.sg-ticker .tk { display: inline-block; white-space: nowrap; animation: avaTicker 26s linear infinite; }
.sg-ticker .tk span { padding-right: 2.5rem; }

/* emergency card breathes so it reads as urgent without flashing */
@keyframes avaAlert {
  0%,100% { background: #6E1614; }
  50%     { background: #7E1A17; }
}
.screen--alert { animation: avaAlert 3.2s ease-in-out infinite; }

/* health bars fill on reveal instead of appearing complete */
.bar span { transform-origin: left center; animation: avaFill 1.1s cubic-bezier(.22,1,.36,1) both; }
@keyframes avaFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cards lift on hover, so the explore grid feels clickable */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(13,27,34,0.16); border-color: var(--teal-mid); }

/* stat numbers rise in */
.stat b { animation: avaRise .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes avaRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* staggered reveal, so a grid arrives rather than snaps */
.grid > .reveal:nth-child(2)  { transition-delay: .07s; }
.grid > .reveal:nth-child(3)  { transition-delay: .14s; }
.grid > .reveal:nth-child(4)  { transition-delay: .21s; }
.grid > .reveal:nth-child(5)  { transition-delay: .28s; }
.grid > .reveal:nth-child(6)  { transition-delay: .35s; }

/* hero screen drifts a little, so the page is not dead on arrival */
@keyframes avaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero .split-media .screen { animation: avaFloat 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .screen-dot.live, .screen--alert, .sg-ticker .tk,
  .hero .split-media .screen, .stat b, .bar span { animation: none !important; }
  .card, a.card:hover { transition: none; transform: none; }
  .reveal { transition: none; }
}

@media (max-width: 700px) {
  .sg-ticker { position: static; }
  .sg-ticker .tk { animation: none; }
  .sg-ticker .tk span { padding-right: 0; }
}