/* V12 — Drag to shift day/night. This stylesheet intentionally targets only
   the public portfolio; admin stylesheet, Cloudflare bindings and API untouched. */
:root {
  --v12-bg:#101010; --v12-about:#181817; --v12-clients:#111111;
  --v12-paper:#eeeae3; --v12-muted:#a8a5a0; --v12-line:#33332f;
  --v12-accent:#ff633a; --v12-border:#4a4841; --v12-subtle:#292824;
  --v12-chip:#c7c4be; --v12-activeBg:#eeeae3; --v12-activeFg:#151515;
  --v12-progress:1; --v12-dayness:0; --v12-nightness:1;
  --v12-logo-invert:100%;
  --bg:var(--v12-bg); --paper:var(--v12-paper); --muted:var(--v12-muted);
  --line:var(--v12-line); --accent:var(--v12-accent);
}
/* Smooth tone-switch around the midpoint; image/video pixels are never filtered. */
body,.header,.footer,.section-pad,.project-meta,.section-kicker,.client-credits,.expertise,.about-copy{
  color:var(--paper)
}
body{background:var(--bg);transition:color .14s ease-out}
.header{background:var(--bg);border-bottom-color:var(--line);gap:clamp(14px,2vw,38px)}
.header nav{margin-left:auto;gap:clamp(13px,1.7vw,32px)}
.header .nav-contact{border-bottom-color:var(--paper)}
.about{background:var(--v12-about);border-color:var(--line);box-shadow:inset 0 1px var(--line)}
.about-copy p{color:var(--muted)}
.about-copy p:first-child{color:var(--paper)}
.text-link{border-color:var(--v12-border)}
.expertise,.expertise>div+div{border-color:var(--v12-border)}
.clients{background:radial-gradient(ellipse at 50% 39%,
   color-mix(in srgb,var(--v12-clients),var(--v12-accent) 7%),var(--v12-clients) 79%);
  border-color:var(--line)}
