/* ===== ZeronOne PRO Motion Layer 2026 ===== */
:root {
  --z1-ease: cubic-bezier(.16,1,.3,1);
  --z1-spring: cubic-bezier(.18,1.45,.38,1);
  --z1-card-x: 50%;
  --z1-card-y: 20%;
}

/* Keep text crisp: movement without text-blur rasterization */
.reveal { filter:none !important; }
@keyframes portalPanelIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes appCardEnter { from { opacity:0;transform:translateY(18px) scale(.992); } to { opacity:1;transform:none; } }
@keyframes mobileMenuIn { from{opacity:0;transform:translateY(-10px) scale(.985)} to{opacity:1;transform:none} }

.z1-motion-grid {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.28;
  background-image:
    linear-gradient(rgba(185,255,34,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,255,34,.025) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 78%);
  animation:z1GridDrift 28s linear infinite;
}
@keyframes z1GridDrift { to { background-position:52px 52px; } }

.z1-aurora {
  position:fixed;
  width:52vw;
  height:52vw;
  min-width:520px;
  min-height:520px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(18px);
  opacity:.14;
  background:conic-gradient(from 140deg, transparent 0 18%, rgba(185,255,34,.46) 31%, transparent 47%, rgba(255,211,92,.22) 61%, transparent 78%);
  animation:z1AuroraFloat 16s var(--z1-ease) infinite alternate;
}
.z1-aurora.a { top:-30vw; right:-14vw; }
.z1-aurora.b { bottom:-34vw; left:-25vw; animation-delay:-8s; animation-duration:20s; }
@keyframes z1AuroraFloat {
  from { transform:translate3d(-2%,2%,0) rotate(-8deg) scale(.94); }
  to { transform:translate3d(7%,-5%,0) rotate(12deg) scale(1.08); }
}

/* Moving highlight only on interactive / visual surfaces */
.app-card,.app-metric,.app-hero-card,.portal-content,.portal-progress-card,
.feature-card,.service-card,.price-card,.notice-card,.founder-card,.referral {
  --spot-x:50%;
  --spot-y:25%;
  position:relative;
}
.app-card::before,.app-metric::before,.app-hero-card::before,.portal-content::before,
.portal-progress-card::after,.feature-card::before,.service-card::before,.notice-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(380px circle at var(--spot-x) var(--spot-y), rgba(185,255,34,.075), transparent 46%);
  opacity:0;
  transition:opacity .28s ease;
  z-index:0;
}
.app-card:hover::before,.app-metric:hover::before,.app-hero-card:hover::before,.portal-content:hover::before,
.portal-progress-card:hover::after,.feature-card:hover::before,.service-card:hover::before,.notice-card:hover::before { opacity:1; }
.app-card > *,.app-metric > *,.app-hero-card > *,.portal-content > *,.portal-progress-card > *,
.feature-card > *,.service-card > *,.notice-card > * { position:relative; z-index:1; }

/* Premium border beam */
.z1-beam {
  position:relative;
  isolation:isolate;
}
.z1-beam::after {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--beam-angle,0deg), transparent 0 72%, rgba(185,255,34,.68) 80%, #fff 84%, rgba(185,255,34,.22) 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.38;
  animation:z1BeamSpin 6s linear infinite;
}
@property --beam-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes z1BeamSpin { to { --beam-angle:360deg; } }

/* Rich route entrance */
.page-view.active-view > main,
.page-view.active-view > section:first-child {
  animation:z1RouteIn .62s var(--z1-ease) both;
}
@keyframes z1RouteIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:none; }
}

/* Mobile/app cards animate when entering viewport */
.z1-observe {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s var(--z1-ease), transform .65s var(--z1-ease), border-color .25s ease, box-shadow .25s ease;
}
.z1-observe.z1-in {
  opacity:1;
  transform:none;
}

/* Springy tactile controls */
.btn,.app-nav-btn,.app-mobile-tab,.portal-mobile-step,.portal-step-tab,.admin-filter,.dock-action,.dock-primary {
  transform-origin:center;
  -webkit-tap-highlight-color:transparent;
}
.z1-press { animation:z1Press .32s var(--z1-spring); }
@keyframes z1Press {
  0% { transform:scale(1); }
  45% { transform:scale(.965); }
  100% { transform:scale(1); }
}
.z1-ripple-dot {
  position:absolute;
  width:12px;height:12px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.48);
  transform:translate(-50%,-50%) scale(0);
  animation:z1Ripple .62s ease-out forwards;
  z-index:10;
}
@keyframes z1Ripple { to { transform:translate(-50%,-50%) scale(18); opacity:0; } }

