/*
Theme Name: Tanner Huysman
Theme URI: https://tannerhuysman.com/
Author: Tanner Huysman
Author URI: https://tannerhuysman.com/
Description: A bespoke, accessible one-page portfolio for Tanner Huysman.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: tanner-huysman
License: GNU General Public License v2 or later
*/

:root {
  color-scheme: dark;
  --bg: #03090d;
  --surface: #091116;
  --pearl: #f2eee8;
  --muted: #a8a6a1;
  --line: rgba(242, 238, 232, 0.2);
  --coral: #f06545;
  --amber: #e5a43a;
  --teal: #4bc7c0;
  --citron: #e6d20e;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--pearl); font-family: var(--sans); }
a { color: inherit; }
img { max-width: 100%; }

.skip-link {
  position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .8rem 1rem;
  transform: translateY(-150%); background: var(--pearl); color: var(--bg); border-radius: .25rem;
}
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: absolute; z-index: 20; top: 0; left: 0; right: 0;
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 5vw, 5.5rem);
}
.wordmark { font-size: .8rem; font-weight: 700; letter-spacing: .48em; text-decoration: none; text-transform: uppercase; }
.wordmark span, .site-footer > span span { color: var(--coral); }

.section { position: relative; width: min(100%, 100rem); margin: 0 auto; padding-inline: clamp(1.5rem, 5vw, 5.5rem); }
.section-kicker { margin: 0 0 2rem; color: #a6a4a0; font-size: .64rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; }
.section-kicker span { margin-right: 1.4rem; color: var(--coral); font-size: .8rem; letter-spacing: 0; }
h1, h2, h3 { margin-top: 0; font-family: var(--serif); font-weight: 400; }

.hero { display: grid; grid-template-columns: minmax(0, .84fr) minmax(26rem, 1fr); align-items: center; min-height: 100svh; padding-top: 7rem; padding-bottom: 5rem; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 2rem; font-size: clamp(4rem, 7vw, 7.5rem); line-height: .92; letter-spacing: -.035em; }
.hero-copy > p { margin: 0 0 3rem; color: #c8c5bf; font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.55; }
.linkedin-link { display: inline-flex; align-items: center; gap: 1rem; min-height: 3.2rem; padding: .4rem 1rem .4rem .5rem; border-bottom: 1px solid var(--teal); color: #d8d6d1; font-size: .85rem; text-decoration: none; transition: color .25s ease, border-color .25s ease; }
.linkedin-link:hover { color: white; border-color: var(--citron); }
.linkedin-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(255,255,255,.5); border-radius: .15rem; font-weight: 800; }

.portrait-frame { position: relative; align-self: stretch; min-height: 42rem; margin: 0; overflow: hidden; isolation: isolate; }
.portrait-frame::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 28%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 72%, var(--bg) 100%); pointer-events: none; }
.portrait-frame::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(112deg,transparent 28%,rgba(75,199,192,.045) 45%,transparent 58%); mix-blend-mode: screen; pointer-events: none; }
.portrait-frame img { position:absolute; inset:2% -5% 0 auto; width:101%; height:98%; object-fit:cover; object-position:63% center; filter:contrast(1.04) brightness(.9); transform:translate3d(0,var(--portrait-y,0),0) scale(1.025); will-change:transform; }
.portrait-reflection { position: absolute; z-index: 3; inset: 0; background: linear-gradient(112deg, transparent 30%, rgba(83,184,187,.08) 43%, transparent 53%); transform: translateX(var(--reflection-x, 0)); pointer-events: none; }
.journey-line { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--coral), var(--amber) 38%, var(--teal) 68%, var(--citron)); box-shadow: 0 0 10px rgba(75,199,192,.18); }

