/* ==========================================================================
   GENESYS LABS · CAPITOLO OFFICINA 93014 · il castello
   La card di prima (e504b95, 23/10): il Castello Manfredonico di Mussomeli
   disegnato in SVG, con la barra dell'uptime e la riga del cluster. Le regole
   vengono da anteprime.css e redesign.css (la vecchia galleria); qui sono
   messe nella tela del capitolo (22em × 26em). La luce che risale la rampa
   la muove officina.js.
   ========================================================================== */
.fr-officina[data-ui] {
  --castle-wall-top: #f5b055; --castle-wall-base: #a85820;
  --castle-rock-high: #996e54; --castle-rock-mid: #6b4a33; --castle-rock-deep: #462c1d;
  --castle-ramp-glow: #ffd685;
  position: relative; width: 22em; height: 26em; font-size: var(--fr-fs, 14px); text-align: left;
  display: flex; align-items: center;
}
.fr-officina[data-ui] *, .fr-officina[data-ui] *::before, .fr-officina[data-ui] *::after { box-sizing: border-box; }
.fr-officina[data-attivo="false"] * { animation-play-state: paused !important; }

.dot-live{width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);} /* taste-skill-ignore: il castello della card di prima */
.chassis-castello{position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1410 0%, #0c0907 100%); /* taste-skill-ignore: il castello della card di prima */
  border: 1px solid rgba(182, 73, 38, 0.35); /* taste-skill-ignore: il castello della card di prima */
  box-shadow: 0 24px 54px rgba(42, 32, 26, 0.28), inset 0 0 0 1px rgba(245, 176, 85, 0.15); /* taste-skill-ignore: il castello della card di prima */
  display: flex;
  flex-direction: column;}
.castello-barra{display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(26, 20, 17, 0.96);
  border-bottom: 1px solid rgba(182, 73, 38, 0.25); /* taste-skill-ignore: il castello della card di prima */
  font-family: var(--font, 'Geist', system-ui, sans-serif);
  font-size: 11px;}
.castello-barra-sx{display: flex;
  align-items: center;
  gap: 8px;
  color: #e8dfd5;}
.castello-barra-sx i{color: #f5b055;
  font-size: 12px;}
.castello-barra-dx{display: flex;
  align-items: center;
  gap: 6px;
  color: #10b981;
  font-size: 10.5px;
  font-weight: 700;}
.castello-stage-card{position: relative;
  height: 290px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 10px 0;
  overflow: hidden;
  background: 
    radial-gradient(circle at 65% 25%, rgba(245, 176, 85, 0.22) 0%, rgba(182, 73, 38, 0.1) 45%, transparent 70%), /* taste-skill-ignore: il castello della card di prima */
    linear-gradient(180deg, #1c1511 0%, #100c0a 100%);} /* taste-skill-ignore: il castello della card di prima */
.castello-stage-card svg.hero-castle{width: 100%;
  height: 100%;
  max-height: 280px;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)); /* taste-skill-ignore: il castello della card di prima */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}
.castello-telemetria-box{padding: 11px 16px;
  background: rgba(20, 15, 13, 0.95);
  border-top: 1px solid rgba(182, 73, 38, 0.2); /* taste-skill-ignore: il castello della card di prima */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font, 'Geist', system-ui, sans-serif);
  font-size: 11px;}
