/* ACM Projects: colour schemes (loaded after styles.css by both pages).
   Layout, typography and animation live in styles.css + main.js and are shared. This file only maps colours.
   Two mirrored schemes, chosen by <html data-scheme="...">:
     cream-hero  (index.html): cream hero, green text  -> zoom into a green screen -> green page, cream text
     green-hero  (dark.html) : green hero, cream text  -> zoom into a cream screen -> cream page, green text
   "hero" tokens colour the opening hero (and the header while it sits over the hero);
   "page" tokens colour everything after the laptop zoom. Photos, app artwork and laptop hardware are not themed. */

/* ================= 1. scheme values ================= */
html[data-scheme="cream-hero"]{
  /* hero */
  --hero-paper:#F7F4EB; --hero-ink:#123C2E;
  --hero-ink-70:rgba(18,60,46,.78); --hero-ink-50:rgba(18,60,46,.56); --hero-ink-14:rgba(18,60,46,.16);
  --hero-accent:#3E6B53; --hero-accent-2:#2F5A45;
  --hero-bg:radial-gradient(55% 45% at 50% 46%,rgba(255,214,150,.16),transparent 70%),
            radial-gradient(80% 70% at 50% 40%,#FCFAF5 0%,#F7F4EB 50%,#EFEADD 88%);
  --hero-fade:linear-gradient(transparent,rgba(18,60,46,.05));
  --hero-shadow:rgba(18,60,46,.32);
  --hero-bar:rgba(247,244,235,.88); --hero-bar-line:rgba(18,60,46,.12);
  --hero-btn-bg:rgba(247,244,235,.55);
  /* laptop wallpaper (also the colour the page continues in) */
  --wall:#123C2E; --wall-glow-1:rgba(52,112,84,.42); --wall-glow-2:rgba(52,112,84,.18); --wall-glow-0:rgba(52,112,84,0);
  /* page after the zoom */
  --page-paper:#123C2E; --page-ink:#F7F4EB;
  --page-ink-70:rgba(247,244,235,.72); --page-ink-50:rgba(247,244,235,.5); --page-ink-14:rgba(247,244,235,.14);
  --page-accent:#8DB89A; --page-accent-2:#CFE0D2;
  --page-bar:rgba(18,60,46,.9); --page-bar-line:rgba(247,244,235,.12);
  --btn-line-bg:rgba(18,60,46,.25); --btn-line-border:rgba(247,244,235,.7);
  --panel:rgba(7,28,21,.38); --panel-hover:rgba(7,28,21,.5); --panel-strong:rgba(7,28,21,.42); --panel-soft:rgba(7,28,21,.25);
  --panel-line:rgba(247,244,235,.13); --panel-line-hover:rgba(207,224,210,.32);
  --soft-fill:rgba(247,244,235,.04); --soft-line:rgba(207,224,210,.3); --rule:rgba(247,244,235,.3);
  --chain-line:rgba(207,224,210,.4);
  --media-line:rgba(247,244,235,.1);
  --ngp-tile:radial-gradient(90% 90% at 30% 20%,#1d4a39,#0b241b);
  --becoming-tile:radial-gradient(90% 90% at 70% 20%,#2a5a46,#0e2c21 70%); --becoming-ink:#F7F4EB; --becoming-plus:#8DB89A;
  --form-bg:rgba(4,17,12,.55); --field-bg:rgba(247,244,235,.04); --field-bg-focus:rgba(247,244,235,.07); --placeholder:rgba(247,244,235,.4);
  --error:#F2B8A8; --warn:#F3D9A4; --ok:#CFE0D2;
  --rail-bg:rgba(7,28,21,.55); --rail-line:rgba(247,244,235,.16); --rail-on-bg:rgba(18,60,46,.85); --rail-on-ink:#F7F4EB; --rail-on-line:#8DB89A; --rail-tip:rgba(7,28,21,.8);
  --footer-bg:linear-gradient(rgba(7,28,21,.35),rgba(7,28,21,.7));
}
html[data-scheme="green-hero"]{
  /* hero: the mirror image */
  --hero-paper:#123C2E; --hero-ink:#F7F4EB;
  --hero-ink-70:rgba(247,244,235,.78); --hero-ink-50:rgba(247,244,235,.56); --hero-ink-14:rgba(247,244,235,.16);
  --hero-accent:#8DB89A; --hero-accent-2:#CFE0D2;
  --hero-bg:radial-gradient(55% 45% at 50% 46%,rgba(255,214,150,.07),transparent 70%),
            radial-gradient(80% 70% at 50% 40%,#184735 0%,#123C2E 50%,#0D3124 88%);
  --hero-fade:linear-gradient(transparent,rgba(7,28,21,.22));
  --hero-shadow:rgba(0,0,0,.5);
  --hero-bar:rgba(18,60,46,.88); --hero-bar-line:rgba(247,244,235,.12);
  --hero-btn-bg:rgba(18,60,46,.45);
  --wall:#F7F4EB; --wall-glow-1:rgba(18,60,46,.085); --wall-glow-2:rgba(18,60,46,.035); --wall-glow-0:rgba(18,60,46,0);
  --page-paper:#F7F4EB; --page-ink:#123C2E;
  --page-ink-70:rgba(18,60,46,.78); --page-ink-50:rgba(18,60,46,.56); --page-ink-14:rgba(18,60,46,.16);
  --page-accent:#3E6B53; --page-accent-2:#2F5A45;
  --page-bar:rgba(247,244,235,.9); --page-bar-line:rgba(18,60,46,.12);
  --btn-line-bg:rgba(247,244,235,.25); --btn-line-border:rgba(18,60,46,.7);
  --panel:rgba(236,229,212,.55); --panel-hover:rgba(230,222,203,.75); --panel-strong:rgba(236,229,212,.65); --panel-soft:rgba(236,229,212,.4);
  --panel-line:rgba(18,60,46,.13); --panel-line-hover:rgba(18,60,46,.32);
  --soft-fill:rgba(18,60,46,.04); --soft-line:rgba(18,60,46,.28); --rule:rgba(18,60,46,.35);
  --chain-line:rgba(18,60,46,.3);
  --media-line:rgba(18,60,46,.12);
  --ngp-tile:radial-gradient(90% 90% at 30% 20%,#E7EFE8,#D5E2D8);
  --becoming-tile:radial-gradient(90% 90% at 70% 20%,#FCFAF5,#ECE6D7 70%); --becoming-ink:#123C2E; --becoming-plus:#3E6B53;
  --form-bg:rgba(255,255,255,.45); --field-bg:rgba(255,255,255,.55); --field-bg-focus:#fff; --placeholder:rgba(18,60,46,.4);
  --error:#9A3B2C; --warn:#8A5A12; --ok:#2F5A45;
  --rail-bg:rgba(247,244,235,.75); --rail-line:rgba(18,60,46,.22); --rail-on-bg:#123C2E; --rail-on-ink:#F7F4EB; --rail-on-line:#123C2E; --rail-tip:rgba(247,244,235,.95);
  --footer-bg:linear-gradient(rgba(236,229,212,.45),rgba(236,229,212,.85));
}

/* ================= 2. token wiring ================= */
/* styles.css colours everything with --cream (ink), --deep (paper) and their alpha steps; point them at the scheme.
   After the zoom: page tokens.  Inside the hero, and the header/menu while over the hero: hero tokens. */
:root{
  --cream:var(--page-ink); --deep:var(--page-paper);
  --cream-70:var(--page-ink-70); --cream-50:var(--page-ink-50); --cream-14:var(--page-ink-14);
  --emerald:var(--page-accent); --mint:var(--page-accent-2);
}
.hero,
html:not(.screen-full):not(.past-hero) .hdr,
html:not(.screen-full):not(.past-hero) .mnav{
  --cream:var(--hero-ink); --deep:var(--hero-paper);
  --cream-70:var(--hero-ink-70); --cream-50:var(--hero-ink-50); --cream-14:var(--hero-ink-14);
  --emerald:var(--hero-accent); --mint:var(--hero-accent-2);
}
body{background:var(--page-paper)}

/* ================= 3. header ================= */
.hdr{transition:background-color .45s var(--ease),border-color .45s,height .4s}
.hdr.scrolled{background:var(--page-bar);border-bottom-color:var(--page-bar-line)}
html:not(.screen-full):not(.past-hero) .hdr.scrolled{background:var(--hero-bar);border-bottom-color:var(--hero-bar-line)}
.nav a,.nav span,.burger{transition:color .45s,border-color .45s,background-color .45s}
/* horizontal logo top-left: both colourways are in the markup, the scheme/state picks one */
.brandmark{position:relative;display:block;line-height:0}
.brandmark img{height:30px;width:auto;transition:height .4s var(--ease),opacity .45s var(--ease)}
.brandmark .bm-cream{position:absolute;left:0;top:0}
.hdr.scrolled .brandmark img{height:26px}
/* hero state: logo in hero ink */
html[data-scheme="cream-hero"] .brandmark .bm-cream,
html[data-scheme="green-hero"] .brandmark .bm-green{opacity:0}
/* page state: logo in page ink */
html[data-scheme="cream-hero"]:is(.screen-full,.past-hero) .brandmark .bm-green{opacity:0}
html[data-scheme="cream-hero"]:is(.screen-full,.past-hero) .brandmark .bm-cream{opacity:1}
html[data-scheme="green-hero"]:is(.screen-full,.past-hero) .brandmark .bm-cream{opacity:0}
html[data-scheme="green-hero"]:is(.screen-full,.past-hero) .brandmark .bm-green{opacity:1}
.hdr-in{grid-template-columns:1fr auto}
.hdr-left{gap:40px}
@media (max-width:900px){
  .hdr-in{grid-template-columns:1fr 46px}
  .hdr-left{grid-column:1;display:flex}
  .brandmark img,.hdr.scrolled .brandmark img{height:24px}
  .hdr-right{grid-column:2}
}
@media (min-width:901px) and (max-width:1100px){.hdr-left .nav{display:flex}}
@media (min-width:901px) and (max-width:1020px){.hdr-left .nav{display:none}}

/* buttons: outline in the current ink, fills with ink on hover; solid = ink fill */
.btn-line{background:var(--btn-line-bg);border-color:var(--btn-line-border);color:var(--page-ink)}
.btn-line:hover{background:var(--page-ink);color:var(--page-paper);border-color:var(--page-ink)}
html:not(.screen-full):not(.past-hero) .hdr .btn-line{border-color:var(--hero-ink);color:var(--hero-ink);background:var(--hero-btn-bg)}
html:not(.screen-full):not(.past-hero) .hdr .btn-line:hover{background:var(--hero-ink);color:var(--hero-paper)}
.btn-solid{background:var(--page-ink);border-color:var(--page-ink);color:var(--page-paper)}
.btn-solid:hover{background:transparent;color:var(--page-ink)}
.mnav{background:var(--page-paper)}
html:not(.screen-full):not(.past-hero) .mnav{background:var(--hero-paper)}
html:not(.screen-full):not(.past-hero) .mnav .btn-solid{background:var(--hero-ink);border-color:var(--hero-ink);color:var(--hero-paper)}

/* ================= 4. hero ================= */
.hero-bg{background:var(--hero-bg)}
.hero-bg::after{background:var(--hero-fade)}
.shadow{background:radial-gradient(50% 50% at 50% 50%,var(--hero-shadow),transparent)}

/* laptop wallpaper: wallpaper colour + drifting light + the ACM logo as a separate transparent layer.
   Same artwork on the laptop, the zoom layer and the fixed backdrop, so zoom and hand-off stay pixel-matched. */
.scene img,.js-bg .backdrop img{width:3200px;height:2000px}
.screen{background:var(--wall)}
.scene-shade,.backdrop-shade{background:none}
.backdrop{background:var(--wall)}
#sceneImg,.backdrop img{opacity:var(--wall-logo,1)}      /* logo eases out as the intro rises (main.js) */
.backdrop-dim{display:none}
.glow{position:absolute;inset:0;overflow:hidden;background:var(--wall);pointer-events:none}
.glow i{position:absolute;left:0;top:0;width:72%;height:115%;border-radius:50%;
  background:radial-gradient(closest-side,var(--wall-glow-1),var(--wall-glow-2) 45%,var(--wall-glow-0) 100%);
  transform:translate(var(--gx,19.4%),var(--gy,-6.5%));will-change:transform}
.screen-img{position:relative}
.scene .scene-glow{inset:auto;left:0;top:0;width:1000px;height:625px;transform-origin:0 0}
.backdrop .bg-glow{inset:auto;left:0;top:0;width:1000px;height:625px;transform-origin:0 0}
html:not(.js-bg) .backdrop .bg-glow{display:none}
.hero.is-through .scene-glow{visibility:hidden}
/* portrait screens zoom ~5x to fill the height, which would crop the logo: there the wallpaper eases into its
   plain colour as the camera passes through the screen (landscape/desktop keep the logo) */
@media (max-aspect-ratio:1/1){
  .scene::after{content:"";position:absolute;inset:0;background:var(--wall);pointer-events:none;opacity:clamp(0,calc((var(--e,0) - .68) / .2),1)}
  .backdrop img,.backdrop .bg-glow{visibility:hidden}
}

/* the on-screen desktop UI follows the wallpaper: light UI on the green wallpaper, dark UI on the cream one */
html[data-scheme="green-hero"] .desk{color:#123C2E}
html[data-scheme="green-hero"] .desk-bar{background:rgba(247,244,235,.55);box-shadow:0 .06em 0 rgba(18,60,46,.08)}
html[data-scheme="green-hero"] .desk-bar-l,html[data-scheme="green-hero"] .desk-bar-r{color:rgba(18,60,46,.82)}
html[data-scheme="green-hero"] .desk-app{color:#123C2E}
html[data-scheme="green-hero"] .fold-link{color:#123C2E}
html[data-scheme="green-hero"] .desk-icons span{text-shadow:0 0 .35em rgba(247,244,235,.9)}
html[data-scheme="green-hero"] .fold{filter:drop-shadow(0 .3em .45em rgba(18,60,46,.22))}
html[data-scheme="green-hero"] .fold-link:hover{background:rgba(18,60,46,.07);box-shadow:inset 0 0 0 .08em rgba(18,60,46,.14)}
html[data-scheme="green-hero"] .fold-link:hover span{background:rgba(247,244,235,.6)}
html[data-scheme="green-hero"] .fold-link:focus-visible{background:rgba(18,60,46,.08);box-shadow:0 0 0 .22em #123C2E,0 0 0 .4em rgba(247,244,235,.7)}
html[data-scheme="green-hero"] .fold-link:focus-visible span{background:#123C2E;color:#F7F4EB;text-shadow:none}
html[data-scheme="green-hero"] .dock{background:rgba(18,60,46,.06);border-color:rgba(18,60,46,.14);box-shadow:0 .8em 2em -.8em rgba(18,60,46,.35)}
html[data-scheme="green-hero"] .d-sep{background:rgba(18,60,46,.22)}
html[data-scheme="green-hero"] .d-acm::after{background:rgba(18,60,46,.6)}

/* ================= 5. page after the zoom ================= */
.glass{background:var(--panel);border-color:var(--panel-line)}
.svc:hover,.work:hover{background-color:var(--panel-hover);border-color:var(--panel-line-hover)}
.inq-panel{background:var(--panel-strong)}
.ticker{background:var(--panel-soft)}
.ftr{background:var(--footer-bg)}
.chain::before{background:linear-gradient(90deg,transparent,var(--chain-line) 12%,var(--chain-line) 88%,transparent)}
.chain .num{background:var(--page-paper);border-color:var(--soft-line)}
.ico{background:var(--soft-fill)}
.chip{border-color:var(--soft-line)}
.step-n{border-color:var(--soft-line);background:var(--soft-fill)}
.faq{border-top-color:var(--rule)}
.work-media{border-bottom-color:var(--media-line)}
.work-media.ngp{background:var(--ngp-tile)}
.work-media.becoming{background:#0F1522}   /* app artwork: navy to match the Becoming+ icon in both schemes */
.app-word{color:var(--becoming-ink)}
.app-word span{color:var(--becoming-plus)}
.about-mark{border-color:var(--panel-line)}
.form{background:var(--form-bg)}
.fld input,.fld textarea{background:var(--field-bg)}
.fld input:focus,.fld textarea:focus{background:var(--field-bg-focus)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--placeholder)}
.fld em{color:var(--error)}
.fld.bad input,.fld.bad textarea{border-color:var(--error)}
.form-status.warn{color:var(--warn)}
.form-status.ok{color:var(--ok)}
.chips input:checked+span{background:var(--page-ink);border-color:var(--page-ink);color:var(--page-paper)}
.rail a{border-color:var(--rail-line);background:var(--rail-bg)}
.rail a.on{background:var(--rail-on-bg);color:var(--rail-on-ink);border-color:var(--rail-on-line)}
.rail a span{border-color:var(--rail-line);background:var(--rail-tip);color:var(--page-ink)}
html[data-scheme="green-hero"] .intro .lede{text-shadow:none}