/* =====================================================================
   Chad Wittman — resume site
   Rebuilt as semantic HTML/CSS from Figma "Resume Design" (node 78:2).
   Content lives in index.html; colours + type scale live here as tokens.
   ===================================================================== */

:root {
  /* palette (sampled from the source design) */
  --green:      #01FE9C;
  --green-spray:#16FD00;
  --red:        #F5321E;
  --red-deep:   #DB2616;
  --blue:       #0A50C8;
  --yellow:     #FFC400;
  --ink:        #111312;   /* near-black */
  --ink-2:      #1c201e;
  --paper:      #ECEEEE;   /* off-white */
  --paper-2:    #ffffff;

  /* type */
  --display: "Archivo Black", system-ui, sans-serif;
  --condensed: "Anton", system-ui, sans-serif;
  --graffiti: "Rubik Spray Paint", "Archivo Black", cursive;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;

  --pad: 22px;             /* section side padding */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: #060606;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  color: #fff;
}

/* Ambient, blurred brand-colour glow behind the phone column.
   Fixed + heavily blurred so wide screens feel intentional with almost no effort. */
.backdrop {
  position: fixed;
  inset: -20vmax;               /* overscan so the blur has no visible edges */
  z-index: 0;
  pointer-events: none;
  filter: blur(120px) saturate(1.2);
  background:
    radial-gradient(38vmax 38vmax at 22% 12%, rgba(1,254,156,.30), transparent 60%),
    radial-gradient(42vmax 42vmax at 82% 32%, rgba(245,50,30,.28), transparent 60%),
    radial-gradient(40vmax 40vmax at 30% 82%, rgba(10,80,200,.26), transparent 62%),
    radial-gradient(38vmax 38vmax at 78% 92%, rgba(22,253,0,.20), transparent 60%),
    #060606;
}
@media (prefers-reduced-motion: no-preference) {
  .backdrop { animation: drift 26s ease-in-out infinite alternate; }
}
@keyframes drift { to { transform: translate3d(2%, -1.5%, 0) scale(1.06); } }

/* phone-width column (design is 393px wide) */
.device {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.6);
}

/* On real desktop width, float the column as a device with rounded corners + halo. */
@media (min-width: 640px) {
  body { padding: 44px 0; }
  .device {
    border-radius: 22px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.08),
      0 0 60px rgba(1,254,156,.10),
      0 40px 120px rgba(0,0,0,.65);
  }
}

img { display: block; max-width: 100%; }

