/**
 * Imperial House Real Estate — animazioni
 * Keyframes e utility per le rivelazioni a scroll. Rispetta sempre
 * prefers-reduced-motion (vedi anche il reset globale in reset.css).
 *
 * Pattern "reveal" a prova di JS assente/fallito: il contenuto è visibile
 * di default; solo quando main.js conferma di essere partito (classe
 * "js-ready" su <html>) gli elementi .reveal assumono lo stato iniziale
 * nascosto, pronto per l'animazione di comparsa via IntersectionObserver.
 */

@keyframes scrollHintBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(6px); opacity: 1; }
}

.reveal {
    opacity: 1;
    transform: none;
}

.js-ready .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--duration-slow) var(--ease-default),
                transform var(--duration-slow) var(--ease-default);
}

.js-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-ready .reveal--stagger.is-visible {
    transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
    .js-ready .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .room__scroll-hint svg {
        animation: none;
    }
}


/* ============================================================
   Imperial House — cinematic logo/window opening
   The same home video is visible through the IH window while
   the logo composes; the curtains then open to the real home.
   ============================================================ */
@media(max-width:700px){
  .site-intro--window .site-intro__composition{
    width:min(92vw,720px);
    height:calc(min(92vw,720px) * 446 / 1111);
  }
}
@media(prefers-reduced-motion:reduce){
  .site-intro--window{display:none}
  body.intro-active{overflow:auto}
}

/*
 * Imperial House — intro premium, elegante per sottrazione
 *
 * Niente traslazioni, zoom drammatici o fori che si allargano: il logo si
 * compone (vedi i 3 pezzi più sotto), tiene una pausa per essere letto,
 * poi si dissolve tutto insieme con un leggero "respiro" (una scala
 * minima verso l'esterno) — e solo con un lieve ritardo, mentre il logo
 * sta ancora finendo di sparire, lo sfondo nero pieno della radice si
 * dissolve a sua volta rivelando la home vera. Tempi coordinati con le
 * costanti in cima a js/intro.js; la classe "is-open" (il taglio finale)
 * scatta solo 250ms DOPO che tutte le transizioni si sono già esaurite —
 * un margine di sicurezza ampio, cosicché un rallentamento del thread
 * principale non lasci mai l'intro visibile a metà quando la home appare.
 */
.site-intro--window{
 position:fixed;inset:0;z-index:100000;overflow:hidden;
 background:#111111;display:flex;align-items:center;justify-content:center;
 pointer-events:auto;opacity:1;visibility:visible;
}
.site-intro__composition{
 /* Altezza calcolata esplicitamente (stesso rapporto di prima, 1111/446)
    invece di "aspect-ratio", per coerenza con com'era stata risolta in
    passato una resa instabile durante una precedente versione con
    transizioni di dimensione — qui .site-intro__composition non cambia
    più dimensione durante l'intro (si dissolve soltanto), ma l'altezza
    esplicita resta comunque il modo più solido per dimensionarla. */
 position:relative;width:min(72vw,1110px);height:calc(min(72vw,1110px) * 446 / 1111);
 transform:translateZ(0);will-change:width,height,opacity;
}
.site-intro__window{
 position:absolute;left:0;top:0;width:35.55%;height:100%;
 overflow:hidden;background:#111111;z-index:1;
 opacity:0;transform:scale(.97);clip-path:inset(7.8% 100% 7.6% 1.7%);
 transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1),clip-path 1s cubic-bezier(.22,1,.36,1);
}
.site-intro--window.is-composing .site-intro__window{
 opacity:1;transform:scale(1);clip-path:inset(7.8% 2% 7.6% 1.7%);
}
.site-intro__window-media{
 /* Una sfocatura sfuma naturalmente "verso il nulla" esattamente al
    proprio bordo, se quel bordo coincide con quello del riquadro —
    l'effetto percepito è di un'immagine che si schiarisce/sbiadisce
    proprio lì, letto come "l'immagine esce dai margini". La versione
    precedente compensava con "transform:scale(1.04)" per dare alla
    sfocatura un margine di immagine vera da cui attingere, ma quello
    stesso transform, insieme al filtro, non veniva sempre ritagliato in
    modo affidabile dal semplice "overflow:hidden" del genitore
    (.site-intro__window) — la sfocatura tornava a "sbordare", stavolta
    davvero oltre il bordo. Qui l'ingrandimento è ottenuto con
    posizione/dimensioni (un vero overscan nel layout), non con un
    transform: l'"overflow:hidden" del genitore lo ritaglia in modo
    affidabile — è il caso più elementare e universalmente supportato
    del ritaglio CSS — mentre il margine di immagine vera evita comunque
    lo sbiadimento della sfocatura al bordo. */
 position:absolute;left:-4%;top:-4%;width:108%;height:108%;object-fit:cover;
 filter:blur(10px);display:block;
 will-change:filter;
}
/* Tinta scura non attivata nell'attuale sequenza (la composizione si
   dissolve tutta insieme, non c'è più un momento in cui la sola foto
   resta visibile e deve scurirsi per combaciare con la home): la regola
   resta qui, a opacity 0, come predisposizione per un'eventuale ripresa
   futura di quell'effetto — rimuoverla non è necessario, non ha alcun
   costo visivo restando inerte. */
