/* ============================================================================
   Velocity — Universal Header System  (SINGLE SOURCE OF TRUTH)
   ----------------------------------------------------------------------------
   Load this stylesheet on EVERY page that renders the .vel-header component
   (marketing site, login, register, dashboard, and any FUTURE page). It fixes
   the shared header's animation / effect / transition bugs universally and
   provides the full header styling so new pages need ZERO inline header CSS.

   Why one file: the header markup had been copied inline into 4 pages and
   drifted apart (mismatched keyframe names, a broken 'scan' loop, an aurora
   layer that leaked past the rounded corners on the dashboard, and missing
   scroll transitions on the auth pages). Fixing it in one place cures every
   page at once and guarantees future headers inherit the corrected system.

   Theming: colours are driven by CSS custom properties. Default = the
   teal-green product palette (index / dashboard). Pages on the cyan sign-in
   palette set  data-velh-theme="cyan"  on the .vel-header element.

   This sheet is intentionally loaded AFTER any legacy per-page header CSS so
   its corrections win the cascade. New pages should rely on this file alone.
   ========================================================================== */

.vel-header{
  --velh-accent:#00d4aa;
  --velh-accent-rgb:0,212,170;
  --velh-accent2-rgb:0,184,148;
}
.vel-header[data-velh-theme="cyan"]{
  --velh-accent:#06d6e0;
  --velh-accent-rgb:6,214,224;
  --velh-accent2-rgb:3,152,184;
}
.vel-header[data-velh-theme="royal"]{
  --velh-accent:#3b76ff;
  --velh-accent-rgb:59,118,255;
  --velh-accent2-rgb:36,80,224;
}

/* ---------------------------------------------------------------------------
   FULL BASE SYSTEM for FUTURE pages.
   Wrapped in :where() (zero specificity) so it can NEVER override an existing
   page's own header rules — it only supplies defaults where nothing else does.
   --------------------------------------------------------------------------- */
