/* DPMO! — Diego Pignattini portfolio
   Brand tokens (from the "Don't Piss Me Off!" identity) */
:root{
  --piss-pink:#ef709d;
  --acid-lime:#ebfd51;
  --dirty-black:#000000;
  --off-white:#ffffff;
  --font-display:Anton, sans-serif;
  --font-body:'Work Sans', system-ui, sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:#000000}
body.page-404{background:#ebfd51}
a{color:#000000}
a:hover{color:#333333}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}

/* Conditional blocks (shown/hidden by js/main.js) */
.dc-if{display:contents}
.dc-if[hidden]{display:none}

/* Toggle buttons: state lives in aria-pressed */
.toggle-light{background:#ffffff;color:#000000}
.toggle-light[aria-pressed="true"]{background:#000000;color:#ebfd51}
.toggle-dark{background:#000000;color:#ffffff}
.toggle-dark[aria-pressed="true"]{background:#ebfd51;color:#000000}

/* Motion */
@keyframes dpmo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes dpmo-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes dpmo-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(5px) rotate(2deg)}}
@keyframes dpmo-fly{0%{transform:translateX(-12px)}50%{transform:translateX(12px) translateY(-6px)}100%{transform:translateX(-12px)}}
.dpmo-track{animation:dpmo-marquee 30s linear infinite}
.dpmo-track-rev{animation:dpmo-marquee 36s linear infinite reverse}
.dpmo-bob{animation:dpmo-bob 3.2s ease-in-out infinite}
.dpmo-shake{animation:dpmo-shake .35s linear infinite}
.dpmo-fly{animation:dpmo-fly 2.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .dpmo-track,.dpmo-track-rev,.dpmo-bob,.dpmo-shake,.dpmo-fly{animation:none}
  html{scroll-behavior:auto}
}

/* Hover */
.dpmo-btn{transition:transform .15s}
.dpmo-btn:hover{transform:rotate(-2deg) scale(1.04)}
.dpmo-card{transition:transform .15s, box-shadow .15s}
.dpmo-card:hover{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:10px 10px 0 #ebfd51}
.dpmo-row{transition:background .12s, padding .12s}
.dpmo-row:hover{background:#000000;color:#ebfd51;padding-left:16px;padding-right:16px}
.dpmo-chip{transition:transform .12s, background .12s}
.dpmo-chip:hover{transform:rotate(-3deg) scale(1.08);background:#ef709d}

/* Focus */
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #000000;outline-offset:3px;box-shadow:0 0 0 6px #ebfd51}
[tabindex="-1"]:focus{outline:none}
input:focus,textarea:focus{outline:3px solid #ef709d;outline-offset:2px}

/* FAQ */
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
.dpmo-plus{transition:transform .15s;display:inline-block}
details[open] .dpmo-plus{transform:rotate(45deg)}