/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOLARPUNK — desk page (inyourbrains.com root)
   Load in <head>, after the page's own <style> block:
     <link rel="stylesheet" href="solarpunk.css">
   Activated by  <html data-theme="grown">
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root { --grow-ease: 2400ms cubic-bezier(.4,0,.2,1); }

body, .top-nav, .top-nav a, .desk-row, .monitor-body, .screen-bezel,
.crt-screen, .monitor-neck, .monitor-base, .tower, .tower-panel,
.px-printer-mini, .pmini-body, .pmini-bottom, .keyboard, .kb-key,
.mouse, .desk-groove, .sticky, .mug, .mob-monitor, .mob-bezel,
.mob-screen, .mob-neck, .mob-base {
  transition: background var(--grow-ease), background-color var(--grow-ease),
              background-image var(--grow-ease), border-color var(--grow-ease),
              box-shadow var(--grow-ease), color var(--grow-ease),
              border-radius var(--grow-ease);
}

/* ── palette override ───────────────────────── */
html[data-theme="grown"] {
  --bg:         #0d1a12;
  --beige:      #8a9668;
  --beige-l:    #a4b07e;
  --beige-d:    #55603c;
  --beige-s:    #414b2e;
  --chassis:    #16210f;
  --screen-bg:  #17301f;
  --screen-txt: #b8e8a0;
  --pink:       #ffd98a;
  --nav-bg:     #0c150e;
  --nav-border: #24361f;
}

/* desk surface: dead lumber -> living wood */
html[data-theme="grown"] .desk-row {
  background-image:
    repeating-linear-gradient(92deg,
      rgba(0,0,0,.05) 0px, rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 8px, rgba(0,0,0,.04) 10px),
    linear-gradient(180deg, #5c6b3a 0%, #3a4a22 100%);
}
html[data-theme="grown"] .desk-groove { background: #2e3a1c; }

/* warm bloom behind the whole scene */
.scene-outer { position: relative; }
.scene-outer::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(160,225,120,.14) 0%, transparent 62%);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity var(--grow-ease);
}
html[data-theme="grown"] .scene-outer::before { opacity: 1; }

/* LEDs die back */
html[data-theme="grown"] .tower-led,
html[data-theme="grown"] .pmini-led {
  background: #3d4a2c !important;
  box-shadow: none !important;
  transition: background 1200ms ease;
}

/* ── THE MOUSE IS THE TRIGGER ────────────────
   No new object on the desk. The mouse becomes clickable,
   with the same tooltip affordance the printer already has. */
#mouseWrap {
  cursor: pointer;
  transition: transform 160ms ease;
}
#mouseWrap:hover { transform: translateY(-2px); }
#mouseWrap:hover .mouse { box-shadow: 3px 3px 0 #6a5335, 5px 6px 10px rgba(0,0,0,.45); }
#mouseWrap .mouse,
#mouseWrap .mouse-btn-l { transition: box-shadow 160ms ease, background 160ms ease; }

/* left button depresses on click */
#mouseWrap.clicking .mouse-btn-l {
  background: #9a8a6a;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
}
#mouseWrap.clicking { transform: translateY(1px); }

/* tooltip, mirroring .printer-tooltip */
.mouse-tooltip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translate(-50%, 4px);
  margin-bottom: 8px; white-space: nowrap;
  font-family: var(--font-pixel); font-size: 5px; letter-spacing: .08em;
  color: #f0e0d0; background: rgba(20,20,26,.92);
  border: 1px solid #3a3a46; padding: 5px 8px;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity 180ms ease, transform 180ms ease;
}
#mouseWrap:hover .mouse-tooltip { opacity: 1; transform: translate(-50%, 0); }
html[data-theme="grown"] .mouse-tooltip {
  color: #cfe4c0; background: rgba(12,24,14,.92); border-color: #2f4426;
}

/* faint idle tell so it reads as interactive without a sign on it */
.mouse-btn-l { position: relative; }
.mouse-btn-l::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,.5); opacity: 0;
  animation: mouse-tell 3.4s ease-in-out infinite;
}
html[data-theme="grown"] .mouse-btn-l::after { animation: none; opacity: 0; }
@keyframes mouse-tell { 0%,88%,100% { opacity: 0; } 94% { opacity: .22; } }