:where(.vel-header){position:sticky;top:14px;z-index:950;width:100%;margin:14px auto 0;padding:0 clamp(12px,3vw,26px);background:transparent;border:0;animation:velHeaderIn .85s cubic-bezier(.22,1,.36,1) both}
:where(.vel-header__inner){position:relative;overflow:visible;max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(9,16,32,.82),rgba(9,16,32,.55));-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(var(--velh-accent-rgb),.16);box-shadow:0 20px 55px -22px rgba(0,0,0,.75),0 4px 18px -10px rgba(var(--velh-accent-rgb),.35),inset 0 1px 0 rgba(255,255,255,.05)}
:where(.vel-header__inner)::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--velh-accent-rgb),0) 0%,rgba(var(--velh-accent-rgb),.75) 25%,rgba(var(--velh-accent2-rgb),.35) 45%,rgba(var(--velh-accent-rgb),0) 65%);background-size:240% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:velBorderFlow 7s linear infinite}
:where(.vel-brand){display:flex;align-items:center;gap:13px;text-decoration:none;cursor:pointer}
:where(.vel-brand,.vel-nav,.vel-status){position:relative;z-index:2}
:where(.vel-brand__core){position:relative;width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
:where(.vel-brand__ring){position:absolute;inset:-2.5px;border-radius:16px;z-index:0;background:conic-gradient(from 0deg,rgba(var(--velh-accent-rgb),0) 0deg,rgba(var(--velh-accent-rgb),.95) 70deg,rgba(var(--velh-accent2-rgb),.35) 150deg,rgba(var(--velh-accent-rgb),0) 230deg,rgba(var(--velh-accent-rgb),0) 360deg);animation:velSpin 4.5s linear infinite}
:where(.vel-brand__core)::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:0;box-shadow:0 0 22px -2px rgba(var(--velh-accent-rgb),.55);animation:velPulse 3.4s ease-in-out infinite}
:where(.vel-brand__logo){position:relative;z-index:1;width:100%;height:100%;border-radius:13px;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,#0c1d34,#060f1f);box-shadow:inset 0 0 0 1px rgba(var(--velh-accent-rgb),.18)}
:where(.vel-brand__logo) svg{width:27px;height:27px;display:block;filter:drop-shadow(0 0 6px rgba(var(--velh-accent-rgb),.55))}
:where(.vel-brand__text){display:flex;flex-direction:column;line-height:1.05;gap:3px}
:where(.vel-brand__name){font-weight:800;font-size:22px;letter-spacing:.3px;background:linear-gradient(100deg,#eafcff 0%,#9de8f0 30%,#fff 50%,#7fe0ea 70%,#eafcff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:velShimmer 6s linear infinite}
:where(.vel-brand__ai){background:linear-gradient(120deg,rgba(var(--velh-accent-rgb),1),rgba(var(--velh-accent2-rgb),1));-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:4px}
:where(.vel-brand__tag){font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(var(--velh-accent-rgb),.72)}
:where(.vel-nav){display:flex;align-items:center;gap:6px;margin-left:auto;padding:5px;border-radius:15px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:where(.vel-nav__tab){position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;font-size:14px;font-weight:600;color:rgba(226,240,236,.66);text-decoration:none;cursor:pointer;overflow:hidden;transition:color .25s ease,transform .2s ease}
:where(.vel-nav__tab)>svg,:where(.vel-nav__tab)>span{position:relative;z-index:1}
:where(.vel-nav__tab) svg{width:16px;height:16px}
:where(.vel-nav__tab):hover{color:#eaf7f3;transform:translateY(-1px)}
:where(.vel-nav__tab.is-active){color:#eafaf5}
:where(.vel-nav__tab.is-active)::before{content:"";position:absolute;inset:0;border-radius:11px;z-index:0;background:linear-gradient(135deg,rgba(var(--velh-accent-rgb),.24),rgba(var(--velh-accent2-rgb),.12));box-shadow:inset 0 0 0 1px rgba(var(--velh-accent-rgb),.4),0 4px 16px -6px rgba(var(--velh-accent-rgb),.6);animation:velChipIn .4s cubic-bezier(.22,1,.36,1) both}
:where(.vel-nav__tab.is-active)::after{content:"";position:absolute;inset:0;border-radius:11px;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);background-size:220% 100%;animation:velScan 3.4s ease-in-out infinite}
:where(.vel-auth){display:flex;align-items:center;gap:10px;position:relative;z-index:2}
:where(.vel-status){display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:7px 13px 7px 11px;border-radius:999px;background:rgba(var(--velh-accent-rgb),.08);border:1px solid rgba(var(--velh-accent-rgb),.2);font-size:12px;font-weight:600;letter-spacing:.3px;color:rgba(var(--velh-accent-rgb),.92)}
:where(.vel-status__dot){width:8px;height:8px;border-radius:50%;background:var(--velh-accent);flex:0 0 auto;box-shadow:0 0 0 0 rgba(var(--velh-accent-rgb),.6);animation:velDot 2s ease-out infinite}

/* ---------------------------------------------------------------------------
   UNIVERSAL FIXES  (real specificity + loaded last, so they win everywhere)
   --------------------------------------------------------------------------- */

/* FIX — smooth, consistent scroll-shrink on EVERY page. The auth pages
   (login / register) previously had no transition and no scrolled state, so
   their header changes were abrupt / absent. */
.vel-header{transition:top .4s ease,margin .4s ease,padding .4s ease}
.vel-header .vel-header__inner{transition:padding .4s ease,border-radius .4s ease,box-shadow .4s ease,border-color .4s ease,background .4s ease}
.vel-header.is-scrolled{top:10px;margin-top:10px}
.vel-header.is-scrolled .vel-header__inner{padding:9px 18px;border-radius:17px}
.vel-header.is-scrolled .vel-header__inner::before{border-radius:17px}
.vel-header.is-scrolled .vel-brand__core{transform:scale(.9)}

/* FIX — aurora sheen. The dashboard copy drifted: it painted the glow on the
   element itself with NO clipping, so the blurred light leaked past the
   rounded corners, and it animated a differently-named keyframe. Force one
   correct, clipped, palette-aware structure on every page. */
.vel-header .vel-header__aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;background:none;filter:none;animation:none}
.vel-header .vel-header__aurora::before{content:"";position:absolute;inset:-60% -15% auto -15%;height:220%;background:radial-gradient(42% 70% at 12% 20%,rgba(var(--velh-accent-rgb),.18),transparent 70%),radial-gradient(38% 62% at 80% 12%,rgba(var(--velh-accent2-rgb),.15),transparent 72%),radial-gradient(34% 60% at 52% 100%,rgba(var(--velh-accent-rgb),.10),transparent 75%);filter:blur(4px);will-change:transform;animation:velAurora 14s ease-in-out infinite alternate}

/* FIX — GPU / compositor hints so the continuously-running sheens (border
   flow, name shimmer, active-tab scan, aurora) composite on their own layer
   instead of micro-stuttering on the main thread. */
.vel-header .vel-header__inner::before{will-change:background-position}
.vel-header .vel-brand__name{will-change:background-position}
.vel-header .vel-brand__ring{will-change:transform}
.vel-header .vel-nav__tab.is-active::after{will-change:background-position}

/* FIX — unified logo mark sizing. The "V" mark now fills its square the SAME
   way on every page/header (only the ink colour differs per palette). Works
   whether the mark is an inline <svg> or an <img>, and overrides the drifted
   per-page 27px / 64px / 100% / <img> values so every header logo matches. */
.vel-header .vel-brand__logo{padding:0;overflow:hidden;display:grid;place-items:center}
.vel-header .vel-brand__logo svg,
.vel-header .vel-brand__logo img{width:80%;height:80%;display:block;object-fit:contain;filter:drop-shadow(0 0 6px rgba(var(--velh-accent-rgb),.5))}

/* ---------------------------------------------------------------------------
   KEYFRAMES — defined here so EVERY page that loads this file has the full,
   corrected set available regardless of what it declared inline.
   --------------------------------------------------------------------------- */
@keyframes velHeaderIn{from{opacity:0;transform:translateY(-130%)}to{opacity:1;transform:none}}
@keyframes velBorderFlow{from{background-position:0 0}to{background-position:240% 0}}
@keyframes velAurora{0%{transform:translate3d(-3%,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes velSpin{to{transform:rotate(360deg)}}
@keyframes velPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes velShimmer{from{background-position:0 0}to{background-position:220% 0}}
@keyframes velChipIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes velDot{0%{box-shadow:0 0 0 0 rgba(var(--velh-accent-rgb),.55)}70%{box-shadow:0 0 0 7px rgba(var(--velh-accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--velh-accent-rgb),0)}}
@keyframes velPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* FIX — the active-tab shine used to SNAP on every loop: it ended at -40%
   while the highlight was still partly visible, then jumped back to 120%,
   producing a flicker every cycle. It now parks the highlight fully
   off-screen at BOTH ends (180% -> -80%, then a hold), so the loop reset is
   invisible and the sweep is perfectly seamless. Both the canonical name and
   the dashboard's drifted "velh" name are corrected. */
@keyframes velScan{0%{background-position:180% 0}45%{background-position:-80% 0}100%{background-position:-80% 0}}
@keyframes velhScan{0%{background-position:180% 0}45%{background-position:-80% 0}100%{background-position:-80% 0}}

/* Opt-in body offset for pages that PIN the header (position:fixed). */
body.velh-pinned{padding-top:104px}

/* Responsive (mirrors the legacy breakpoints; safe defaults for new pages). */
@media (max-width:640px){
  :where(.vel-header){top:10px;margin-top:10px;padding:0 12px}
  :where(.vel-header__inner){padding:10px 14px;border-radius:16px}
  .vel-header.is-scrolled .vel-header__inner{padding:8px 13px;border-radius:14px}
  :where(.vel-brand__core){width:40px;height:40px}
  :where(.vel-brand__logo) svg{width:23px;height:23px}
  :where(.vel-brand__name){font-size:19px}
  body.velh-pinned{padding-top:92px}
}
@media (max-width:480px){:where(.vel-nav){display:none}}

/* Respect reduced-motion everywhere (covers both naming schemes). */
@media (prefers-reduced-motion:reduce){
  .vel-header,
  .vel-header .vel-header__inner::before,
  .vel-header .vel-header__aurora,
  .vel-header .vel-header__aurora::before,
  .vel-header .vel-brand__ring,
  .vel-header .vel-brand__core::after,
  .vel-header .vel-brand__name,
  .vel-header .vel-nav__tab.is-active::before,
  .vel-header .vel-nav__tab.is-active::after,
  .vel-header .vel-status__dot{animation:none!important}
}