/* CStoreiQ static site — supplemental CSS.
   Only what the compiled Tailwind stylesheet (app.css) doesn't already provide:
   self-hosted fonts, scroll-reveal entrance animations (replacing framer-motion)
   and the desktop nav dropdown hover behaviour. Loaded after app.css on every page. */

/* ---- Inter (self-hosted variable font, weights 400-900) ----
   Replaces the render-blocking Google Fonts stylesheet. Served same-origin
   with immutable caching, so navigations never wait on fonts.gstatic.com
   and never flash a fallback font (FOUT) mid-session. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Scroll reveal ----
   The hidden state is gated on html.reveal-ready, which ONLY main.js adds —
   in the same synchronous block that marks every element already inside the
   viewport as .in-view. CSS alone can therefore never hide content the JS
   is not about to show: no flash of invisible content at first paint, no
   entrance-animation replay flicker on every internal navigation (this is a
   multi-page site — clicking the logo is a full page load). Firefox paints
   earlier than Chrome relative to deferred scripts, which is why the old
   unconditional `.reveal { opacity: 0 }` flickered worst there. */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.reveal-ready .reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Optional stagger: add data-delay="1..6" */
html.reveal-ready .reveal[data-delay="1"] { transition-delay: 0.06s; }
html.reveal-ready .reveal[data-delay="2"] { transition-delay: 0.12s; }
html.reveal-ready .reveal[data-delay="3"] { transition-delay: 0.18s; }
html.reveal-ready .reveal[data-delay="4"] { transition-delay: 0.24s; }
html.reveal-ready .reveal[data-delay="5"] { transition-delay: 0.30s; }
html.reveal-ready .reveal[data-delay="6"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Desktop nav dropdown (Company) ---- */
.nav-dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   NO-HARDWARE strips (homepage): "Other systems" vs "With CStoreiQ".
   Pure CSS + SMIL, no JS. Design space is 500x452; the stage scales
   with its container (cqw), so 1em == 12px at 500px wide.
   ============================================================ */
.nhw-panel {
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 26px;
  padding: clamp(16px, 2.4vw, 26px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  max-width: 580px;
  margin: 0 auto;
}
.nhw-stage-wrap { container-type: inline-size; }
.nhw-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 452;
  font-size: max(2.4cqw, 8px);
}
.nhw-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.nhw-node { position: absolute; }

.nhw-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.95em; border-radius: 999px;
  font-size: 0.95em; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  white-space: nowrap;
}
.nhw-chip svg { width: 1em; height: 1em; }
.nhw-chip-bad { left: 1.6%; top: 1%; background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.35); color: #fca5a5; }
.nhw-chip-good { left: 1.6%; top: 51.3%; background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.4); color: #86efac; box-shadow: 0 0 1.2em rgba(34,197,94,0.18); }

