/* =========================================================
   VÍCTOR ANGULLO — PORTFOLIO
   Style: Ren & Stimpy / 90s Nicktoons rubber-hose cartoon
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:        #140d07;
  --ink-soft:   #3a2a18;
  --cream:      #FFF3D6;
  --cream-2:    #FFE9B8;
  --yellow:     #FFC61E;
  --yellow-hot: #FFD84D;
  --orange:     #F58220;
  --orange-dp:  #E2661A;
  --red:        #E12B21;
  --red-dp:     #B41C16;
  --pink:       #FF9EB5;
  --pink-hot:   #F566A0;
  --blue:       #29ABE2;
  --blue-dp:    #1B7FB0;
  --teal:       #12A79B;
  --purple:     #7B4FA0;
  --purple-dp:  #5B3679;
  --skin:       #E8A87C;

  --bw: 5px;                       /* border width */
  --shadow-hard: 9px 9px 0 var(--ink);
  --shadow-hard-sm: 5px 5px 0 var(--ink);
  --shadow-hard-lg: 14px 14px 0 var(--ink);

  --font-display: 'Titan One', 'Impact', system-ui, sans-serif;
  --font-toon:    'Luckiest Guy', 'Titan One', cursive;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  --nav-h: 74px;
  --wrap: 1180px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 14px); }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.05; }
p{ margin:0 0 1rem; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--yellow); color:var(--ink); }
[hidden]{ display:none !important; }

.svg-defs{ position:absolute; width:0; height:0; pointer-events:none; }
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

/* ---------- 3. GLOBAL FX ---------- */
/* film-grain / paper texture */
.grain{
  position:fixed; inset:-150%; z-index:9998; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grainShift .55s steps(1) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}    20%{transform:translate(-6%,3%)}
  40%{transform:translate(4%,-5%)} 60%{transform:translate(-3%,-4%)}
  80%{transform:translate(5%,4%)}  100%{transform:translate(0,0)}
}

.scroll-bar{
  position:fixed; top:0; left:0; height:7px; width:0%;
  background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--blue));
  z-index:10000; border-bottom:2px solid var(--ink);
}

/* ---------- 4. NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:9000;
  display:flex; align-items:center; gap:1rem;
  padding:0 clamp(1rem,3vw,2rem);
  background:var(--cream);
  border-bottom:var(--bw) solid var(--ink);
  transition:transform .35s cubic-bezier(.68,-.55,.27,1.55), background .3s;
}
.nav.hidden{ transform:translateY(-105%); }
.nav.solid{ background:var(--yellow); }

.nav-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0; }
.nav-logo-badge{
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--red); color:var(--cream);
  font-family:var(--font-display); font-size:1.05rem; letter-spacing:.5px;
  border:3px solid var(--ink); border-radius:50% 45% 52% 48%/48% 52% 45% 55%;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .25s cubic-bezier(.68,-.6,.27,1.7);
}
.nav-logo:hover .nav-logo-badge{ transform:rotate(-12deg) scale(1.15); }
.nav-logo-text{
  font-family:var(--font-display); font-size:.95rem; line-height:1;
  display:flex; flex-direction:column; letter-spacing:.5px;
}
.nav-logo-text em{ font-style:normal; color:var(--red); font-size:.8rem; }

.nav-links{ display:flex; gap:.35rem; margin-left:auto; flex-wrap:wrap; }
.nav-links a{
  font-family:var(--font-toon); font-size:.86rem; letter-spacing:.6px;
  text-decoration:none; padding:.42rem .7rem; border-radius:999px;
  border:3px solid transparent; transition:all .18s;
}
.nav-links a:hover{ background:var(--blue); color:var(--cream); border-color:var(--ink); transform:rotate(-3deg) scale(1.06); }
.nav-links a.active{ background:var(--red); color:var(--cream); border-color:var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:.5rem; }
.sfx-toggle, .lang-toggle{
  display:flex; align-items:center; gap:.35rem;
  background:var(--cream-2); border:3px solid var(--ink); border-radius:999px;
  padding:.3rem .7rem; font-family:var(--font-toon); font-size:.75rem;
  box-shadow:3px 3px 0 var(--ink); transition:all .15s;
}
.sfx-toggle:hover, .lang-toggle:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.sfx-toggle[aria-pressed="true"]{ background:var(--yellow-hot); }
.sfx-toggle:active, .lang-toggle:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.lang-toggle{ background:var(--blue); }
.lang-toggle:hover{ background:var(--yellow-hot); }
.lang-label{ min-width:1.5em; text-align:center; }

.burger{ display:none; background:none; border:3px solid var(--ink); border-radius:10px; padding:.4rem .5rem; }
.burger span{ display:block; width:22px; height:3px; background:var(--ink); margin:4px 0; border-radius:2px; transition:.25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 5. HERO ---------- */
.hero{
  position:relative; min-height:100svh; padding:calc(var(--nav-h) + 2rem) 0 4rem;
  display:flex; align-items:center; overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--yellow-hot) 0%, var(--yellow) 38%, var(--orange) 72%, var(--orange-dp) 100%);
  border-bottom:var(--bw) solid var(--ink);
}
.sunburst{
  position:absolute; top:50%; left:50%; width:200vmax; height:200vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.20) 0deg 5deg, transparent 5deg 12deg);
  animation:spin 70s linear infinite; pointer-events:none;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }

