/* ============================================================
   HEROBOTS theme — interactive-state rules for header.php/footer.php.
   These replace the inline style-object states the original React
   component computed from `activeMenu` / `mobileNav` / `mobileGroup`
   state; the desktop/mobile *layout* itself is still the untouched
   inline styles + assets/css/hb-*.css from the design export.
   ============================================================ */

/* ---- Global reset + shared keyframes/classes ----
   Every page's <helmet> in the original export repeated this same
   inline <style> block after its <link> tags (global resets, plus
   marquee/shimmer/card-hover animation classes reused across pages);
   centralized here once instead of per page template. */
html { scroll-behavior: smooth; }
body { background: #000; overflow-x: clip; }
a { text-decoration: none; }
a:hover { color: #fff; }

/* Sticky offset for the product sub-nav (.hb-prodnav, `top: var(--hb-nav-h)`).
   initStickyOffsets() in main.js measures the header and writes this variable,
   but main.js is a footer script: until it runs the variable does not exist,
   the bars take the literal fallback in their inline `top`, and the sub-nav
   paints detached from the header for the first frame(s). Declaring it here
   makes the FIRST paint correct and leaves JS to keep it accurate across font
   swaps, zoom and resize.

   71px = 18px header padding-top + 34px content + 18px padding-bottom + 1px
   border. The content term is .hb-btn--sm's explicit 34px height (the tallest
   thing in the bar — the logo is 22px and the nav links land near 28px), so
   every term is a fixed length and this cannot drift with the font. Mobile
   never needs a second value: .hb-prodnav is display:none there. */
:root { --hb-nav-h: 71px; }

/* Scroll-reveal used by product/project pages (Technologies, etc.):
   fade + rise once .is-in is added by main.js's IntersectionObserver. */
.hb-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.hb-reveal.is-in { opacity: 1; transform: none; }

/* Control Room page: card pulse, network-diagram dashed flow, sensor-fusion diagram */
@keyframes hb-card-pulse {
  0%, 72%, 100% { border-color: rgba(255,255,255,.1); transform: none; }
  12%, 28% { border-color: rgba(255,255,255,.65); transform: translateY(-5px); }
}
@keyframes hb-dash { to { stroke-dashoffset: -160; } }
@keyframes hb-sense-flow { to { stroke-dashoffset: -220; } }
@keyframes hb-sense-ring { 0%{ transform:scale(.7); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
@keyframes hb-sense-node { 0%,100%{ border-color:rgba(255,255,255,.12); color:var(--hb-gray-400); } 50%{ border-color:rgba(255,77,0,.6); color:#fff; } }

/* Roman page: "the challenge" micro-illustrations (joint vibration, sensor wave, elbow probe) */
@keyframes hb-vib-a { 0%,100%{ transform:rotate(0deg); } 25%{ transform:rotate(-2.6deg); } 75%{ transform:rotate(2.6deg); } }
@keyframes hb-vib-b { 0%,100%{ transform:rotate(1.7deg); } 30%{ transform:rotate(-1.5deg); } 70%{ transform:rotate(2.5deg); } }
@keyframes hb-wave { from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-96; } }
@keyframes hb-wave-amp { 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.62); } }
@keyframes hb-wave-out { 0%{ opacity:0; transform:translateX(0); } 14%{ opacity:.9; } 88%{ opacity:.9; transform:translateX(76px); } 100%{ opacity:0; transform:translateX(76px); } }
@keyframes hb-wave-back { 0%{ opacity:0; transform:translateX(0); } 14%{ opacity:.7; } 88%{ opacity:.35; transform:translateX(-74px); } 100%{ opacity:0; transform:translateX(-74px); } }
@keyframes hb-blink { 0%,64%{ opacity:.18; } 72%,100%{ opacity:.9; } }
@keyframes hb-probe { 0%{ transform:translateX(0); } 38%,72%{ transform:translateX(40px); } 100%{ transform:translateX(0); } }
@keyframes hb-elbow { 0%,40%{ transform:rotate(0deg); } 50%,62%{ transform:rotate(-34deg); } 72%,100%{ transform:rotate(0deg); } }
@keyframes hb-scan { 0%,100%{ opacity:.15; } 50%{ opacity:.55; } }

@keyframes hb-glow-pulse { 0%,100%{ opacity:.5; transform:translateX(-50%) scale(1); } 50%{ opacity:.85; transform:translateX(-50%) scale(1.15); } }
@keyframes hb-scroll-dot { 0%,100%{ transform:translateY(0); opacity:.8; } 60%{ transform:translateY(14px); opacity:.15; } }
@keyframes hb-fade-up { from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes hb-shimmer { 0%{ background-position:200% center; } 100%{ background-position:-200% center; } }
@keyframes hb-logo-marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* Project pages (PIPEON, etc.): partner-logo strip marquee — same motion as
   hb-logo-marquee above, kept under its own name since that's what the
   source's inline <style> actually calls it. */
@keyframes hb-marquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hb-logo-track { display:flex; width:max-content; animation:hb-logo-marquee 38s linear infinite; }
.hb-logo-marquee:hover .hb-logo-track { animation-play-state:paused; }
.hb-logo-item img { height:40px; width:auto; max-width:150px; object-fit:contain; filter:brightness(0) invert(1); opacity:.45; transition:opacity .3s; }
/* i loghi con link sono avvolti in un <a>: essendo inline, l'immagine appoggia
   sulla baseline e lascia sotto lo spazio del descender, così questi loghi
   risultavano ~3px più in alto degli altri nella stessa riga (per contrasto
   TEPCO, non linkato, sembrava "più in basso"). Con display:flex l'anchor non
   crea più baseline e tutti i loghi tornano centrati verticalmente. */
.hb-logo-item a { display:flex; align-items:center; }
.hb-logo-item:hover img { opacity:1; }
.hb-brand-logo { height:40px; width:auto; max-width:200px; object-fit:contain; filter:brightness(0) invert(1); opacity:.65; transition:opacity .3s; display:block; }
.hb-brand-item:hover .hb-brand-logo { opacity:1; }
.hb-card-hover { transition: border-color .3s, transform .4s cubic-bezier(0.16,1,.3,1), box-shadow .4s cubic-bezier(0.16,1,.3,1) !important; }
.hb-card-hover:hover { border-color: rgba(255,77,0,.6) !important; transform: translateY(-4px) !important; box-shadow: 0 0 32px rgba(255,77,0,.15), 0 12px 40px rgba(0,0,0,.4) !important; }
.hb-logo-card:hover img { opacity: 1 !important; }
.hb-team-card:hover .hb-team-name { color: var(--hb-orange) !important; }
.hb-team-card:hover .hb-team-arrow { color: var(--hb-orange) !important; transform: translate(2px,-2px); }

/* About Us / Contatti: self-hosted Leaflet map chrome (dark, on-brand controls) */
/* CARTO's free dark_all tiles now require an API key; invert the free OSM
   tiles (main.js's initAboutMap()) to fake the same dark look with no key.
   Scoped to the tile pane only so markers/labels/pins keep their real colors. */
#hb-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.9) saturate(0.15); }
#hb-map .leaflet-control-zoom { border: 0 !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 8px; }
#hb-map .leaflet-control-zoom a { width: 30px !important; height: 30px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 0 2px 0 !important; border-radius: 50% !important; background: rgba(10,10,10,.82) !important; border: 1px solid rgba(255,255,255,.15) !important; color: #fff !important; font-size: 17px !important; font-weight: 500 !important; backdrop-filter: blur(8px); transition: border-color .2s, background .2s; }
#hb-map .leaflet-control-zoom a:hover { background: rgba(255,77,0,.16) !important; border-color: rgba(255,77,0,.6) !important; }
#hb-map .leaflet-control-attribution { background: rgba(0,0,0,.72) !important; color: var(--hb-gray-500) !important; font-size: 9.5px !important; letter-spacing: .02em; padding: 3px 8px !important; border-radius: 999px 0 0 0; }
#hb-map .leaflet-control-attribution a { color: var(--hb-gray-400) !important; }
.hb-map-tip { background: rgba(10,10,10,.92) !important; border: 1px solid #3a3a3a !important; color: #fff !important; font-size: 11px !important; font-weight: 600 !important; padding: 4px 9px !important; border-radius: 999px !important; box-shadow: none !important; }
.hb-map-tip::before { display: none !important; }
.hb-map-pinlabel { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase; padding: 0 !important; text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.85); }
.hb-map-pinlabel::before { display: none !important; }
.hb-shimmer-text {
  background: linear-gradient(90deg, #fff 30%, #AFAFAF 48%, #fff 52%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hb-shimmer 2.4s cubic-bezier(0.16,1,0.3,1) 0.2s 1 both;
}
.hb-shine-once {
  background: linear-gradient(90deg, #fff 30%, #AFAFAF 48%, #fff 52%, #fff 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hb-shimmer 2.4s cubic-bezier(0.16,1,0.3,1) 0.5s 1 both;
}

/* Desktop mega-menu */
[data-menu-trigger] > div { color: var(--hb-gray-400); }
[data-menu-trigger].is-active > div { color: #fff; }

.hb-mega [data-menu-panel] { display: none; }
.hb-mega [data-menu-panel].is-active { display: grid; }

.hb-mega.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  max-height: 360px !important;
  padding: 28px clamp(24px, 6vw, 80px) !important;
}
.hb-mega.is-active.is-active--projects {
  padding: 6px clamp(24px, 6vw, 80px) !important;
}

/* Mobile nav overlay */
.hb-mnav.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}
/* Leaflet promotes its tile/marker layers to their own GPU compositing
   layers (CSS transforms for panning); Chrome then sometimes paints those
   layers above a position:fixed overlay regardless of z-index (confirmed via
   CDP: the overlay had opacity:1, z-index:10000 and covered the full
   viewport, yet the map still rendered on top and stayed clickable/scrollable
   with the burger menu open). Hiding the map outright while the menu is open
   sidesteps that compositing bug instead of fighting it. */
body:has(.hb-mnav.is-open) #hb-map { visibility: hidden !important; }
/* Leaflet's own panes/controls carry z-index 200-1000 (leaflet.css). #hb-map
   is position:relative but without a z-index, so it does NOT open a stacking
   context and those values compete directly against the page's own layers —
   that's how the map ended up painting over the fixed header (z-index:100)
   while scrolling. Giving the map z-index:0 + isolation:isolate contains all
   of Leaflet's internal stacking inside it, so the header always wins. */
#hb-map { position: relative; z-index: 0; isolation: isolate; }

/* Footer bottom row. On one line the two side items share flex:1 1 0, which
   keeps the social icons on the true centre line whatever the copy is. Below
   ~430px the three items no longer fit across (the tagline alone is ~190px of
   a ~370px row) and the text would start wrapping mid-phrase, so stack and
   centre instead — a deliberate layout rather than a squeezed one. */
@media (max-width: 560px) {
  .hb-footer-bottom { flex-direction: column; gap: 14px; }
  .hb-footer-bottom > * { flex: none !important; text-align: center !important; }
}

[data-accordion-toggle] { color: var(--hb-gray-400); }
[data-accordion-group].is-open [data-accordion-toggle] { color: #fff; }
/* Only the trailing "+" rotates into an x. The bare `span` selector this
   replaces also matched the label span next to it, so opening a group spun
   the menu word itself ("PROJECTS") 45deg along with the icon. Both spans
   are flex items of the button, so they are blockified and transform does
   apply to them — the label really did rotate. */
[data-accordion-toggle] > span:last-child { transition: transform .3s cubic-bezier(.16,1,.3,1); }
[data-accordion-group].is-open [data-accordion-toggle] > span:last-child { transform: rotate(45deg); }

[data-accordion-body] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .34s cubic-bezier(.16,1,.3,1), opacity .24s ease;
}
[data-accordion-group].is-open [data-accordion-body] {
  max-height: 620px;
  opacity: 1;
}

/* Contact Form 7 panels: hide the "thank you" state until wpcf7mailsent fires */
[data-contact-thanks] { display: none; }

/* Restyle Contact Form 7's default markup to match .hb-field / .hb-input */
[data-contact-panel] .wpcf7 form { display: flex; flex-direction: column; gap: 12px; }
[data-contact-panel] .wpcf7-form p { margin: 0; }
[data-contact-panel] .wpcf7-form-control-wrap { display: block; }
/* CF7's template wraps each field in a <label>; render that as .hb-field +
   .hb-field__label from the design system. The inputs below reset the
   inherited text-transform / letter-spacing so typed text stays normal. */
[data-contact-panel] .wpcf7-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  color: var(--text-tertiary); text-transform: uppercase;
}
[data-contact-panel] .wpcf7-form-control.wpcf7-text,
[data-contact-panel] .wpcf7-form-control.wpcf7-email {
  width: 100%;
  height: 46px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-raised);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  outline: none;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base);
}
[data-contact-panel] .wpcf7-form-control.wpcf7-text::placeholder,
[data-contact-panel] .wpcf7-form-control.wpcf7-email::placeholder { color: var(--text-tertiary); }
[data-contact-panel] .wpcf7-form-control.wpcf7-text:hover,
[data-contact-panel] .wpcf7-form-control.wpcf7-email:hover { border-color: var(--border-strong); }
[data-contact-panel] .wpcf7-form-control.wpcf7-text:focus,
[data-contact-panel] .wpcf7-form-control.wpcf7-email:focus { border-color: var(--hb-orange); box-shadow: 0 0 0 3px rgba(255,77,0,0.20); }
[data-contact-panel] .wpcf7-form-control.wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 30px; margin-top: 4px;
  font-family: var(--font-sans); font-size: 17px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight); line-height: 1;
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-pill);
  background: var(--hb-orange); color: #fff; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base);
}
[data-contact-panel] .wpcf7-form-control.wpcf7-submit:hover { background: #ff6322; box-shadow: var(--glow-orange); }
[data-contact-panel] .wpcf7-spinner { margin-left: 10px; }
[data-contact-panel] .wpcf7-not-valid-tip { color: var(--hb-orange); font-size: 12px; margin-top: 4px; text-transform: none; letter-spacing: normal; }
[data-contact-panel] .wpcf7-response-output { display: none; }

/* ============================================================
   HR-GLX01 Cell page
   ============================================================ */

/* "Challenge" section: 3 animated SVG micro-illustrations (needle bending,
   controlled-flow carriage/piston/trail, two-component cartridge swap). */
@keyframes hb-needle { 0%{ transform:translate(0,0); } 26%,64%{ transform:translate(0,18px); } 92%,100%{ transform:translate(0,0); } }
@keyframes hb-bend { 0%{ transform:rotate(0deg); } 26%,64%{ transform:rotate(3deg); } 92%,100%{ transform:rotate(0deg); } }
@keyframes hb-cart-swap { 0%{ transform:translateY(-78px); } 26%,64%{ transform:translateY(0); } 92%,100%{ transform:translateY(-78px); } }
@keyframes hb-carriage { 0%{ transform:translateX(62px); } 63%{ transform:translateX(210px); } 80%,100%{ transform:translateX(62px); } }
@keyframes hb-piston { 0%{ transform:translateY(0); } 63%{ transform:translateY(20px); } 80%,100%{ transform:translateY(0); } }
@keyframes hb-trail { 0%{ stroke-dashoffset:148; } 63%{ stroke-dashoffset:0; } 79%{ stroke-dashoffset:0; } 80%,100%{ stroke-dashoffset:148; } }

/* "How it works" tab cards + content panels */
.hb-worktab { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); color: var(--hb-gray-400); transition: background .25s, border-color .25s, color .25s; }
.hb-worktab .hb-worktab__num { color: var(--hb-gray-500); transition: color .25s; }
.hb-worktab.is-active { background: rgba(255,77,0,.09); border-color: rgba(255,77,0,.5); color: #fff; }
.hb-worktab.is-active .hb-worktab__num { color: var(--hb-orange); }
.hb-work-panel { display: none; }
.hb-work-panel.is-active { display: grid; animation: hb-fade-up .4s cubic-bezier(0.16,1,.3,1) both; }

/* "Sequence of operations" step carousel (12 steps, 4 per page, 3 pages) */
.hb-step-page { display: none; }
.hb-step-page.is-active { display: grid; }
.hb-step-dot-line { background: #fff; }
.hb-step-dot.is-active .hb-step-dot-line { background: var(--hb-orange); }

/* Custom video controls (play/pause, mute, seek bar) used by looping
   project/product demo videos — see initVideoControls() in main.js. */
.hb-video-btn { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 0; color: #fff; cursor: pointer; opacity: .85; transition: opacity .15s; }
.hb-video-btn:hover { opacity: 1; }
.hb-video-time { flex: none; font-size: 11px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; min-width: 74px; text-align: center; }
.hb-video-seek { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); cursor: pointer; outline: none; }
.hb-video-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--hb-orange); border: 0; margin-top: 0; }
.hb-video-seek::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--hb-orange); border: 0; }
.hb-video-seek::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); }