/* catalog goes sun-bleached and mossy with everything else */
html[data-theme="grown"] .cat-cover{ background:#b9bf94; box-shadow:inset 2px 2px 0 #d0d6a8, inset -2px -2px 0 #8d9470; }
html[data-theme="grown"] .cat-edge{ background:#aab088; }
html[data-theme="grown"] .cat-edge-2{ background:#a0a67f; }
html[data-theme="grown"] .cat-edge-3{ background:#959b75; }
html[data-theme="grown"] .cat-mast{ color:#5d7038; }
html[data-theme="grown"] .cat-burst{ background:#5d7038; color:#eef2e2; }
html[data-theme="grown"] .cat-curl{ background:linear-gradient(135deg, transparent 50%, #8d9470 50%); }
html[data-theme="grown"] .catalog-tooltip{ color:#cfe4c0; background:rgba(12,24,14,.92); border-color:#2f4426; }

/* ── displacement ───────────────────────────── */
.mug-wrap, #monitorGroup, .sticky, .steam {
  transition: transform 1500ms cubic-bezier(.34,1.3,.5,1), opacity 900ms ease;
}
html[data-theme="grown"] .mug-wrap {
  transform: rotate(74deg) translate(14px, 12px);
}
html[data-theme="grown"] .steam { opacity: 0; transition-duration: 500ms; }
html[data-theme="grown"] #monitorGroup {
  transform: translateY(-7px) rotate(-2.4deg);
}
html[data-theme="grown"] .sticky {
  transform: translate(24px, 190px) rotate(96deg);
  opacity: 0;
  transition: transform 2600ms cubic-bezier(.4,.1,.6,1), opacity 2600ms ease;
}

/* ── growth overlay ─────────────────────────────
   Two layers live INSIDE .desk-3d so they inherit its
   perspective(1000px) rotateX(8deg). Drawn as a sibling of the
   desk they read as stickers; drawn inside it they sit in the
   same space as everything else on the desk.

   Back layer paints under the objects, front layer over them, and
   branches flip between the two as they grow — that crossing is
   what makes a vine look like it's wrapping something. */
.desk-wrap { position: relative; }
.desk-3d   { position: relative; }

.gro-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
  shape-rendering: crispEdges;
}
.gro-back  { z-index: 1; }
.gro-front { z-index: 3; }
.gro-layer path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }

/* lift the desk objects between the two layers */
html[data-theme="grown"] .tower-group,
html[data-theme="grown"] .monitor-group,
html[data-theme="grown"] .clutter-mid,
html[data-theme="grown"] .printer-group,
html[data-theme="grown"] #keyboard,
html[data-theme="grown"] #mouseWrap,
html[data-theme="grown"] .catalog-group { position: relative; z-index: 2; }

.gro-leaf   { opacity: 0; }
.gro-flower { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

.gro-fly {
  position: absolute; width: 3px; height: 3px; border-radius: 0;
  background: #dcff8f; box-shadow: 0 0 8px 3px rgba(190,255,120,.5);
  pointer-events: none; z-index: 5; opacity: 0;
}
@keyframes gro-drift {
  0%   { opacity: 0;  transform: translate(0,0); }
  15%  { opacity: .9; }
  50%  { opacity: .3; transform: translate(var(--dx), var(--dy)); }
  85%  { opacity: .85; }
  100% { opacity: 0;  transform: translate(calc(var(--dx)*1.6), calc(var(--dy)*1.8)); }
}

/* ── MOBILE: the CRT becomes a stump ────────── */
html[data-theme="grown"] .mob-monitor {
  background:
    repeating-linear-gradient(90deg,
      #4e3c26 0px, #4e3c26 3px,
      #614c30 3px, #614c30 6px,
      #3d2f1e 6px, #3d2f1e 9px,
      #56422a 9px, #56422a 12px);
  border-color: #241a10;
  border-radius: 10px 14px 8px 12px;
  box-shadow:
    inset 4px 4px 0 rgba(255,255,255,.05),
    inset -4px -4px 0 rgba(0,0,0,.3),
    4px 4px 0 #2e2416, 7px 7px 0 #241c11,
    10px 10px 18px rgba(0,0,0,.6);
}
html[data-theme="grown"] .mob-bezel {
  background: #2a2113;
  border-color: #241a10;
  border-radius: 50% / 42%;
}
/* screen face -> heartwood rings */
html[data-theme="grown"] .mob-screen {
  background:
    repeating-radial-gradient(circle at 48% 52%,
      #7a6038 0px, #7a6038 5px,
      #8d7043 5px, #8d7043 9px,
      #6d5530 9px, #6d5530 13px);
  border-radius: 50% / 42%;
  color: #f0e4c8;
  box-shadow: inset 0 0 26px rgba(0,0,0,.5);
}
html[data-theme="grown"] .mob-screen-content { color: #2e2312; }
html[data-theme="grown"] .mob-neck {
  background: linear-gradient(180deg, #4a3a22 0%, #33270f 100%);
  border-color: #241a10; width: 78px;
}
html[data-theme="grown"] .mob-base {
  background: #3f3120; border-color: #241a10; width: 168px;
  border-radius: 40% 40% 8px 8px;
}
html[data-theme="grown"] .mob-controls-bar { background: #3d2f1e; border-color: #241a10; }
html[data-theme="grown"] .mob-power-led,
html[data-theme="grown"] .mob-btn-round { background: #5a4a2e !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
  .gro-layer path { stroke-dashoffset: 0 !important; transition: none !important; }
  .gro-leaf, .gro-flower { opacity: 1 !important; transition: none !important; }
  .gro-fly  { animation: none !important; opacity: .5; }
  .mug-wrap, #monitorGroup, .sticky { transition-duration: 1ms !important; }
}