/* Progress shimmer + status pulses */
.portal-progress-fill,.status-track-fill,.app-progress-fill {
  position:relative;
  overflow:hidden;
}
.portal-progress-fill::after,.status-track-fill::after,.app-progress-fill::after {
  content:"";
  position:absolute;
  inset:0;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-160%);
  animation:z1ProgressSweep 2.9s ease-in-out infinite;
}
@keyframes z1ProgressSweep {
  0%,35% { transform:translateX(-160%); }
  78%,100% { transform:translateX(340%); }
}
.portal-status::before,.company-live-dot {
  animation:z1StatusPulse 2s ease-out infinite;
}
@keyframes z1StatusPulse {
  0% { box-shadow:0 0 0 0 rgba(185,255,34,.42),0 0 12px rgba(185,255,34,.45); }
  70%,100% { box-shadow:0 0 0 9px rgba(185,255,34,0),0 0 16px rgba(185,255,34,.22); }
}

/* App metrics have a subtle lift and live value entrance */
.app-metric {
  transition:transform .3s var(--z1-ease), border-color .3s ease, box-shadow .3s ease;
}
.app-metric:hover { transform:translateY(-5px); border-color:rgba(185,255,34,.28); box-shadow:0 18px 44px rgba(0,0,0,.18),0 0 24px rgba(185,255,34,.06); }
.app-metric-value.z1-counting { animation:z1ValuePop .48s var(--z1-spring); }
@keyframes z1ValuePop { from { opacity:.3; transform:translateY(6px) scale(.95); } to { opacity:1; transform:none; } }

/* Task rows feel like native app list items */
.app-task,.admin-client-card,.portal-choice,.portal-upload {
  transition:transform .28s var(--z1-ease), background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.app-task:hover,.admin-client-card:hover,.portal-choice:hover,.portal-upload:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

/* Mobile bottom dock: floating app navigation */
@media (max-width:720px) {
  .mobile-action-dock {
    overflow:hidden;
    animation:dockIn .65s var(--z1-ease) .25s both, z1DockGlow 5s ease-in-out 1s infinite;
  }
  .mobile-action-dock::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(105deg,transparent 12%,rgba(255,255,255,.05) 44%,transparent 68%);
    transform:translateX(-120%);
    animation:z1DockSweep 5.5s ease-in-out infinite;
  }
  @keyframes z1DockGlow { 0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.36),0 0 0 rgba(185,255,34,0)}50%{box-shadow:0 22px 56px rgba(0,0,0,.40),0 0 28px rgba(185,255,34,.07)} }
  @keyframes z1DockSweep { 0%,48%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)} }
  .portal-mobile-step.active,.app-mobile-tab.active {
    box-shadow:0 8px 24px rgba(185,255,34,.09), inset 0 0 0 1px rgba(185,255,34,.12);
  }
}

/* Verified company card */
.company-details-card { overflow:hidden; position:relative; }
.company-details-card::after {
  content:"";
  position:absolute;
  width:190px;height:190px;border-radius:50%;
  right:-90px;top:-110px;
  background:radial-gradient(circle,rgba(185,255,34,.13),transparent 66%);
  pointer-events:none;
}
.company-details-head { display:flex;align-items:center;gap:11px;margin-bottom:16px; }
.company-details-head h3 { margin:0 0 3px; }
.company-details-head p { margin:0;font-size:11.5px; }
.company-live-dot { width:10px;height:10px;border-radius:50%;background:var(--green);flex:none; }
.company-details-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.company-details-grid > div { padding:10px 11px;border:1px solid var(--soft);border-radius:13px;background:rgba(255,255,255,.018);min-width:0; }
.company-details-grid small { display:block;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px; }
.company-details-grid strong,.company-details-grid a { display:block;color:var(--text);font-size:11.5px;font-weight:850;line-height:1.45;overflow-wrap:anywhere; }
.company-details-grid a:hover { color:var(--green); }
.company-online-note { margin:13px 0 0!important;font-size:11.5px!important; }

@media (max-width:520px) {
  .company-details-grid { grid-template-columns:1fr; }
  .z1-aurora { min-width:420px;min-height:420px;opacity:.10; }
  .z1-motion-grid { opacity:.20;background-size:44px 44px; }
  .app-metric:hover,.app-task:hover,.admin-client-card:hover,.portal-choice:hover,.portal-upload:hover { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  .z1-motion-grid,.z1-aurora,.z1-beam::after,.portal-progress-fill::after,.status-track-fill::after,.app-progress-fill::after,
  .portal-status::before,.company-live-dot,.mobile-action-dock { animation:none!important; }
  .z1-observe { opacity:1!important;transform:none!important;transition:none!important; }
}