/* ---------- shared atoms ---------- */
.pill {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  padding: 7px 12px 6px;
  text-decoration: none;
  line-height: 1;
}
.pill--green { background: var(--green); color: #000; }
.pill--white { background: #fff;         color: #000; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.mono--dim   { color: rgba(255,255,255,.5); }
.mono--green { color: var(--green); }

.wordmark { font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: .14em; }

.red { color: var(--red); }
.spark { color: currentColor; }

.hl {
  color: #fff; padding: 1px 6px; border-radius: 1px; font-weight: 700;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;  /* keep bg when wrapping */
}
.hl--red    { background: var(--red); }
.hl--yellow { background: var(--yellow); color: #000; }
.hl--green  { background: var(--green); color: #000; }

/* headline used in light sections */
.display {
  font-family: var(--display);
  font-size: 40px;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.display em { font-style: normal; }
.display--dark { color: var(--ink); }

.lede { font-size: 15px; line-height: 1.4; color: #22201f; font-weight: 500; }

/* =========================== HERO =========================== */
.hero {
  position: relative;
  background: var(--ink);
  padding: 16px var(--pad) 0;
  overflow: hidden;
}
.hero__bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
}
.hero__statue {
  position: absolute;
  top: 24px; right: -10px;
  width: 62%;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, #000 78%, transparent);
  pointer-events: none;
}
.hero__eyebrow {
  position: relative; z-index: 3;
  margin-top: 26px;
  color: var(--green);
  font-family: var(--sans);
  font-weight: 800; font-size: 12px; letter-spacing: .18em;
}
.hero__title {
  position: relative; z-index: 3;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 58px;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__title span { display: block; }
.hero__band {
  position: relative; z-index: 3;
  margin: 10px calc(var(--pad) * -1) 0;
  background: var(--green);
  color: #000;
  font-family: var(--display);
  font-size: 33px;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  padding: 13px var(--pad);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.hero__band .spark { font-size: 26px; }
.hero__support {
  position: relative; z-index: 3;
  margin-top: 16px; padding-bottom: 22px;
  font-size: 14px; line-height: 1.45;
  color: rgba(255,255,255,.72);
  max-width: 330px;
}

/* ==================== DEMO / VIDEO ==================== */
.demo { background: var(--ink); padding: 4px var(--pad) 30px; }
.demo .mono--green { display: block; margin-bottom: 12px; }
.demo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(1,254,156,.28);
  background: #000;
  overflow: hidden;
}
.demo__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ========================= FOUNDER ========================= */
.founder { background: var(--paper); color: var(--ink); padding: 26px 0 30px; }
.founder .block { padding: 0 var(--pad); }
.founder .display { margin: 14px 0 12px; max-width: 340px; }
.founder .block + .shot { margin-top: 20px; }

.shot { margin: 18px 0; }
.shot img { width: 100%; }
.founder .block:nth-of-type(2) { margin-top: 26px; }
.founder .lede { margin-top: 4px; }

/* ==================== CORE OPERATOR SYSTEM ==================== */
.core {
  position: relative;
  background: var(--ink);
  background-image:
    linear-gradient(rgba(1,254,156,.05), rgba(0,0,0,.4)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px);
  padding: 30px var(--pad) 34px;
}
.core__title {
  margin: 10px 0 16px;
  text-transform: uppercase;
  line-height: .84;
}
.core__title .red {
  display: block;
  font-family: var(--condensed);
  font-size: 54px;
  line-height: .9;
  letter-spacing: .01em;
  max-width: 260px;      /* forces CORE / OPERATOR / SYSTEM to stack */
}
.core__title .graffiti {
  display: block;
  font-family: var(--graffiti);
  color: var(--green-spray);
  font-size: 58px;
  line-height: .8;
  transform: rotate(-4deg);
  margin-top: 2px;
}
.core__lede {
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.82);
  overflow-wrap: break-word;
}
.core .mono--green { display: block; margin: 22px 0 12px; }

.drop {
  border: 1px solid rgba(1,254,156,.25);
  background: linear-gradient(135deg, rgba(1,254,156,.06), rgba(255,255,255,.02));
  padding: 14px 15px;
  margin-bottom: 12px;
}
.drop__head { display: flex; gap: 13px; align-items: center; }
.drop__headtext { min-width: 0; }
.drop__tile {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 10px; object-fit: cover; object-position: top;
  border: 1px solid rgba(255,255,255,.14); background: #000;
}
.drop__name { font-family: var(--condensed); font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.drop__tag  { color: var(--green); margin-top: 2px; font-weight: 700; font-size: 11px; }
.drop__desc { margin-top: 11px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.72); }
.drop--link { display: block; text-decoration: none; color: inherit; }
.drop__url  { display: block; margin-top: 10px; color: var(--green); font-size: 11px; }
@media (hover: hover) {
  .drop--link:hover .drop__url { text-decoration: underline; }
}

.minis__label { display: block; margin: 24px 0 12px; }
.minis {
  display: grid;
  gap: 1px;                                   /* hairline dividers via bg bleed */
  background: rgba(1,254,156,.16);
  border: 1px solid rgba(1,254,156,.16);
  margin-bottom: 20px;
}
.mini {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ink);
  padding: 14px 15px;
  text-decoration: none; color: inherit;
  transition: background .2s ease, transform .2s ease;
}
.mini__tile {
  width: 46px; height: 46px; flex-shrink: 0; margin-top: 3px;
  border-radius: 8px; object-fit: cover; object-position: top;
  border: 1px solid rgba(255,255,255,.12); background: #000;
}
.mini__body { min-width: 0; }
.mini__name {
  display: block;
  font-family: var(--condensed);
  font-size: 23px; letter-spacing: .02em; text-transform: uppercase;
  color: #fff;
}
.mini__desc {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.42; color: rgba(255,255,255,.66);
}
.mini__url { display: block; margin-top: 8px; color: var(--green); font-size: 11px; }
@media (hover: hover) {
  .mini:hover { background: #171b19; }
  .mini:hover .mini__url { text-decoration: underline; }
}

.core__access {
  display: inline-block;
  margin-top: 8px;
  color: #000;
  background: var(--green);
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 700;
}

/* ======================= DEPLOYMENT ======================= */
.deploy { background: var(--ink); padding: 8px var(--pad) 30px; }
.deploy__grid { position: relative; padding-top: 14px; min-height: 220px; }
.deploy__portrait {
  position: absolute; top: 12px; right: 0;
  width: 38%;
  z-index: 1;
  border: 1px solid rgba(1,254,156,.35);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  filter: contrast(1.04) saturate(1.05);
}
.deploy__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 46% 34%;   /* frame the face */
}
.deploy__status { position: absolute; left: 6px; bottom: 8px; font-size: 10px; z-index: 2; }
.deploy__title {
  position: relative; z-index: 3;
  font-family: var(--display);
  font-size: 46px;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 62%;
}
.deploy__name {
  position: relative; z-index: 2;
  font-family: var(--sans); font-weight: 800;
  letter-spacing: .1em; font-size: 15px; margin-top: 10px;
}
.deploy__sub {
  margin-top: 28px;
  font-family: var(--sans); font-weight: 800;
  font-size: 15px; letter-spacing: .04em; color: var(--green);
  text-transform: uppercase;
}
.deploy__stack {
  margin-top: 10px;
  font-family: var(--display);
  font-size: 16px; line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}
.cta {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.18);
  padding: 18px;
  background: rgba(255,255,255,.03);
}
.cta__kicker { font-family: var(--sans); font-weight: 800; color: var(--green); letter-spacing: .04em; font-size: 13px; text-transform: uppercase; }
.cta__body { margin-top: 8px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.8); }
.cta__link {
  display: inline-block; margin-top: 14px;
  color: #000; background: var(--green);
  padding: 10px 12px; text-decoration: none;
  font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .02em;
}

/* ========================= FOOTER ========================= */
.footer { background: #000; padding: 22px var(--pad) 26px; }
.footer__top { display: flex; align-items: center; justify-content: space-between; }
.social { display: flex; gap: 14px; }
.social a { color: #fff; opacity: .85; transition: opacity .15s; }
.social a:hover { opacity: 1; color: var(--green); }
.footer__meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .08em;
}

/* keep the phone frame clean on large screens; go edge-to-edge on phones */
@media (max-width: 430px) {
  .device { box-shadow: none; }
}

/* =====================================================================
   INTERACTIONS & MOTION
   ===================================================================== */

/* ---- hover states (pointer devices only) ---- */
@media (hover: hover) {
  .pill, .core__access, .cta__link {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .pill--green:hover, .core__access:hover, .cta__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(1,254,156,.38);
  }
  .drop { transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, background .28s; }
  .drop:hover {
    transform: translateY(-4px);
    border-color: rgba(1,254,156,.6);
    background: linear-gradient(135deg, rgba(1,254,156,.12), rgba(255,255,255,.03));
  }
  .social a { transition: transform .15s, color .15s, opacity .15s; }
  .social a:hover { transform: translateY(-2px); }
  .shot { overflow: hidden; }
  .shot img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .shot:hover img { transform: scale(1.04); }

  /* project tile zoom */
  .drop__tile, .mini__tile { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .drop:hover .drop__tile, .mini:hover .mini__tile { transform: scale(1.06); }

  /* cursor spotlight — a soft green light follows the pointer across each card */
  .drop, .mini { position: relative; isolation: isolate; }
  .drop::after, .mini::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(1,254,156,.12), transparent 62%);
    opacity: 0; transition: opacity .3s ease;
  }
  .drop:hover::after, .mini:hover::after { opacity: 1; }
}

/* ---- video play overlay ---- */
.demo__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  transition: opacity .3s ease;
}
.demo__playicon {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--green); color: #000;
  display: grid; place-items: center;
  font-size: 24px; padding-left: 4px;
  box-shadow: 0 10px 34px rgba(1,254,156,.45);
  transition: transform .2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .demo__playicon { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 34px rgba(1,254,156,.45); }
  50%      { box-shadow: 0 10px 34px rgba(1,254,156,.45), 0 0 0 14px rgba(1,254,156,.08); }
}
.demo__play:hover .demo__playicon { transform: scale(1.08); }
.demo__playlabel { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; }
.demo__frame.playing .demo__play { opacity: 0; pointer-events: none; }
.demo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- scroll reveal (only when JS is on, so no-JS still shows content) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px) scale(.985);
    filter: blur(6px);
    transition: opacity .85s cubic-bezier(.16,1,.3,1),
                transform .85s cubic-bezier(.16,1,.3,1),
                filter .85s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform, filter;
  }
  html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
}