/* === Journal hero illustrations =====================================
   Engraved walnut-ink line drawings sitting top-right of each j-hero,
   with subtle idle animations. Positioned absolutely so they don't
   reflow the headline column.
   ==================================================================== */

.j-hero { position: relative; }

.j-illus {
  position: absolute;
  top: 92px;
  right: 4vw;
  width: clamp(180px, 22vw, 280px);
  height: auto;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.92;
}
.j-illus svg { width: 100%; height: auto; display: block; }

/* Stroke vocabulary */
.j-illus .ink   { stroke: var(--ink); stroke-width: 1.1; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; }
.j-illus .ink-h { stroke: var(--ink); stroke-width: 0.6; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.j-illus .gilt  { stroke: var(--gilt); stroke-width: 1.0; fill: none;
                  stroke-linecap: round; stroke-linejoin: round; }
.j-illus .gilt-fill { fill: var(--gilt); stroke: none; }
.j-illus .ink-fill  { fill: var(--ink); stroke: none; }
.j-illus .paper-fill { fill: #F4EBD3; stroke: none; }
.j-illus .verdigris { stroke: var(--verdigris); stroke-width: 1.0; fill: none;
                      stroke-linecap: round; stroke-linejoin: round; }
.j-illus .verdigris-fill { fill: var(--verdigris); stroke: none; }
.j-illus .verdigris-h { stroke: var(--verdigris); stroke-width: 0.6; fill: none;
                        opacity: 0.7; stroke-linecap: round; stroke-linejoin: round; }

/* Verdigris breath — slow patina shimmer */
@keyframes j-verdigris-breath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.9; }
}
.j-illus .verdigris-breath { animation: j-verdigris-breath 7.2s ease-in-out infinite; }

/* === Surveyor's plane-table (blog hero) ============================ */
@keyframes j-alidade-aim {
  0%, 18%   { transform: rotate(-6deg);  }
  35%, 55%  { transform: rotate(-13deg); }
  72%, 100% { transform: rotate(-9deg);  }
}
@keyframes j-spire-pip {
  0%, 30%, 60%, 100% { opacity: 0.4; r: 1.6; }
  40%, 50%           { opacity: 1.0; r: 3.0; }
}
@keyframes j-survey-draw {
  0%        { stroke-dashoffset: 100; opacity: 0; }
  10%, 75%  { stroke-dashoffset: 0;   opacity: 0.7; }
  95%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes j-needle-osc {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes j-horizon-mist {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.32; }
}
.j-illus .alidade   { transform-origin: 160px 130px; transform-box: fill-box;
                      animation: j-alidade-aim 9s ease-in-out infinite; }
.j-illus .spire-pip { transform-origin: center; transform-box: fill-box;
                      animation: j-spire-pip 9s ease-in-out infinite; }
.j-illus .survey-1  { stroke-dasharray: 100;
                      animation: j-survey-draw 10s ease-in-out infinite; }
.j-illus .survey-2  { stroke-dasharray: 100;
                      animation: j-survey-draw 12s ease-in-out infinite 1s; }
.j-illus .compass-needle { transform-origin: center; transform-box: fill-box;
                           animation: j-needle-osc 6s ease-in-out infinite; }
.j-illus .horizon-mist   { animation: j-horizon-mist 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .j-illus .alidade,
  .j-illus .spire-pip,
  .j-illus .survey-1, .j-illus .survey-2,
  .j-illus .compass-needle,
  .j-illus .horizon-mist { animation: none; }
}

/* Caption — small JetBrains Mono label below illustration */
.j-illus-cap {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted-2);
  bottom: -22px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}

/* Hide on narrow viewports — headline takes the whole hero width */
@media (max-width: 880px) {
  .j-illus { display: none; }
}

/* ==== Animations ==================================================== */

/* Microphone — soft hum: capsule pulse + cable subtle sway */
@keyframes j-mic-hum {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.18); }
}
@keyframes j-mic-glint {
  0%, 90%, 100% { opacity: 0; }
  92%, 96%      { opacity: 0.9; }
}
@keyframes j-cable-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.2deg); }
}
.j-illus .mic-pulse  { transform-origin: 140px 103px; transform-box: fill-box;
                       animation: j-mic-hum 3.4s ease-in-out infinite; }
.j-illus .mic-glint  { animation: j-mic-glint 6s ease-in-out infinite; }
.j-illus .mic-cable  { transform-origin: 100px 240px;
                       animation: j-cable-sway 7s ease-in-out infinite; }

/* === Mic enrichment ================================================
   Sound-wave arcs emanating from capsule, VU meter bars on body,
   ON-AIR pip, capsule halo glow.
   ==================================================================== */