.hero-blob{
  position:absolute; left:-8%; top:12%; width:72%; height:62%;
  background:var(--blue); opacity:.92;
  border-radius:58% 42% 47% 53%/45% 55% 45% 55%;
  transform:rotate(-6deg);
  border:var(--bw) solid var(--ink);
  animation:blobMorph 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes blobMorph{
  0%,100%{ border-radius:58% 42% 47% 53%/45% 55% 45% 55%; transform:rotate(-6deg) scale(1); }
  33%    { border-radius:44% 56% 62% 38%/55% 42% 58% 45%; transform:rotate(-4deg) scale(1.02); }
  66%    { border-radius:63% 37% 40% 60%/38% 60% 40% 62%; transform:rotate(-8deg) scale(.99); }
}

.stars{ position:absolute; inset:0; pointer-events:none; }
.star{
  position:absolute; color:#fff; font-size:2rem; text-shadow:0 0 0 var(--ink);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  animation:twinkle 2.4s ease-in-out infinite;
}
.s1{ top:12%; left:8%;  font-size:2.6rem; animation-delay:0s }
.s2{ top:22%; right:12%; font-size:1.8rem; animation-delay:.3s }
.s3{ bottom:18%; left:16%; font-size:2.1rem; animation-delay:.7s }
.s4{ top:8%;  left:52%; font-size:1.5rem; animation-delay:1.1s }
.s5{ bottom:26%; right:8%; font-size:2.8rem; animation-delay:.5s }
.s6{ top:56%; left:3%;  font-size:1.6rem; animation-delay:1.4s }
.s7{ bottom:8%; right:32%; font-size:2rem; animation-delay:.9s }
.s8{ top:38%; right:26%; font-size:1.4rem; animation-delay:1.7s }
@keyframes twinkle{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.95 }
  50%    { transform:scale(1.45) rotate(22deg); opacity:.5 }
}

.hero-inner{
  position:relative; z-index:2;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}

.hero-kicker{
  display:inline-block; font-family:var(--font-toon); font-size:.95rem; letter-spacing:2px;
  background:var(--cream); border:4px solid var(--ink); border-radius:999px;
  padding:.25rem 1.1rem; box-shadow:var(--shadow-hard-sm);
  transform:rotate(-2deg); margin-bottom:1rem;
}

.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.7rem, 7.2vw, 6.6rem);
  line-height:.9; letter-spacing:-1px; margin-bottom:1.1rem;
}
.hero-title .line{ display:block; white-space:nowrap; }
.hero-title .line-2{ margin-left:.35em; }
.hero-title .ch{
  display:inline-block;
  color:var(--cream);
  -webkit-text-stroke:9px var(--ink);
  paint-order:stroke fill;
  text-shadow:7px 8px 0 var(--red-dp);
  transform-origin:50% 90%;
  animation:letterWobble 2.6s ease-in-out infinite;
}
.hero-title .line-2 .ch{ color:var(--yellow-hot); text-shadow:7px 8px 0 var(--purple-dp); }
.hero-title .ch:nth-child(2n){ animation-delay:-.4s }
.hero-title .ch:nth-child(3n){ animation-delay:-.8s }
.hero-title .ch:nth-child(5n){ animation-delay:-1.3s }
@keyframes letterWobble{
  0%,100%{ transform:rotate(-2deg) translateY(0) scale(1,1) }
  25%    { transform:rotate(2.5deg) translateY(-6px) scale(.97,1.05) }
  55%    { transform:rotate(-1deg) translateY(3px) scale(1.05,.95) }
  80%    { transform:rotate(1.5deg) translateY(-2px) scale(.99,1.02) }
}
.hero-title .ch:hover{ animation:pop .45s cubic-bezier(.68,-.9,.27,1.9); }
@keyframes pop{
  0%{ transform:scale(1,1) }
  30%{ transform:scale(1.5,.6) rotate(-10deg) }
  60%{ transform:scale(.7,1.5) rotate(8deg) }
  100%{ transform:scale(1,1) }
}

