/* ==========================================================================
   Six themes. Each one owns a palette, a type stack, a page layout and an
   interaction model. Switching theme switches all four at once.

     neon      dark terminal        single column transcript   command line
     sakura    washi paper          centred editorial column   scroll
     glass     aurora + frosted     sticky rail + bento        hover / pointer
     blueprint drafting navy        horizontal snap plates     paging
     riso      paper stock          zine sheets                infinite loop
     orbit     deep space           WebGL stage                drag in 3D
   ========================================================================== */

:root{
  --sans:'Geist',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Shippori Mincho',Georgia,serif;
  --maxw:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  --navh:66px;
}

[data-theme="neon"]{
  --bg:#05070a; --bg-2:#080c11; --panel:#0b1016; --panel-2:#0e151d;
  --line:#182430; --line-strong:#223344;
  --fg:#dfe9f2; --muted:#7d8ea1;
  --accent:#22e3d0; --on-accent:#03211d;
  --radius:4px; --radius-lg:6px;
  --display:var(--mono); --body:var(--mono);
  --display-weight:500; --display-tracking:-.01em; --display-transform:none;
  --shadow:0 1px 0 rgba(255,255,255,.03);
  --glow:0 0 0 1px rgba(34,227,208,.25), 0 0 28px -10px rgba(34,227,208,.5);
  --img-filter:contrast(1.05) saturate(1.05);
  color-scheme:dark;
}
[data-theme="sakura"]{
  --bg:#faf6f1; --bg-2:#f3ece4; --panel:#fffdfb; --panel-2:#f7f1ea;
  --line:#e3d8cc; --line-strong:#cdbcab;
  --fg:#241f1c; --muted:#6d6058;
  --accent:#b3363d; --on-accent:#fff8f6;
  --radius:2px; --radius-lg:2px;
  --display:var(--serif); --body:var(--sans);
  --display-weight:700; --display-tracking:.005em; --display-transform:none;
  --shadow:0 1px 2px rgba(70,50,40,.06), 0 12px 30px -22px rgba(70,50,40,.5);
  --glow:0 0 0 1px rgba(179,54,61,.28);
  --img-filter:saturate(.92) contrast(.98);
  color-scheme:light;
}
[data-theme="glass"]{
  --bg:#0a0e22; --bg-2:#0d1229; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.3);
  --fg:#f0f3ff; --muted:#a8b0d4;
  --accent:#5ad1ff; --on-accent:#04121c;
  --radius:18px; --radius-lg:26px;
  --display:var(--sans); --body:var(--sans);
  --display-weight:600; --display-tracking:-.03em; --display-transform:none;
  --shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 26px 70px -32px rgba(0,0,0,.85);
  --glow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 40px -14px rgba(90,209,255,.55);
  --blur:saturate(170%) blur(20px);
  --img-filter:saturate(1.05);
  color-scheme:dark;
}
[data-theme="blueprint"]{
  --bg:#0b2340; --bg-2:#0d294a; --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.075);
  --line:rgba(197,222,255,.32); --line-strong:rgba(197,222,255,.7);
  --fg:#e9f2ff; --muted:#a3bcd8;
  --accent:#f4c445; --on-accent:#2a1f00;
  --radius:0px; --radius-lg:0px;
  --display:var(--mono); --body:var(--mono);
  --display-weight:500; --display-tracking:.02em; --display-transform:uppercase;
  --shadow:0 0 0 1px rgba(197,222,255,.18);
  --glow:0 0 0 1px var(--accent);
  --img-filter:grayscale(.35) contrast(1.1) brightness(.95);
  color-scheme:dark;
}
[data-theme="riso"]{
  --bg:#f1eee3; --bg-2:#e8e4d6; --panel:#fffefa; --panel-2:#f6f3e9;
  --line:#16130f; --line-strong:#16130f;
  --fg:#16130f; --muted:#57504a;
  --accent:#d6003c; --on-accent:#fffdfa;   /* AA against paper and as a button fill */
  --ink-2:#2b4bff;                          /* second press pass, texture only */
  --radius:0px; --radius-lg:0px;
  --display:var(--sans); --body:var(--sans);
  --display-weight:900; --display-tracking:-.045em; --display-transform:uppercase;
  --shadow:5px 5px 0 var(--ink-2);
  --glow:4px 4px 0 var(--accent);
  --img-filter:contrast(1.12) saturate(1.25);
  color-scheme:light;
}
[data-theme="orbit"]{
  --bg:#07070b; --bg-2:#0c0c12; --panel:#101018; --panel-2:#16161f;
  --line:#22222e; --line-strong:#33333f;
  --fg:#f1ece6; --muted:#9a9188;
  --accent:#ff7a1a; --on-accent:#150800;
  --radius:14px; --radius-lg:20px;
  --display:var(--sans); --body:var(--sans);
  --display-weight:600; --display-tracking:-.035em; --display-transform:none;
  --shadow:0 24px 60px -34px rgba(0,0,0,.9);
  --glow:0 0 0 1px rgba(255,122,26,.4), 0 0 40px -14px rgba(255,122,26,.6);
  --img-filter:saturate(1.08) contrast(1.04);
  color-scheme:dark;
}

/* ===================== base ===================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:24px; position:relative; z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); margin:0; line-height:1.08}
h2{font-size:clamp(26px,4.4vw,42px); text-transform:var(--display-transform)}
h3{font-size:19px; line-height:1.25}
p{margin:0}
code{font-family:var(--mono); font-size:.92em}

/* ===================== backdrops ===================== */
.field{position:fixed; inset:0; z-index:0; pointer-events:none}
#petals{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0}
[data-theme="sakura"] #petals{opacity:1}

