/* =====================================================================
   sketches.css — Křižík sketch library
   ----------------------------------------------------------------------
   Unified hand: ink-on-paper line work with soft gilt halo beneath.
   Two families that share the same hand:
     · Inventions — Naturalist (loose stroke, ink wash, varied weight)
     · Manuscripts — 1880s Scientific Journal (precise lines, marginalia)
   ===================================================================== */

:root {
  --sk-ink: #1A1208;
  --sk-ink-soft: rgba(26, 18, 8, 0.62);
  --sk-ink-dim: rgba(26, 18, 8, 0.35);
  --sk-ink-wash: rgba(26, 18, 8, 0.10);
  --sk-gilt: #B68A3E;
  --sk-gilt-bright: #D4A859;
  --sk-verdigris: #5A7A5C;
  --sk-verdigris-deep: #3F5A41;
  --sk-halo: rgba(255, 214, 107, 0.35);
}

/* --- Accent fills (use sparingly, like hand-coloured plates) --- */
.sk-gilt-fill   { fill: var(--sk-gilt); }
.sk-gilt-stroke { stroke: var(--sk-gilt); }
.sk-gilt-bright { fill: var(--sk-gilt-bright); }
.sk-verdigris-fill   { fill: var(--sk-verdigris); }
.sk-verdigris-stroke { stroke: var(--sk-verdigris); }
.sk-verdigris-wash {
  fill: var(--sk-verdigris);
  opacity: 0.18;
}
.sk-gilt-wash {
  fill: var(--sk-gilt);
  opacity: 0.22;
}

/* --- Metallic gilt fill: matches the hero "No.2" sheen.
   Apply with fill="url(#sk-gilt-grad)" on any path/ellipse. --- */
