/* ============================================================
   VIKING HEALTH CO. — STARK-TIER ENHANCEMENT LAYER
   Boot sequence · HUD cursor · particle field · holo-tilt
   Loads on top of styles.css. Degrades gracefully on touch.
   ============================================================ */

/* Hide native cursor only on precise pointers */
@media (hover:hover) and (pointer:fine) {
  a, button, .btn, .module, .tier, .aud-card, .faq-q, body { cursor: none; }
}

/* ---------- Custom HUD cursor ---------- */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; }
.cur-dot { width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cur-ring { width: 34px; height: 34px; border: 1px solid var(--gold); opacity: .65;
  transition: width .2s, height .2s, background .2s, opacity .2s; }
.cur-ring.hot { width: 56px; height: 56px; opacity: 1; background: rgba(224,222,168,0.06); }
@media (hover:none), (pointer:coarse) { .cur-dot, .cur-ring { display: none; } }

/* ---------- Particle field canvas ---------- */
#stark-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- Boot sequence ---------- */
#boot { position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
#boot.done { opacity: 0; visibility: hidden; }
.reactor { width: 120px; height: 120px; position: relative; margin: 0 auto 30px; }
.reactor i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(224,222,168,0.22); }
.reactor i:nth-child(1) { animation: spin 3s linear infinite; }
.reactor i:nth-child(2) { inset: 14px; border-color: rgba(224,222,168,0.35); border-top-color: var(--gold); animation: spin 1.6s linear infinite reverse; }
.reactor i:nth-child(3) { inset: 30px; border-color: transparent; border-top-color: var(--gold); border-right-color: var(--gold); animation: spin 1s linear infinite; }
.reactor i:nth-child(4) { inset: 44px; border: none; background: radial-gradient(circle, var(--gold-2), var(--gold) 40%, transparent 72%);
  box-shadow: 0 0 50px var(--gold), 0 0 90px rgba(224,222,168,0.4); animation: corepulse 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes corepulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.86); opacity: .7; } }
.boot-log { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--muted);
  text-align: center; min-height: 18px; text-transform: uppercase; }
.boot-log b { color: var(--gold); }

/* ---------- HUD corner brackets ---------- */
.hud-frame { position: relative; }
.hud-frame::before, .hud-frame::after { content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--gold); pointer-events: none; opacity: .6; z-index: 2; }
.hud-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hud-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ---------- Scanline display overlay ---------- */
#hud-overlay { position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.013) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; }

/* ---------- Tilt smoothing ---------- */
.tilt { transform-style: preserve-3d; transition: transform .18s ease; will-change: transform; }

/* ---------- Animated brand logo (top-left) ---------- */
.brand .logo {
  position: relative; width: 39px; height: 39px; flex: 0 0 39px;
  display: grid; place-items: center;
}
.brand .logo img {
  width: 39px; height: 39px; object-fit: contain;
  display: block; position: relative; z-index: 1;
  filter: drop-shadow(0 0 7px rgba(224,222,168,0.5));
  animation: logo-breathe 4.5s ease-in-out infinite;
}
/* circling light orbiting the V */
.brand .logo::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, var(--gold-2) 84%, var(--gold) 92%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin 4.5s linear infinite; opacity: .9; pointer-events: none; z-index: 0;
}
.brand .logo::after { display: none; }
.brand:hover .logo::before { animation-duration: 1.6s; }
.brand:hover .logo img { filter: drop-shadow(0 0 13px rgba(224,222,168,0.8)); }
@keyframes logo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes logo-pulse { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

/* ---------- Live-data telemetry HUD ---------- */
.telemetry {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  margin-top: 50px; max-width: 1060px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 8px; overflow: hidden;
}
.readout { background: rgba(11,12,14,0.72); backdrop-filter: blur(6px); padding: 15px 18px; }
.readout .r-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.readout .r-label .live { width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold); animation: pulse 1.6s infinite; }
.readout .r-val { font-family: var(--font-display); font-size: 26px; font-weight: 600;
  color: var(--white); margin-top: 6px; line-height: 1; }
.readout .r-val span { font-size: 12px; color: var(--muted); font-family: var(--font-mono); margin-left: 3px; }
.readout canvas { display: block; width: 100%; height: 26px; margin-top: 8px; }