.hero-role{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.tag{
  font-family:var(--font-toon); font-size:.82rem; letter-spacing:.6px;
  padding:.3rem .85rem; border:4px solid var(--ink); border-radius:999px;
  box-shadow:var(--shadow-hard-sm); transition:transform .2s cubic-bezier(.68,-.6,.27,1.7);
}
.tag:hover{ transform:rotate(-4deg) scale(1.08); }
.tag-red{ background:var(--red); color:var(--cream); transform:rotate(-2deg) }
.tag-blue{ background:var(--blue); color:var(--ink); transform:rotate(1.5deg) }
.tag-yellow{ background:var(--cream); color:var(--ink); transform:rotate(-1deg) }

.hero-lede{
  max-width:52ch; font-size:1.06rem; font-weight:700;
  background:var(--cream); padding:.9rem 1.1rem;
  border:4px solid var(--ink); border-radius:22px 6px 22px 6px;
  box-shadow:var(--shadow-hard-sm);
}
.hero-lede strong{ background:var(--yellow-hot); padding:0 .25rem; box-shadow:0 3px 0 var(--ink); }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.3rem; }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-block; text-decoration:none;
  font-family:var(--font-toon); font-size:1rem; letter-spacing:.8px;
  padding:.6rem 1.4rem; border:4px solid var(--ink); border-radius:999px;
  box-shadow:var(--shadow-hard-sm);
  transition:transform .14s, box-shadow .14s, background .2s;
}
.btn:hover{ transform:translate(-2px,-3px) rotate(-1.5deg); box-shadow:8px 9px 0 var(--ink); }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn-red{ background:var(--red); color:var(--cream); }
.btn-blue{ background:var(--blue); color:var(--ink); }
.btn-yellow{ background:var(--yellow-hot); color:var(--ink); }
.btn-ghost{ background:var(--cream); color:var(--ink); }
.btn-big{ font-size:1.25rem; padding:.85rem 2rem; box-shadow:var(--shadow-hard); }

/* ---------- 7. HERO ART ---------- */
.hero-art{ position:relative; display:grid; place-items:center; }
.photo-frame{
  position:relative; width:min(100%,380px); aspect-ratio:4/5;
  border:6px solid var(--ink); border-radius:52% 48% 45% 55%/48% 45% 55% 52%;
  overflow:hidden; background:var(--cream);
  box-shadow:var(--shadow-hard-lg);
  animation:framePulse 5s ease-in-out infinite;
}
@keyframes framePulse{
  0%,100%{ border-radius:52% 48% 45% 55%/48% 45% 55% 52%; transform:rotate(-2deg) }
  50%    { border-radius:46% 54% 55% 45%/52% 55% 45% 48%; transform:rotate(2deg) }
}
.photo-halo{
  position:absolute; inset:-20%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--pink) 0deg 9deg, var(--cream-2) 9deg 18deg);
  animation:spin 24s linear infinite; z-index:0;
}
/* --- hand-drawn caricature: sits on top, hover reveals the real photo --- */
.toon{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  background:radial-gradient(circle at 50% 38%, var(--yellow-hot) 0%, var(--orange) 100%);
  transition:opacity .35s ease;
  animation:toonBob 3.4s ease-in-out infinite;
}
.photo-frame:hover .toon{ opacity:0; }
@keyframes toonBob{
  0%,100%{ transform:scale(1,1) }
  50%    { transform:scale(1.025,.975) }
}
#toonEyes{ transform-origin:200px 214px; animation:toonBlink 5.2s infinite; }
@keyframes toonBlink{
  0%,92%,100%{ transform:scaleY(1) }
  95%        { transform:scaleY(.06) }
}
.toon-pupil{ transition:transform .09s linear; }
.toon-sweat{ animation:sweatDrop 2.8s ease-in infinite; }
.toon-sweat-2{ animation-delay:1.4s; }
@keyframes sweatDrop{
  0%  { transform:translate(0,0);      opacity:0 }
  14% { opacity:1 }
  72% { transform:translate(-9px,96px);  opacity:1 }
  100%{ transform:translate(-14px,150px); opacity:0 }
}

/* comic halftone print overlay */
.photo-frame::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:radial-gradient(circle, rgba(20,13,7,.6) 1.3px, transparent 1.5px);
  background-size:6px 6px; mix-blend-mode:multiply; opacity:.32;
}
.photo-toon{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:contrast(1.42) saturate(1.75) brightness(1.05);
  transition:filter .3s, transform .35s cubic-bezier(.68,-.5,.27,1.6);
}
.photo-frame:hover .photo-toon{
  filter:contrast(2.1) saturate(2.6) brightness(1.12) hue-rotate(-8deg);
  transform:scale(1.09,1.04) rotate(1.2deg);
}
.photo-ring{
  position:absolute; inset:6px; z-index:4; pointer-events:none;
  border:5px dashed rgba(20,13,7,.45); border-radius:inherit;
  animation:spinSlow 30s linear infinite;
}
@keyframes spinSlow{ to{ transform:rotate(360deg) } }

