/* Shared polish for every page: larger header/footer type and subtle motion.
   Loaded last so it overrides research.css / writeups.css. */
:root{--sh-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- Header ---------- */
/* Opacity-only entrance and blur on a pseudo-element: transform/backdrop-filter on the
   header itself would trap the position:fixed mobile drawer inside the header box. */
.site-header,body>header{animation:sh-fade .6s ease both}
.site-header{background:rgba(10,11,13,.82)}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.site-header .nav-links,body>header nav:not(.mobile-nav){gap:34px}
.site-header .nav-links a,body>header nav:not(.mobile-nav) a{position:relative;font-size:16px;font-weight:500;letter-spacing:.01em;padding:6px 0;color:#b4b6b9;transition:color .25s ease}
.site-header .nav-links a::after,body>header nav:not(.mobile-nav) a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sh-ease)}
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current=page],
body>header nav:not(.mobile-nav) a:hover,body>header nav:not(.mobile-nav) a[aria-current=page]{color:#fff}
.site-header .nav-links a:hover::after,.site-header .nav-links a[aria-current=page]::after,
body>header nav:not(.mobile-nav) a:hover::after,body>header nav:not(.mobile-nav) a[aria-current=page]::after{transform:scaleX(1)}
.logo img,body>header .brand-logo{transition:transform .35s var(--sh-ease),opacity .25s ease}
.logo:hover img,body>header .brand:hover .brand-logo{transform:scale(1.03)}
.mobile-nav a{font-size:19px}
@media(max-width:1000px){.site-header .nav-links,body>header nav:not(.mobile-nav){gap:24px}.site-header .nav-links a,body>header nav:not(.mobile-nav) a{font-size:15px}}

/* ---------- Footer ---------- */
body>footer.footer{padding:40px 0;font-size:15px;color:#9a9ca0}
body>footer.footer .footer-inner{align-items:center;row-gap:16px}
body>footer.footer .footer-inner>span{font-size:15px;letter-spacing:.02em}
body>footer.footer .footer-inner>div{display:flex;flex-wrap:wrap;gap:12px 30px}
body>footer.footer a{margin:0;font-size:15px;color:#c4c5c7;position:relative;transition:color .25s ease}
body>footer.footer a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sh-ease)}
body>footer.footer a:hover{color:#fff}
body>footer.footer a:hover::after{transform:scaleX(1)}
@media(max-width:600px){body>footer.footer{padding:32px 0}body>footer.footer .footer-inner{flex-direction:column;align-items:flex-start}body>footer.footer .footer-inner>div{gap:10px 22px}}

/* ---------- Page entrance ---------- */
.hero-copy>*,.page-head>*,.hero>*{animation:sh-rise .8s var(--sh-ease) both}
.hero-copy>:nth-child(2),.page-head>:nth-child(2),.hero>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3),.page-head>:nth-child(3),.hero>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4),.page-head>:nth-child(4){animation-delay:.24s}
.hero-copy>:nth-child(5){animation-delay:.32s}
.hero-art{animation:sh-fade 1.2s .2s ease both}

/* Hero art: slow orbit, breathing emblem */
.orbit.a{animation:sh-spin 90s linear infinite}
.orbit.b{animation:sh-spin 50s linear infinite reverse}
.orbit.c{animation:sh-pulse-ring 6s ease-in-out infinite}
.emblem{animation:sh-breathe 6s ease-in-out infinite}
.orbit-node{transition:transform .3s var(--sh-ease),border-color .3s ease,background .3s ease}
.orbit-node:hover{translate:0 -4px}

/* ---------- Scroll reveal (only when JS is running) ---------- */
.sh-js .sh-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sh-ease),transform .7s var(--sh-ease)}
.sh-js .sh-reveal.is-visible{opacity:1;transform:none}

/* Rows rendered by JS (writeups, CVEs) fade in as they appear */
.writeup-row,.cve-row{animation:sh-rise .45s var(--sh-ease) both}

/* ---------- Interactions ---------- */
.btn,.more-btn{transition:transform .25s var(--sh-ease),background .25s ease,border-color .25s ease,box-shadow .25s ease}
.btn:hover,.more-btn:hover{transform:translateY(-2px)}
.btn .css-arrow,.link .css-arrow,.contact-link .css-arrow,.cve-source .css-arrow{transition:translate .3s var(--sh-ease)}
.btn:hover .css-arrow,.feature:hover .link .css-arrow,.contact-link:hover .css-arrow,.cve-source:hover .css-arrow{translate:3px -3px}
.panel{transition:border-color .3s ease,box-shadow .3s ease}
.panel:hover{border-color:#45474b;box-shadow:0 14px 34px #0004}
.control,.filters input,.filters select{transition:border-color .25s ease,box-shadow .25s ease}
.control:focus,.filters input:focus,.filters select:focus{box-shadow:0 0 0 3px #ffffff14}

/* ---------- About page (minimal) ---------- */
.about-min{padding:90px 0 110px;display:grid;gap:56px;max-width:860px}
.about-min .lead{font-size:17px;max-width:640px}
.about-min h1{font-family:var(--display);font-weight:500;font-size:clamp(44px,6vw,76px);line-height:1.08;letter-spacing:-.06em;margin:18px 0 22px}
.founder-card{display:flex;align-items:center;gap:30px;padding:34px;border:1px solid #303235;border-radius:12px;background:radial-gradient(ellipse at top right,#1d1f22,#121315 65%)}
.founder-avatar{position:relative;flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:#1b1d20;border:1px solid #47494d;font:500 30px var(--display);letter-spacing:-.04em;color:#f0f0ee}
.founder-avatar::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed #6a6c70;animation:sh-spin 24s linear infinite}
.founder-card .eyebrow{margin:0 0 8px}
.founder-card h2{font:500 clamp(28px,4vw,38px)/1.15 var(--display);letter-spacing:-.04em;margin:0 0 6px}
.founder-card p{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 20px}
.founder-card .btn{gap:16px}
@media(max-width:600px){.about-min{padding:56px 0 80px;gap:40px}.founder-card{flex-direction:column;align-items:flex-start;padding:26px;gap:22px}}

/* ---------- Keyframes ---------- */
@keyframes sh-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sh-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes sh-spin{from{rotate:0deg}to{rotate:360deg}}
@keyframes sh-breathe{0%,100%{scale:1;opacity:.92}50%{scale:1.06;opacity:1}}
@keyframes sh-pulse-ring{0%,100%{scale:1;opacity:.85}50%{scale:1.05;opacity:.5}}

/* Respect users who turn motion off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sh-js .sh-reveal{opacity:1;transform:none}
}