/* ========================================================================== Login 3D Intro (Corporate VIP) — UI-only layer for index.php -------------------------------------------------------------------------- Zero coupling with auth logic. This file only styles a cosmetic intro overlay + a glassmorphism upgrade for the existing .login-box. FAIL-SAFE CONTRACT (never block the login form): - The overlay is display:none by default. - It is shown ONLY when has the class .login-intro-boot, which is added by a tiny inline try/catch script in when the intro has not been seen this session. - Even if login-3d-vip.js fails to load entirely, pure-CSS "safety" animations force the overlay to fade out and the form to appear (~7s). login-3d-vip.js normally finishes much earlier (2.5–3.5s) and adds .login-intro-finished on , which overrides the safety nets. ========================================================================== */ :root { --alb-navy-1: #050b18; --alb-navy-2: #081326; --alb-navy-3: #0b1e38; --alb-cyan: #22d3ee; --alb-teal: #2dd4bf; --alb-sky: #38bdf8; --alb-violet: #818cf8; --alb-ink: #e6f6ff; --alb-muted: rgba(198, 224, 240, 0.72); } /* -------------------------------------------------------------------------- 1) OVERLAY — hidden by default (fail-safe) -------------------------------------------------------------------------- */ .login-intro-overlay { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(1200px 800px at 50% 22%, rgba(34, 211, 238, 0.16), transparent 60%), radial-gradient(900px 700px at 82% 88%, rgba(45, 212, 191, 0.14), transparent 62%), radial-gradient(800px 700px at 15% 85%, rgba(129, 140, 248, 0.12), transparent 60%), linear-gradient(160deg, var(--alb-navy-1) 0%, var(--alb-navy-2) 46%, var(--alb-navy-3) 100%); -webkit-user-select: none; user-select: none; } /* Show the overlay only during the boot window */ html.login-intro-boot .login-intro-overlay { display: flex; /* CSS-only ultimate safety: fade the overlay out no matter what (~7s). */ animation: albIntroSafetyHide 700ms ease 7000ms forwards; } /* JS-controlled finish overrides the safety animation and fades immediately */ body.login-intro-finished .login-intro-overlay { animation: none !important; opacity: 0; visibility: hidden; filter: blur(10px); pointer-events: none; transition: opacity 0.75s ease, filter 0.75s ease, visibility 0s 0.75s; } /* subtle vignette + film grain-ish sheen */ .login-intro-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; z-index: 3; } /* -------------------------------------------------------------------------- 2) FLOATING ORBS + HALO -------------------------------------------------------------------------- */ .login-intro-orb { position: absolute; border-radius: 50%; filter: blur(38px); opacity: 0.55; pointer-events: none; z-index: 1; will-change: transform; } .login-intro-orb--1 { width: 340px; height: 340px; top: -60px; inset-inline-start: -70px; background: radial-gradient(circle at 30% 30%, var(--alb-cyan), transparent 70%); animation: albOrbFloat 16s ease-in-out infinite; } .login-intro-orb--2 { width: 300px; height: 300px; bottom: -80px; inset-inline-end: -60px; background: radial-gradient(circle at 60% 40%, var(--alb-teal), transparent 70%); animation: albOrbFloat 20s ease-in-out infinite reverse; } .login-intro-orb--3 { width: 260px; height: 260px; top: 40%; inset-inline-end: 12%; background: radial-gradient(circle at 50% 50%, var(--alb-violet), transparent 72%); animation: albOrbFloat 24s ease-in-out infinite; opacity: 0.4; } .login-intro-halo { position: absolute; top: 50%; inset-inline-start: 50%; width: 560px; height: 560px; transform: translate(-50%, -58%); border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, 0.28) 0%, rgba(45, 212, 191, 0.12) 38%, transparent 68%); filter: blur(6px); z-index: 1; pointer-events: none; animation: albHaloPulse 4.5s ease-in-out infinite; } /* RTL: translateX sign flips because we anchor with start */ html[dir="rtl"] .login-intro-halo { transform: translate(50%, -58%); } /* -------------------------------------------------------------------------- 3) PARTICLES CANVAS (drawn by JS; purely decorative) -------------------------------------------------------------------------- */ .login-intro-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* -------------------------------------------------------------------------- 4) STAGE (logo + brand + loading + skip) -------------------------------------------------------------------------- */ .login-intro-stage { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; perspective: 1100px; } .login-intro-visual { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; animation: albModelEnter 1200ms cubic-bezier(0.16, 0.84, 0.28, 1) both, albModelFloat 6s ease-in-out 1200ms infinite; } /* PNG fallback: shown instantly, faux-3D motion until GLB is ready */ .login-intro-fallback { width: 200px; height: auto; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(34, 211, 238, 0.35)); transform: rotateY(0deg); animation: albFauxSpin 7s ease-in-out infinite; transition: opacity 0.6s ease; will-change: transform; } /* light sweep across the fallback logo */ .login-intro-visual::after { content: ''; position: absolute; top: 8%; inset-inline-start: -40%; width: 45%; height: 84%; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%); filter: blur(6px); transform: skewX(-18deg); animation: albLightSweep 4.5s ease-in-out infinite; pointer-events: none; z-index: 5; mix-blend-mode: screen; } /* the actual 3D model — hidden until JS confirms the GLB loaded */ .login-intro-model { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; background: transparent; --poster-color: transparent; transition: opacity 0.8s ease; pointer-events: none; } .login-intro-visual.is-3d-ready .login-intro-model { opacity: 1; } .login-intro-visual.is-3d-ready .login-intro-fallback { opacity: 0; } .login-intro-brand { margin-top: 26px; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 0.4px; color: var(--alb-ink); text-shadow: 0 2px 18px rgba(34, 211, 238, 0.45); opacity: 0; animation: albRiseIn 900ms ease 400ms forwards; } .login-intro-sub { margin-top: 8px; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 2px; color: var(--alb-muted); text-transform: uppercase; opacity: 0; animation: albRiseIn 900ms ease 650ms forwards; } /* loading line (indeterminate shimmer) */ .login-intro-loading { position: relative; margin-top: 26px; width: 190px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; opacity: 0; animation: albRiseIn 700ms ease 850ms forwards; } .login-intro-loading::before { content: ''; position: absolute; top: 0; inset-inline-start: -40%; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--alb-cyan), var(--alb-teal), transparent); animation: albLoadingSlide 1.4s ease-in-out infinite; } /* skip button (centered bottom, symmetric for RTL/LTR) */ .login-intro-skip { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: 13px; font-weight: 600; color: var(--alb-ink); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; animation: albRiseIn 700ms ease 1100ms forwards; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .login-intro-skip:hover { background: rgba(34, 211, 238, 0.16); border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 22px rgba(34, 211, 238, 0.35); transform: translateX(-50%) translateY(-2px); } .login-intro-skip:active { transform: translateX(-50%) translateY(0); } .login-intro-skip:focus-visible { outline: 2px solid var(--alb-cyan); outline-offset: 3px; } /* -------------------------------------------------------------------------- 5) FORM REVEAL — during boot the form is prepared off-stage, then revealed -------------------------------------------------------------------------- */ html.login-intro-boot .login-container { opacity: 0; transform: translateY(34px) scale(0.985); filter: blur(6px); /* CSS-only ultimate safety: reveal the form even if JS never runs (~7s). */ animation: albRevealFormFallback 800ms ease 7100ms forwards; } body.login-intro-finished .login-container { animation: none !important; opacity: 1; transform: none; filter: none; transition: opacity 0.85s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.85s ease; } body.login-intro-active { overflow: hidden; } /* -------------------------------------------------------------------------- 6) EXECUTIVE GLASSMORPHISM — overrides for the existing .login-box (written here as overrides; index.php inline styles are untouched) -------------------------------------------------------------------------- */ body .login-box { background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 24px 70px rgba(4, 12, 28, 0.28), 0 10px 34px rgba(31, 38, 135, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* refined top sheen */ body .login-box::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.9), rgba(45, 212, 191, 0.9), transparent); opacity: 0.75; z-index: 1; pointer-events: none; } /* stronger focus glow on inputs */ body .form-control:focus { border-color: rgba(34, 211, 238, 0.65); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18), 0 8px 22px rgba(34, 211, 238, 0.12); } /* button shimmer */ body .btn-primary-login { position: relative; overflow: hidden; } body .btn-primary-login::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: none; } body .btn-primary-login:hover::before { animation: albBtnShimmer 0.9s ease; } /* focus micro-animation hook (JS toggles .alb-focus on the field wrapper) */ body .login-box form .mb-4 { transition: transform 0.25s ease; } body .login-box form .mb-4.alb-focus { transform: translateY(-1px); } body .login-box form .mb-4.alb-focus .form-label { color: #0e7490; letter-spacing: 0.3px; transition: color 0.25s ease, letter-spacing 0.25s ease; } /* non-blocking submit state (JS toggles .is-submitting; does NOT disable) */ body .btn-primary-login.is-submitting { pointer-events: none; opacity: 0.92; } body .btn-primary-login.is-submitting .alb-btn-label { opacity: 0.85; } body .btn-primary-login .alb-btn-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; margin-inline-end: 8px; animation: albSpin 0.7s linear infinite; } body .btn-primary-login.is-submitting .alb-btn-spinner { display: inline-block; } /* -------------------------------------------------------------------------- 7) KEYFRAMES -------------------------------------------------------------------------- */ @keyframes albIntroSafetyHide { to { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes albRevealFormFallback { to { opacity: 1; transform: none; filter: none; } } @keyframes albModelEnter { 0% { opacity: 0; transform: scale(0.7) translateY(18px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes albModelFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes albFauxSpin { 0% { transform: rotateY(-16deg) rotateX(4deg); } 50% { transform: rotateY(16deg) rotateX(-3deg); } 100% { transform: rotateY(-16deg) rotateX(4deg); } } @keyframes albLightSweep { 0% { inset-inline-start: -45%; opacity: 0; } 35% { opacity: 0.9; } 70% { inset-inline-start: 120%; opacity: 0; } 100% { inset-inline-start: 120%; opacity: 0; } } @keyframes albOrbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -22px) scale(1.08); } } @keyframes albHaloPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } @keyframes albRiseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes albLoadingSlide { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } } @keyframes albBtnShimmer { 0% { left: -60%; } 100% { left: 130%; } } @keyframes albSpin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 8) RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .login-intro-visual { width: 200px; height: 200px; } .login-intro-fallback { width: 152px; } .login-intro-brand { font-size: 24px; margin-top: 20px; } .login-intro-sub { font-size: 13px; letter-spacing: 1.5px; } .login-intro-halo { width: 380px; height: 380px; } .login-intro-orb--1 { width: 240px; height: 240px; } .login-intro-orb--2 { width: 220px; height: 220px; } .login-intro-orb--3 { display: none; } .login-intro-loading { width: 150px; } .login-intro-skip { bottom: 24px; } } /* -------------------------------------------------------------------------- 9) REDUCED MOTION — kill spins/particles, keep a quick, calm reveal -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .login-intro-orb, .login-intro-halo, .login-intro-visual, .login-intro-fallback, .login-intro-visual::after, .login-intro-loading::before, body .btn-primary-login:hover::before { animation: none !important; } .login-intro-brand, .login-intro-sub, .login-intro-loading, .login-intro-skip { opacity: 1; animation: none !important; } .login-intro-fallback { transform: none !important; } /* shorten the whole thing: overlay fades quickly, form appears quickly */ html.login-intro-boot .login-intro-overlay { animation: albIntroSafetyHide 320ms ease 1500ms forwards; } html.login-intro-boot .login-container { animation: albRevealFormFallback 320ms ease 1550ms forwards; } }