/* ===========================================================================
   Rob the Alchemist — neon sign + alchemy-circle backdrop for robthealchemist.com
   ADAPTED (not verbatim) from the engagement app's Rob instance theme:
     repo/worktree: /home/crandellws/projects/ai/gwa_slots/myproject/ash-engagement-rob-theme
     branch feat/instance-themes @ 1549bac75d2ef2f450b38bad172e316ee0228ecb
       (instance-theme files last touched at feab76be7fe4c406a74afff905ff264d8e932427)
     - src/components/instance-theme/rob-neon-sign.css   -> "sign" section
     - src/components/instance-theme/rob-theme.css L24-174 -> "backdrop" section
     - palette: src/lib/instance-theme.ts INSTANCE_THEMES.rob.palette
               (-> src/lib/theme.ts THEME_PRESETS.alchemist)
   Changes from the source: the [data-instance-theme="rob"] [data-instance-frame]
   scope is dropped (this whole site is Rob's); the backdrop starts at top:0 (no
   admin header); the seal's centre logo and node letters are not used.
   The effects themselves (.gwa-fire, .gwa-lightning, -soft modes, flicker
   safety) come unmodified from the vendored brand/tokens.css.
   =========================================================================== */

/* --- font: Courgette, subset to the sign's glyphs (see fonts/OFL.txt) ------ */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/courgette-sign.woff2?v=20261002') format('woff2');
  unicode-range: U+0020, U+0041-0042, U+004F, U+0052, U+0054, U+0062-0063, U+0065, U+0068-0069, U+006C-006D, U+006F, U+0073-0074;
}
/* Metric-matched fallback: Times New Roman / Liberation Serif scaled so
   "ROB the Alchemist" sets at Courgette's width and line box (fontTools,
   advance-width sum 8.10em vs 7.89em). Paired with the sign's fixed-height
   row, the swap moves nothing (CLS 0). */
@font-face {
  font-family: 'Courgette Fallback';
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('LiberationSerif');
  size-adjust: 102.7%;
  ascent-override: 95.1%;
  descent-override: 26.6%;
  line-gap-override: 0%;
}

/* --- palette (INSTANCE_THEMES.rob.palette) --------------------------------- */
:root {
  --rob-crimson: #ef2549;  /* frames / glow ONLY, never body text */
  --rob-rose: #ff8fa3;     /* readable red-family text */
  --rob-deep: #7f0d22;
  --rob-azure: #4b82ff;
  --rob-gold: #f5c542;     /* sparing tertiary */
  --rob-surface: #0b0510;
  --rob-text: #ffe9ec;
  --rob-electric: #5fe1ff; /* lightning / interactive highlight */
  --rob-base: #060208;
  --rob-teal: #2ee6d6;     /* backdrop accents only */
  --rob-violet: #9b5cff;   /* backdrop accents only */
}

/* --- sign (from rob-neon-sign.css) ------------------------------------------ */
.rob-sign {
  --rob-sign-size: clamp(2.3rem, 10vw, 4.6rem);
  --g: 0.7;
  /* Block, not flex: flex would drop the word-space text nodes between tubes. */
  display: block;
  text-align: center;
  /* Fixed row height reserves the sign's box: the face arriving never moves the page. */
  height: calc(var(--rob-sign-size) * 1.9);
  line-height: calc(var(--rob-sign-size) * 1.9);
  margin: 0;
  padding: 0 1rem;
  font-size: var(--rob-sign-size);
  font-weight: 400;
  letter-spacing: 0;
}
.rob-sign.gwa-mark,
.rob-sign .gwa-mark { font-family: 'Courgette', 'Courgette Fallback', cursive; }
/* Case is presentation only: the heading's text stays "Rob The Alchemist". */
.rob-sign .rob-sign__lead { text-transform: uppercase; }
.rob-sign .rob-sign__joiner { text-transform: lowercase; }

/* "ROB": rose glass in a crimson tube, fire on the glow */
.rob-sign .gwa-tube.gwa-red {
  --core: #ffd0d6;
  --glow: var(--rob-crimson);
  --wide: var(--rob-deep);
  --fill: #ffb3c0; /* rose lifted toward the tube core for >= 3:1 against the halo */
  --gwa-fire-color: #ff4d2e;
  --gwa-fire-core: var(--rob-gold);
}
/* "the": small, dim, under-driven; explicit rose so no crimson reaches text */
.rob-sign .gwa-tube.gwa-soft {
  color: var(--rob-rose);
  font-size: 0.62em;
  opacity: 0.72;
}
.rob-sign > .gwa-tube.gwa-soft { margin-left: 0.06em; margin-right: 0.08em; }
/* "Alchemist": electric-blue glass, azure bloom, electric lightning */
.rob-sign .gwa-tube.gwa-blue {
  --core: #e9fbff;
  --glow: var(--rob-electric);
  --wide: var(--rob-azure);
  /* Glass a step lighter than the source's #5fe1ff so the letters hold >= 3:1
     against their own halo at desktop sizes (measured); the halo stays electric. */
  --fill: #ccf6ff;
  --gwa-bolt-color: var(--rob-electric);
  --gwa-bolt-core: #effcff;
}