[data-theme="neon"] .field{
  background:
    radial-gradient(46rem 30rem at 12% -8%, rgba(34,227,208,.11), transparent 62%),
    radial-gradient(38rem 26rem at 92% 4%, rgba(34,227,208,.055), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
}
[data-theme="sakura"] .field{
  background:
    radial-gradient(50rem 34rem at 80% -6%, rgba(179,54,61,.07), transparent 65%),
    radial-gradient(40rem 28rem at 5% 20%, rgba(190,150,120,.09), transparent 65%);
}
[data-theme="glass"] .field{
  background:
    radial-gradient(32rem 32rem at 16% 10%, rgba(90,209,255,.62), transparent 63%),
    radial-gradient(36rem 32rem at 84% 22%, rgba(60,110,255,.55), transparent 63%),
    radial-gradient(30rem 28rem at 56% 74%, rgba(0,225,190,.42), transparent 63%);
  filter:blur(28px); animation:drift 26s ease-in-out infinite alternate;
}
[data-theme="blueprint"] .field{
  background:
    repeating-linear-gradient(0deg, rgba(197,222,255,.13) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(197,222,255,.13) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(197,222,255,.24) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, rgba(197,222,255,.24) 0 1px, transparent 1px 140px);
}
[data-theme="riso"] .field{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.35; mix-blend-mode:multiply;
}
[data-theme="orbit"] .field{
  background:
    radial-gradient(40rem 30rem at 78% -6%, rgba(255,122,26,.14), transparent 60%),
    radial-gradient(34rem 26rem at 8% 88%, rgba(255,122,26,.07), transparent 60%);
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-4%,3%,0) scale(1.12)}}

/* ===================== header ===================== */
header{
  position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
[data-theme="riso"] header{background:var(--bg); border-bottom-width:2px}
[data-theme="blueprint"] header{background:color-mix(in srgb, var(--bg) 92%, transparent)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:18px; height:var(--navh)}
.mark{font-family:var(--display); font-weight:var(--display-weight); font-size:16px; letter-spacing:.1em; text-decoration:none; color:var(--accent)}
[data-theme="riso"] .mark{color:var(--fg); background:var(--accent); padding:3px 9px; letter-spacing:-.02em}
.bar nav{display:flex; align-items:center; gap:22px; font-size:14px}
.bar nav a{color:var(--muted); text-decoration:none; transition:color .2s var(--ease)}
.bar nav a:hover{color:var(--accent)}

.picker{position:relative}
.picker>summary{
  list-style:none; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:9px;
  font:500 13px/1 var(--body); color:var(--fg); padding:9px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);
}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary:hover{border-color:var(--accent)}
.swatch{width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none}
[data-theme="riso"] .swatch,[data-theme="blueprint"] .swatch{border-radius:0}
.picker__menu{
  position:absolute; right:0; top:calc(100% + 10px); width:264px; padding:8px;
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--shadow); display:grid; gap:4px;
}
[data-theme="glass"] .picker>summary{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
[data-theme="glass"] .picker__menu{background:rgba(16,20,44,.94); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}
.picker__menu button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  font:400 13.5px/1.3 var(--body); color:var(--fg);
  padding:9px 10px; border:1px solid transparent; border-radius:var(--radius); background:none;
}
.picker__menu button:hover{border-color:var(--line-strong); background:var(--panel-2)}
.picker__menu button[aria-pressed="true"]{border-color:var(--accent)}
.picker__menu button small{display:block; color:var(--muted); font-size:11.5px}
.chip{width:22px; height:22px; border-radius:var(--radius); flex:none; border:1px solid rgba(128,128,128,.35)}
.chip--neon{background:linear-gradient(135deg,#05070a 46%,#22e3d0 46%)}
.chip--sakura{background:linear-gradient(135deg,#faf6f1 46%,#b3363d 46%)}
.chip--glass{background:linear-gradient(135deg,#0a0e22 46%,#5ad1ff 46%)}
.chip--blueprint{background:linear-gradient(135deg,#0b2340 46%,#f4c445 46%)}
.chip--riso{background:linear-gradient(135deg,#f1eee3 46%,#d6003c 46%)}
.chip--orbit{background:linear-gradient(135deg,#07070b 46%,#ff7a1a 46%)}

/* ===================== buttons ===================== */
.btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:12px 20px; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:var(--panel); color:var(--fg); text-decoration:none;
  font:500 14px/1 var(--body); cursor:pointer;
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--go{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700}
[data-theme="riso"] .btn{border-width:2px; box-shadow:3px 3px 0 var(--fg)}
[data-theme="riso"] .btn:hover{box-shadow:5px 5px 0 var(--ink-2)}
[data-theme="glass"] .btn{backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur)}

/* ===================== reveal ===================== */
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rise.in{opacity:1; transform:none}
  .rise.d1{transition-delay:.07s} .rise.d2{transition-delay:.14s} .rise.d3{transition-delay:.21s}
}

/* ===================== accessibility fallbacks ===================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media (prefers-reduced-transparency: reduce){
  [data-theme="glass"]{--panel:#141833; --panel-2:#1b2044}
  [data-theme="glass"] .field{display:none}
  .picker__menu,.tile,.career,.contact,.btn,.hero{backdrop-filter:none !important; -webkit-backdrop-filter:none !important}
}