/* ============================================================ Eddys Development — MOTION LAYER (app pages: login + dashboard) A lighter sibling of motion.css for the non-scroll "app" screens. Pairs with js/motion-app.js (GSAP only — no Lenis/ScrollTrigger). WHY A SEPARATE FILE ------------------- On login.html, [data-reveal] already means the sign-in/sign-up CONDITIONAL FIELDS (animated via grid-template-rows in styles.css). So this file NEVER touches [data-reveal]; entrance targets opt in with a dedicated [data-enter] attribute instead. Same progressive-enhancement contract as motion.css: only carries `.motion` when the engine will actually run; if a CDN fails or reduced-motion is on, content shows normally. ============================================================ */ /* ------------------------------------------------------------ 0. PAGE TRANSITION — exit curtain (pairs with js/nav-transition.js) ------------------------------------------------------------ Mirrors motion.css so login/dashboard share the same curtain as the landing page (including the auth.js/dashboard.js sign-in / sign-out redirects, which route through window.eddysExit). */ .page-exit { position: fixed; inset: 0; z-index: 9998; /* just under #loader (9999) */ pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at 50% 42%, rgba(226, 85, 43, .18), transparent 70%), var(--bg-0); transition: opacity .4s var(--ease-soft); will-change: opacity; } .page-exit.is-active { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .page-exit { display: none; } } /* ------------------------------------------------------------ 1. PAGE LOADER — identical sleek "boot" overlay to the landing ------------------------------------------------------------ */ #loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 42%, rgba(226, 85, 43, .18), transparent 70%), var(--bg-0); will-change: opacity, transform; } html:not(.motion) #loader { display: none; } .loader-core { display: grid; justify-items: center; gap: 18px; transform: translate3d(0, 0, 0); } .loader-mark { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--violet-600), var(--magenta)); box-shadow: 0 10px 30px rgba(245, 165, 36, .5), inset 0 1px 0 rgba(255, 255, 255, .45); } .loader-mark svg { width: 30px; height: 30px; } .loader-mark::before { content: ""; position: absolute; inset: -8px; border-radius: 24px; background: conic-gradient(from 0deg, transparent 0 70%, var(--violet-bright) 88%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: loaderSpin 1.1s linear infinite; } @keyframes loaderSpin { to { transform: rotate(360deg); } } .loader-rail { position: relative; width: 180px; height: 3px; border-radius: 999px; background: rgba(245, 165, 36, .16); overflow: hidden; } .loader-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left center; transform: scaleX(0); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--magenta)); box-shadow: 0 0 14px rgba(245, 165, 36, .6); will-change: transform; } .loader-text { font: 500 12.5px var(--font-mono); letter-spacing: .04em; color: var(--faint); } .loader-text b, .loader-pct { color: var(--violet-bright); font-weight: 600; } @keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } } html.motion #loader { animation: loaderFailsafe .6s ease 5s forwards; } /* ------------------------------------------------------------ 2. ENTRANCE — hide opt-in targets so GSAP can bring them in. Uses [data-enter] (NOT [data-reveal]) to stay clear of login's conditional fields. ------------------------------------------------------------ */ html.motion [data-enter] { opacity: 0; /* GSAP owns transform during the entrance; cleared afterward. */ } /* ------------------------------------------------------------ 3. MICRO-INTERACTIONS — magnetic + glowing buttons (same as landing) ------------------------------------------------------------ */ html.motion .is-magnetic { will-change: transform; transform: translate3d(0, 0, 0); } /* chat-send isn't positioned by default — the inset glow needs it to be, and clipping keeps the radial inside the rounded button. */ html.motion .chat-send.is-magnetic { position: relative; overflow: hidden; } html.motion .btn.is-magnetic:not(.btn-ghost)::before, html.motion .chat-send.is-magnetic::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120px 120px at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .32), rgba(232, 201, 138, .12) 45%, transparent 72% ); opacity: 0; transition: opacity .25s var(--ease-soft); } html.motion .btn.is-magnetic:not(.btn-ghost):not([aria-disabled="true"]):hover::before, html.motion .chat-send.is-magnetic:not(:disabled):hover::before { opacity: 1; } html.motion .btn.is-magnetic > *, html.motion .chat-send.is-magnetic > * { position: relative; z-index: 2; } /* Animated glowing border on hover (box-shadow → no clipping issues). */ html.motion .btn.is-magnetic:not(.btn-ghost):not([aria-disabled="true"]):hover, html.motion .chat-send.is-magnetic:hover { animation: glowPulse 1.8s var(--ease-soft) infinite; } @keyframes glowPulse { 0%, 100% { box-shadow: 0 10px 26px rgba(226, 85, 43, .42), 0 0 0 1px rgba(232, 201, 138, .18); } 50% { box-shadow: 0 14px 36px rgba(245, 165, 36, .62), 0 0 22px rgba(232, 201, 138, .45); } } html.motion .btn-ghost.is-magnetic:hover { box-shadow: 0 0 0 1px var(--border-hover), 0 0 18px rgba(245, 165, 36, .28); } /* ------------------------------------------------------------ 4. PARALLAX — background imagery drifts on mouse-move. glow.js still owns the cursor halo + card spotlight on these pages, so we only drive the --px/--py drift here. ------------------------------------------------------------ */ html.motion .bg-aurora, html.motion .bg-grid, html.motion .bg-grain { will-change: transform; transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0); } /* ------------------------------------------------------------ 5. REDUCED MOTION / SAFETY ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { #loader { display: none !important; } html.motion [data-enter] { opacity: 1 !important; transform: none !important; } html.motion .is-magnetic { transform: none !important; } html.motion .btn.is-magnetic:hover, html.motion .chat-send.is-magnetic:hover { animation: none; } .loader-mark::before { animation: none; } }