/* --- backdrop (from rob-theme.css) ------------------------------------------ */
.rob-alc {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  background:
    radial-gradient(60vmax 45vmax at 88% 0%, rgba(127, 13, 34, 0.2), transparent 70%),
    radial-gradient(55vmax 40vmax at 8% 100%, rgba(75, 130, 255, 0.08), transparent 70%),
    var(--rob-base);
}
.rob-alc svg { display: block; }
.rob-alc__circle { position: absolute; }
.rob-alc__circle--a { width: 84vmin; height: 84vmin; top: -12vmin; right: -10vmin; }
.rob-alc__a-dim { position: absolute; inset: 0; opacity: 0.2; }
.rob-alc__seal { position: absolute; inset: 0; }
.rob-alc__shards {
  position: absolute; inset: 0;
  transform-origin: 70% 42%;
  animation: rob-alc-drift 48s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}
@keyframes rob-alc-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-1.2%, 1.4%) rotate(-2deg); }
}
.rob-alc__circle--b { width: 60vmin; height: 60vmin; bottom: -20vmin; left: 14vw; opacity: 0.16; }
.rob-alc__circle--c { width: 30vmin; height: 30vmin; top: 52vh; right: 6vw; opacity: 0.12; }

/* Rotors: transform is the ONLY animated property (compositor-only). Linear
   timing is deliberate here: continuous rotation. */
.rob-alc__rotor {
  position: absolute; inset: 0;
  will-change: transform;
  animation-name: rob-alc-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rob-alc__rotor--a-outer { animation-duration: 150s; }
.rob-alc__rotor--a-inner { animation-duration: 110s; animation-direction: reverse; }
.rob-alc__rotor--b-outer { animation-duration: 170s; animation-direction: reverse; }
.rob-alc__rotor--b-inner { animation-duration: 95s; }
.rob-alc__rotor--c       { animation-duration: 75s; }
@keyframes rob-alc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Echoes of the sign on the shared 8 s cycle (source timing):
   sign lightning 0.4 s, sign fire 4.4 s, circle crackle 2.4 s, circle ember 6.4 s.
   Ember peak alpha ~0.07 of crimson; crackle peak 0.65 x 0.16 ~ 0.10 of electric. */
.rob-alc__ember {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 37, 73, 0.55), rgba(127, 13, 34, 0.25) 55%, transparent 100%);
  opacity: 0.35;
  animation: rob-alc-ember 8s cubic-bezier(0.4, 0, 0.2, 1) -5.6s infinite;
}
@keyframes rob-alc-ember { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
.rob-alc__crackle {
  position: absolute; inset: 0;
  opacity: 0;
  animation: rob-alc-crackle 8s cubic-bezier(0.4, 0, 0.2, 1) -5.648s infinite;
}
/* Two dim flicks inside 0.2 s, then dark for 7.8 s: well under 3 flashes/s. */
@keyframes rob-alc-crackle {
  0% { opacity: 0; } 0.6% { opacity: 0.65; } 1.4% { opacity: 0.1; } 2.4% { opacity: 0.5; } 3.4%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* tokens.css holds the lightning surge at .22 when static; on this sign that
     halo pulls "Alchemist" under 3:1 against its own glow, so hold it dimmer. */
  .rob-sign .gwa-lightning-soft::before { opacity: 0.08; }
  .rob-alc__rotor { animation: none; will-change: auto; }
  .rob-alc__ember { animation: none; opacity: 0.35; }
  .rob-alc__crackle { animation: none; opacity: 0; }
  .rob-alc__shards { animation: none; }
}

/* --- live effects (assets/rob-fx.js + gwa-fx) -------------------------------
   While the canvas effects run, the CSS lightning pulse is held off so the only
   flashes on the page are the gwa-fx strikes (counted by its limiter); the word
   gets one short glow per strike instead. The CSS fire breathe stays as warmth
   under the canvas flame. Without JS, or with reduced motion, none of this
   applies and the soft CSS look above is the whole sign. */
.rob-fx-on .gwa-lightning-soft::before {
  animation: none;
  opacity: 0;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.rob-fx-on .gwa-lightning-soft.rob-fx-surge::before {
  opacity: 0.25;
  transition-duration: 0.06s;
}
/* Furnace trial (gwa-fx mode 'both'): a thin dark keyline painted under the
   ROB glass, so the strokes keep >= 3:1 against the fire in the letter holes
   and on the letter tops. The flame canvas sits behind the glyphs (zIndex -1). */
.rob-fx-on .rob-sign__lead {
  -webkit-text-stroke: 0.115em #060208;
  paint-order: stroke fill;
}
/* Small signs (phones): counters and strokes are thin, so a heavier keyline. */
@media (max-width: 640px) {
  .rob-fx-on .rob-sign__lead { -webkit-text-stroke-width: 0.14em; }
}