/* Christer Estrada — portfolio
   Near-black background, paper-white type, one lime accent used only for the primary action and "time back" moments.
   Motion rules: transform, opacity and short one-shot blur-ins only, native scrolling, no custom cursor. */

:root{
  --void:#08090a;
  --carbon:#0f1011;
  --obsidian:#161718;
  --graphite:#23252a;
  --smoke:#383b3f;
  --ash:#62666d;
  --fog:#8a8f98;
  --mist:#d0d6e0;
  --bone:#e5e5e6;
  --paper:#ffffff;
  --lime:#e4f222;
  --lime-soft:rgba(228,242,34,.12);
  --green:#27a644;
  --coral:#eb5757;
  --teal:#02b8cc;
  --iris:#6366f1;
  --lavender:#8b5cf6;
  --amber:#e8a33c;

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.02);

  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1200px;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--mist);
  font-family:var(--font);font-size:16px;line-height:1.55;letter-spacing:-.01em;
  font-feature-settings:"cv01","ss03";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3,h4{color:var(--paper);font-weight:510;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--lime);color:var(--void)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:72px}

.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-feature-settings:normal;letter-spacing:-.01em}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.muted{color:var(--fog)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--fog);text-transform:uppercase}
.eyebrow b{font-weight:400;color:var(--ash)}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--smoke)}
.display{font-size:clamp(2.75rem,7.6vw,5.5rem);line-height:.98;letter-spacing:-.035em}
.h2{font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.02;letter-spacing:-.03em}
.h3{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.022em}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;color:var(--fog);max-width:34em}
.lead strong{color:var(--mist);font-weight:510}
.display .serif,.h2 .serif,.h3 .serif{color:var(--mist)}

/* ---------- buttons / chips ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;font:510 14px/1 var(--font);letter-spacing:-.011em;border:1px solid var(--graphite);color:var(--mist);background:transparent;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn:hover{border-color:var(--smoke);background:rgba(255,255,255,.03);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(2px)}
.btn-lime{background:var(--lime);border-color:transparent;color:var(--void);box-shadow:inset 0 -1px 0 rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.4)}
.btn-lime:hover{background:#eefa4a;color:var(--void);border-color:transparent}
.btn-white{background:var(--paper);color:var(--void);border-color:transparent;border-radius:999px;height:34px;padding:0 14px;font-size:13px}
.btn-white:hover{background:var(--bone);color:var(--void);border-color:transparent}

.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;color:var(--mist);white-space:nowrap}
.pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--green);opacity:0;animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}

.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;background:rgba(255,255,255,.05);font:400 12px/1 var(--mono);color:var(--fog);letter-spacing:-.01em;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font:500 11.5px/1 var(--font);white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-urgent{color:#ff8a80;background:rgba(235,87,87,.12);border-color:rgba(235,87,87,.25)}
.p-normal{color:#f2c56b;background:rgba(232,163,60,.1);border-color:rgba(232,163,60,.22)}
.p-low{color:#5fd3a0;background:rgba(39,166,68,.1);border-color:rgba(39,166,68,.22)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--fog)}
.status i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--amber);position:relative;flex:none}
.status i::after{content:"";position:absolute;inset:2px;border-radius:50%;background:conic-gradient(var(--amber) 0 50%,transparent 0)}
.status.live i{border-color:var(--iris)}
.status.live i::after{background:conic-gradient(var(--iris) 0 75%,transparent 0)}
.status.done i{border-color:var(--green);background:var(--green)}
.status.done i::after{display:none}
.status.todo i{border-color:var(--ash);border-style:dashed}
.status.todo i::after{display:none}

/* ---------- frame (product screenshot card) ---------- */
.frame{position:relative;background:var(--carbon);border-radius:12px;box-shadow:inset 0 0 0 1px var(--graphite),0 30px 80px -30px rgba(0,0,0,.8);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--fog)}
.frame-bar .dots{display:flex;gap:6px}
.frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--graphite)}
.frame-bar b{color:var(--mist);font-weight:510}
.frame-bar .sep{color:var(--ash)}
.frame-bar .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.frame-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font:400 11.5px/1.3 var(--mono);color:var(--ash)}


