/* ============================================================
   Tye Coleman — one identity, four living environments.
   The palette is registered with @property so an environment
   change INTERPOLATES every color across the whole page.
   ============================================================ */

/* ---- animatable color tokens ---- */
@property --bg       { syntax: "<color>"; inherits: true; initial-value: #06070d; }
@property --surface  { syntax: "<color>"; inherits: true; initial-value: rgba(20,22,34,.55); }
@property --text     { syntax: "<color>"; inherits: true; initial-value: #eef0f6; }
@property --dim      { syntax: "<color>"; inherits: true; initial-value: #9aa3b8; }
@property --accent   { syntax: "<color>"; inherits: true; initial-value: #36e0b0; }
@property --accent2  { syntax: "<color>"; inherits: true; initial-value: #8b7bff; }
@property --line     { syntax: "<color>"; inherits: true; initial-value: rgba(150,160,200,.16); }
@property --glow     { syntax: "<color>"; inherits: true; initial-value: rgba(139,123,255,.45); }

:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --maxw: 1080px;
  --morph: .9s;
  --ease: cubic-bezier(.4,.1,.2,1);
}

/* ---- the four environments ---- */
html[data-env="aurora"] {
  --bg:#06070d; --surface:rgba(20,22,34,.5); --text:#eef0f6; --dim:#9aa3b8;
  --accent:#36e0b0; --accent2:#8b7bff; --line:rgba(150,160,200,.16); --glow:rgba(139,123,255,.5);
  --font-display:"Fraunces",Georgia,serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace;
}
html[data-env="atelier"] {
  --bg:#f4f0e8; --surface:#fbf9f3; --text:#1a1714; --dim:#6b6256;
  --accent:#7a2e2e; --accent2:#2f4a3a; --line:rgba(26,23,20,.16); --glow:rgba(122,46,46,.14);
  --font-display:"Fraunces",Georgia,serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace;
}
html[data-env="ledger"] {
  --bg:#fbfaf7; --surface:#ffffff; --text:#111111; --dim:#5a5a5a;
  --accent:#1b46ff; --accent2:#e2342b; --line:rgba(17,17,17,.18); --glow:rgba(27,70,255,.12);
  --font-display:"Space Grotesk",sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"JetBrains Mono",monospace;
}
html[data-env="console"] {
  --bg:#0d1220; --surface:rgba(20,28,48,.55); --text:#e7ecf5; --dim:#8a93a8;
  --accent:#5ad7ff; --accent2:#ffb86b; --line:rgba(120,150,200,.18); --glow:rgba(90,215,255,.42);
  --font-display:"Space Grotesk",sans-serif; --font-body:"Inter",system-ui,sans-serif; --font-mono:"IBM Plex Mono",monospace;
}

/* the morph: interpolate the tokens when data-env flips */
html {
  transition:
    --bg var(--morph) var(--ease), --surface var(--morph) var(--ease),
    --text var(--morph) var(--ease), --dim var(--morph) var(--ease),
    --accent var(--morph) var(--ease), --accent2 var(--morph) var(--ease),
    --line var(--morph) var(--ease), --glow var(--morph) var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--morph) var(--ease), color var(--morph) var(--ease);
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
em { font-style: italic; color: var(--accent); }
.mono { font-family: var(--font-mono); }

/* ---- background layers ---- */
#bg { position: fixed; inset: 0; z-index: -2; }
#bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg-b { opacity: 0; transition: opacity var(--morph) ease; }
#bg::after { /* vignette to keep text legible on any env */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 95% at 50% 0%, transparent 45%, color-mix(in srgb, var(--bg) 78%, transparent) 100%);
  transition: background var(--morph) var(--ease);
}
#morph-bloom {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 50% 42%, var(--glow), transparent 70%);
}
#morph-bloom.flash { animation: bloom .95s var(--ease); }
@keyframes bloom { 0%{opacity:0} 35%{opacity:.9} 100%{opacity:0} }

/* ---- top bar ---- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; gap: 20px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background var(--morph) var(--ease), border-color var(--morph) var(--ease);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); flex-shrink: 0; }
.brand-mark { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent); position: relative; flex: none; }
.brand-mark::after { content:""; position:absolute; right:-5px; top:-4px; width:6px; height:6px; border-radius:50%; background: var(--accent2); }
.brand-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; white-space: nowrap; }
.brand-ja { font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.env-nav { display: flex; align-items: center; gap: 12px; }
.env-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.env-switch { display: flex; gap: 5px; }
.env-chip {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
  transition: color .25s, border-color .25s, background .25s;
}
.env-chip:hover { color: var(--text); border-color: var(--accent); }
.env-chip[aria-pressed="true"] {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
  font-weight: 500;
}
.env-auto {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim);
  transition: color .25s, border-color .25s;
}
.env-auto:hover { color: var(--text); }
.auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background .3s; }
.env-auto[aria-pressed="true"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.env-auto[aria-pressed="true"] .auto-dot { background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: breathe 2.6s ease-in-out infinite; }
.env-auto[aria-pressed="false"] .auto-text::after { content: " · paused"; color: var(--dim); }
@keyframes breathe { 50% { opacity: .35; } }
.auto-next { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); letter-spacing: .04em; }

/* ---- shared section frame ---- */
section, .contact { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.sec-title {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 44px);
  display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px;
}
.sec-index { font-family: var(--font-mono); font-size: 14px; color: var(--accent); letter-spacing: .1em; }
.sec-lead { color: var(--dim); max-width: 60ch; margin: -10px 0 30px; }

/* ---- hero ---- */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 90px; padding-bottom: 60px; }
.hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--dim); margin-bottom: 24px; }
.hero-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 11vw, 132px); line-height: .95; letter-spacing: -.01em;
  margin-bottom: 22px;
}
.hero-roles { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 30px; min-height: 1.6em; }
.roles-static { display: none; }
.roles-rotator {
  font-family: var(--font-mono); font-size: clamp(15px, 2.4vw, 21px); color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  position: relative; overflow: hidden; min-width: 16ch; text-align: center;
  transition: border-color var(--morph) var(--ease);
}
.roles-rotator .role-word { display: inline-block; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.roles-rotator .role-word.out { transform: translateY(-120%); opacity: 0; }
.roles-rotator .role-word.in  { animation: roleIn .5s var(--ease); }
@keyframes roleIn { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero-oneliner { font-size: clamp(18px, 2.5vw, 23px); color: var(--dim); max-width: 60ch; line-height: 1.5; }
.hero-oneliner strong { color: var(--text); font-weight: 500; }
.scroll-cue { margin-top: 54px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.cue-arrow { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

/* ---- about ---- */
.about { padding-top: 110px; padding-bottom: 30px; }
.about-body { max-width: 70ch; display: grid; gap: 20px; }
.about-body p { font-size: 19px; line-height: 1.7; color: var(--text); }
.about-body p:first-child::first-letter {
  font-family: var(--font-display); font-size: 3.4em; line-height: .8; float: left;
  padding: 8px 12px 0 0; color: var(--accent);
}
.about-body strong { color: var(--accent2); font-weight: 600; }

/* ---- experience ---- */
.work { padding-top: 110px; padding-bottom: 30px; }
.work-list { display: grid; gap: 22px; }
.work-card {
  text-align: left; width: 100%;
  display: grid; grid-template-columns: 64px 1fr auto; align-items: start; gap: 28px;
  padding: 36px 34px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s, background var(--morph) var(--ease);
}
.work-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.wc-no { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: .1em; padding-top: 12px; }
.wc-main { min-width: 0; }
.wc-name { font-family: var(--font-display); font-size: 30px; line-height: 1.2; letter-spacing: .01em; }
.wc-kind { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; word-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }
.wc-sum { display: block; color: var(--dim); margin-top: 18px; font-size: 16px; line-height: 1.75; max-width: 60ch; }
.wc-proof { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-top: 20px; display: inline-flex; gap: 9px; align-items: baseline; line-height: 1.6; letter-spacing: .02em; }
.wc-cta { font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; align-self: center; letter-spacing: .04em; }
.work-card:hover .wc-cta { color: var(--accent); }

/* ---- work experience (résumé view) ---- */
.workexp { padding-top: 110px; padding-bottom: 30px; }
.job-list { display: grid; gap: 26px; }
.job {
  border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 34px; background: var(--surface); backdrop-filter: blur(8px);
  transition: border-color .25s, background var(--morph) var(--ease);
}
.job:hover { border-color: var(--accent); }
.job-head { display: grid; gap: 6px; margin-bottom: 14px; }
.job-role { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: .01em; }
.job-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.job-dates { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
.job-bullets { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.job-bullets li { color: var(--dim); font-size: 15.5px; line-height: 1.7; max-width: 70ch; }

/* ---- capabilities ---- */
.caps { padding-top: 110px; padding-bottom: 30px; }
.caps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cap {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  background: var(--surface); backdrop-filter: blur(6px);
  transition: border-color .25s, background var(--morph) var(--ease);
}
.cap:hover { border-color: var(--accent2); }
.cap-label { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }
.cap-desc { font-size: 13.5px; color: var(--text); opacity: .85; line-height: 1.6; margin-bottom: 10px; }
.cap-ev { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); line-height: 1.7; }
.cap-ev b { color: var(--accent); font-weight: 500; }

/* ---- contact ---- */
.contact { padding-top: 120px; padding-bottom: 80px; }
.contact-line { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 60px); margin-bottom: 34px; }
.contact-links { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 14.5px; }
.contact-links a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 2px; }
.contact-links a:hover { border-bottom-color: var(--accent); }
.colophon { margin-top: 60px; font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); letter-spacing: .03em; }

/* ---- detail drawer ---- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(3px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(580px, 94vw);
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -40px 0 90px rgba(0,0,0,.45);
  padding: 62px 38px 44px; overflow-y: auto; animation: slidein .32s var(--ease);
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer-close { position: absolute; top: 18px; right: 22px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.drawer-close:hover { color: var(--text); }
.d-kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.d-name { font-family: var(--font-display); font-size: 42px; margin: 8px 0 6px; }
.d-sum { color: var(--dim); margin-bottom: 22px; }
.d-body { font-size: 16px; line-height: 1.75; margin-bottom: 22px; }
.d-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin: 26px 0 12px; }
.d-facet { border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); padding-left: 16px; margin-bottom: 16px; }
.d-facet b { display: block; font-size: 15px; margin-bottom: 4px; }
.d-facet p { font-size: 14.5px; color: var(--dim); }
.d-facet .fp { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); margin-top: 6px; }
.d-decisions li { font-size: 14.5px; color: var(--dim); margin: 0 0 10px 18px; }
.proof-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-family: var(--font-mono); font-size: 12.5px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.proof-row .pc { color: var(--text); }
.proof-row .pv { color: var(--accent); white-space: nowrap; font-size: 11px; }
.d-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; font-family: var(--font-mono); font-size: 13px; }
.d-stack { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 20px; }
.d-stack span { font-family: var(--font-mono); font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---- responsive ---- */
/* drop the decorative label before the bar gets tight on tablets */
@media (max-width: 860px) { .env-label { display: none; } }

@media (max-width: 720px) {
  .env-nav { gap: 8px; }
  .work-card { grid-template-columns: 1fr; gap: 8px; padding: 28px 22px; }
  .wc-no { order: -1; padding-top: 0; }
  .wc-cta { display: none; }
  .wc-name { font-size: 26px; }
  .wc-sum { margin-top: 14px; }
  .about-body p { font-size: 17px; }
}

/* phones/tablets: the top bar wraps to two rows so the environment controls stay reachable */
@media (max-width: 720px) {
  .bar { flex-wrap: wrap; row-gap: 10px; padding: 12px 18px; }
  .env-nav { width: 100%; justify-content: space-between; gap: 8px; }
  .env-switch { gap: 5px; flex: 1; justify-content: flex-start; }
  .env-chip { padding: 8px 10px; font-size: 11px; }
  .env-auto { padding: 8px 11px; }
  .auto-next { display: none; }
  section, .contact { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 124px; }
  .hero-name { font-size: clamp(40px, 12.5vw, 60px); }
  .hero-roles { margin-bottom: 24px; }
  .sec-title { font-size: clamp(26px, 7vw, 36px); }
}

/* very small phones: let the chips scroll rather than crush */
@media (max-width: 380px) {
  .env-switch { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .env-switch::-webkit-scrollbar { display: none; }
  .env-chip { flex: 0 0 auto; }
}

/* ---- reduced motion: no morph drama, no surprise rotation ---- */
@media (prefers-reduced-motion: reduce) {
  html, body, #bg-b, #bg::after, .work-card, .cap, .roles-rotator { transition: none !important; }
  #morph-bloom.flash { animation: none; }
  .cue-arrow, .auto-dot, .reveal { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .roles-rotator { display: none; }
  .roles-static { display: inline-flex; flex-wrap: wrap; gap: 8px; }
  html { scroll-behavior: auto; }
}

/* single-item job lists: no bullet */
.job-bullets li:only-child { list-style: none; }
.job-bullets:has(li:only-child) { padding-left: 0; }