.castello-telemetria-sx{color: #c4b5a5;}
.castello-telemetria-sx b{color: #f5b055;}
.castello-telemetria-dx{color: #2589bd;
  font-weight: 700;}
.tel-onda,
.hc-person,
.hc-climbers,
.hc-zigzag-ramp,
.tek-antenna-ball,
.tek-svg{will-change: transform;}
@media (max-width: 768px) {
.hc-person{animation: none;}
}
.tel-onda,
.hc-person,
.hc-climbers,
.hc-zigzag-ramp,
.tek-antenna-ball{will-change: transform;}
@media (max-width: 768px) {
.hc-person{animation: none;}
}
.hc-person{transform-box: fill-box;
  transform-origin: center bottom;}
.hc-person.p1{animation: hc-sale-basso 12s linear infinite;}
.hc-person.p2{animation: hc-sale-basso 12s linear infinite; animation-delay: -3s;}
.hc-person.p3{animation: hc-sale-medio 14s linear infinite; animation-delay: -7s;}
.hc-person.p4{animation: hc-sale-alto  15s linear infinite; animation-delay: -11s;}
@keyframes hc-sale-basso{0%   { transform: translate(0, 0);          opacity: 0; }
  7%   { opacity: 1; }
  25%  { transform: translate(19px, -6.5px);  opacity: 1; }
  50%  { transform: translate(38px, -10px);   opacity: 1; }
  75%  { transform: translate(57px, -16.5px); opacity: 1; }
  93%  { opacity: 1; }
  100% { transform: translate(76px, -20px);   opacity: 0; }}
@keyframes hc-sale-medio{0%   { transform: translate(0, 0);          opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translate(17px, -5.5px);  opacity: 1; }
  50%  { transform: translate(34px, -9px);    opacity: 1; }
  75%  { transform: translate(51px, -14.5px); opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(68px, -18px);   opacity: 0; }}
@keyframes hc-sale-alto{0%   { transform: translate(0, 0);         opacity: 0; }
  9%   { opacity: 1; }
  25%  { transform: translate(14px, -4.5px); opacity: 1; }
  50%  { transform: translate(28px, -7px);   opacity: 1; }
  75%  { transform: translate(42px, -12px);  opacity: 1; }
  91%  { opacity: 1; }
  100% { transform: translate(56px, -15px);  opacity: 0; }}
.hc-slit{animation: hc-finestra 6.4s ease-in-out infinite;}
.hc-slit:nth-of-type(2){animation-delay: -2.1s;}
.hc-slit:nth-of-type(3){animation-delay: -4.3s;}
@keyframes hc-finestra{0%, 62%, 100% { fill: #000; opacity: .65; }
  22%, 40%      { fill: var(--castle-ramp-glow, #ffd685); opacity: .95; }}
.hc-gate{animation: hc-portone 9s ease-in-out infinite;}
@keyframes hc-portone{0%, 100% { opacity: .75; }
  50%      { opacity: .55; }}
.hc-ramp-edge{animation: hc-strada 4.2s ease-in-out infinite;}
.hc-ramp-edge:nth-of-type(2){animation-delay: -1.4s;}
.hc-ramp-edge:nth-of-type(3){animation-delay: -2.8s;}
@keyframes hc-strada{0%, 100% { opacity: .45; }
  45%      { opacity: 1; }}
.hc-rock-crevices{animation: hc-roccia 11s ease-in-out infinite;}
@keyframes hc-roccia{0%, 100% { opacity: .85; }
  50%      { opacity: 1; }}
.hc-upper-palace{transform-box: fill-box;
  transform-origin: center bottom;
  animation: hc-rocca 7.5s ease-in-out infinite;}
@keyframes hc-rocca{0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }}
@media (prefers-reduced-motion: reduce) {
.hc-person,
.hc-slit,
.hc-gate,
.hc-ramp-edge,
.hc-rock-crevices,
.hc-upper-palace{animation: none !important;}
}
@media (max-width: 768px) {
.hc-person,
.hc-rock-crevices,
.hc-upper-palace{animation: none;}
.hc-slit{animation-duration: 9s;}
}
.hc-person.p5{animation: hc-sale-alto 13s linear infinite; animation-delay: -5s;}
.hc-person.p6{animation: hc-sale-alto 13s linear infinite; animation-delay: -9.5s;}
.hc-person.p7{animation: hc-arrivato 2.6s ease-in-out infinite;}
@keyframes hc-arrivato{0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-2.5px) rotate(-3deg); }
  60%      { transform: translateY(-1px) rotate(2.5deg); }}
@media (max-width: 768px) {
.hc-person.p5,
.hc-person.p6,
.hc-person.p7{animation: none;}
}
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 768px) {
.castello-stage-card{height: 210px;}
.castello-barra,
.castello-telemetria-box{flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; font-size: 10.5px;}
}
@media (max-width: 400px) {
.castello-stage-card{height: 180px;}
}
.castello-barra-sx span,
.castello-barra-dx span,
.castello-telemetria-dx span,
.castello-telemetria-sx b{white-space: nowrap;}
@media (max-width: 600px) {
.castello-telemetria-box{justify-content: space-between;}
}

/* la luce sulla rampa: le finestre della rocca si accendono al suo passaggio */
.hc-slit { transition: fill .4s, opacity .4s; }
.hc-slit.hc-acceso { fill: #ffd276; opacity: 1; filter: drop-shadow(0 0 2.5px rgba(255, 210, 118, .95)); } /* taste-skill-ignore: il castello della card di prima */
.hc-luce-scia { fill: none; stroke: #ffd276; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc-luce-scia-alone { fill: none; stroke: rgba(255, 210, 118, .28); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }

/* nella tela del capitolo: il telaio la riempie in larghezza, il castello ha le proporzioni del disegno (740 × 560) */
.fr-officina[data-ui] .castello-stage-card { flex: none; height: 17.4em; }
.fr-officina[data-ui] .castello-stage-card svg.hero-castle { max-height: none; }
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  html:not(.leggero) .fr-officina[data-attivo="true"] svg.hero-castle { animation: castello-galleggia 3.8s ease-in-out infinite alternate; }
}
@keyframes castello-galleggia { from { transform: translateY(-4px); } to { transform: translateY(4px); } }