/*
 * Vaporwave / Outrun, matched to the reference at designprompts.dev/vaporwave:
 * system monospace at weight 900, neon magenta and cyan in a purple void, a
 * perspective grid under a blurred sun, skewed controls, glowing windows.
 *
 * Layout is a single centered column. Each section maps to one of the
 * reference's components:
 *   hero        → top bar, skewed status badge, gradient headline, CTAs
 *   about       → "terminal window" with stat boxes
 *   experience  → alternating checkpoint timeline
 *   skills      → "system modules" cards with diamond icons
 *   projects    → skewed, glowing "sponsor" cards
 *   contact     → IRC-style log card
 */

:root[data-theme="vaporwave"] {
  --bg: #090014;
  --fg: #e0e0e0;
  --accent: #00ffff;   /* links, focus, titles, primary controls */
  --accent-2: #ff00ff; /* the hero color: highlights, nodes, prompt */
  --accent-3: #ff9900; /* sparingly: the sun, gradients */
  --error: #ff3366;
  /* The reference puts white on magenta, which is 3.1:1 and fails AA for
     body-size text. Filled magenta uses near-black text instead: 6.6:1. */
  --on-accent: #090014;
  --border: #2d1b4e;
  --border-strong: rgba(255, 0, 255, 0.3);
  --fg-dim: #a8a4b8; /* the reference's 60–80% silver, flattened: 8.5:1 */
  --surface: rgba(26, 16, 60, 0.8);
  --link: #00ffff;

  /* The reference uses the platform's monospace at black weight throughout. */
  --font-body: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-heading: var(--font-body);

  --line: 1.75rem;
  --gap: 6rem;
  --pad-x: 1.5rem;
  --page-max: 80rem;
  --border-w: 1px;
  --tracking-ui: 0.12em;
  --transition: 200ms linear;

  --glow-title: none;
  --glow-body: none;
  --glow-accent-2: none;
  --glow-box: none;

  /* Scanlines plus RGB aberration, tiled exactly as the reference does. */
  --crt:
    linear-gradient(rgba(18, 16, 20, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  --crt-size: 100% 4px, 3px 100%;

  --btn-h: 3rem;
  --btn-pad: 0 1.75rem;
  --btn-border: 2px solid currentColor;
  --shell-bg: rgba(9, 0, 20, 0.88);
  --shell-blur: blur(8px);

  /* ---- The void: sun and grid ------------------------------------------- */

  .backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .backdrop__sun {
    position: absolute; top: 80px; left: 50%;
    width: 600px; height: 600px;
    translate: -50% 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--accent-3), var(--accent-2));
    filter: blur(100px);
    opacity: 0.2;
  }
  .backdrop__grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(transparent 95%, var(--accent-2) 95%),
      linear-gradient(90deg, transparent 95%, var(--accent-2) 95%);
    background-size: 40px 40px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(2);
    mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
    opacity: 0.2; /* the reference's 0.3, which its section backgrounds then dim */
    /* The highway rolling toward the viewer. Stops under reduced motion. */
    animation: grid-roll 1.2s linear infinite;
  }

  /* ---- Base type -------------------------------------------------------- */

  h1, h2, h3 { font-weight: 900; text-transform: none; text-shadow: none; }

  :focus-visible {
    background: transparent;
    color: inherit;
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 15px var(--accent);
  }
  a:hover { text-shadow: 0 0 8px var(--accent); }

  /* One centered column, sections spaced like the reference's py-20/py-32. */
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "about" "experience" "skills" "projects" "contact";
    padding-top: 0;
  }

  /* ---- Top bar ---------------------------------------------------------- */

  .hero__top {
    order: -2;
    align-self: stretch;
    align-items: center;
    padding: 1.25rem 0;
    margin-bottom: clamp(3rem, 8vw, 6rem);
    border-bottom: 1px solid var(--border);
  }
  .brand {
    display: inline-flex; align-items: center; gap: 0.75rem;
    white-space: nowrap;
    color: var(--fg);
    font-size: 1.25rem; font-weight: 900; letter-spacing: 0.1em;
    text-decoration: none;
  }
  .brand__mark {
    display: grid; place-items: center;
    width: 2.25rem; height: 2.25rem;
    color: #000;
    background: var(--accent-2);
    border: 2px solid var(--accent);
    transform: skewX(-12deg);
  }
  .brand__name span { color: var(--accent); }
  .topnav { display: flex; gap: 2rem; }
  .topnav a {
    color: var(--accent);
    font-size: var(--text-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .topnav a:hover { text-shadow: 0 0 10px var(--accent); }
  /* The LOG_IN slot: a straight magenta outline. */
  .btn.theme-toggle {
    margin-left: 0;
    --btn-h: 2.25rem; --btn-pad: 0 1rem;
    color: var(--accent-2);
    transform: none;
  }
  .btn.theme-toggle .btn__label { transform: none; }
  .btn.theme-toggle:hover, .btn.theme-toggle:focus-visible {
    background: var(--accent-2);
    transform: none;
    box-shadow: 0 0 20px var(--accent-2);
  }

  /* ---- Hero ------------------------------------------------------------- */

  .hero {
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    padding: 0 0 2rem;
    text-align: center;
  }
  .hero > * + * { margin-top: 0; }
  .hero__cmd { display: none; }
  /* "v2.0 SYSTEM ONLINE": the status line becomes a skewed badge on top. */
  .hero .ok {
    order: -1;
    padding: 0.25rem 1.25rem;
    font-size: var(--text-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    background: rgba(0, 255, 255, 0.05);
    transform: skewX(-12deg);
  }
  .hero .ok::before { content: none; }
  .hero .ok kbd { font: inherit; }
  .hero__name {
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(to right, var(--accent-3), var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.6));
  }
  .hero__role {
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--fg);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  }
  .hero__role + .dim { max-width: 48rem; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.6; color: var(--fg-dim); }
  .hero__actions { justify-content: center; gap: 1.5rem; margin-top: 1rem; }
  .hero__actions .btn { --btn-h: 3.5rem; --btn-pad: 0 2.5rem; font-size: 1.125rem; }

  /* ---- Section headings: big, centered, outside any box ----------------- */

  .page > .pane:not(#about) {
    background: none;
    border: 0;
    backdrop-filter: none;
  }
  .page > .pane:not(#about) > .pane__bar {
    justify-content: center;
    padding: 0 0 1rem;
    white-space: normal;
    overflow: visible; /* or the heading glow is clipped */
    background: none;
    border: 0;
  }
  .page > .pane:not(#about) > .pane__bar :is(h1, h2) {
    flex: 0 1 auto;
    min-width: 0;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
    text-align: center;
  }
  .page > .pane:not(#about) > .pane__body { padding: 0; }
  .pane__fill { display: none; }

  /* The command under each heading reads as the section's subtitle. */
  .cmd { font-size: 1.25rem; color: var(--fg-dim); }
  .cmd::before { content: "> "; color: var(--accent-2); }
  .page > .pane:not(#about) > .pane__body > .cmd { text-align: center; margin-bottom: 3.5rem; }

  /* The 404 page is one short centered section. */
  #not-found h1 { color: var(--accent-2); filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.7)); }
  #not-found > .pane__body { text-align: center; }
  #not-found .actions { justify-content: center; }

  /* One heading treatment per section, as the reference varies them. */
  #experience h2 { color: var(--accent); filter: drop-shadow(0 0 10px var(--accent)); }
  #skills h2 { color: var(--accent-2); text-transform: uppercase; }
  #skills h2 .path { color: var(--fg); }
  #projects h2 { color: var(--accent-2); filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.7)); }
  #contact h2 { color: var(--accent); text-transform: uppercase; }
  #contact h2 .path { display: none; }
  #contact h2::before { content: "<"; }
  #contact h2::after { content: ">"; }

  /* ---- About: the terminal window --------------------------------------- */

  #about {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  }
  #about > .pane__bar {
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background: rgba(0, 255, 255, 0.1);
    border-bottom: 1px solid var(--accent);
  }
  #about > .pane__bar h2 { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  #about > .pane__bar h2::before { content: "TERMINAL_VIEW: "; }
  /* Window controls on the right: three dots from one element. */
  #about > .pane__bar::after {
    content: "";
    flex: none;
    width: 12px; height: 12px;
    margin-right: 40px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 20px 0 0 var(--accent), 40px 0 0 var(--accent-3);
  }
  #about > .pane__body {
    display: grid;
    gap: 1.25rem 3rem;
    padding: 2.5rem;
  }
  #about > .pane__body > * { margin-top: 0; }
  #about > .pane__body > p:not(.cmd) { font-size: 1.125rem; line-height: 1.75; color: var(--fg-dim); }
  #about > .pane__body > p:not(.cmd)::before { content: "> "; color: var(--accent-2); }
  @media (min-width: 64rem) {
    #about > .pane__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    #about > .pane__body > :not(.stats) { grid-column: 1; }
    #about .stats { grid-column: 2; grid-row: 1 / span 3; }
  }

  /* Stat boxes: black, gradient top bar, big number over a magenta label. */
  .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; align-content: start; }
  .stats > div {
    position: relative;
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.5rem;
    padding: 1.5rem 1.25rem 1.25rem;
    background: #000;
    border: 1px solid var(--border);
  }
  .stats > div::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--accent-2), var(--accent));
  }
  .stats dt { width: auto; font-size: var(--text-sm); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-2); }
  .stats dd { min-width: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.2; color: var(--fg); }
  .stats > div:last-child dd { font-size: 1rem; font-weight: 700; }
  .stats .bar { display: none; }

  /* ---- Experience: alternating checkpoint timeline ---------------------- */

  .log { position: relative; counter-reset: step; }
  .log::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 12px;
    width: 2px;
    background: rgba(255, 0, 255, 0.25);
  }
  .log > li {
    counter-increment: step;
    position: relative;
    margin-left: 3.5rem;
    padding: 1.75rem 2rem;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 255, 255, 0.7);
  }
  .log > li + li { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(0, 255, 255, 0.7); }
  /* The magenta ring node on the line. */
  .log > li::before {
    content: "";
    position: absolute; top: 1.5rem; left: calc(-3.5rem + 1px);
    width: 24px; height: 24px;
    border: 3px solid var(--accent-2);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 12px var(--accent-2);
  }
  /* The step number in the corner. */
  .log > li::after {
    content: counter(step);
    position: absolute; top: 0.75rem; right: 1.25rem;
    font-size: 2.25rem; font-weight: 900; line-height: 1;
    color: rgba(255, 0, 255, 0.45);
  }
  @media (min-width: 64rem) {
    .log::before { left: 50%; translate: -1px 0; }
    .log > li { width: calc(50% - 3rem); margin-left: 0; }
    .log > li:nth-child(odd) { margin-left: auto; }
    .log > li:nth-child(odd)::before { left: calc(-3rem - 12px); }
    .log > li:nth-child(even)::before { left: auto; right: calc(-3rem - 12px); }
  }
  .log__commit { font-size: var(--text-sm); color: var(--accent-3); }
  .log__ref { font-size: var(--text-sm); }
  .log__meta { font-size: var(--text-sm); }
  .log__title { margin-top: 0.75rem; padding-right: 3rem; font-size: 1.25rem; color: var(--fg); }
  .log__points { margin-top: 0.75rem; color: var(--fg-dim); line-height: 1.7; }
  .log__points li::before { content: ">"; color: var(--accent-2); }

  /* ---- Skills: system module cards with diamond icons ------------------- */

  .ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2rem; }
  .ls > div + div { margin-top: 0; }
  .ls > div {
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-top: 2px solid var(--accent);
    backdrop-filter: blur(12px);
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .ls > div:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(0, 255, 255, 0.2); }
  .ls dt {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
    font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--accent);
    text-shadow: none;
  }
  .ls__name { filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.8)); }
  /* The diamond: a rotated square behind the icon; it spins further on hover. */
  .ls dt::before {
    content: "";
    position: absolute; top: 0.5rem; left: 0.5rem;
    width: 3.5rem; height: 3.5rem;
    border: 2px solid var(--accent-2);
    rotate: 45deg;
    transition: rotate var(--transition);
  }
  .ls > div:hover dt::before { rotate: 90deg; }
  .ls__icon {
    display: block;
    width: 1.75rem; height: 1.75rem;
    margin: 1.375rem; /* centers it on the diamond */
    color: var(--accent-2);
  }
  .ls dd { display: block; margin-top: 1rem; padding: 0; line-height: 1.75; color: var(--fg-dim); }
  .ls dd > span + span::before { content: " · "; color: var(--accent-2); }

  /* ---- Projects: skewed, glowing cards ---------------------------------- */

  .projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); gap: 3rem; }
  .project {
    position: relative;
    background: #000;
    border: 2px solid var(--accent);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.35);
    transform: skewX(-3deg);
  }
  /* Content stays upright inside the skewed frame. */
  .project > * { transform: skewX(3deg); }
  .project::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 8px;
    background: linear-gradient(to right, var(--accent-2), var(--accent), var(--accent-3));
  }
  .project:hover, .project:focus-within {
    transform: skewX(0) translateY(-8px);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
  }
  .project:is(:hover, :focus-within) > * { transform: none; }
  .project > .pane__bar {
    gap: 1rem;
    padding: 2.25rem 2rem 0;
    white-space: normal;
    background: none;
    border: 0;
  }
  .project > .pane__bar h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em; color: var(--fg); }
  .project .pane__status {
    margin-left: auto;
    padding: 0 0.6rem;
    font-size: var(--text-sm);
    color: var(--accent-2);
    border: 1px solid var(--accent-2);
    transform: skewX(-12deg);
    animation: pulse 2s linear infinite;
  }
  .project .pane__status::before { content: "● "; color: inherit; }
  .project > .pane__body { padding: 1.25rem 2rem 2rem; }
  .project > .pane__body > p { line-height: 1.75; color: var(--fg-dim); }

  .flags { gap: 0.75rem; }
  .flags li {
    padding: 0 0.6rem;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid rgba(0, 255, 255, 0.35);
    transform: skewX(-12deg);
  }

  /* ---- Buttons: skewed, snap straight and ignite on hover --------------- */

  .btn { transform: skewX(-12deg); font-weight: 700; }
  .btn__label { transform: skewX(12deg); transition: transform var(--transition); }
  .btn:hover, .btn:focus-visible {
    transform: skewX(0) scale(1.05);
    box-shadow: 0 0 20px var(--accent), 0 0 40px rgba(0, 255, 255, 0.4);
  }
  .btn:is(:hover, :focus-visible) .btn__label { transform: none; }
  .btn:active { transform: skewX(0) scale(0.98); }
  .btn--alt:hover, .btn--alt:focus-visible { box-shadow: 0 0 20px var(--accent-2), 0 0 40px rgba(255, 0, 255, 0.4); }

  /* ---- Contact: IRC log card -------------------------------------------- */

  /* .pane#contact outranks the `.pane:not(#about)` rule that zeroes padding. */
  .page > .pane#contact > .pane__body {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 2rem;
    background: rgba(9, 0, 20, 0.85);
    border: 1px solid rgba(0, 255, 255, 0.4);
  }
  #contact .cmd { display: none; }
  #contact > .pane__body > * + * { margin-top: 1.25rem; }
  .irc-head {
    display: flex; flex-direction: column;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.4);
  }
  .irc-head b { color: var(--accent-2); font-weight: 700; }
  .irc-head span { font-size: var(--text-sm); color: var(--accent); }
  .contact-list li + li { margin-top: 0.5rem; }
  .contact-list .key { width: 10ch; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; }

  /* ---- Prompt: underlined terminal input -------------------------------- */

  .shell { border-top: 0; }
  .shell::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--accent-2), var(--accent));
  }
  .prompt__ps1 b { color: var(--accent-2); }
  .prompt__field { border-bottom: 2px solid var(--accent-2); transition: border-color var(--transition), box-shadow var(--transition); }
  .prompt__field:focus-within { border-bottom-color: var(--accent); box-shadow: 0 6px 15px -6px var(--accent); }
  .prompt__input:focus-visible { outline: none; box-shadow: none; }

  /* ---- Footer ----------------------------------------------------------- */

  .footer { padding-top: 3rem; }
  .footer::before {
    content: "";
    display: block;
    height: 2px;
    margin-bottom: 1rem;
    background: linear-gradient(to right, var(--accent-2), var(--accent));
  }

  /* ---- Phones: keep every effect, at lower intensity -------------------- */

  @media (max-width: 48rem) {
    --gap: 4rem;
    .topnav { display: none; }
    .brand__name { font-size: 1rem; }
    .hero__name { filter: drop-shadow(0 0 16px rgba(255, 0, 255, 0.5)); }
    .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
    .project { transform: none; }
    .project > * { transform: none; }
    #about > .pane__body { padding: 1.5rem; }
    .log > li { padding: 1.5rem 1.25rem; }
  }
  /* Narrow phones: the logo mark alone, so the toggle keeps its line. */
  @media (max-width: 30rem) {
    .brand__name { display: none; }
  }
}

@keyframes grid-roll { to { background-position: 0 40px; } }
@keyframes pulse { 50% { opacity: 0.55; } }