/* ========================================
   SEASONAL — accenti decorativi stagionali

   Wrapper .seasonal-deco posizionato absolute (inset:0) sopra l'hero,
   sotto al contenuto. 5 elementi sparsi con forme diverse per stagione.
   Tutti gli accenti sono opt-out: prefers-reduced-motion disabilita le
   animazioni; pointer-events:none garantisce che non rubino click.
   ======================================== */

.seasonal-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* sopra ai blob (z-index:0), sotto al contenuto (z-index:2) */
    overflow: hidden;
}

.seasonal-deco__item {
    position: absolute;
    display: block;
    will-change: transform, opacity;
}

/* Cluster in alto a destra: i 5 accenti circondano il widget meteo, evocandolo
   senza coprirlo. Area attiva: top 5-60%, right 4-30% dell'hero. */
.seasonal-deco__pos-1 { top: 5%;  right: 22%; animation-delay: 0s;    }
.seasonal-deco__pos-2 { top: 38%; right: 18%; animation-delay: -3s;   }
.seasonal-deco__pos-3 { top: 55%; right: 7%;  animation-delay: -6s;   }
.seasonal-deco__pos-4 { top: 24%; right: 30%; animation-delay: -9s;   }
.seasonal-deco__pos-5 { top: 48%; right: 28%; animation-delay: -12s;  }