.googly{
  position:absolute; top:-6%; right:2%; display:flex; gap:.4rem; z-index:5;
  transform:rotate(-8deg);
}
.googly .eye{
  width:62px; height:72px; background:#fff;
  border:5px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; box-shadow:4px 5px 0 rgba(20,13,7,.55);
  position:relative; overflow:hidden;
}
.googly .eye:last-child{ width:52px; height:62px; }
.googly .pupil{
  width:24px; height:24px; background:var(--ink); border-radius:50%;
  transition:transform .08s linear;
}
.googly .eye:last-child .pupil{ width:20px; height:20px; }

.speech{
  position:absolute; bottom:-4%; left:-6%; z-index:6;
  background:var(--cream); border:5px solid var(--ink);
  border-radius:26px 26px 26px 4px; padding:.55rem 1rem;
  font-family:var(--font-toon); font-size:.95rem;
  box-shadow:var(--shadow-hard-sm); max-width:230px;
  transform:rotate(-4deg); cursor:pointer; user-select:none;
  transition:transform .2s cubic-bezier(.68,-.7,.27,1.8);
}
.speech:hover{ transform:rotate(2deg) scale(1.07); }
.speech::after{
  content:''; position:absolute; left:12px; bottom:-22px;
  border:9px solid transparent; border-top:18px solid var(--ink);
}

.scroll-hint{
  position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%);
  z-index:3; text-decoration:none; text-align:center;
  font-family:var(--font-toon); font-size:.78rem; letter-spacing:2px;
  display:grid; justify-items:center; gap:.1rem;
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(11px) } }

/* ---------- 8. TICKER ---------- */
.ticker{
  background:var(--ink); color:var(--yellow-hot); overflow:hidden;
  border-bottom:var(--bw) solid var(--ink); padding:.55rem 0;
}
.ticker-track{ display:flex; width:max-content; animation:marquee 30s linear infinite; }
.ticker-track span{
  font-family:var(--font-toon); font-size:1.05rem; letter-spacing:2px;
  padding-right:2.5rem; white-space:nowrap;
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- 9. SECTIONS ---------- */
.section{ position:relative; padding:clamp(3.5rem,8vw,6.5rem) 0; border-bottom:var(--bw) solid var(--ink); }
.section-cream{ background:var(--cream); }
.section-orange{ background:linear-gradient(160deg,var(--orange) 0%,var(--yellow) 100%); }
.section-blue{ background:linear-gradient(200deg,var(--blue) 0%,#7FD3F2 100%); }
.section-purple{ background:linear-gradient(180deg,var(--purple) 0%,var(--purple-dp) 100%); color:var(--cream); }
.section-red{ background:linear-gradient(180deg,var(--red) 0%,var(--red-dp) 100%); color:var(--cream); }

.section::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.09;
  background-image:radial-gradient(var(--ink) 1.6px, transparent 1.7px);
  background-size:14px 14px;
}
.section > .wrap{ position:relative; z-index:1; }

.sec-title{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,6.5vw,4.4rem); line-height:.95;
  margin-bottom:.4rem; text-align:center;
}
.sec-title span{
  display:inline-block; color:var(--cream);
  -webkit-text-stroke:7px var(--ink); paint-order:stroke fill;
  text-shadow:6px 6px 0 var(--red-dp);
  transform:rotate(-1.6deg);
}
.section-purple .sec-title span,
.section-red .sec-title span{ color:var(--yellow-hot); text-shadow:6px 6px 0 #000; }
.section-blue .sec-title span{ text-shadow:6px 6px 0 var(--blue-dp); }
.section-orange .sec-title span{ text-shadow:6px 6px 0 var(--orange-dp); }

.sec-sub{
  text-align:center; font-family:var(--font-toon); font-size:1rem; letter-spacing:.8px;
  margin-bottom:2.6rem; opacity:.9;
}

/* ---------- 10. ABOUT ---------- */
.about-grid{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
}
.about-photo{ position:relative; }
.polaroid{
  background:#fff; border:6px solid var(--ink); padding:.9rem .9rem 0;
  box-shadow:var(--shadow-hard); transform:rotate(-3deg);
  transition:transform .3s cubic-bezier(.68,-.5,.27,1.6);
}
.polaroid:hover{ transform:rotate(2deg) scale(1.03); }
.polaroid img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 12%;
  border:4px solid var(--ink);
  filter:contrast(1.2) saturate(1.35);
  transition:filter .3s;
}
.polaroid:hover img{ filter:contrast(1.9) saturate(2.4); }
.polaroid-cap{
  font-family:var(--font-toon); font-size:.95rem; text-align:center;
  padding:.6rem 0 .8rem; margin:0;
}
.sticker{
  position:absolute; font-family:var(--font-toon); font-size:.9rem;
  padding:.4rem .9rem; border:4px solid var(--ink); border-radius:999px;
  box-shadow:var(--shadow-hard-sm); animation:stickerBounce 3s ease-in-out infinite;
}
.sticker-1{ top:-18px; right:-14px; background:var(--red); color:var(--cream); transform:rotate(9deg); }
.sticker-2{ bottom:34px; left:-22px; background:var(--blue); transform:rotate(-11deg); animation-delay:-1.2s; }
@keyframes stickerBounce{ 0%,100%{ translate:0 0 } 50%{ translate:0 -9px } }

.about-text .drop{ font-size:1.18rem; }
.about-text .drop::first-letter{
  font-family:var(--font-display); font-size:3.4rem; float:left;
  line-height:.8; padding:.1rem .5rem .2rem 0; color:var(--red);
  -webkit-text-stroke:3px var(--ink); paint-order:stroke fill;
}
.about-text em{ font-style:normal; background:var(--blue); padding:0 .2rem; box-shadow:0 3px 0 var(--ink); }
.about-text strong{ background:var(--yellow); padding:0 .2rem; box-shadow:0 3px 0 var(--ink); }

.fact-list{ margin-top:1.6rem; display:grid; gap:.6rem; }
.fact-list li{
  display:grid; grid-template-columns:110px 1fr; gap:.8rem; align-items:baseline;
  background:#fff; border:4px solid var(--ink); border-radius:14px 4px 14px 4px;
  padding:.55rem .8rem; box-shadow:var(--shadow-hard-sm);
  transition:transform .18s;
}
.fact-list li:hover{ transform:translateX(6px) rotate(-.6deg); }
.fact-k{ font-family:var(--font-toon); font-size:.82rem; color:var(--red); letter-spacing:1px; }
.fact-v{ font-size:.94rem; }

/* ---------- 11. WINS ---------- */
.wins-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.8rem; }
.win-card{
  background:var(--cream); border:6px solid var(--ink);
  border-radius:34px 8px 34px 8px; padding:1.6rem 1.4rem 1.3rem;
  box-shadow:var(--shadow-hard); text-align:center; position:relative;
  transition:transform .28s cubic-bezier(.68,-.55,.27,1.6), box-shadow .28s;
}
.win-card:hover{ transform:translateY(-10px) rotate(1.5deg) scale(1.03); box-shadow:var(--shadow-hard-lg); }
.win-num{
  font-family:var(--font-display); font-size:clamp(3rem,7vw,4.6rem); line-height:1;
  color:var(--red); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--yellow-hot); margin-bottom:.4rem;
}
.win-card:nth-child(2) .win-num{ color:var(--blue); text-shadow:5px 5px 0 var(--cream); }
.win-card:nth-child(3) .win-num{ color:var(--purple); text-shadow:5px 5px 0 var(--pink); }
.win-card h3{ font-family:var(--font-toon); font-size:1.28rem; margin-bottom:.5rem; }
.win-card p{ font-size:.95rem; margin-bottom:.9rem; }
.win-tag{
  display:inline-block; font-family:var(--font-toon); font-size:.72rem; letter-spacing:.6px;
  background:var(--ink); color:var(--yellow-hot); padding:.25rem .8rem; border-radius:999px;
}