.site-intro__tint{
 position:absolute;inset:0;z-index:2;opacity:0;
 background:linear-gradient(180deg, rgba(20,19,17,0.28) 0%, rgba(20,19,17,0.62) 100%);
 will-change:opacity;
}
.site-intro__piece{
 position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;
 opacity:0;will-change:transform,opacity;
}
.site-intro__piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.site-intro__piece--left{clip-path:inset(0 64.3% 0 0);transform:translateY(-70px)}
.site-intro__piece--right{clip-path:inset(0 0 0 45.5%);transform:translateY(-70px)}
.site-intro__piece--bar{clip-path:inset(0 54% 0 44.8%);transform:translateY(70px)}

/*
 * L'opacity/transform dei 3 pezzi (composizione E apertura) è pilotata da
 * js/intro.js via stile inline, non da classi condizionali qui. Motivo
 * originale del bug ("il logo resta sovrapposto"): le vecchie regole
 * usavano "animation:... forwards" per la composizione — un'animazione
 * con fill-mode:forwards resta attiva (e ha priorità sulla proprietà)
 * anche a riproduzione conclusa, finché la classe che la innesca è
 * presente sull'elemento, impedendo per sempre a qualunque transition
 * successiva sulla stessa proprietà di funzionare: i pezzi non si
 * dissolvevano mai gradualmente, sparivano solo di scatto insieme al
 * taglio finale. Pilotarli via stile inline elimina il problema alla
 * radice (nessuna animazione, nessuna competizione fra regole CSS di
 * pari specificità). Le regole qui sopra restano solo come stato
 * iniziale prima che il JS intervenga.
 */

/*
 * Fasi finali (is-dissolving / is-revealing): la composizione (finestra+
 * "IH"+linea+testo, come un unico elemento) si dissolve con un leggero
 * "respiro" verso l'esterno; con un lieve ritardo lo sfondo nero pieno
 * della radice si dissolve a sua volta, rivelando la home vera. Vedi
 * js/intro.js per la sequenza completa — nessuna regola qui per queste
 * due fasi: entrambe le dissolvenze sono pilotate via stile inline
 * direttamente da JS (opacity/transform sulla composizione,
 * background-color sulla radice).
 */

.site-intro--window.is-open{visibility:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
body.intro-active{overflow:hidden}
body.intro-active .site-header,
body.intro-active .building .room__content,
body.intro-active .building .room__scroll-hint{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
body.intro-complete .site-header,
body.intro-complete .building .room__content,
body.intro-complete .building .room__scroll-hint{visibility:visible}
body.intro-complete .building .room__content{opacity:1}