/* Marchio: isola animata + logotipo (header desktop), logotipo chiaro (footer). --s = pixel per unità del disegno originale (1260x440). */
.idh-wm { --s: .27; display: inline-flex; flex-direction: column; gap: calc(6px * var(--s)); font-family: 'Montserrat', sans-serif; color: var(--wm-ink, #10233D); text-decoration: none; white-space: nowrap; }
.idh-wm-light { --wm-ink: #fff; }
.idh-wm-k { font-size: calc(66px * var(--s)); font-weight: 800; letter-spacing: calc(2.6px * var(--s)); line-height: 1.1; }
.idh-wm-n { font-family: 'Playfair Display', serif; font-size: calc(199px * var(--s)); font-weight: 900; letter-spacing: -.015em; line-height: 1; }
.idh-wm-b { display: inline-block; overflow: hidden; vertical-align: baseline; width: calc(84px * var(--s)); height: calc(84px * var(--s)); margin-left: calc(14px * var(--s)); border-radius: calc(6px * var(--s));
  background: #B8431D; color: #fff; font-family: 'Montserrat', sans-serif; font-size: calc(44px * var(--s)); font-weight: 700; line-height: calc(80px * var(--s)); letter-spacing: -.02em; text-align: center; }
.idh-wm-t { margin: calc(10px * var(--s)) 0 0 calc(2px * var(--s)); font-size: calc(43px * var(--s)); font-weight: 600; letter-spacing: calc(-1.3px * var(--s)); line-height: 1.2; }

/* Header: solo desktop, e solo quando brand.js ha montato il marchio (altrimenti resta il logo testuale del template) */
.idh-brand { display: none; }
@media (min-width: 768px) {
  .igdp-logo.idh-on > .igdp-logo-kicker, .igdp-logo.idh-on > .igdp-logo-name { display: none; }
  .igdp-logo.idh-on > .idh-brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
  .idh-brand-isle { display: block; flex: 0 0 auto; width: 92px; height: 92px; }
}

/* Footer: il logotipo chiaro sostituisce kicker, nome e slogan (lo slogan è nel logotipo) */
.igdp-footer-brand.idh-on > .igdp-footer-kicker, .igdp-footer-brand.idh-on > .igdp-footer-name, .igdp-footer-brand.idh-on > .igdp-footer-tag { display: none; }
.igdp-footer-brand .idh-wm { --s: .3; }
@media (max-width: 767px) { .igdp-footer-brand .idh-wm { --s: .26; } }

/* Isola secondo il tempo: i disegni (sereno, pioggia, mare mosso) si dissolvono l'uno nell'altro; le animazioni di quelli nascosti restano ferme */
.idh-wx { transition: opacity 1.4s ease; }
@keyframes idh-rain { from { transform: translate(0px, 0px); } to { transform: translate(-63px, 420px); } }
@keyframes idh-cloud-p { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@keyframes idh-cloud-w { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
.idh-rainA { animation: idh-rain .7s linear infinite; }
.idh-rainB { animation: idh-rain 1.1s linear infinite; }
.idh-cloudP { animation: idh-cloud-p 14s ease-in-out infinite alternate; }
.idh-cloudW { animation: idh-cloud-w 9s ease-in-out infinite alternate; }
@keyframes idh-sw0 { from { transform: translate(0px, 0px); } 50% { transform: translate(-23px, .9px); } to { transform: translate(-46px, 0px); } }
@keyframes idh-sw1 { from { transform: translate(0px, 0px); } 50% { transform: translate(-35px, 1.8px); } to { transform: translate(-70px, 0px); } }
@keyframes idh-sw2 { from { transform: translate(0px, 0px); } 50% { transform: translate(-52px, 3.1px); } to { transform: translate(-104px, 0px); } }
@keyframes idh-sw3 { from { transform: translate(0px, 0px); } 50% { transform: translate(-70px, 4.5px); } to { transform: translate(-140px, 0px); } }
@keyframes idh-sw4 { from { transform: translate(0px, 0px); } 50% { transform: translate(-90px, 5.9px); } to { transform: translate(-180px, 0px); } }
.idh-sw0 { animation: idh-sw0 2.6s linear infinite; }
.idh-sw1 { animation: idh-sw1 2.2s linear infinite; }
.idh-sw2 { animation: idh-sw2 1.9s linear infinite; }
.idh-sw3 { animation: idh-sw3 1.7s linear infinite; }
.idh-sw4 { animation: idh-sw4 1.5s linear infinite; }
.idh-brand-isle:not(.idh-m-pioggia) :is(.idh-rainA, .idh-rainB, .idh-cloudP) { animation-play-state: paused; }
.idh-brand-isle:not(.idh-m-mare-mosso) :is(.idh-cloudW, .idh-sw0, .idh-sw1, .idh-sw2, .idh-sw3, .idh-sw4) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .idh-rainA, .idh-rainB, .idh-cloudP, .idh-cloudW, .idh-sw0, .idh-sw1, .idh-sw2, .idh-sw3, .idh-sw4 { animation: none; } .idh-wx { transition: none; } }