/* ---------- 12. TIMELINE ---------- */
.timeline{ position:relative; display:grid; gap:1.1rem; max-width:940px; margin-inline:auto; }
.timeline::before{
  content:''; position:absolute; left:26px; top:14px; bottom:14px; width:6px;
  background:var(--ink); border-radius:99px;
}
.job{
  position:relative; background:var(--cream); border:5px solid var(--ink);
  border-radius:20px 6px 20px 6px; box-shadow:var(--shadow-hard-sm);
  margin-left:54px;
  transition:transform .22s, box-shadow .22s;
}
.job:hover{ transform:translateX(6px); box-shadow:var(--shadow-hard); }
.job-head{
  width:100%; display:grid;
  grid-template-columns:1fr auto auto; gap:.8rem; align-items:center;
  background:none; border:0; text-align:left; padding:.95rem 1.1rem;
}
.job-dot{
  position:absolute; left:-40px; top:22px;
  width:26px; height:26px; background:var(--red);
  border:5px solid var(--ink); border-radius:50%;
  box-shadow:0 0 0 5px var(--cream);
}
.job:nth-child(2n) .job-dot{ background:var(--yellow-hot); }
.job:nth-child(3n) .job-dot{ background:var(--blue); }
.job-head-main{ display:grid; gap:.15rem; min-width:0; }
.job-role{ font-family:var(--font-toon); font-size:1.12rem; line-height:1.15; }
.job-co{ font-size:.86rem; opacity:.82; }
.job-date{
  font-family:var(--font-toon); font-size:.76rem; letter-spacing:.5px; white-space:nowrap;
  background:var(--ink); color:var(--yellow-hot); padding:.22rem .7rem; border-radius:999px;
}
.job-chev{ font-size:1.2rem; transition:transform .28s cubic-bezier(.68,-.6,.27,1.7); }
.job[data-open="true"] .job-chev{ transform:rotate(180deg) scale(1.2); }
/* height is driven by JS so the panel can animate to its real size */
.job-body{ overflow:hidden; height:0; transition:height .34s cubic-bezier(.4,0,.2,1); }
.job-body ul{ padding:0 1.2rem .2rem 2.4rem; display:grid; gap:.42rem; }
.job-body li{ position:relative; font-size:.93rem; font-weight:700; }
.job-body li::before{
  content:'★'; position:absolute; left:-1.35rem; color:var(--red); font-size:.85rem;
}
.job-stack{ display:flex; flex-wrap:wrap; gap:.35rem; padding:.9rem 1.2rem 1.1rem; }
.job-stack span{
  font-family:var(--font-toon); font-size:.72rem; letter-spacing:.5px;
  background:var(--blue); border:3px solid var(--ink); border-radius:999px;
  padding:.15rem .65rem;
}

