/* StatusDock motion layer. Loaded from Main.dc.html; driven by animations.js.
   Tweak the variables below to retune everything at once. */
:root{
  --sd-ease:cubic-bezier(0.23,1,0.32,1);
  --sd-accent:#0071E3;
  --sd-green:#34C759;
  --sd-amber:#FF9F0A;
}
html{scroll-behavior:smooth}
#highlights,#status-pages,#integrations,#waitlist,#top{scroll-margin-top:60px}

/* ---------- pre-reveal state (added by JS, removed when animated in) ---------- */
.sd-pre{opacity:0}

/* ---------- scroll progress bar ---------- */
.sd-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sd-accent),#5AC8FA,var(--sd-green));
  box-shadow:0 0 12px rgba(0,113,227,.55)}

/* ---------- nav ---------- */
.nav{transition:box-shadow .3s ease,background-color .3s ease}
.nav[data-scrolled="true"]{box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 30px rgba(0,0,0,.06) !important;background:rgba(255,255,255,.86) !important}
.nav .navlink[href^="#"]:not(:first-child){position:relative}
.nav .navlink[href^="#"]:not(:first-child)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:currentColor;transform:scaleX(0);transition:transform .35s var(--sd-ease)}
.nav .navlink[data-active="true"]{opacity:1}
.nav .navlink[data-active="true"]::after,.nav .navlink:hover::after{transform:scaleX(1)}

/* ---------- hero background blobs ---------- */
.sd-hero{position:relative;overflow:clip}
.sd-hero>*:not(.sd-blobs){position:relative;z-index:1}
.sd-blobs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sd-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;
  animation:sd-drift 18s ease-in-out infinite alternate}
.sd-blob.b1{width:520px;height:520px;left:8%;top:-120px;background:radial-gradient(circle,#9CCBFF,transparent 70%)}
.sd-blob.b2{width:460px;height:460px;right:6%;top:40px;background:radial-gradient(circle,#B5F0C6,transparent 70%);animation-duration:23s;animation-delay:-6s}
.sd-blob.b3{width:380px;height:380px;left:42%;top:260px;background:radial-gradient(circle,#FFE2A8,transparent 70%);animation-duration:27s;animation-delay:-11s;opacity:.45}
@keyframes sd-drift{
  0%{translate:0 0;scale:1}
  50%{translate:60px 40px;scale:1.12}
  100%{translate:-50px 80px;scale:.94}
}

/* ---------- hero text shimmer ---------- */
.sd-shimmer{background:linear-gradient(100deg,#1D1D1F 40%,#0071E3 50%,#1D1D1F 60%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:sd-shimmer 1.8s .1s var(--sd-ease) 1 both}
@keyframes sd-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- logo equalizer bars ---------- */
svg[aria-label="StatusDock logo"] rect:not(:first-child){transform-box:fill-box;transform-origin:50% 100%}
svg[aria-label="StatusDock logo"] rect:last-child{animation:sd-glow 2.4s ease-in-out infinite}
@keyframes sd-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(52,199,89,0))}50%{filter:drop-shadow(0 0 5px rgba(52,199,89,.9))}}
header svg rect:last-child{animation:sd-blink 2.4s ease-in-out infinite}
@keyframes sd-blink{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- dashboard mock ---------- */
figure[aria-label="Example StatusDock dashboard"]{position:relative;transition:transform .25s ease-out;will-change:transform}
figure[aria-label="Example StatusDock dashboard"]::after{content:"";position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,113,227,0),rgba(0,113,227,.09),rgba(0,113,227,0));
  animation:sd-scan 5s linear infinite}
@keyframes sd-scan{from{transform:translateY(-100px)}to{transform:translateY(520px)}}

/* pulsing status dots */
span[aria-hidden="true"][style*="border-radius: 5px"],
li>span[aria-hidden="true"]:first-child{position:relative}
span[aria-hidden="true"][style*="border-radius: 5px"]::after,
li>span[aria-hidden="true"]:first-child::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:.6;
  animation:sd-ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes sd-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(3);opacity:0}}

/* the amber alert note */
.sd-alert.sd-shake{animation:sd-shake .7s var(--sd-ease) both}
@keyframes sd-shake{0%,100%{translate:0}15%{translate:-6px}30%{translate:5px}45%{translate:-4px}60%{translate:3px}75%{translate:-1px}}

/* hover lifts */
article,li[style*="border-radius: 18px"]{transition:transform .5s var(--sd-ease),box-shadow .5s var(--sd-ease)}
@media (hover:hover) and (pointer:fine){
  article:hover{box-shadow:0 18px 50px rgba(0,0,0,.10)}
  li[style*="border-radius: 18px"]:hover{transform:translateY(-4px)}
  li[style*="border-radius: 14px"]{transition:transform .3s var(--sd-ease),background-color .3s ease}
  li[style*="border-radius: 14px"]:hover{transform:translateX(6px);background-color:#EDEDF0 !important}
}

/* spotlight that follows the cursor on cards */
article{position:relative;overflow:hidden}
article::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,113,227,.09),transparent 60%)}
article:hover::before{opacity:1}