/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:env(safe-area-inset-top,0px) var(--gutter) 0;pointer-events:none}
/* at the top it is a plain bar; once you scroll it tucks into a floating glass pill */
.nav .wrap{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px;padding-inline:0;margin-top:0;border-radius:999px;border:1px solid transparent;
  transition:max-width .6s var(--ease),height .4s var(--ease),margin-top .4s var(--ease),padding .4s var(--ease),background-color .3s,border-color .3s,box-shadow .3s}
.nav.scrolled .wrap{max-width:780px;height:50px;margin-top:10px;padding-inline:16px 7px;background:rgba(15,16,17,.86);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px -12px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(1px)){.nav.scrolled .wrap{background:rgba(22,23,24,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:510;font-size:15px;letter-spacing:-.015em}
.brand svg{width:24px;height:24px;flex:none}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a:not(.btn){font-size:13.5px;color:var(--fog);padding:8px 12px;border-radius:6px;transition:color .2s}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]{color:var(--paper)}
.nav-links .count{font:400 10px/1 var(--mono);color:var(--ash);vertical-align:super;margin-left:2px}
.nav-links .btn-white{margin-left:8px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.rv.in{opacity:1;transform:none;filter:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.no-js .rv{opacity:1;transform:none;filter:none}

/* ---------- lightbox (certificates) ---------- */
.lightbox{border:0;padding:0;background:transparent;max-width:min(1040px,calc(100vw - 32px));width:100%;overflow:visible;color:var(--mist)}
.lightbox::backdrop{background:rgba(8,9,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lightbox[open]{animation:lbIn .45s var(--ease)}
.lightbox[open]::backdrop{animation:fadeIn .3s ease}
.lightbox img{width:auto;max-width:100%;max-height:calc(100svh - 120px);height:auto;margin:0 auto;border-radius:12px;box-shadow:0 0 0 1px var(--line-2),0 40px 100px -30px rgba(0,0,0,.9)}
.lightbox .lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13.5px}
.lightbox .lb-bar b{color:var(--paper);font-weight:510}
.lightbox .lb-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:rgba(22,23,24,.7);color:var(--mist);display:grid;place-items:center;cursor:pointer;font-size:18px;line-height:1}
.lightbox .lb-close:hover{color:var(--paper);border-color:var(--smoke)}
@keyframes lbIn{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(8px)}}
@keyframes fadeIn{from{opacity:0}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--ash)}
.foot nav{display:flex;gap:18px}
.foot a:hover{color:var(--mist)}

@media (max-width:720px){
  .nav.scrolled .wrap{padding-inline:14px 6px}
  .nav-links a:not(.btn){display:none}
  .nav-links a.keep{display:inline-block;padding:8px 10px}
  .nav-links .count{display:none}
  .nav-links .btn-white{margin-left:2px}
  .brand,.nav-links a{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none;filter:none}
}

/* ---------- privacy page ---------- */
.legal{padding:calc(140px + env(safe-area-inset-top,0px)) 0 120px}
.legal .wrap{max-width:760px}
.legal h1{margin:18px 0 16px}
.legal .lead{margin-bottom:48px}
.legal section{padding:28px 0;border-top:1px solid var(--line)}
.legal h2{font-size:17px;font-weight:590;letter-spacing:-.012em;color:var(--paper);margin:0 0 10px}
.legal p,.legal li{color:var(--mist);font-size:15px;line-height:1.65}
.legal p+p,.legal ul+p{margin-top:12px}
.legal ul{margin:12px 0 0;padding-left:18px;display:grid;gap:6px}
.legal b{color:var(--paper);font-weight:510}
.legal a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--smoke)}
@media (max-width:640px){.legal{padding:calc(110px + env(safe-area-inset-top,0px)) 0 96px}}