/* ---------- 13. SKILLS ---------- */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.6rem; }
.skill-cat{
  border:6px solid var(--ink); border-radius:8px 30px 8px 30px;
  padding:1.3rem; box-shadow:var(--shadow-hard);
  transition:transform .25s;
}
.skill-cat:hover{ transform:rotate(-1deg) translateY(-6px); }
.cat-red{ background:var(--pink); }
.cat-blue{ background:var(--blue); }
.cat-yellow{ background:var(--yellow-hot); }
.skill-cat h3{
  font-family:var(--font-display); font-size:1.5rem; margin-bottom:1rem;
  color:var(--cream); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill;
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-block; background:var(--cream); border:4px solid var(--ink);
  border-radius:999px; padding:.32rem .85rem; font-size:.86rem; font-weight:900;
  box-shadow:3px 4px 0 var(--ink);
  transition:transform .18s cubic-bezier(.68,-.9,.27,1.9), background .2s;
  cursor:default;
}
.chip:hover{ transform:scale(1.22,.82) rotate(-4deg); background:var(--yellow-hot); }

/* ---------- 14. GITHUB ---------- */
.gh-profile{
  display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap;
  background:var(--cream); color:var(--ink);
  border:6px solid var(--ink); border-radius:30px 8px 30px 8px;
  padding:1.4rem; box-shadow:var(--shadow-hard); margin-bottom:1.8rem;
}
.gh-avatar{
  width:120px; height:120px; border-radius:50%;
  border:6px solid var(--ink); box-shadow:5px 5px 0 var(--red);
  background:var(--cream-2);
}
.gh-profile-info{ flex:1; min-width:240px; }
.gh-profile-info h3{ font-family:var(--font-display); font-size:1.7rem; }
.gh-handle{ font-family:var(--font-toon); color:var(--purple); text-decoration:none; font-size:.95rem; }
.gh-handle:hover{ text-decoration:underline; }
.gh-profile-info p{ margin:.5rem 0 .8rem; font-size:.95rem; }
.gh-stats{ display:flex; gap:.6rem; flex-wrap:wrap; }
.gh-stat{
  background:var(--yellow-hot); border:4px solid var(--ink); border-radius:12px 4px 12px 4px;
  padding:.3rem .8rem; text-align:center; box-shadow:3px 3px 0 var(--ink);
}
.gh-stat b{ display:block; font-family:var(--font-display); font-size:1.25rem; line-height:1; }
.gh-stat span{ font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }

.gh-toolbar{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1.4rem; }
.gh-filters{ display:flex; gap:.4rem; flex-wrap:wrap; flex:1; }
.gh-filter{
  font-family:var(--font-toon); font-size:.76rem; letter-spacing:.5px;
  background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  border-radius:999px; padding:.22rem .75rem; box-shadow:3px 3px 0 rgba(0,0,0,.55);
  transition:transform .15s, background .2s;
}
.gh-filter:hover{ transform:translateY(-2px) rotate(-2deg); }
.gh-filter.active{ background:var(--yellow-hot); }
.gh-sort{ font-family:var(--font-toon); font-size:.8rem; display:flex; align-items:center; gap:.4rem; }
.gh-sort select{
  font-family:var(--font-body); font-weight:900; font-size:.85rem;
  background:var(--cream); color:var(--ink); border:3px solid var(--ink);
  border-radius:999px; padding:.28rem .7rem; box-shadow:3px 3px 0 rgba(0,0,0,.55);
}

.gh-status{
  font-family:var(--font-toon); font-size:1rem; text-align:center; padding:1.6rem 0;
  display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
}
.gh-status.error{
  background:var(--cream); color:var(--ink); border:5px solid var(--ink);
  border-radius:18px; padding:1.2rem; box-shadow:var(--shadow-hard-sm);
}
.gh-status a{ color:var(--red); }
.loader{
  width:22px; height:22px; border:5px solid var(--cream); border-top-color:var(--yellow-hot);
  border-radius:50%; animation:spinLoad .7s linear infinite; display:inline-block;
}
@keyframes spinLoad{ to{ transform:rotate(360deg) } }

