@import url('/css/fonts.css?v=d4535c2e');

/* ============================================================
   ZENITH TASKS — horizontal-scroll experiential site
   Ported from design_handoff_zenith_tasks_site. Panels are inline-styled
   by design; this file carries the base, keyframes and fallbacks.
   ============================================================ */

html, body {
  margin: 0; padding: 0; background: #000; color: #E8E8E6;
  font-family: Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
* { box-sizing: border-box; }
::selection { background: rgba(246, 231, 185, .22); color: #E8E8E6; }
a { color: #F6E7B9; text-decoration: none; }
a:hover { color: #E8E8E6; }
[data-zt-viewport]::-webkit-scrollbar { display: none; }
[data-zt-viewport] { scrollbar-width: none; -ms-overflow-style: none; }
input::placeholder { color: rgba(232, 232, 230, .28); }
button { font-family: inherit; }

@keyframes ztCue { 0%,100% { opacity:.4; transform:translateX(0) } 50% { opacity:1; transform:translateX(7px) } }
@keyframes ztSpin { to { transform:rotate(360deg) } }
@keyframes ztSpinR { to { transform:rotate(-360deg) } }
@keyframes ztBreath { 0%,100% { opacity:.45; transform:scale(1) } 50% { opacity:1; transform:scale(1.09) } }
@keyframes ztRipple { from { transform:scale(.35); opacity:.5 } to { transform:scale(2.6); opacity:0 } }
@keyframes ztDrift { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes ztTwinkle { 0%,100% { opacity:.25 } 50% { opacity:.9 } }

/* honeypot — off-screen, never focusable */
.zt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* keyboard skip into the flight */
.zx-skip {
  position: fixed; top: -60px; left: 16px; z-index: 60;
  font-size: 12px; font-weight: 300; letter-spacing: .1em;
  color: #E8E8E6; background: #060608;
  border: 1px solid rgba(232, 232, 230, .28);
  padding: 11px 16px; border-radius: 100px;
  transition: top .25s cubic-bezier(.16,1,.3,1);
}
.zx-skip:focus { top: 16px; }

/* respect reduced motion — still the destination, just still */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   the shared 7-app bloom ring (styles copied so this page is
   self-contained — it doesn't load the suite's styles.css)
   ============================================================ */
:root { --zx-accent:#E8E8E6; --zx-core:#0A0A0C; --zx-ease:cubic-bezier(.16,1,.3,1); }
@keyframes zxRingIn { from { opacity:0; transform:translate(-50%,-50%) scale(.55); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes zxStarIn { from { opacity:0; transform:translate(var(--tx),var(--ty)) scale(.2); } to { opacity:1; transform:translate(var(--tx),var(--ty)) scale(1); } }
.zx-ring-layer { position:fixed; z-index:45; pointer-events:none; left:0; top:0; width:0; height:0; }
.zx-ring { position:absolute; width:0; height:0; }
.zx-ring-circle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(232,232,230,.16); border-radius:50%; animation:zxRingIn .5s var(--zx-ease); }
.zx-ring-heart { position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%); color:var(--zx-accent); font-size:11px; line-height:1; text-align:center; opacity:.6; }
.zx-ring-star { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; padding:0; background:none; border:none; cursor:pointer; pointer-events:auto; }
.zx-ring-star .zx-star-glow { position:absolute; inset:0; border-radius:50%; filter:blur(9px); opacity:.85; }
.zx-ring-star .zx-star-disc { position:relative; width:100%; height:100%; border-radius:50%; border:1px solid rgba(232,232,230,.35); background:var(--zx-core); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .22s var(--zx-ease), border-color .22s, box-shadow .22s; }
.zx-ring-star:hover .zx-star-disc, .zx-ring-star:focus-visible .zx-star-disc { transform:scale(1.16); border-color:rgba(232,232,230,.8); box-shadow:0 0 18px rgba(232,232,230,.35); }
.zx-ring-star img { width:60px; height:60px; flex:none; max-width:none; filter:drop-shadow(0 0 5px rgba(232,232,230,.6)); }
.zx-ring-star .zx-star-label { position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); white-space:nowrap; font:300 11px/1 Roboto,sans-serif; letter-spacing:.08em; color:rgba(232,232,230,.7); }