.clients::before{opacity:calc(.22 + var(--v12-nightness) * .78)}
.clients .v11-neural-field{mix-blend-mode:difference}
.clients .client-credits{background:transparent;border-color:var(--line);color:var(--muted)}
.client-logo img,
.clients .client-logo img,
.clients .client-lockup img,
.clients .client-logo img[src$="rainbow-six.png"]{
  filter:brightness(0) invert(var(--v12-logo-invert));mix-blend-mode:normal;
}
.client-logo:hover img,.client-logo:focus-within img,
.clients .client-logo:hover img,.clients .client-logo:focus-within img{
  filter:brightness(0) invert(var(--v12-logo-invert)) drop-shadow(0 0 10px color-mix(in srgb,var(--accent),transparent 75%));
}
.signal-instruction{color:var(--accent)}
.project-meta h3{color:var(--paper)}
.project-open:hover .project-meta h3{color:var(--paper)}
.project-meta p{color:var(--muted)}
.project-skill-tag{border-color:var(--line);color:var(--muted)}
.project-visual,.frame-strip figure{background:#161616}
.work-summary{border-color:var(--line)}
.filter-chip{border-color:var(--v12-border);color:var(--v12-chip)}
.filter-chip:hover,.filter-chip.is-active{background:var(--v12-activeBg);color:var(--v12-activeFg);border-color:var(--v12-activeBg)}
.frame-strip{background:linear-gradient(125deg,color-mix(in srgb,var(--paper),transparent 95%),transparent 70%);border-color:var(--line)}
.frame-strip figcaption{color:#f8f5ef}
.contact{background:radial-gradient(ellipse at 85% 80%,color-mix(in srgb,var(--accent),transparent 95%),transparent 55%)}
.contact-bottom p{color:var(--muted)}
.footer{background:var(--bg);border-top-color:var(--line)}
/* Hero movie is intentionally unchanged by day/night theme. Fixed movie overlay
   contrast gives readable hero copy against PLAYERZERO LAUNCH in both modes. */
.hero,.hero .hero-top,.hero .hero-copy,.hero .hero-footer{color:#f3efe9}
.hero h1 em,.hero .hero-copy h1 em{color:#f3efe9}
.hero .hero-bottom p,.hero .motion-toggle{color:#e0dcd4}
.hero .reel-button{background:#f0ece7;color:#171717}
.hero .reel-button:hover{background:var(--accent)}
.hero .hero-shade{background:linear-gradient(90deg,rgba(8,8,8,.6),rgba(8,8,8,.28) 40%,rgba(8,8,8,.04) 80%),linear-gradient(0deg,rgba(8,8,8,.67),transparent 33%,transparent 72%,rgba(8,8,8,.25))}
/* Video modal stays intentionally dark for consistent playback controls. */
.player-dialog{color:#f0ece7;background:#151515;border-color:#4b4b45}
.player-dialog .player-details p{color:#aaa7a2}
/* THEME CONTROL — one real keyboard-accessible range input above animated art. */
.theme-v12{flex:none;display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.theme-v12-caption{font:9px/1.2 'Courier New',monospace;letter-spacing:1.25px;color:var(--muted);text-align:right;white-space:nowrap}
.theme-v12-track{
  --v12-knob-size:36px; --v12-knob-pad:5px;
  --v12-knob-position:109px; --v12-sun-opacity:0; --v12-stars-opacity:1;
  --v12-cloud-opacity:0; --v12-rotation:125deg;
  position:relative;overflow:hidden;isolation:isolate;width:150px;height:46px;border-radius:100px;
  background:linear-gradient(115deg,#fedf9e 0%,#ef9855 29%,#5e5a91 63%,#1a2038 100%);
  border:1px solid color-mix(in srgb,var(--paper),transparent 82%);
  box-shadow:inset 0 1px 3px #00000027,0 4px 17px #00000017;
  flex:none;touch-action:pan-y;
}
.theme-v12-track::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:linear-gradient(100deg,#eab35f,#f7d6a8 32%,#6a688c 67%,#121a31);opacity:.2}
.theme-v12-track::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,rgba(255,255,255,.36),transparent 25%,transparent 72%,rgba(0,0,0,.18))}
.theme-v12-sun-dust,.theme-v12-star,.theme-v12-cloud{position:absolute;pointer-events:none;z-index:1}
.theme-v12-cloud{height:9px;width:21px;border-radius:40px;background:#fffae8aa;filter:blur(1px);opacity:var(--v12-cloud-opacity);transition:opacity .14s ease;left:17px;top:27px}
.theme-v12-cloud.cloud-b{left:57px;top:12px;width:17px;transform:scale(.7)}
.theme-v12-star{width:2px;height:2px;border-radius:50%;background:#eef7ff;box-shadow:0 0 5px #fff;opacity:var(--v12-stars-opacity);animation:v12-twinkle 2.8s ease-in-out infinite alternate}
.theme-v12-star.s1{left:52%;top:22%;animation-delay:.4s}
.theme-v12-star.s2{left:71%;top:66%;animation-delay:1.1s}
.theme-v12-star.s3{left:89%;top:26%;animation-delay:.8s}
.theme-v12-star.s4{left:60%;top:76%;animation-delay:1.7s}
.theme-v12-star.s5{left:80%;top:15%;animation-delay:2.1s}
.theme-v12-sun-dust{height:3px;width:3px;border-radius:50%;background:#fff0bb;opacity:var(--v12-sun-opacity);box-shadow:0 0 7px #ffeea9;animation:v12-dust 3.5s ease-in-out infinite alternate}
.theme-v12-sun-dust.d1{left:10%;top:25%}.theme-v12-sun-dust.d2{left:30%;top:64%;animation-delay:1.2s}.theme-v12-sun-dust.d3{left:43%;top:32%;animation-delay:2s}
.theme-v12-end{position:absolute;top:50%;z-index:2;transform:translateY(-50%);font-size:13px;font-weight:bold;pointer-events:none;opacity:.7}
.theme-v12-day{left:15px;color:#e87e3a}.theme-v12-night{right:15px;color:#e7dcff}
.theme-v12-knob{
 position:absolute;z-index:3;pointer-events:none;top:calc((46px - var(--v12-knob-size)) / 2 - 1px);
 left:var(--v12-knob-position);width:var(--v12-knob-size);height:var(--v12-knob-size);border-radius:50%;
 display:grid;place-items:center;overflow:visible;background:linear-gradient(145deg,#fffffff4,#e7e4efeb);
 box-shadow:0 3px 11px #0000004f,inset 0 1px 2px #ffffffcc;
 transform:translate3d(0,0,0);will-change:left;
}
.theme-v12-knob::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:50%;
 background:radial-gradient(circle,rgba(253,199,104,.33),rgba(181,152,244,.12) 70%,transparent 75%);filter:blur(3px)}
.theme-v12-knob svg{position:absolute;width:20px;height:20px;overflow:visible;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.theme-v12-knob .v12-sun{stroke:#dc8423;opacity:var(--v12-sun-opacity);transform:rotate(calc(var(--v12-rotation) * -1)) scale(calc(.55 + var(--v12-dayness) * .45));transition:opacity .09s linear}
.theme-v12-knob .v12-moon{stroke:#72639b;opacity:var(--v12-stars-opacity);transform:rotate(var(--v12-rotation)) scale(calc(.55 + var(--v12-nightness) * .45));transition:opacity .09s linear}
.theme-v12-knob .v12-moon path{fill:#a99bdf44}
.theme-v12-orbit{position:absolute;inset:-6px;border:1px solid #ffffff55;border-radius:50%;opacity:.45;animation:v12-orbit 4s linear infinite;pointer-events:none}
.theme-v12-orbit::after{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff}
.theme-v12-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:none}
.theme-v12-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--v12-knob-size);height:46px}
.theme-v12-range::-moz-range-thumb{appearance:none;width:var(--v12-knob-size);height:46px;border:0;background:transparent}
.theme-v12-track:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.theme-v12-track:hover .theme-v12-knob{box-shadow:0 3px 12px #00000061,0 0 0 2px #ffffff65,inset 0 1px 2px #fff}
@keyframes v12-orbit{to{transform:rotate(360deg)}}
@keyframes v12-twinkle{from{transform:scale(.7);opacity:calc(var(--v12-stars-opacity) * .5)}to{transform:scale(1.4);opacity:var(--v12-stars-opacity)}}
@keyframes v12-dust{from{transform:translate(0,0)}to{transform:translate(3px,-3px)}}
@media(max-width:1160px){.theme-v12-caption{display:none}.header{gap:clamp(12px,1.5vw,24px)}}
@media(max-width:700px){.theme-v12-track{width:114px;height:40px;--v12-knob-size:31px;--v12-knob-pad:4px}.theme-v12-knob{top:3.5px}.theme-v12-knob svg{width:18px;height:18px}.theme-v12-day{left:11px}.theme-v12-night{right:11px}.header{gap:10px}.header nav{gap:15px}}
@media(max-width:600px){.header nav>a:first-child{display:none}.header .wordmark{font-size:15px}.header nav{font-size:10px}.theme-v12{margin-left:0}}
@media(max-width:390px){.theme-v12-track{width:96px}.header{padding-left:17px;padding-right:17px}.header .wordmark{font-size:14px}.header nav{gap:9px}}
@media(prefers-reduced-motion:reduce){.theme-v12-track *,.theme-v12-track::before,.theme-v12-track::after{animation:none!important;transition:none!important}.theme-v12-knob{will-change:auto}.v12-motion-disabled{transition:none!important}}