/* ══════════════════════════════════════════════════════════════ HOKKO AI: Intro LEGACY (portal / iris) Réactiver : remplacer hai-intro-mode-draw par hai-intro-mode-legacy sur ══════════════════════════════════════════════════════════════ */ .hai-loader--legacy { --hai-intro-dur: 3s; } .hai-loader--legacy .hai-loader__curtain { transform-origin: 50% 44%; will-change: clip-path, opacity; } .hai-loader--legacy.is-active .hai-loader__curtain { animation: hai-legacy-curtain-exit var(--hai-intro-dur) cubic-bezier(0.65, 0, 0.35, 1) forwards; } .hai-loader--legacy .hai-loader__scene { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .hai-loader--legacy .hai-loader__orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; } .hai-loader--legacy .hai-loader__orbit span { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 1px solid rgba(45, 142, 255, 0.45); opacity: 0; transform: scale(0.55); } .hai-loader--legacy.is-active .hai-loader__orbit span:nth-child(1) { animation: hai-legacy-orbit-ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; } .hai-loader--legacy.is-active .hai-loader__orbit span:nth-child(2) { animation: hai-legacy-orbit-ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards; } .hai-loader--legacy.is-active .hai-loader__orbit span:nth-child(3) { animation: hai-legacy-orbit-ring 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.88s forwards; } .hai-loader--legacy .hai-loader__mark { position: relative; margin: 0; line-height: 0; transform-origin: center center; will-change: transform, opacity, filter; } .hai-loader--legacy .hai-loader__logo { display: block; width: clamp(130px, 24vw, 200px); height: auto; transform-origin: center center; filter: drop-shadow(0 0 0 rgba(45, 142, 255, 0)); } .hai-loader--legacy.is-active .hai-loader__logo { animation: hai-legacy-logo-main var(--hai-intro-dur) cubic-bezier(0.45, 0, 0.15, 1) forwards; } .hai-loader--legacy .hai-loader__shine { position: absolute; inset: -8% -4%; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%); transform: translateX(-130%) skewX(-12deg); opacity: 0; pointer-events: none; mix-blend-mode: screen; } .hai-loader--legacy.is-active .hai-loader__shine { animation: hai-legacy-logo-shine 0.65s ease 0.95s forwards; } .hai-loader--legacy .hai-loader__label { font-family: var(--hai-fft); font-size: clamp(1.15rem, 2.6vw, 1.65rem); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hai-wh); opacity: 0; transform: translateY(10px); will-change: transform, opacity; } .hai-loader--legacy .hai-loader__label span { color: var(--hai-blue); } .hai-loader--legacy.is-active .hai-loader__label { animation: hai-legacy-label-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards, hai-legacy-label-out 0.45s ease 2.05s forwards; } @keyframes hai-legacy-logo-main { 0% { opacity: 0; transform: scale(0.72) translateY(12px); filter: drop-shadow(0 0 0 rgba(45, 142, 255, 0)); } 14% { opacity: 1; transform: scale(1) translateY(0); filter: drop-shadow(0 10px 28px rgba(45, 142, 255, 0.35)); } 28% { transform: scale(1.03) translateY(0); filter: drop-shadow(0 14px 36px rgba(45, 142, 255, 0.5)); } 38% { transform: scale(1) translateY(0); filter: drop-shadow(0 10px 28px rgba(45, 142, 255, 0.35)); } 58%, 68% { opacity: 1; transform: scale(1) translateY(0); filter: drop-shadow(0 12px 32px rgba(45, 142, 255, 0.4)); } 100% { opacity: 0; transform: scale(2.35) translateY(0); filter: drop-shadow(0 24px 48px rgba(45, 142, 255, 0.15)); } } @keyframes hai-legacy-logo-shine { 0% { opacity: 0; transform: translateX(-130%) skewX(-12deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%) skewX(-12deg); } } @keyframes hai-legacy-orbit-ring { 0% { opacity: 0; transform: scale(0.55); } 25% { opacity: 0.85; } 100% { opacity: 0; transform: scale(1.55); } } @keyframes hai-legacy-label-in { to { opacity: 1; transform: translateY(0); } } @keyframes hai-legacy-label-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes hai-legacy-curtain-exit { 0%, 62% { opacity: 1; clip-path: circle(120% at 50% 44%); } 100% { opacity: 0; clip-path: circle(0% at 50% 44%); } }