/* ---------- Sound toggle ---------- */
.sound-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 9997;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); background: rgba(11,12,14,0.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px; padding: 9px 15px; transition: .25s;
}
.sound-toggle:hover { border-color: var(--gold); box-shadow: var(--glow); }
.sound-toggle .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-toggle .eq i { width: 2px; background: var(--gold); height: 4px; border-radius: 2px; transition: .2s; }
.sound-toggle.on .eq i { animation: eq .9s ease-in-out infinite; }
.sound-toggle.on .eq i:nth-child(2) { animation-delay: .15s; }
.sound-toggle.on .eq i:nth-child(3) { animation-delay: .3s; }
.sound-toggle.on .eq i:nth-child(4) { animation-delay: .45s; }
.sound-toggle .state { color: var(--muted); }
.sound-toggle.on .state { color: var(--gold); }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

@media (max-width: 520px) {
  .telemetry { grid-template-columns: repeat(2, 1fr); }
  .sound-toggle { right: 14px; bottom: 14px; }
}
@media (max-width: 760px) and (min-width: 521px) {
  .telemetry { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .reactor i { animation: none; }
  #stark-canvas { display: none; }
  .brand .logo::before, .brand .logo::after, .brand .logo img { animation: none; }
}

/* ---------- Revolving client roster ---------- */
.clients-stage { position: relative; height: 420px; perspective: 1500px; perspective-origin: 50% 45%; margin-top: 20px; }
.client-orbit { position: absolute; top: 50%; left: 50%; width: 250px; height: 150px; margin: -75px 0 0 -125px;
  transform-style: preserve-3d; animation: orbit-spin 26s linear infinite; }
.client-orbit:hover { animation-play-state: paused; }
.client-card { position: absolute; inset: 0; transform: rotateY(var(--a)) translateZ(320px);
  border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 22px; text-align: center; box-shadow: 0 22px 55px rgba(0,0,0,.5), inset 0 0 30px rgba(224,222,168,0.04);
  backface-visibility: hidden; }
.client-card .c-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--white); line-height: 1.2; }
.client-card .c-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg); background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 4px 11px; border-radius: 100px; }
.clients-core { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%);
  border-radius: 50%; background: radial-gradient(circle, var(--gold-2), var(--gold) 50%, transparent 72%);
  box-shadow: 0 0 55px 14px rgba(224,222,168,.4); }
@media (max-width: 700px) {
  .clients-stage { height: 330px; perspective: 1000px; }
  .client-orbit { width: 210px; margin: -75px 0 0 -105px; }
  .client-card { transform: rotateY(var(--a)) translateZ(250px); }
}
@media (prefers-reduced-motion: reduce) { .client-orbit { animation: none; } }

/* ---------- Revolving industry-proof orbit ---------- */
.proof-stage { position: relative; height: 460px; perspective: 1600px; perspective-origin: 50% 45%; margin-top: 24px; }
.proof-orbit { position: absolute; top: 50%; left: 50%; width: 220px; height: 190px; margin: -95px 0 0 -110px;
  transform-style: preserve-3d; animation: orbit-spin 32s linear infinite; }
.proof-orbit:hover { animation-play-state: paused; }
.proof-card { position: absolute; inset: 0; transform: rotateY(var(--a)) translateZ(330px);
  border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel));
  backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 22px; text-align: center; box-shadow: 0 22px 55px rgba(0,0,0,.55); backface-visibility: hidden; }
.proof-card .p-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg); background: linear-gradient(180deg, var(--gold-2), var(--gold)); padding: 3px 10px; border-radius: 100px; }
.proof-card .p-num { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.proof-card .p-claim { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.proof-card .p-src { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); opacity: .85; }
.proof-globe { position: absolute; top: 50%; left: 50%; width: 172px; height: 172px; transform: translate(-50%,-50%); z-index: 0; }
.proof-globe img { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask: radial-gradient(circle, #000 68%, transparent 90%);
          mask: radial-gradient(circle, #000 68%, transparent 90%);
  filter: drop-shadow(0 0 28px rgba(224,222,168,0.4));
  animation: logo-breathe 5s ease-in-out infinite; }
@media (max-width: 700px) {
  .proof-stage { height: 360px; perspective: 1000px; }
  .proof-orbit { width: 180px; margin: -95px 0 0 -90px; }
  .proof-card { transform: rotateY(var(--a)) translateZ(280px); }
  .proof-globe { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .proof-orbit { animation: none; } }