/* ==========================================================================
   home-petals.css — Hidra home: etichette dei petali visibili solo al passaggio, glow, testo
   "macchina da scrivere" a sinistra del simbolo.
   Usato da index.html (anteprima). Non modifica index.html.
   ========================================================================== */

/* --- 0. Font delle etichette dei petali: Comfortaa (Light 300), in locale --- */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:url("../fonts/comfortaa/comfortaa-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:url("../fonts/comfortaa/comfortaa-latinext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1. Petali: colore più acceso + bagliore sul bordo (hover / focus) --- */
#svg5463 a { cursor: pointer; outline: none; }
#svg5463 a > path {
  transition: filter .25s ease, fill .25s ease, fill-opacity .25s ease;
}
#svg5463 a:hover > path,
#svg5463 a:focus > path,
#svg5463 a.hp-active > path {
  fill: var(--hp-glow) !important;
  fill-opacity: 1 !important;
  stroke: var(--hp-glow) !important;
  stroke-opacity: 1 !important;
  filter: saturate(1.35) brightness(1.06)
          drop-shadow(0 0 1.2px var(--hp-glow))
          drop-shadow(0 0 3.5px var(--hp-glow));
}
/* colore "fluorescente" per ogni petalo (base: colore originale saturato) */
#aboutus_p  { --hp-glow: #00eaff; }
#wwu_p      { --hp-glow: #14f01a; }
#design_p   { --hp-glow: #b8ff2e; }
#products_p { --hp-glow: #f4ff1f; }
#service_p  { --hp-glow: #4fe8cc; }

/* Etichette: non intercettano il puntatore (le animazioni SMIL sono state rimosse) */
#svg5463 #aboutus > g, #svg5463 #design > g, #svg5463 #products > g,
#svg5463 #service > g, #svg5463 #wwu > g { pointer-events: none; }

/* Etichetta + linea: NASCOSTE di base; compaiono (~300 ms) solo per il petalo
   attivo (hover / focus / primo tocco su mobile) e spariscono quando lo si lascia.
   L'opacita CSS prevale sull'attributo opacity dell'SVG. */
#svg5463 #aboutus > g, #svg5463 #design > g, #svg5463 #products > g,
#svg5463 #service > g, #svg5463 #wwu > g,
#svg5463 #aboutus_r, #svg5463 #design_r, #svg5463 #products_r,
#svg5463 #service_r, #svg5463 #wwu_r { opacity: 0; transition: opacity .3s ease; }
#svg5463.hp-on-aboutus  #aboutus > g,  #svg5463.hp-on-design   #design > g,
#svg5463.hp-on-products #products > g, #svg5463.hp-on-service  #service > g,
#svg5463.hp-on-wwu      #wwu > g { opacity: .85; }
#svg5463.hp-on-aboutus  #aboutus_r,  #svg5463.hp-on-design   #design_r,
#svg5463.hp-on-products #products_r, #svg5463.hp-on-service  #service_r,
#svg5463.hp-on-wwu      #wwu_r { opacity: .5; }

/* --- 2. Riquadro testo a sinistra del simbolo --- */
#image2-33 { position: relative; }
.hp-typer {
  position: absolute;
  top: 50%;
  left: clamp(1.5rem, 3.5vw, 4.5rem);
  width: var(--hp-typer-w, 26rem);
  max-width: 30rem;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  font-family: 'Comfortaa', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: #1f2a22;
}
.hp-typer__eyebrow {
  display: block;
  font-family: 'Comfortaa', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.1;
  letter-spacing: 0;
  color: #208922;
  margin-bottom: .45rem;
  min-height: 1.8rem;
}
.hp-typer__line {
  display: block;
  font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  font-weight: 300;
  line-height: 1.5;
  min-height: 4.5em;          /* riserva 3 righe: niente salti di layout */
}
.hp-typer__caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: hp-blink 1s steps(1) infinite;
}
@keyframes hp-blink { 50% { opacity: 0; } }
.hp-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Mobile / tablet stretto: testo sopra il simbolo --- */
@media (max-width: 767.98px) {
  #image2-33 { flex-direction: column; align-items: stretch; }
  .hp-typer {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding: .25rem 1.25rem 0;
    text-align: center;
    flex-shrink: 0;
  }
  .hp-typer__eyebrow { font-size: 1.35rem; min-height: 1.5rem; margin-bottom: .2rem; }
  .hp-typer__line { font-size: 1.05rem; min-height: 2.9em; }
  #image2-33 figure { flex: 1; min-height: 0; }
}

/* --- Accessibilità: niente animazioni se l'utente le ha ridotte --- */
@media (prefers-reduced-motion: reduce) {
  #svg5463 a > path, #svg5463 g { transition: none !important; }
  .hp-typer__caret { animation: none; }
}