/* ============================================================
   Second Bell Studio — polish layer
   Josh-Comeau-grade finish on top of the workbench: a cursor
   spotlight, spring "boop" micro-interactions, hand-drawn
   red-pen annotations, and a lamp-off night mode.
   Loaded last so its night overrides win the cascade.
   ============================================================ */

/* ------------------------------------------------------------
   Hero lamp spotlight — a warm pool that tracks the cursor
   across the desk. Sits above the scrim/vignette (z:2) but
   below the hero content (.hero-inner is z:3).
   ------------------------------------------------------------ */
.hero-spotlight {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--lx, 60%) var(--ly, 40%),
    rgba(255, 214, 140, .20), rgba(255, 196, 110, .06) 38%, transparent 60%);
  mix-blend-mode: soft-light;
}
.hero:hover .hero-spotlight { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero-spotlight { opacity: .7; --lx: 62%; --ly: 42%; }
}

/* ------------------------------------------------------------
   "Boop" — a one-shot spring wiggle on pointer-enter that
   settles back to rest even while still hovered.
   --boop-base lets elements that already carry a transform
   (e.g. .bell-cap is rotate(-4deg)) compose instead of snapping.
   ------------------------------------------------------------ */
@keyframes boop {
  0%   { transform: var(--boop-base, none) scale(1)    rotate(0); }
  30%  { transform: var(--boop-base, none) scale(1.14) rotate(-3deg); }
  60%  { transform: var(--boop-base, none) scale(.97)  rotate(1.5deg); }
  100% { transform: var(--boop-base, none) scale(1)    rotate(0); }
}
/* (no display override: every boop target is a flex item, inline-flex,
   or block, so transforms already apply — forcing inline-block would
   break their layout.) */
.boop.booping { animation: boop .42s var(--spring, ease) both; }
/* preserve resting rotations on a couple of hand-set props */
.bell-cap.boop { --boop-base: rotate(-4deg); }
@media (prefers-reduced-motion: reduce) {
  .boop.booping { animation: none; }
}

/* ------------------------------------------------------------
   CTA lift — the red button rises a hair on hover and presses
   in on click. Driven by --lift so it owns `transform` cleanly.
   ------------------------------------------------------------ */
.btn:not(.ghost) {
  --lift: 0px;
  transform: translateY(var(--lift));
}
.btn:not(.ghost):hover { --lift: -2px; }
.btn:not(.ghost):active { --lift: 1px; }

/* ------------------------------------------------------------
   Red-pen "graded" annotations — ink that draws itself in on
   scroll. The SVG overlay is absolutely positioned and
   pointer-events:none, so it never shifts the text.
   pathLength="1" normalizes the dash math (1 -> 0).
   ------------------------------------------------------------ */
.annot { position: relative; display: inline-block; }
.annot .ink {
  position: absolute; overflow: visible; pointer-events: none; z-index: 1;
  color: var(--red);
}
.annot .ink path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.6, .05, .2, 1);
}
.annot.drawn .ink path { stroke-dashoffset: 0; }
/* on the dark hero, use the brighter pen red (matches the Padlet strike) */
.hero .annot .ink { color: var(--red-bright); }

/* circle: hugs the word, a touch of slop on every side */
.annot-circle .ink { left: -10%; top: -22%; width: 120%; height: 150%; }
/* underline: a squiggle slung under the baseline */
.annot-underline .ink { left: -4%; bottom: -34%; width: 108%; height: 44%; }
/* arrow: a free-floating hand-drawn pointer (positioned per use) */
.annot-arrow .ink path { transition-duration: .6s; }

@media (prefers-reduced-motion: reduce) {
  .annot .ink path { transition: none; }
}

/* ------------------------------------------------------------
   Lamp-off evening mode
   ------------------------------------------------------------ */

/* the pull-chain toggle, hanging from the top edge */
.lamp-chain {
  position: fixed; top: 0; right: clamp(18px, 4vw, 46px); z-index: 9999;
  border: 0; background: none; padding: 0 12px 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* a beaded brass ball-chain: a column of little spheres rather than a
   flat line. Each 6x7 cell paints one bead (highlight, body, shaded rim)
   with a hair of gap between beads, so it reads as links. */
.lamp-chain .lamp-cord {
  display: block; width: 6px; height: 45px; margin: 0 auto;
  background-image: radial-gradient(circle at 50% 38%,
    var(--brass-bright) 0 14%, var(--brass) 42%, var(--brass-deep) 66%,
    rgba(0, 0, 0, .35) 74%, transparent 78%);
  background-size: 6px 7px; background-repeat: repeat-y; background-position: 50% 0;
  transform-origin: 50% 0;
}
.lamp-chain .lamp-pull {
  display: block; width: 15px; height: 21px; margin: -1px auto 0; border-radius: 8px;
  background: radial-gradient(circle at 38% 30%, var(--brass-bright), var(--brass-deep));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4), inset 0 1px 2px rgba(255, 245, 210, .5);
}
/* the cord stretches and the knob drops on the same beat, so the chain
   stays joined through the whole tug instead of the knob detaching. */