.repo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1.2rem; }
.repo{
  background:var(--cream); color:var(--ink);
  border:5px solid var(--ink); border-radius:8px 24px 8px 24px;
  padding:1.05rem 1.1rem; box-shadow:var(--shadow-hard-sm);
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none;
  transition:transform .24s cubic-bezier(.68,-.5,.27,1.6), box-shadow .24s, background .2s;
  animation:popIn .35s backwards;
}
@keyframes popIn{
  0%{ opacity:0; transform:scale(.6) rotate(-6deg) }
  70%{ opacity:1; transform:scale(1.08) rotate(2deg) }
  100%{ opacity:1; transform:scale(1) rotate(0) }
}
.repo:hover{ transform:translateY(-8px) rotate(-1.2deg); box-shadow:10px 12px 0 var(--ink); background:var(--yellow-hot); }
.repo-name{ font-family:var(--font-toon); font-size:1.08rem; line-height:1.2; word-break:break-word; }
.repo-desc{ font-size:.88rem; flex:1; margin:0; }
.repo-meta{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.78rem; font-weight:900; }
.repo-lang{ display:inline-flex; align-items:center; gap:.32rem; }
.lang-dot{ width:13px; height:13px; border-radius:50%; border:2.5px solid var(--ink); display:inline-block; }
.repo-badge{
  background:var(--ink); color:var(--yellow-hot); border-radius:999px;
  padding:.1rem .55rem; font-size:.72rem; letter-spacing:.4px;
}
.repo-topics{ display:flex; flex-wrap:wrap; gap:.3rem; }
.repo-topics span{
  font-size:.68rem; background:var(--blue); border:2.5px solid var(--ink);
  border-radius:999px; padding:.05rem .5rem; font-weight:900;
}
.gh-more{ text-align:center; margin-top:2rem; }

/* ---------- 15. CREDENTIALS ---------- */
.cred-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
}
.cred-h{
  font-family:var(--font-display); font-size:1.7rem; margin-bottom:1rem;
  color:var(--red); -webkit-text-stroke:5px var(--ink); paint-order:stroke fill;
}
.cert-list{ display:grid; gap:.7rem; }
.cert{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border:5px solid var(--ink); border-radius:6px 20px 6px 20px;
  padding:.65rem .85rem; box-shadow:var(--shadow-hard-sm);
  transition:transform .2s cubic-bezier(.68,-.6,.27,1.7);
}
.cert:hover{ transform:translateX(8px) rotate(-1.2deg) scale(1.02); }
.cert-badge{
  flex-shrink:0; width:46px; height:46px; display:grid; place-items:center;
  border:4px solid var(--ink); border-radius:50%;
  font-family:var(--font-display); font-size:.95rem; color:var(--cream);
}
.cert-sf .cert-badge{ background:var(--blue); }
.cert-ad .cert-badge{ background:var(--red); }
.cert-gg .cert-badge{ background:var(--yellow); color:var(--ink); }
.cert b{ display:block; font-size:.98rem; line-height:1.2; }
.cert small{ font-size:.78rem; opacity:.7; font-weight:700; }

.edu-list{ display:grid; gap:.7rem; }
.edu-list li{
  background:var(--cream-2); border:5px solid var(--ink); border-radius:20px 6px 20px 6px;
  padding:.7rem .9rem; box-shadow:var(--shadow-hard-sm);
  transition:transform .2s;
}
.edu-list li:hover{ transform:translateX(8px) rotate(1deg); background:var(--pink); }
.edu-list b{ display:block; font-size:.98rem; line-height:1.25; }
.edu-list span{ font-size:.8rem; opacity:.75; }

.side-project{
  background:var(--purple); color:var(--cream);
  border:5px solid var(--ink); border-radius:8px 26px 8px 26px;
  padding:1rem; box-shadow:var(--shadow-hard-sm);
}
.side-project b{ font-family:var(--font-toon); font-size:1.15rem; }
.side-date{ font-size:.78rem; opacity:.8; }
.side-project p{ margin:.45rem 0 0; font-size:.9rem; }