.journey { padding-top: clamp(6rem, 10vw, 10rem); padding-bottom: clamp(6rem, 9vw, 9rem); }
.journey h2 { margin-bottom: clamp(4rem, 8vw, 8rem); font-size: clamp(3.5rem, 6vw, 6rem); line-height: .98; }
.journey h2 em { color: var(--coral); font-style: normal; }
.journey-stages { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; margin: 0; list-style: none; }
.journey-stages::before { content:""; position:absolute; top:2.52rem; left:-6%; right:-2%; height:1px; background:linear-gradient(90deg,transparent,var(--coral) 10%,var(--amber) 42%,var(--teal) 72%,var(--citron) 96%,transparent); box-shadow:0 0 8px rgba(75,199,192,.12); }
.journey-stages li { position: relative; display: grid; justify-items: center; gap: 1rem; padding: 0 .8rem; text-align: center; }
.journey-stages li::before { content: ""; z-index: 1; width: .8rem; height: .8rem; margin-top: .1rem; border: 1px solid currentColor; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 .35rem var(--bg); }
.journey-stages li:nth-child(-n+3) { color: var(--amber); }
.journey-stages li:first-child { color: var(--coral); }
.journey-stages li:nth-child(4), .journey-stages li:nth-child(5) { color: var(--teal); }
.journey-stages li:last-child { color: var(--citron); }
.journey-stages strong { order: -1; font-weight: 500; }
.journey-stages span { max-width: 9rem; color: #aaa8a3; font-size: .78rem; line-height: 1.45; }

.range { padding-top: 5rem; padding-bottom: 8rem; }
.expertise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 5vw, 6rem); }
.expertise { text-align: center; }
.expertise-icon { width:4.8rem; height:4.8rem; margin-bottom:1.5rem; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; overflow:visible; filter:drop-shadow(0 0 0 transparent); transition:filter .4s ease,transform .4s ease; }
.expertise:nth-child(1) { color:var(--coral); }
.expertise:nth-child(2) { color:var(--amber); }
.expertise:nth-child(3) { color:var(--teal); }
.expertise:nth-child(4) { color:var(--citron); }
.expertise h3 { color:var(--pearl); }
.expertise p { color:var(--muted); }
.expertise:hover .expertise-icon { transform:translateY(-.25rem) scale(1.035); filter:drop-shadow(0 0 12px currentColor); }
.expertise h3 { margin-bottom: 1rem; font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: 1; }
.expertise p { max-width: 15rem; margin: auto; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.expertise::after { content: ""; display: block; width: 2rem; height: 2px; margin: 1.1rem auto 0; background: var(--coral); }
.expertise:nth-child(2)::after { background: var(--amber); }
.expertise:nth-child(3)::after { background: var(--teal); }
.expertise:nth-child(4)::after { background: var(--citron); }
.expertise.is-visible .compass .needle { transform-box: fill-box; transform-origin: center; animation: compassFind 1.3s cubic-bezier(.2,.8,.2,1) both; }
.expertise.is-visible .bars .bar { stroke-dasharray:70; stroke-dashoffset:70; animation:draw .65s ease forwards; }
.expertise.is-visible .bars .bar-two { animation-delay:.14s; }
.expertise.is-visible .bars .bar-three { animation-delay:.28s; }
.expertise.is-visible .bars .baseline { stroke-dasharray:60; stroke-dashoffset:60; animation:draw .55s .42s ease forwards; }
.expertise.is-visible .lifecycle .cycle { stroke-dasharray:180; stroke-dashoffset:180; animation:draw 1.15s ease forwards; }
.expertise.is-visible .lifecycle .person { opacity:0; transform-box:fill-box; transform-origin:center; animation:nodeArrive .5s .72s ease forwards; }
.expertise.is-visible .decision .ai-frame { stroke-dasharray:170; stroke-dashoffset:170; animation:draw .85s ease forwards; }
.expertise.is-visible .decision .ai-spark { opacity:0; fill:rgba(230,210,14,.065); transform-box:fill-box; transform-origin:center; animation:aiSparkArrive .72s .42s ease forwards; }
.expertise.is-visible .decision .ai-dot { opacity:0; fill:var(--citron); stroke:none; animation:nodeArrive .35s .82s ease forwards; }
.expertise.is-visible .decision .dot-two { animation-delay:.96s; }

.pov { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .75fr); gap: clamp(4rem, 8vw, 9rem); align-items: center; padding-top: 8rem; padding-bottom: 10rem; border-top: 1px solid rgba(255,255,255,.07); }
.pov h2 { margin: 0; font-size: clamp(3rem, 5.2vw, 5.8rem); line-height: .97; }
.pov h2 em { color: var(--teal); font-style: normal; }
.pov h2 b { color: var(--coral); font-weight: 400; }
.principles { padding: 0 0 0 2rem; margin: 0; border-left: 1px solid #8d887e; list-style: none; }
.principles li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .9rem; padding: 1.4rem 0; color: #d8d4cc; font-family: var(--serif); font-size: clamp(1.1rem, 1.55vw, 1.55rem); line-height: 1.3; }
.principles span { color: var(--teal); font-family: var(--sans); font-size: .7rem; }
.principles li:nth-child(2) span { color: var(--coral); }
.principles li:nth-child(3) span { color: var(--citron); }

.contact { display:grid; grid-template-columns:minmax(15rem,.48fr) minmax(38rem,.92fr); gap:clamp(3rem,5vw,6rem); align-items:center; padding-top:6.5rem; padding-bottom:9rem; }
.contact::before { content:""; position:absolute; z-index:-1; left:0; right:0; top:58%; height:1px; background:linear-gradient(90deg,transparent 0,var(--coral) 8%,var(--teal) 48%,var(--citron) 92%,transparent); box-shadow:0 0 18px rgba(75,199,192,.16); }
.contact h2 { margin: 0; font-size: clamp(3.5rem, 5.4vw, 6rem); line-height: .95; }
.ticket { position:relative; justify-self:end; display:grid; grid-template-columns:1fr 11.6rem; width:min(100%,47rem); min-height:16.2rem; overflow:hidden; border:1px solid rgba(190,205,207,.36); border-left:2px solid var(--coral); border-radius:.65rem; background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.075) 42%,transparent 55%),repeating-linear-gradient(98deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),linear-gradient(135deg,#202a2f,#10181d 50%,#273339); color:var(--pearl); text-decoration:none; box-shadow:0 48px 115px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.16),inset 0 -1px rgba(0,0,0,.72); transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; clip-path:polygon(0 0,97% 0,100% 10%,100% 90%,97% 100%,0 100%); }
.ticket:hover { transform:translateY(-.4rem) rotate(-.12deg); border-color:rgba(75,199,192,.5); box-shadow:0 64px 140px rgba(0,0,0,.78),0 0 46px rgba(75,199,192,.11),inset 0 1px rgba(255,255,255,.2); }
.ticket::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -20%; width: 12%; transform: skewX(-14deg); background: linear-gradient(90deg,transparent,rgba(75,199,192,.2),transparent); opacity: 0; }
.ticket:hover::after { animation: ticketScan 1.2s ease both; }
.ticket-main { display:grid; align-content:space-between; gap:.9rem; padding:clamp(1.35rem,2.2vw,2rem); }
.ticket-topline { display:flex; justify-content:space-between; gap:1rem; color:rgba(242,238,232,.5); font-size:.49rem; font-weight:850; letter-spacing:.24em; text-transform:uppercase; }
.ticket-field { display:grid; gap:.38rem; padding-bottom:.7rem; border-bottom:1px solid rgba(242,238,232,.19); }
.ticket-field span, .ticket-meta span { color:rgba(242,238,232,.48); font-size:.52rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.ticket-field strong { font-family: var(--serif); font-size: clamp(1.65rem, 2.5vw, 2.55rem); font-weight: 400; }
.ticket-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.ticket-meta div { display: grid; gap: .5rem; }
.ticket-meta strong { color:rgba(242,238,232,.88); font-size:.82rem; font-weight:600; }
.ticket-status { display: grid; overflow: hidden; height: 1.1rem; color: var(--citron); }
.ticket-status span { color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; transition: transform .3s ease; }
.ticket:hover .ticket-status span { transform: translateY(-1.1rem); }
.ticket-barcode { display:block; width:9.5rem; height:.8rem; background:repeating-linear-gradient(90deg,rgba(242,238,232,.5) 0 1px,transparent 1px 3px,rgba(242,238,232,.36) 3px 5px,transparent 5px 8px); opacity:.62; }
.ticket-stub { position:relative; display:grid; align-content:center; justify-items:center; gap:.75rem; padding:1.15rem; border-left:1px dashed var(--teal); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.16)); }
.ticket-stub::before,.ticket-stub::after { content:""; position:absolute; left:-.7rem; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--bg); border:1px solid rgba(212,220,220,.35); }
.ticket-stub::before { top:-.7rem; }.ticket-stub::after { bottom:-.7rem; }
.qr-frame { position:relative; display:grid; place-items:center; width:8.1rem; aspect-ratio:1; }
.ticket-stub img { width:100%; height:100%; padding:.36rem; background:#f7f1e7; border:1px solid rgba(75,199,192,.46); border-radius:.25rem; box-shadow:0 12px 30px rgba(0,0,0,.34),0 0 20px rgba(75,199,192,.06); }
.qr-linkedin-mark { position:absolute; display:grid; place-items:center; width:1.65rem; height:1.65rem; border:.18rem solid #f7f1e7; border-radius:.22rem; background:#0a66c2; color:white; font-size:.78rem; font-weight:850; letter-spacing:-.04em; line-height:1; box-shadow:0 0 0 1px rgba(17,25,30,.2); }
.ticket-stub > span { color:rgba(242,238,232,.62); font-size:.66rem; font-weight:600; }

.js .reveal-target { opacity:0; transform:translateY(1.2rem); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.js .reveal-target.is-visible { opacity:1; transform:none; }
.js .journey-stages.reveal-target::before { clip-path:inset(0 100% 0 0); transition:clip-path 1.35s .18s cubic-bezier(.2,.8,.2,1); }
.js .journey-stages.reveal-target.is-visible::before { clip-path:inset(0); }
.js .principles.reveal-target li { opacity:0; transform:translateX(1rem); transition:opacity .5s ease,transform .5s ease; }
.js .principles.reveal-target.is-visible li { opacity:1; transform:none; }
.js .principles.reveal-target.is-visible li:nth-child(2) { transition-delay:.12s; }
.js .principles.reveal-target.is-visible li:nth-child(3) { transition-delay:.24s; }

.site-footer { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1.5rem 4rem; border-top: 1px solid rgba(255,255,255,.08); }
.site-footer > span { font-size: .85rem; font-weight: 700; letter-spacing: .55em; text-transform: uppercase; }
.site-footer small { color: #777974; font-size: .58rem; letter-spacing: .32em; text-align: center; text-transform: uppercase; }

.progress-rail { position:fixed; z-index:50; top:50%; right:.7rem; display:flex; align-items:center; gap:.7rem; transform:translateY(-50%); pointer-events:none; }
.progress-label { color:rgba(242,238,232,.5); font-size:.48rem; font-weight:750; letter-spacing:.24em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); transition:color .35s ease; }
.progress-track { position:relative; display:block; width:1px; height:8.5rem; background:linear-gradient(180deg,transparent,rgba(242,238,232,.22) 12%,rgba(242,238,232,.22) 88%,transparent); }
.progress-marker { position:absolute; top:0; left:50%; width:.55rem; height:.55rem; border-radius:50%; background:var(--citron); box-shadow:0 0 14px rgba(230,210,14,.68); transform:translate(-50%,calc(var(--progress-position,0) * 7.95rem)); transition:transform .55s cubic-bezier(.2,.8,.2,1); }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes compassFind { 0%{transform:rotate(-80deg)} 65%{transform:rotate(10deg)} 100%{transform:rotate(0)} }
@keyframes nodeArrive { 0%{opacity:0;transform:scale(.45)} 70%{opacity:1;transform:scale(1.14)} 100%{opacity:1;transform:scale(1)} }
@keyframes prismPulse { 0%{opacity:0;transform:scale(.3)} 55%{opacity:1;transform:scale(1.7);filter:drop-shadow(0 0 8px var(--citron))} 100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 3px var(--citron))} }
@keyframes aiSparkArrive { 0%{opacity:0;transform:scale(.35) rotate(-22deg)} 65%{opacity:1;transform:scale(1.16) rotate(4deg);filter:drop-shadow(0 0 9px var(--citron))} 100%{opacity:1;transform:scale(1) rotate(0);filter:drop-shadow(0 0 3px var(--citron))} }
@keyframes ticketScan { 0%{left:-20%;opacity:0} 25%{opacity:1} 100%{left:110%;opacity:0} }

@media (max-width: 980px) {
  .progress-rail { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 9rem; }
  .hero-copy { padding-bottom: 2rem; }
  .portrait-frame { min-height: min(110vw, 42rem); margin-inline: -1.5rem; }
  .portrait-frame img { inset: 0; width: 100%; height: 100%; }
  .journey-stages { grid-template-columns: repeat(2,1fr); gap: 2rem 1rem; }
  .journey-stages::before { display:none; }
  .journey-stages li { border-top:1px solid currentColor; padding-top:1rem; }
  .journey-stages li::before { display:none; }
  .expertise-grid { grid-template-columns: repeat(2,1fr); }
  .pov, .contact { grid-template-columns:1fr; }
  .principles { padding-left:1rem; }
}

@media (max-width: 620px) {
  .site-header { padding-inline: 1.2rem; }
  .wordmark { font-size: .7rem; letter-spacing: .36em; }
  .section { padding-inline: 1.2rem; }
  .hero h1 { font-size: clamp(3.7rem, 17vw, 5.2rem); }
  .hero-copy > p br { display:none; }
  .portrait-frame { margin-inline:-1.2rem; }
  .journey h2, .pov h2, .contact h2 { font-size: clamp(3rem, 13vw, 4.5rem); }
  .expertise-grid { grid-template-columns: 1fr; gap: 4rem; }
  .ticket { grid-template-columns:1fr; }
  .ticket-stub { border-left:0; border-top:1px dashed var(--teal); }
  .ticket-stub::before,.ticket-stub::after { display:none; }
  .ticket-meta { grid-template-columns:repeat(3,1fr); }
  .site-footer > span { letter-spacing:.35em; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .portrait-frame img,.portrait-reflection { transform:none!important; }
}