/** * 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 ) 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__window-video-wrap, .site-intro--window .site-intro__logo-wrap{ width:min(92vw,720px); } .site-intro--window .site-intro__window-video-wrap{ clip-path:inset(0 64.6% 0 0); } } @media(prefers-reduced-motion:reduce){ .site-intro--window{display:none} body.intro-active{overflow:auto} } /* Imperial House โ€” seamless intro */ .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{ position:relative;width:min(72vw,1110px);aspect-ratio:1111/446; transform:translateZ(0);will-change:width,height; } .site-intro__window{ position:absolute;left:0;top:0;width:35.55%;height:100%; overflow:hidden;clip-path:inset(7.8% 2% 7.6% 1.7%); background:#111111;opacity:0;transform:scale(.97);z-index:1; } .site-intro__window-video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:blur(10px);transform:scale(1.04);display:block; will-change:filter,transform; } .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)} .site-intro--window.is-composing .site-intro__window{animation:ihWindow .9s cubic-bezier(.22,1,.36,1) forwards} .site-intro--window.is-composing .site-intro__piece--left, .site-intro--window.is-composing .site-intro__piece--right{animation:ihTop .95s cubic-bezier(.16,1,.3,1) .08s forwards} .site-intro--window.is-composing .site-intro__piece--bar{animation:ihBottom .8s cubic-bezier(.16,1,.3,1) .16s forwards} @keyframes ihWindow{from{opacity:0;transform:scale(.97);clip-path:inset(7.8% 100% 7.6% 1.7%)}to{opacity:1;transform:scale(1);clip-path:inset(7.8% 2% 7.6% 1.7%)}} @keyframes ihTop{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:translateY(0)}} @keyframes ihBottom{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}} .site-intro--window.is-opening{background:transparent;transition:background 1.35s cubic-bezier(.65,0,.35,1)} .site-intro--window.is-opening .site-intro__composition{width:100vw;height:100vh;aspect-ratio:auto;transition:width 1.35s cubic-bezier(.65,0,.35,1),height 1.35s cubic-bezier(.65,0,.35,1)} .site-intro--window.is-opening .site-intro__window{ left:0;top:0;width:100vw;height:100vh;clip-path:inset(0);opacity:1;transform:scale(1); transition:all 1.35s cubic-bezier(.65,0,.35,1); } .site-intro--window.is-opening .site-intro__window-video{ filter:blur(0);transform:scale(1);transition:filter 1.35s cubic-bezier(.65,0,.35,1),transform 1.35s cubic-bezier(.65,0,.35,1) } .site-intro--window.is-opening .site-intro__piece{opacity:0;transition:opacity .5s ease .45s} .site-intro--window.is-opening .site-intro__piece--left{transform:translateX(-10vw);transition:transform 1.35s cubic-bezier(.65,0,.35,1),opacity .5s ease .45s} .site-intro--window.is-opening .site-intro__piece--right{transform:translateX(10vw);transition:transform 1.35s cubic-bezier(.65,0,.35,1),opacity .5s ease .45s} .site-intro--window.is-opening .site-intro__piece--bar{transform:translateY(10vh);transition:transform 1.35s cubic-bezier(.65,0,.35,1),opacity .5s ease .45s} .site-intro--window.is-open{visibility:hidden;pointer-events:none;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s} 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}