/* ===== Primavera — petali rosa pastello ===== */
.seasonal-deco__petal {
    width: 18px;
    height: 22px;
    background: radial-gradient(ellipse at 30% 30%, #FFC4D4 0%, #F49EB6 70%, rgba(244,158,182,0) 100%);
    border-radius: 60% 40% 60% 40% / 70% 30% 70% 30%;
    opacity: .55;
    animation: seasonalFloat 14s ease-in-out infinite;
}
.seasonal-deco__petal.seasonal-deco__pos-2 { width: 14px; height: 18px; opacity: .45; }
.seasonal-deco__petal.seasonal-deco__pos-4 { width: 22px; height: 26px; opacity: .50; }

/* ===== Estate — raggi/onde ambra ===== */
.seasonal-deco__ray {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #FFD971 0%, rgba(255,217,113,0) 70%);
    border-radius: 50%;
    opacity: .50;
    animation: seasonalPulse 10s ease-in-out infinite;
}
.seasonal-deco__ray.seasonal-deco__pos-2 { width: 28px; height: 28px; }
.seasonal-deco__ray.seasonal-deco__pos-4 { width: 16px; height: 16px; opacity: .40; }

/* ===== Autunno — foglie ambrate ===== */
.seasonal-deco__leaf {
    width: 20px;
    height: 24px;
    background: linear-gradient(135deg, #D68B5D 0%, #B8642F 80%);
    border-radius: 50% 10% 50% 10% / 80% 20% 80% 20%;
    transform: rotate(25deg);
    opacity: .50;
    animation: seasonalFall 18s ease-in-out infinite;
}
.seasonal-deco__leaf.seasonal-deco__pos-2 { background: linear-gradient(135deg, #C9A227 0%, #8B6E1A 80%); opacity: .55; }
.seasonal-deco__leaf.seasonal-deco__pos-3 { background: linear-gradient(135deg, #A0522D 0%, #6B3410 80%); transform: rotate(-15deg); }
.seasonal-deco__leaf.seasonal-deco__pos-5 { width: 16px; height: 20px; opacity: .40; }

/* ===== Inverno — fiocchi/cristalli ===== */
.seasonal-deco__flake {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #FFFFFF 0%, #DDE9F2 70%, rgba(221,233,242,0) 100%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(221,233,242,.6);
    opacity: .65;
    animation: seasonalFall 16s ease-in-out infinite;
}
.seasonal-deco__flake.seasonal-deco__pos-2 { width: 10px; height: 10px; opacity: .50; }
.seasonal-deco__flake.seasonal-deco__pos-4 { width: 16px; height: 16px; opacity: .70; }

/* ===== Keyframes — movimenti lenti e leggeri ===== */
@keyframes seasonalFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(-12px, 8px) rotate(8deg); }
    66%      { transform: translate(6px, -10px) rotate(-6deg); }
}

@keyframes seasonalPulse {
    0%, 100% { transform: scale(1);    opacity: var(--pulse-min, .35); }
    50%      { transform: scale(1.25); opacity: var(--pulse-max, .60); }
}

@keyframes seasonalFall {
    0%       { transform: translate(0, -10px) rotate(0deg);    opacity: 0; }
    10%      { opacity: .55; }
    50%      { transform: translate(-8px, 12px) rotate(15deg); }
    90%      { opacity: .55; }
    100%     { transform: translate(4px, 30px) rotate(-10deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-deco__item { animation: none; }
}

/* Sotto md riduciamo gli accenti per non affollare lo spazio mobile. */
@media (max-width: 767.98px) {
    .seasonal-deco__pos-4,
    .seasonal-deco__pos-5 { display: none; }
}

/* ========================================
   SEASONAL WIDGET — pillola meteo + card hover (stile Win11)

   Trigger sempre visibile (icona + temperatura). Hover/focus-within espande
   la card sotto al trigger. Dati live caricati da seasonal-weather.js al
   primo hover, poi cache localStorage. Niente JS richiesto per mostrare la
   forma vuota (placeholder "—°").
   ======================================== */

.seasonal-widget {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3; /* sopra deco (1), sopra contenuto hero (2) — è la sola area cliccabile dell'overlay */
    pointer-events: auto;
}

.seasonal-widget__trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #1f2937;
}

.seasonal-widget__trigger:hover,
.seasonal-widget__trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .92);
    outline: none;
}

.seasonal-widget__trigger-icon {
    font-size: 1.1rem;
    color: #B8262F;
}

.seasonal-widget__trigger-temp {
    letter-spacing: -.01em;
}

/* Card meteo — espansa al hover/focus del wrapper */
.seasonal-widget__card {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    width: 260px;
    padding: 1rem 1.1rem 1.1rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
    opacity: 0;
    transform: translateY(-6px) scale(.97);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    font-family: 'Inter', sans-serif;
}

.seasonal-widget:hover .seasonal-widget__card,
.seasonal-widget:focus-within .seasonal-widget__card {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.seasonal-widget__location {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .9rem;
}

.seasonal-widget__main {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem;
}

.seasonal-widget__icon-big {
    font-size: 2.6rem;
    color: #B8262F;
    width: 48px;
    text-align: center;
    flex: 0 0 48px;
}

.seasonal-widget__temp-big {
    font-family: 'Poppins', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    letter-spacing: -.02em;
}

.seasonal-widget__desc {
    font-size: .9rem;
    color: #4b5563;
    margin-top: .15rem;
}

.seasonal-widget__minmax {
    display: flex;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(15, 23, 42, .06);
    font-size: .85rem;
    color: #4b5563;
}

.seasonal-widget__minmax strong {
    color: #111827;
    font-weight: 600;
    margin-left: .2rem;
}

.seasonal-widget__footer {
    margin-top: .75rem;
    font-size: .7rem;
    color: #9ca3af;
    text-align: right;
}

.seasonal-widget__footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #d1d5db;
}

.seasonal-widget--loading .seasonal-widget__temp-big,
.seasonal-widget--loading .seasonal-widget__trigger-temp {
    opacity: .4;
}

@media (max-width: 767.98px) {
    .seasonal-widget { top: 1rem; right: 1rem; }
    .seasonal-widget__card { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-widget__trigger,
    .seasonal-widget__card { transition: none; }
}

/* ========================================
   SALUTO HOME ASSICURATO — accent sottile per fascia oraria
   ======================================== */
.greeting-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem;
}

.greeting-period {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    font-weight: 500;
    padding: .25rem .75rem;
    border-radius: 999px;
    line-height: 1;
}

.greeting-period[data-period="morning"]   { color: #B8642F; background: rgba(255, 217, 113, .18); }
.greeting-period[data-period="afternoon"] { color: #A65A2A; background: rgba(255, 152, 0,   .12); }
.greeting-period[data-period="evening"]   { color: #4A5275; background: rgba(74,  82, 117, .10); }
.greeting-period[data-period="night"]     { color: #3A3F5C; background: rgba(58,  63, 92,  .10); }

.greeting-period i { font-size: 1.05rem; }

/* Widget meteo nella HomeAssicurato: ancorato all'angolo del greeting-wrap,
   niente offset (al contrario dell'hero della landing, che ha respiro interno). */
.seasonal-widget-anchor .seasonal-widget {
    top: 0;
    right: 0;
}

/* Accessibilità: focus visibile sul trigger del widget meteo (era outline:none). */
.seasonal-widget__trigger:focus-visible {
    outline: 2px solid #B8262F;
    outline-offset: 2px;
}