/* Three concentric sound-wave arcs, staggered */
@keyframes j-wave {
  0%   { stroke-dashoffset: 0;   opacity: 0; }
  20%  { opacity: 0.85; }
  100% { stroke-dashoffset: -60; opacity: 0; }
}
.j-illus .wave-1 { stroke-dasharray: 60; stroke-dashoffset: 0;
                   animation: j-wave 2.6s ease-out infinite; }
.j-illus .wave-2 { stroke-dasharray: 80; stroke-dashoffset: 0;
                   animation: j-wave 2.6s ease-out infinite 0.6s; }
.j-illus .wave-3 { stroke-dasharray: 100; stroke-dashoffset: 0;
                   animation: j-wave 2.6s ease-out infinite 1.2s; }

/* VU meter bars — different rhythms per bar, like real audio */
@keyframes j-vu-1 { 0%,100% { transform: scaleY(0.3); }
                     30% { transform: scaleY(1); }
                     60% { transform: scaleY(0.6); } }
@keyframes j-vu-2 { 0%,100% { transform: scaleY(0.5); }
                     20% { transform: scaleY(0.9); }
                     55% { transform: scaleY(0.35); }
                     80% { transform: scaleY(1); } }
@keyframes j-vu-3 { 0%,100% { transform: scaleY(0.4); }
                     40% { transform: scaleY(1); }
                     70% { transform: scaleY(0.55); } }
@keyframes j-vu-4 { 0%,100% { transform: scaleY(0.25); }
                     35% { transform: scaleY(0.7); }
                     65% { transform: scaleY(1); } }
.j-illus .vu-bar { transform-box: fill-box; transform-origin: bottom center; }
.j-illus .vu-1 { animation: j-vu-1 1.4s ease-in-out infinite; }
.j-illus .vu-2 { animation: j-vu-2 1.7s ease-in-out infinite; }
.j-illus .vu-3 { animation: j-vu-3 1.3s ease-in-out infinite; }
.j-illus .vu-4 { animation: j-vu-4 1.9s ease-in-out infinite; }

/* ON-AIR pip — slow blink */
@keyframes j-onair {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.j-illus .onair-pip { animation: j-onair 1.8s ease-in-out infinite; }

/* Capsule halo — soft outer glow that breathes */
@keyframes j-halo {
  0%, 100% { opacity: 0.2; transform: scale(0.95); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
.j-illus .capsule-halo { transform-origin: 140px 103px; transform-box: fill-box;
                         animation: j-halo 3.4s ease-in-out infinite; }

/* Camera — slow bellows breath + lens shutter blink */
@keyframes j-bellows-breathe {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.025); }
}
@keyframes j-shutter-blink {
  0%, 88%, 100% { opacity: 0; }
  90%, 94%      { opacity: 1; }
}
@keyframes j-lens-glint {
  0%, 92%, 100% { opacity: 0; }
  94%, 98%      { opacity: 0.85; }
}
.j-illus .bellows-grp { transform-origin: 140px 130px;
                        animation: j-bellows-breathe 5.6s ease-in-out infinite; }
.j-illus .shutter-blade { animation: j-shutter-blink 7s ease-in-out infinite; }
.j-illus .lens-glint    { animation: j-lens-glint 8s ease-in-out infinite; }

/* Camera enrichment — light beam, aperture iris, REC pip */
@keyframes j-beam-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}
@keyframes j-rec-pip {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
@keyframes j-iris-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes j-aperture-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.85); }
}
.j-illus .light-beam { animation: j-beam-pulse 4.2s ease-in-out infinite; }
.j-illus .rec-pip    { animation: j-rec-pip 1.6s ease-in-out infinite; }
.j-illus .iris-grp   { transform-origin: 66px 125px; transform-box: fill-box;
                       animation: j-iris-spin 28s linear infinite; }
.j-illus .aperture   { transform-origin: 66px 125px; transform-box: fill-box;
                       animation: j-aperture-breathe 5.6s ease-in-out infinite; }

/* Pen — slow line draw + ink drop forming */
@keyframes j-pen-draw {
  0%   { stroke-dashoffset: 80; }
  60%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  95%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 80; opacity: 0; }
}
@keyframes j-ink-drop {
  0%, 60%   { opacity: 0; transform: scale(0); }
  70%, 95%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(1); }
}
.j-illus .pen-line { stroke-dasharray: 80; stroke-dashoffset: 80;
                     animation: j-pen-draw 6s ease-in-out infinite; }
.j-illus .ink-drop { transform-origin: 138px 188px;
                     animation: j-ink-drop 6s ease-in-out infinite; }