/* ---------- 16. CONTACT ---------- */
.contact-wrap{ text-align:center; }
.contact-lede{ font-family:var(--font-toon); font-size:1.25rem; margin-bottom:2.2rem; }
.contact-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.1rem; margin-bottom:2.4rem;
}
.contact-card{
  background:var(--cream); color:var(--ink); text-decoration:none;
  border:6px solid var(--ink); border-radius:26px 8px 26px 8px;
  padding:1.2rem .9rem; box-shadow:var(--shadow-hard);
  display:grid; gap:.2rem; justify-items:center;
  transition:transform .25s cubic-bezier(.68,-.6,.27,1.7), background .2s;
}
.contact-card:hover{ transform:translateY(-9px) rotate(-2deg) scale(1.04); background:var(--yellow-hot); }
.cc-icon{
  width:54px; height:54px; display:grid; place-items:center; margin-bottom:.4rem;
  background:var(--blue); border:4px solid var(--ink); border-radius:50%;
  font-family:var(--font-display); font-size:1.3rem; box-shadow:4px 4px 0 var(--ink);
}
.contact-card:nth-child(2) .cc-icon{ background:var(--yellow); }
.contact-card:nth-child(3) .cc-icon{ background:var(--pink); }
.contact-card:nth-child(4) .cc-icon{ background:var(--cream-2); font-size:1rem; }
.contact-card b{ font-family:var(--font-toon); font-size:1.1rem; }
.contact-card small{ font-size:.82rem; opacity:.75; font-weight:700; word-break:break-word; }

/* ---------- 17. FOOTER ---------- */
.footer{
  background:var(--ink); color:var(--cream); text-align:center;
  padding:2rem 1rem; font-size:.88rem;
}
.footer p{ margin:.2rem 0; }
.footer-small{ font-family:var(--font-toon); color:var(--yellow-hot); font-size:.85rem; letter-spacing:.6px; }

.to-top{
  position:fixed; right:18px; bottom:18px; z-index:9000;
  width:52px; height:52px; border-radius:50%;
  background:var(--red); color:var(--cream);
  border:5px solid var(--ink); box-shadow:var(--shadow-hard-sm);
  font-size:1rem; display:grid; place-items:center;
  opacity:0; pointer-events:none; transform:scale(.5);
  transition:opacity .3s, transform .3s cubic-bezier(.68,-.7,.27,1.8);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:scale(1); }
.to-top:hover{ transform:scale(1.15) rotate(-10deg); }

/* ---------- 18. REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(38px) scale(.94); }
.reveal.in{
  animation:revealPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes revealPop{
  0%  { opacity:0; transform:translateY(38px) scale(.9,1.08) }
  55% { opacity:1; transform:translateY(-8px) scale(1.05,.94) }
  100%{ opacity:1; transform:translateY(0) scale(1,1) }
}
.wobble-in{ animation:revealPop .7s cubic-bezier(.34,1.56,.64,1) backwards; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1020px){
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; gap:0; background:var(--yellow);
    border-bottom:var(--bw) solid var(--ink);
    padding:.8rem 1rem; transform:translateY(-140%);
    transition:transform .35s cubic-bezier(.68,-.35,.27,1.35);
    max-height:calc(100svh - var(--nav-h)); overflow:auto;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:.7rem .9rem; font-size:1.05rem; border-radius:12px; }
  .burger{ display:block; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ order:2 }
  .hero-art{ order:1; margin-bottom:1rem }
  .hero-kicker, .hero-role, .hero-cta{ justify-content:center; }
  .hero-role{ justify-content:center }
  .hero-lede{ margin-inline:auto }
  .hero-title .line-2{ margin-left:0 }
  .about-grid, .cred-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:420px; margin-inline:auto }
}
@media (max-width:640px){
  :root{ --bw:4px; --shadow-hard:6px 6px 0 var(--ink); --shadow-hard-lg:9px 9px 0 var(--ink); }
  .hero-title .ch{ -webkit-text-stroke:6px var(--ink); text-shadow:4px 5px 0 var(--red-dp); }
  .sec-title span{ -webkit-text-stroke:5px var(--ink); }
  .nav-logo-text{ display:none }
  .timeline::before{ left:16px }
  .job{ margin-left:40px }
  .job-dot{ left:-32px; width:20px; height:20px }
  .job-head{ grid-template-columns:1fr auto; gap:.45rem }
  .job-date{ grid-column:1/-1; justify-self:start }
  .fact-list li{ grid-template-columns:1fr; gap:.15rem }
  .googly{ transform:rotate(-8deg) scale(.72); top:-4%; right:-2% }

  /* the bubble has nowhere to sit next to a full-width photo — drop it below */
  .speech{
    position:static; margin:1.1rem auto 0; max-width:280px;
    transform:rotate(-2deg); font-size:.88rem;
  }
  .speech::after{ left:26px }
  .hero-art{ margin-bottom:1.4rem }
  .hero-title{ line-height:1; margin-bottom:1.5rem }

  .gh-profile{ flex-direction:column; text-align:center }
  .gh-stats{ justify-content:center }
  .gh-toolbar{ flex-direction:column; align-items:stretch }
  .gh-filters{ justify-content:center }
  .gh-sort{ justify-content:center }
}

/* ---------- 20. ACCESSIBILITY ---------- */
:focus-visible{ outline:4px solid var(--red); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .grain{ display:none; }
}