.lamp-chain.tug .lamp-cord { animation: cordTug .5s var(--spring, ease); }
.lamp-chain.tug .lamp-pull { animation: tug .5s var(--spring, ease); }
@keyframes tug {
  30%  { transform: translateY(8px); }
  60%  { transform: translateY(-2px); }
  100% { transform: none; }
}
@keyframes cordTug {
  30%  { transform: scaleY(1.18); }
  60%  { transform: scaleY(.955); }
  100% { transform: none; }
}
.lamp-chain:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lamp-chain.tug .lamp-cord,
  .lamp-chain.tug .lamp-pull { animation: none; }
}

/* the dimming transition — scoped to a brief window on toggle so
   the initial (no-flash) load stays instant. */
html.theme-anim,
html.theme-anim body,
html.theme-anim *::before,
html.theme-anim *::after,
html.theme-anim * {
  transition: background-color .5s ease, color .5s ease,
              border-color .5s ease, box-shadow .5s ease,
              background-image .5s ease !important;
}

/* ---- the night palette: override the :root tokens ----
   Light "paper" sections resolve their bg from --paper/--cream and
   text from --ink, so swapping the tokens flips most of the page. */
html[data-theme="night"] {
  --paper:    #241a14;
  --paper-2:  #1f1610;
  --paper-3:  #2b2017;
  --cream:    #2e231a;

  --ink:      #efe3cf;
  --ink-soft: #c9b89c;
  --ink-faint:#8f7e64;

  --wood-900: #160b07;
  --wood-850: #1a0d08;
  --wood-800: #22120c;
  --wood-700: #341a10;
  --wood-600: #492413;

  --red:        #c6493a;
  --red-bright: #dc5848;
  --red-deep:   #7e2a1f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-md: 0 4px 10px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.55);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.55), 0 30px 60px rgba(0,0,0,.7);
}

/* ---- night hotspots: hardcoded colors that won't follow the swap ---- */

/* 1. grain overlay: multiply does nothing on dark — switch to screen specks */
html[data-theme="night"] .grain::before { mix-blend-mode: screen; opacity: .05; }

/* 2-3. hero scrim + vignette: deepen so the desk reads as lamp-only */
html[data-theme="night"] .hero-scrim {
  background:
    linear-gradient(to right, rgba(8,4,3,.92) 0%, rgba(8,4,3,.62) 38%, rgba(8,4,3,.28) 62%, rgba(8,4,3,.64) 100%),
    linear-gradient(to top, rgba(8,4,3,.96) 0%, rgba(8,4,3,.45) 34%, rgba(8,4,3,.55) 100%);
}
html[data-theme="night"] .hero-vignette { box-shadow: inset 0 0 240px 90px rgba(4,2,1,.78); }

/* 4. tool cards: light paper -> dark stock */
html[data-theme="night"] .tool-card {
  background: #241a13;
  box-shadow: 0 1px 0 rgba(255,255,255,.04),
              0 8px 18px rgba(0,0,0,.5),
              0 24px 42px rgba(0,0,0,.55);
}
html[data-theme="night"] .tool-card::before { opacity: .25; }
html[data-theme="night"] .tool-card .tool-blurb { color: var(--ink-soft); }

/* 5. filter chips: light glass -> dark glass */
html[data-theme="night"] .filter-chip {
  background: rgba(40,30,20,.5); color: var(--ink-soft);
  border-color: rgba(227,184,100,.22);
}
html[data-theme="night"] .filter-chip.active {
  background: var(--red); color: var(--on-wood); border-color: transparent;
}

/* 6. the corkboard wall — biggest hotspot: darken the cork, calm the highlights */
html[data-theme="night"] .wall .wrap { background-color: #5e4a2f; }
html[data-theme="night"] .wall .wrap::after { opacity: .5; }

/* 7. teach wood overlay: deepen */
html[data-theme="night"] .teach {
  background-image:
    linear-gradient(rgba(10,5,3,.78), rgba(10,5,3,.86)),
    url("../assets/objects/wood.jpg");
}
html[data-theme="night"] .teach::after { box-shadow: inset 0 0 240px 80px rgba(2,1,0,.75); }

/* ---- the lamp pool: a warm fixed glow that follows the cursor,
   driven by the same --lx/--ly the hero spotlight writes ---- */
html[data-theme="night"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .5;
  background: radial-gradient(640px circle at var(--lx, 50%) var(--ly, 38%),
    rgba(255, 206, 128, .5), transparent 60%);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="night"] body::after { --lx: 50%; --ly: 38%; }
}