.nhw-station { left: 1.6%; width: 32%; }
.nhw-s1 { top: 8.4%; }
.nhw-s2 { top: 58%; }
.nhw-station svg { width: 100%; height: auto; display: block; }
.nhw-regscreen { animation: nhwRegPulse 2.2s ease-in-out infinite; }
@keyframes nhwRegPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.nhw-stlabel { font-size: 0.92em; font-weight: 700; color: #cbd5e1; white-space: nowrap; transform: translateX(-50%); text-align: center; }
.nhw-stlabel span { display: block; font-size: 0.8em; font-weight: 500; color: #64748b; }
.nhw-l1 { left: 17.6%; top: 38.5%; }
.nhw-l2 { left: 17.6%; top: 88%; }

.nhw-pcnode {
  left: 57%; top: 26%; transform: translate(-50%, -50%);
  width: 12.2em; border-radius: 1em;
  background: rgba(51,65,85,0.85); border: 1px solid rgba(248,113,113,0.3);
  padding: 0.75em 0.85em 0.7em;
  box-shadow: 0 0.8em 2em rgba(2,6,23,0.5);
}
.nhw-pcled {
  position: absolute; top: -0.4em; right: -0.4em; width: 1em; height: 1em; border-radius: 999px;
  background: #f59e0b; border: 0.16em solid #0f172a; animation: nhwLedBlink 6s linear infinite;
}
@keyframes nhwLedBlink {
  0%, 26% { opacity: 0.35; } 28%, 36% { opacity: 1; } 38%, 44% { opacity: 0.35; }
  46%, 52% { opacity: 1; } 54%, 100% { opacity: 0.35; }
}
.nhw-pcrow { display: flex; align-items: center; gap: 0.6em; }
.nhw-pcrow svg { width: 2.1em; height: 2.1em; color: #94a3b8; flex-shrink: 0; }
.nhw-pcname { font-size: 0.95em; font-weight: 800; color: #e2e8f0; line-height: 1.2; }
.nhw-pcname span { display: block; font-size: 0.8em; font-weight: 500; color: #94a3b8; }
.nhw-pctags { display: flex; gap: 0.8em; margin-top: 0.5em; }
.nhw-pctag { display: flex; align-items: center; gap: 0.3em; font-size: 0.78em; font-weight: 600; color: #fbbf24; white-space: nowrap; }
.nhw-pctag-fix { color: #fca5a5; }
.nhw-pctag svg { width: 0.95em; height: 0.95em; }

.nhw-cloud-gray, .nhw-cloud-blue { transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
.nhw-cloud-gray { left: 89%; top: 25.5%; }
.nhw-cloud-gray svg { width: 5.4em; height: 3.8em; color: #64748b; }
.nhw-cloud-gray span { font-size: 0.85em; font-weight: 600; color: #64748b; white-space: nowrap; }
.nhw-cloud-blue { left: 55%; top: 74.8%; }
.nhw-cbox { width: 6.2em; height: 4.6em; display: flex; align-items: center; justify-content: center; border-radius: 1.2em; animation: nhwCloudPulse 4.5s ease-in-out infinite; }
.nhw-cbox svg { width: 5.8em; height: 4.2em; color: #3b82f6; filter: drop-shadow(0 0 0.9em rgba(59,130,246,0.6)); }
.nhw-cloud-blue > span { font-size: 0.95em; font-weight: 800; color: #93c5fd; white-space: nowrap; }
@keyframes nhwCloudPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.nhw-vs {
  left: 50%; top: 45.2%; transform: translate(-50%, -50%);
  width: 96%; display: flex; align-items: center; gap: 1em;
}
.nhw-vs::before, .nhw-vs::after { content: ""; flex: 1; height: 1px; background: rgba(71,85,105,0.5); }
.nhw-vs span { font-size: 0.8em; font-weight: 800; color: #64748b; letter-spacing: 0.12em; }

.nhw-bar { flex: 1; border-radius: 0.15em 0.15em 0 0; transform-origin: bottom; }
.nhw-b1 { height: 38%; animation: nhwBar1 3.2s ease-in-out infinite; }
.nhw-b2 { height: 60%; animation: nhwBar2 3.2s ease-in-out infinite; }
.nhw-b3 { height: 85%; animation: nhwBar3 3.2s ease-in-out infinite; }
.nhw-b4 { height: 52%; animation: nhwBar2 3.6s ease-in-out infinite; }
@keyframes nhwBar1 { 0%, 55%, 100% { transform: scaleY(0.75); } 70%, 90% { transform: scaleY(1); } }
@keyframes nhwBar2 { 0%, 60%, 100% { transform: scaleY(0.7); } 75%, 92% { transform: scaleY(1); } }
@keyframes nhwBar3 { 0%, 65%, 100% { transform: scaleY(0.65); } 80%, 95% { transform: scaleY(1); } }

.nhw-devices { left: 85%; top: 74.2%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; }
.nhw-laptop { width: 9.2em; }
.nhw-lapscreen {
  background: #0f172a; border: 0.16em solid #475569; border-bottom: none;
  border-radius: 0.45em 0.45em 0 0; padding: 0.4em 0.45em 0.3em; height: 5.6em;
  display: flex; flex-direction: column;
  box-shadow: 0 0 1.6em rgba(59,130,246,0.18);
}
.nhw-dashtop { display: flex; align-items: center; padding: 0 0.1em 0.3em; border-bottom: 1px solid #1e293b; }
.nhw-dashtop img { height: 0.78em; width: auto; }
.nhw-dashbody { flex: 1; display: flex; align-items: flex-end; gap: 0.3em; padding: 0.4em 0.15em 0; }
.nhw-dashbody .nhw-b1 { background: #3b82f6; }
.nhw-dashbody .nhw-b2 { background: #60a5fa; }
.nhw-dashbody .nhw-b3 { background: #93c5fd; }
.nhw-dashbody .nhw-b4 { background: #60a5fa; }
.nhw-lapbase { height: 0.45em; background: #475569; border-radius: 0 0 0.6em 0.6em; width: 112%; margin-left: -6%; }
.nhw-phone {
  width: 3.3em; height: 5.6em; margin-left: -1em; position: relative; z-index: 2;
  background: #0f172a; border: 0.18em solid #475569; border-radius: 0.7em;
  padding: 0.32em 0.3em 0.35em; display: flex; flex-direction: column;
  box-shadow: -0.3em 0.4em 1.2em rgba(2,6,23,0.65), 0 0 1.2em rgba(34,197,94,0.12);
}
.nhw-notch { width: 1.1em; height: 0.22em; border-radius: 999px; background: #334155; margin: 0 auto 0.3em; }
.nhw-ptop { display: flex; justify-content: center; padding-bottom: 0.25em; }
.nhw-ptop img { height: 0.5em; width: auto; }
.nhw-pscr { flex: 1; background: #1e293b; border-radius: 0.3em; padding: 0.3em 0.25em 0.25em; display: flex; align-items: flex-end; gap: 0.22em; }
.nhw-pscr .nhw-b1 { background: #34d399; }
.nhw-pscr .nhw-b2 { background: #4ade80; }
.nhw-pscr .nhw-b3 { background: #86efac; }
.nhw-devlabel { left: 85%; top: 88%; transform: translateX(-50%); font-size: 0.88em; font-weight: 700; color: #86efac; white-space: nowrap; text-align: center; }
.nhw-devlabel span { display: block; font-size: 0.85em; font-weight: 500; color: #64748b; }

.nhw-moral {
  margin-top: 14px; text-align: center;
  font-size: clamp(13px, 1.4vw, 15.5px); font-weight: 600; color: #e2e8f0; line-height: 1.5;
}
.nhw-moral span { color: #6ee7b7; }

@media (prefers-reduced-motion: reduce) {
  .nhw-packet { visibility: hidden; }
  .nhw-pcled, .nhw-regscreen, .nhw-bar, .nhw-cbox { animation: none; }
}