/* Cinematic FILEHOST motion — last-win graphics */
body.fh-shell .main, body.fh-landing { position: relative; isolation: isolate; }
.fhStage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
body.fh-shell .sidebar,
body.fh-shell .topbar,
body.fh-shell .main > *:not(.fhStage) { position: relative; z-index: 1; }
body.fh-shell .main { overflow: hidden; }

.fhAurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 18% 12%, rgba(139,92,246,.34), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(34,211,238,.22), transparent 26%),
    radial-gradient(circle at 50% 88%, rgba(99,102,241,.16), transparent 30%);
  animation: fhAurora 14s ease-in-out infinite alternate;
  filter: blur(8px);
}
.fhGrid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,92,246,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 78%);
  animation: fhGrid 18s linear infinite;
}
.fhScan {
  position: absolute; left: 0; right: 0; height: 18%;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,.08), transparent);
  animation: fhScan 7s linear infinite;
}
.fhOrb {
  position: absolute; border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 40px currentColor;
}
.fhOrb.o1 { width: 140px; height: 140px; left: 28%; top: 12%; background: rgba(139,92,246,.18); color: #8b5cf6; animation: fhFloat 8s ease-in-out infinite; }
.fhOrb.o2 { width: 90px; height: 90px; right: 12%; top: 22%; background: rgba(34,211,238,.16); color: #22d3ee; animation: fhFloat 11s ease-in-out infinite reverse; }
.fhOrb.o3 { width: 60px; height: 60px; left: 62%; bottom: 18%; background: rgba(167,139,250,.2); color: #a78bfa; animation: fhFloat 9s ease-in-out infinite 1s; }
.fhDust { position: absolute; inset: 0; width: 100%; height: 100%; }

.fhCinema {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px, 340px);
  gap: 18px;
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(20,16,36,.72), rgba(10,10,16,.55));
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 40px rgba(139,92,246,.12);
  overflow: hidden;
}
.fhCinema:before {
  content: "";
  position: absolute; inset: auto -10% -40% 40%;
  height: 180px;
  background: radial-gradient(circle, rgba(34,211,238,.2), transparent 60%);
  animation: fhPulse 4s ease-in-out infinite;
}
.fhCinemaCopy h2 { margin: 0; color: #fff; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.fhCinemaCopy p { margin: 8px 0 16px; color: #94a3b8; max-width: 42ch; }
.fhCloudLive {
  position: relative;
  min-height: 180px;
  display: grid;
  place-items: center;
}
.fhCloudStage img,
.fhCloudLive img {
  width: min(320px, 100%);
  filter: drop-shadow(0 20px 40px rgba(34,211,238,.28)) drop-shadow(0 0 24px rgba(139,92,246,.35));
  animation: fhBob 5s ease-in-out infinite;
}
.fhRing {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(34,211,238,.35);
  box-shadow: 0 0 18px rgba(34,211,238,.2);
  animation: fhSpin 12s linear infinite;
}
.fhRing.r1 { width: 160px; height: 70px; transform: rotateX(70deg); }
.fhRing.r2 { width: 220px; height: 90px; animation-duration: 18s; animation-direction: reverse; border-color: rgba(139,92,246,.35); }

.fhFlow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  margin: 0 0 22px;
}
.fhStep {
  position: relative;
  padding: 16px 10px 14px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: rgba(16,16,22,.65);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 20px rgba(139,92,246,.08);
}
.fhStep i {
  width: 46px; height: 46px; margin: 0 auto 8px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(139,92,246,.4), rgba(34,211,238,.2));
  box-shadow: 0 0 18px rgba(139,92,246,.45);
  animation: fhPulse 2.8s ease-in-out infinite;
}
.fhStep:nth-child(2) i { animation-delay: .2s; }
.fhStep:nth-child(3) i { animation-delay: .4s; }
.fhStep:nth-child(4) i { animation-delay: .6s; }
.fhStep:nth-child(5) i { animation-delay: .8s; }
.fhStep:nth-child(6) i { animation-delay: 1s; }
.fhStep b { display: block; color: #fff; font-size: 12px; }
.fhStep:not(:last-child):after {
  content: "";
  position: absolute; right: -8px; top: 38px;
  width: 14px; height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  box-shadow: 0 0 10px #22d3ee;
  animation: fhDash 1.4s linear infinite;
}

.fhStat, .fhTable, .fhQuick, .fhPlanCard, .fhChartCard, .fhDonutCard, .fhSideList {
  position: relative;
  overflow: hidden;
}
.fhStat:after, .fhQuick:after, .fhTable:after {
  content: "";
  position: absolute; inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: fhShimmer 5.5s ease-in-out infinite;
}
.fhStatIco { animation: fhPulse 3s ease-in-out infinite; }
.fhEmpty {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 10px;
  background:
    radial-gradient(circle at 50% 40%, rgba(34,211,238,.12), transparent 50%);
}
.fhEmpty img { width: 160px; animation: fhBob 5s ease-in-out infinite; }

@keyframes fhAurora { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }
@keyframes fhGrid { to { background-position: 48px 48px; } }
@keyframes fhScan { from { top: -20%; } to { top: 110%; } }
@keyframes fhFloat { 50% { transform: translate3d(12px, -18px, 0); } }
@keyframes fhBob { 50% { transform: translateY(-10px); } }
@keyframes fhPulse { 50% { filter: brightness(1.25); box-shadow: 0 0 28px rgba(34,211,238,.55); } }
@keyframes fhSpin { to { transform: rotate(360deg); } }
@keyframes fhDash { to { opacity: .25; transform: translateX(4px); } }
@keyframes fhShimmer { 0%, 70% { transform: translateX(0); } 100% { transform: translateX(420%); } }

@media (max-width: 980px) {
  .fhCinema, .fhFlow { grid-template-columns: 1fr; }
  .fhStep:after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fhAurora, .fhGrid, .fhScan, .fhOrb, .fhCloudLive img, .fhStep i, .fhStat:after { animation: none !important; }
}