/* ============================================================
   WTF MORTGAGE — GLOBAL STYLES
   Design tokens + everything shared across all pages.
   Page-specific styles live in src/css/pages/*.css
   ============================================================ */

:root{
  --pink:#ff3366; --yellow:#ffef00; --navy:#1a1a2e;
  --cream:#fff5e1; --mint:#eafaf1; --black:#0a0a0a; --ink:#1a1a2e;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--mint);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;overflow-x:hidden;}

/* ---------- NAV / HEADER (injected by components/header.js) ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
    padding:16px 28px;background:rgba(234,250,241,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(26,26,46,.08);}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;}
.logo .box{font-family:'Bungee';font-size:18px;line-height:1;padding:5px 10px;border-radius:6px;animation:wtf-rotate 4s ease-in-out infinite;}
.logo .word{font-family:'Bungee';font-size:18px;line-height:1;color:var(--ink);}
@keyframes wtf-rotate{0%,45%{background:var(--pink);color:var(--cream);}55%,100%{background:var(--yellow);color:var(--navy);}}
.logo .otto-mini{animation:bob 3s ease-in-out infinite;display:inline-flex;}
@keyframes bob{0%,100%{transform:translateY(2px) rotate(-3deg);}50%{transform:translateY(-2px) rotate(3deg);}}
.nav-links{display:flex;align-items:center;gap:24px;font-family:'JetBrains Mono';font-size:13px;font-weight:500;}
.nav-links a{color:var(--ink);text-decoration:none;opacity:.7;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1;color:var(--pink);}
.nav-cta{background:var(--navy);color:var(--yellow)!important;font-family:'Bungee';font-size:11px;padding:9px 15px;border-radius:8px;opacity:1!important;}
.nav-cta:hover{background:var(--pink);color:#fff!important;}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none;}}

/* ---------- AMBIENT TECH-SPRITE BACKGROUND (filled by app.js) ---------- */
.techbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.techbg svg{position:absolute;opacity:.1;}
.tspin{animation:spin 16s linear infinite;transform-origin:center;}
@keyframes spin{to{transform:rotate(360deg);}}
.tbob{animation:floaty 7s ease-in-out infinite;}
.tbob2{animation:floaty 9s ease-in-out infinite 1.5s;}
.tbob3{animation:floaty 8s ease-in-out infinite .8s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ---------- SCANLINE TEXTURE ---------- */
.scan::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
              background:repeating-linear-gradient(0deg,rgba(26,26,46,.035) 0 2px,transparent 2px 4px);}

/* ---------- PELLET TRAIL DIVIDER (Otto's path between sections) ---------- */
.trail-div{position:relative;z-index:40;display:flex;justify-content:center;align-items:center;height:46px;}
.trail-div .rail{display:flex;flex-direction:column;gap:10px;align-items:center;}
.trail-div .pel{width:9px;height:9px;border-radius:50%;background:var(--pink);opacity:.7;animation:pelblink 1.6s ease-in-out infinite;}
.trail-div .pel:nth-child(2){animation-delay:.2s;}
.trail-div .pel:nth-child(3){animation-delay:.4s;}
.trail-div .pel:nth-child(4){animation-delay:.6s;}
.trail-div .pel:nth-child(5){animation-delay:.8s;}
@keyframes pelblink{0%,100%{opacity:.25;transform:scale(.7);}50%{opacity:.9;transform:scale(1);}}

/* ---------- SHARED BUTTONS ---------- */
.btn-primary{font-family:'Bungee';font-size:15px;background:var(--navy);color:var(--yellow);padding:16px 28px;border-radius:12px;
             text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .2s;box-shadow:0 6px 0 rgba(26,26,46,.25);}
.btn-primary:hover{background:var(--pink);color:#fff;transform:translateY(-2px);}
.btn-ghost{font-family:'JetBrains Mono';font-weight:500;font-size:14px;color:var(--ink);text-decoration:none;opacity:.75;display:inline-flex;gap:6px;}
.btn-ghost:hover{opacity:1;color:var(--pink);}

/* ---------- SHARED EYEBROW / SECTION HELPERS ---------- */
.eyebrow{font-family:'JetBrains Mono';font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--pink);font-weight:500;}
.hl{color:var(--pink);}

/* ---------- FOOTER (injected by components/footer.js) ---------- */
footer{background:var(--navy);color:var(--cream);padding:60px 28px 38px;text-align:center;}
footer .otto-chill{margin-bottom:18px;display:flex;justify-content:center;}
footer h3{font-family:'Bungee';font-size:clamp(22px,3.6vw,36px);color:var(--cream);margin-bottom:8px;}
footer h3 .y{color:var(--yellow);}
footer .ftag{font-family:'JetBrains Mono';font-size:12px;letter-spacing:2px;color:var(--yellow);opacity:.8;margin-bottom:26px;}
footer .fnav{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-family:'JetBrains Mono';font-size:13px;margin-bottom:26px;}
footer .fnav a{color:var(--cream);text-decoration:none;opacity:.7;}
footer .fnav a:hover{opacity:1;color:var(--yellow);}
footer .copy{font-family:'JetBrains Mono';font-size:11px;opacity:.5;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .logo .box{background:var(--yellow);color:var(--navy);}
}