/* uptime bars */
div[aria-hidden="true"][style*="height: 36px"]>span{transform-origin:50% 100%;transition:transform .2s var(--sd-ease),filter .2s ease}
div[aria-hidden="true"][style*="height: 36px"]>span:hover{transform:scaleY(1.18);filter:brightness(1.1)}

/* ---------- integrations: rotating glow border ---------- */
#integrations>div{position:relative;overflow:hidden;isolation:isolate}
#integrations>div::before{content:"";position:absolute;inset:-60%;z-index:-2;opacity:.55;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(0,113,227,.55) 75%,rgba(52,199,89,.45) 88%,transparent 100%);
  animation:sd-spin 9s linear infinite}
#integrations>div::after{content:"";position:absolute;inset:2px;border-radius:34px;background:#1D1D1F;z-index:-1}
@keyframes sd-spin{to{transform:rotate(360deg)}}
#integrations ul>li{transition:background-color .3s ease,transform .4s var(--sd-ease),box-shadow .3s ease}
#integrations ul>li:not(:last-child){animation:sd-bob 5s ease-in-out infinite}
#integrations ul>li:nth-child(2n){animation-duration:6.2s;animation-delay:-1.4s}
#integrations ul>li:nth-child(3n){animation-duration:7.1s;animation-delay:-3s}
#integrations ul>li:nth-child(5n){animation-duration:5.6s;animation-delay:-2.2s}
@keyframes sd-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (hover:hover) and (pointer:fine){
  #integrations ul>li:not(:last-child):hover{background:rgba(255,255,255,.18) !important;transform:scale(1.08)}
}

/* ---------- waitlist ---------- */
input[type="email"]{transition:box-shadow .3s ease,border-color .3s ease,transform .3s var(--sd-ease)}
input[type="email"]:focus{border-color:#0071E3 !important;box-shadow:0 0 0 5px rgba(0,113,227,.15);transform:scale(1.02);outline:none}

/* ripple + confetti */
.sd-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:sd-ripple .6s ease-out forwards}
@keyframes sd-ripple{to{transform:scale(1);opacity:0}}
.pill{position:relative;overflow:hidden}
.sd-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}

/* ---------- reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sd-blob,.sd-shimmer,.sd-alert,#integrations>div::before,#integrations ul>li,
  figure::after,span[aria-hidden="true"]::after,svg rect{animation:none !important}
  .sd-pre{opacity:1}
}

/* ---------- uptime bar tooltip ---------- */
.sd-tip{position:fixed;z-index:10000;pointer-events:none;padding:14px 14px 12px;border-radius:16px;
  background:rgba(29,29,31,.94);color:#F5F5F7;font:13px/1.35 'Geist',-apple-system,sans-serif;
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 20px 50px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.08);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:var(--ax,50%) 100%;
  transition:opacity .16s ease,transform .22s var(--sd-ease)}
.sd-tip.below{transform-origin:var(--ax,50%) 0;transform:translateY(-6px) scale(.96)}
.sd-tip.show{opacity:1;transform:none}
.sd-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:rgba(29,29,31,.94);transform:rotate(45deg);border-radius:2px}
.sd-tip.below::after{bottom:auto;top:-5px}
.sd-tip .d{display:flex;align-items:center;gap:7px;color:#A1A1A6;font-size:12px;font-weight:500}
.sd-tip .dot{width:7px;height:7px;border-radius:50%;background:#34C759}
.sd-tip .dot.slow{background:#FF9F0A}.sd-tip .dot.down{background:#FF3B30}
.sd-tip .ti{margin-top:6px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.sd-tip .ti.ok{color:#5BE281}.sd-tip .ti.slow{color:#FFB84D}.sd-tip .ti.down{color:#FF6B61}
.sd-tip .su{font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:#A1A1A6;margin-top:2px}
.sd-tip .spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:11px}
.sd-tip .spark i{flex:1;background:rgba(255,255,255,.28);border-radius:2px;transform-origin:50% 100%;animation:sd-grow .45s var(--sd-ease) backwards}
.sd-tip .spark i.a{background:#FF9F0A}.sd-tip .spark i.r{background:#FF3B30}
.sd-tip .spark i:nth-child(n){animation-delay:calc(var(--i,0)*1ms)}
@keyframes sd-grow{from{transform:scaleY(.1)}}
.sd-tip .ax{display:flex;justify-content:space-between;font-size:10px;color:#6E6E73;margin-top:3px}
.sd-tip .gr{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.sd-tip .gr>div{flex:1;display:flex;flex-direction:column}
.sd-tip .gr b{font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.sd-tip .gr span{font-size:10.5px;color:#8E8E93}
@media (prefers-reduced-motion:reduce){.sd-tip,.sd-tip .spark i{transition:none;animation:none}}
.sd-tip .big{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums}
.sd-tip .big b{font-weight:700}
.sd-tip .rows{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.sd-tip .rows>div{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;color:#A1A1A6}
.sd-tip .rows b{color:#F5F5F7;font-weight:600;font-variant-numeric:tabular-nums}