.sk-metal {
  fill: url(#sk-gilt-grad);
  filter: drop-shadow(0 0 1.4px rgba(182, 138, 62, 0.35));
}
.sk-metal-stroke {
  stroke: url(#sk-gilt-grad);
}

/* gentle sheen on solid metallic accents */
@keyframes sk-sheen {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.sk-gilt-fill, .sk-gilt-bright, .sk-verdigris-fill { animation: sk-sheen 4.5s ease-in-out infinite; }

/* Sketch frame — drop one of these anywhere on a paper-tone page */
.sk-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.sk-frame .sk-halo {
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 56%;
  background: radial-gradient(ellipse at center bottom,
    var(--sk-halo) 0%,
    rgba(255, 214, 107, 0.10) 38%,
    transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
  animation: sk-halo-pulse 9s ease-in-out infinite;
}
/* Cast shadow on the table — sits BENEATH the object (between halo and ink) */
.sk-frame .sk-cast {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 72%;
  height: 14%;
  background: radial-gradient(ellipse at center,
    rgba(26, 18, 8, 0.42) 0%,
    rgba(26, 18, 8, 0.22) 40%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
}
/* Object body drop-shadow filter — applied to the SVG itself */
.sk-frame svg.sk-svg {
  filter:
    drop-shadow(0 2px 1.5px rgba(26, 18, 8, 0.18))
    drop-shadow(0 6px 8px rgba(26, 18, 8, 0.22))
    drop-shadow(0 14px 18px rgba(26, 18, 8, 0.14));
}
@keyframes sk-halo-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}
.sk-frame svg.sk-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Sizes */
.sk-frame.sk-xl { width: 480px; height: 480px; }
.sk-frame.sk-lg { width: 320px; height: 320px; }
.sk-frame.sk-md { width: 220px; height: 220px; }
.sk-frame.sk-sm { width: 140px; height: 140px; }
.sk-frame.sk-xs { width: 84px; height: 84px; }
.sk-frame.sk-stamp { width: 56px; height: 56px; }
.sk-frame.sk-stamp .sk-halo { opacity: 0.4; }

/* ===== INVENTIONS — Naturalist hand ===== */
.sk-naturalist .sk-stroke {
  fill: none;
  stroke: var(--sk-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sk-naturalist .sk-thin { stroke-width: 0.7; opacity: 0.65; }
.sk-naturalist .sk-wash { fill: var(--sk-ink); opacity: 0.07; }
.sk-naturalist .sk-ink  { fill: var(--sk-ink); opacity: 0.18; }
.sk-naturalist .sk-sketchy {
  stroke-dasharray: 0.6 1.4;
  stroke-width: 0.9;
  opacity: 0.65;
}
.sk-naturalist .sk-label {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 350;
  font-size: 11px;
  fill: var(--sk-ink-soft);
}
.sk-naturalist .sk-platenum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--sk-ink-dim);
}

/* ===== MANUSCRIPTS — Scientific hand (with naturalist warmth) ===== */
.sk-scientific .sk-stroke {
  fill: none;
  stroke: var(--sk-ink);
  stroke-width: 1.05;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sk-scientific .sk-thin { stroke-width: 0.5; opacity: 0.7; }
.sk-scientific .sk-hatch { stroke: var(--sk-ink); stroke-width: 0.4; opacity: 0.55; }
.sk-scientific .sk-wash { fill: var(--sk-ink); opacity: 0.06; }   /* borrowed from naturalist */
.sk-scientific .sk-ink  { fill: var(--sk-ink); opacity: 0.15; }
.sk-scientific .sk-dot  { fill: var(--sk-ink); }
.sk-scientific .sk-textline {
  stroke: var(--sk-ink);
  stroke-width: 0.45;
  opacity: 0.55;
}
.sk-scientific .sk-handwriting {
  font-family: 'Caveat', 'Newsreader', cursive;
  font-size: 13px;
  fill: var(--sk-ink);
  opacity: 0.85;
}
.sk-scientific .sk-label {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 350;
  font-size: 10px;
  fill: var(--sk-ink-soft);
}
.sk-scientific .sk-platenum {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  fill: var(--sk-ink-dim);
}

/* ===== Animations (shared) ===== */
@keyframes sk-spark {
  0%, 100% { opacity: 0; }
  20% { opacity: 0; }
  22% { opacity: 1; }
  24% { opacity: 0; }
  72% { opacity: 0; }
  74% { opacity: 1; }
  76% { opacity: 0; }
}
.sk-spark { animation: sk-spark 5s steps(1, end) infinite; }

@keyframes sk-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sk-rotor { transform-origin: center; animation: sk-spin 16s linear infinite; }

@keyframes sk-jet {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.9; }
  50%      { transform: translateY(-2px) scaleY(1.05); opacity: 1; }
}
.sk-jet { animation: sk-jet 2.6s ease-in-out infinite; transform-origin: bottom; }

@keyframes sk-flicker {
  0%, 100% { opacity: 1; }
  47% { opacity: 1; }
  48% { opacity: 0.4; }
  49% { opacity: 1; }
  77% { opacity: 1; }
  78% { opacity: 0.6; }
  79% { opacity: 1; }
}
.sk-flicker { animation: sk-flicker 4s steps(1, end) infinite; }

@keyframes sk-blink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.sk-blink { animation: sk-blink 2.4s ease-in-out infinite; }

@keyframes sk-drip {
  0%      { transform: translateY(0) scaleY(0.6); opacity: 0; }
  10%     { transform: translateY(0) scaleY(1); opacity: 1; }
  /* falls from the nib tip (y=124) all the way down to the ink surface (y≈138) */
  85%     { transform: translateY(14px) scaleY(1.6); opacity: 1; }
  92%     { transform: translateY(14px) scaleY(0.4); opacity: 0.6; }
  100%    { transform: translateY(14px) scaleY(0.2); opacity: 0; }
}
.sk-drop { animation: sk-drip 3.4s cubic-bezier(.55,.05,.85,.6) infinite; transform-origin: top; }

@keyframes sk-warm {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.sk-warm { animation: sk-warm 3.4s ease-in-out infinite; }

@keyframes sk-write {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}
.sk-write { stroke-dasharray: 60; animation: sk-write 6s ease-in-out infinite; }

/* ===== Extended animations ===== */

/* Page corner flutter (book) */
@keyframes sk-page-flutter {
  0%, 90%, 100% { transform: rotate(0deg); }
  92%           { transform: rotate(-3deg); }
  95%           { transform: rotate(2deg); }
  98%           { transform: rotate(-1deg); }
}
.sk-page-flutter { animation: sk-page-flutter 7s ease-in-out infinite; transform-box: fill-box; transform-origin: top right; }

/* Text appearing line-by-line (use animation-delay to stagger) */
@keyframes sk-textfade {
  0%, 100% { opacity: 0; }
  10%      { opacity: 0.9; }
  85%      { opacity: 0.9; }
}
.sk-textfade { animation: sk-textfade 8s ease-in-out infinite; }

/* Pen rocking — using SVG-native animateTransform via wrapper, no CSS transform-box weirdness */
.sk-rock-pen { /* presentation only — actual rocking handled by SVG <animateTransform> */ }

/* Ripple in the inkwell */
@keyframes sk-ripple {
  0%, 100% { transform: scaleX(1); opacity: 0.18; }
  50%      { transform: scaleX(1.04) translateY(-0.5px); opacity: 0.28; }
}
.sk-ripple { animation: sk-ripple 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* Wisp of steam / smoke */
@keyframes sk-wisp {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: translate(2px, -22px); opacity: 0; }
}
.sk-wisp { animation: sk-wisp 4s ease-in infinite; }
.sk-wisp.delay-2 { animation-delay: 1.2s; }
.sk-wisp.delay-3 { animation-delay: 2.4s; }

/* Bookmark ribbon sway */
@keyframes sk-sway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1.5deg); }
}
.sk-sway { animation: sk-sway 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }

/* Coupling-rod pump (locomotive) */
@keyframes sk-pump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}
.sk-pump { animation: sk-pump 1.6s ease-in-out infinite; }

/* Slow rotation for wheels */
@keyframes sk-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sk-wheel { transform-origin: center; transform-box: fill-box; animation: sk-spin-slow 6s linear infinite; }

/* Carriage slide along cable (funicular) — applied to outer group, rotation handled inside */
@keyframes sk-carriage-up {
  0%, 100% { transform: translate(0px, 0px); }
  50%      { transform: translate(40px, -32px); }
}
@keyframes sk-carriage-down {
  0%, 100% { transform: translate(0px, 0px); }
  50%      { transform: translate(-40px, 32px); }
}
.sk-carriage-up   { animation: sk-carriage-up 14s ease-in-out infinite; transform-box: fill-box; }
.sk-carriage-down { animation: sk-carriage-down 14s ease-in-out infinite; transform-box: fill-box; }

/* Falling droplets back into basin */
@keyframes sk-fall {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(var(--dx, 0px), var(--dy, 80px)); opacity: 0; }
}
.sk-fall { animation: sk-fall 3.6s ease-in infinite; }
.sk-fall.delay-1 { animation-delay: 0.6s; }
.sk-fall.delay-2 { animation-delay: 1.4s; }
.sk-fall.delay-3 { animation-delay: 2.2s; }

/* Flux pulses (dynamo) */
@keyframes sk-flux {
  0%   { stroke-dashoffset: 0; opacity: 0; }
  20%  { opacity: 0.7; }
  100% { stroke-dashoffset: -40; opacity: 0; }
}
.sk-flux { stroke-dasharray: 4 4; animation: sk-flux 3s linear infinite; }
.sk-flux.delay-1 { animation-delay: 0.8s; }
.sk-flux.delay-2 { animation-delay: 1.6s; }

/* Subtle steam from locomotive smokestack / kettle */
@keyframes sk-steam {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  30%  { opacity: 0.55; }
  100% { transform: translate(-3px, -28px) scale(1.6); opacity: 0; }
}
.sk-steam { animation: sk-steam 5s ease-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.sk-steam.delay-1 { animation-delay: 1.5s; }
.sk-steam.delay-2 { animation-delay: 3s; }