/* Andrés Felipe Nieto Gutiérrez — Portfolio
   Copper/bronze for engineering & materials, electric blue as the software/data/AI accent. */

html, body {
  margin: 0;
  padding: 0;
  background: #07090B;
}

* {
  box-sizing: border-box;
}

a {
  color: #B97845;
  text-decoration: none;
}

::selection {
  background: rgba(45, 168, 255, 0.28);
  color: #F0EEE8;
}

button {
  appearance: none;
}

img {
  max-width: 100%;
}

@keyframes anBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.012) translateY(-4px); }
}
@keyframes anFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes anSpin { to { transform: rotate(360deg); } }
@keyframes anSpinRev { to { transform: rotate(-360deg); } }
@keyframes anHud {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  12%, 72% { opacity: 1; transform: translateY(0); }
}
@keyframes anRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes anScan {
  0% { transform: translateY(-8%); opacity: 0; }
  40% { opacity: 0.5; }
  100% { transform: translateY(108%); opacity: 0; }
}
@keyframes anPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}
@keyframes anFlow {
  0% { background-position: 0 0; }
  100% { background-position: 0 -18px; }
}
@keyframes anFlowX {
  0% { background-position: 0 0; }
  100% { background-position: 18px 0; }
}

@media (max-width: 1180px) {
  [data-an="case"] { grid-template-columns: 1fr !important; }
  [data-an="eng-row"] { grid-template-columns: 1fr !important; }
  [data-an="about-grid"] { grid-template-columns: 1fr !important; }
  [data-an="tl"] { grid-template-columns: 1fr !important; row-gap: 12px !important; }
  [data-an="pulse-row"] { grid-template-columns: 1fr !important; row-gap: 22px !important; }
  [data-an="pulse-row"] > div[style*="height: 1px"] {
    width: 1px !important;
    height: 26px !important;
    justify-self: center;
    background-image: linear-gradient(rgba(214,194,165,0.75) 0 6px, rgba(214,194,165,0) 6px 12px) !important;
    background-size: 1px 12px !important;
    animation: anFlow 1s linear infinite !important;
  }
  [data-an="case-meta"] { position: static !important; }
}

@media (max-width: 1180px) {
  [data-an="nav-mobile"] { display: flex !important; }
  [data-an="rail"] { display: none !important; }
  [data-an="hero-grid"] { grid-template-columns: 1fr !important; padding-top: 56px !important; }
  [data-an="stage"] { max-width: 520px !important; margin: 0 auto !important; }
  [data-an="nav-links"] { display: none !important; }
}

@media (max-width: 1180px) {
  [data-screen-label="The Way I Think"] > div { grid-template-columns: 1fr !important; }
  [data-screen-label="The Way I Think"] > div > div:first-child { position: static !important; }
}

@media (max-width: 900px) {
  [data-screen-label="Transition"] > div { grid-template-columns: repeat(2, 1fr) !important; row-gap: 30px !important; }
}

@media (max-width: 560px) {
  [data-screen-label="Transition"] > div { grid-template-columns: 1fr !important; }
  [data-an="hero-grid"] { min-height: 0 !important; }
  [data-an="stage"] { min-height: 340px !important; }
}

@media (max-width: 720px) {
  [data-step] { grid-template-columns: 42px 1fr !important; }
  [data-an="hero-grid"] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-an="h1"] { font-size: 44px !important; }
  [data-an="ds"] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-an="code-panel"], [data-an="blueprint"] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}