/* === Wide variant — journal umbrella hero =========================== */
.j-illus.j-illus--wide {
  width: clamp(320px, 38vw, 520px);
  top: 60px;
  right: 3vw;
}

/* Book — page lift and gilt edge shimmer */
@keyframes j-page-turn {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.97); opacity: 0.94; }
}
@keyframes j-gilt-shimmer {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.j-illus .page-right { transform-origin: left center; transform-box: fill-box;
                       animation: j-page-turn 6.5s ease-in-out infinite; }
.j-illus .gilt-edge  { animation: j-gilt-shimmer 4.4s ease-in-out infinite; }

/* === Filament Sentence ==============================================
   Edison/Křižík bulb on a cradle. The filament inside is a single
   handwritten-style path that draws itself across 6s, glows, fades,
   and re-draws. The whole bulb has a soft gilt halo that breathes.
   ==================================================================== */

@keyframes j-filament-draw {
  0%   { stroke-dashoffset: 320; opacity: 0.25; }
  12%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0.15; }
  100% { stroke-dashoffset: 320; opacity: 0; }
}
@keyframes j-bulb-halo {
  0%, 100% { opacity: 0.18; transform: scale(0.96); }
  50%      { opacity: 0.55; transform: scale(1.04); }
}
@keyframes j-bulb-aura {
  0%, 100% { opacity: 0.12; }
  50%      { opacity: 0.30; }
}
@keyframes j-spark {
  0%, 88%, 100% { opacity: 0; }
  90%, 94%      { opacity: 1; }
}

.j-illus .filament-line {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: j-filament-draw 7.5s ease-in-out infinite;
}
.j-illus .filament-glow {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: j-filament-draw 7.5s ease-in-out infinite;
  filter: blur(2px);
}
.j-illus .bulb-halo {
  transform-origin: center; transform-box: fill-box;
  animation: j-bulb-halo 3.6s ease-in-out infinite;
}
.j-illus .bulb-aura {
  animation: j-bulb-aura 3.6s ease-in-out infinite;
}
.j-illus .filament-spark {
  animation: j-spark 5s ease-in-out infinite;
}

/* Radiant rays from filament — slow rotation + subtle opacity pulse */
@keyframes j-ray-pulse {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.32; }
}
@keyframes j-ray-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.j-illus .ray-grp {
  transform-origin: 220px 130px; transform-box: fill-box;
  animation: j-ray-rotate 60s linear infinite;
}
.j-illus .rays { animation: j-ray-pulse 3.6s ease-in-out infinite; }

/* Embers drifting down */
@keyframes j-ember-1 {
  0%   { transform: translate(0,0); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(-8px, 110px); opacity: 0; }
}
@keyframes j-ember-2 {
  0%   { transform: translate(0,0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(6px, 130px); opacity: 0; }
}
@keyframes j-ember-3 {
  0%   { transform: translate(0,0); opacity: 0; }
  15%  { opacity: 0.8; }
  100% { transform: translate(-3px, 100px); opacity: 0; }
}
.j-illus .ember-1 { transform-box: fill-box;
                    animation: j-ember-1 4.2s ease-in infinite; }
.j-illus .ember-2 { transform-box: fill-box;
                    animation: j-ember-2 5.1s ease-in infinite 1.4s; }
.j-illus .ember-3 { transform-box: fill-box;
                    animation: j-ember-3 4.6s ease-in infinite 2.6s; }

/* Wire — gilt pulse traveling along power cable */
@keyframes j-wire-flow {
  0%   { stroke-dashoffset: 0; opacity: 0.2; }
  50%  { opacity: 0.85; }
  100% { stroke-dashoffset: -40; opacity: 0.2; }
}
.j-illus .wire-pulse {
  stroke-dasharray: 4 36; stroke-dashoffset: 0;
  animation: j-wire-flow 3.2s linear infinite;
}

/* Field arcs — concentric magnetic-field suggestion */
@keyframes j-field {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.28; }
}
.j-illus .field-arc { animation: j-field 4.8s ease-in-out infinite; }
.j-illus .field-arc-2 { animation: j-field 4.8s ease-in-out infinite 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .j-illus .mic-pulse, .j-illus .mic-glint, .j-illus .mic-cable,
  .j-illus .bellows-grp, .j-illus .shutter-blade, .j-illus .lens-glint,
  .j-illus .pen-line, .j-illus .ink-drop,
  .j-illus .page-right, .j-illus .gilt-edge {
    animation: none !important;
  }
  .j-illus .pen-line { stroke-dashoffset: 0; }
}