:root { --card: #fffcf5; --ring: #a67c52; --input: #dbd0ba; --muted: #ece5d8; --accent: #d4c8aa; --border: #dbd0ba; --radius: 0.25rem; --chart-1: #a67c52; --chart-2: #8d6e4c; --chart-3: #735a3a; --chart-4: #b3906f; --chart-5: #c0a080; --popover: #fffcf5; /* NOTE: --primary is the shadcn/ui theming variable (coffee/brown palette) consumed by components/ui/button, badge, modern-timeline, etc. The AsianZodiac brand color is `brand-primary` (Obsidian Gold — #B8860B light / #B8860B dark) in tailwind config. Do NOT use --primary for brand-styled elements. */ --primary: #a67c52; --sidebar: #ece5d8; --font-mono: IBM Plex Mono, monospace; --font-sans: Libre Baskerville, serif; --secondary: #e2d8c3; --background: #f5f1e6; --font-serif: Lora, serif; --foreground: #4a3f35; --destructive: #b54a35; --shadow-blur: 5px; --shadow-color: hsl(28 13% 20%); --sidebar-ring: #a67c52; --shadow-spread: 0px; --shadow-opacity: 0.12; --sidebar-accent: #d4c8aa; --sidebar-border: #dbd0ba; --card-foreground: #4a3f35; --shadow-offset-x: 2px; --shadow-offset-y: 3px; --sidebar-primary: #a67c52; --muted-foreground: #7d6b56; --accent-foreground: #4a3f35; --popover-foreground: #4a3f35; --primary-foreground: #ffffff; --sidebar-foreground: #4a3f35; --secondary-foreground: #5c4d3f; --destructive-foreground: #ffffff; --sidebar-accent-foreground: #4a3f35; --sidebar-primary-foreground: #ffffff; --success: #16a34a; --success-foreground: #ffffff; --warning: #f59e0b; --warning-foreground: #ffffff; } .dark { --card: #3a322c; --ring: #c0a080; --input: #4a4039; --muted: #3a322c; --accent: #59493e; --border: #4a4039; --radius: 0.25rem; --chart-1: #c0a080; --chart-2: #b3906f; --chart-3: #a67c52; --chart-4: #8d6e4c; --chart-5: #735a3a; --popover: #3a322c; --primary: #c0a080; --sidebar: #2d2621; --secondary: #4a4039; --background: #2d2621; --foreground: #ece5d8; --destructive: #b54a35; --sidebar-ring: #c0a080; --sidebar-accent: #59493e; --sidebar-border: #4a4039; --card-foreground: #ece5d8; --sidebar-primary: #c0a080; --muted-foreground: #c5bcac; --accent-foreground: #ece5d8; --popover-foreground: #ece5d8; --primary-foreground: #2d2621; --sidebar-foreground: #ece5d8; --secondary-foreground: #ece5d8; --destructive-foreground: #ffffff; --sidebar-accent-foreground: #ece5d8; --sidebar-primary-foreground: #2d2621; --success: #22c55e; --success-foreground: #000000; --warning: #fbbf24; --warning-foreground: #000000; } @theme inline { --color-card: var(--card); --color-ring: var(--ring); --color-input: var(--input); --color-muted: var(--muted); --color-accent: var(--accent); --color-border: var(--border); --color-radius: var(--radius); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-popover: var(--popover); --color-primary: var(--primary); --color-sidebar: var(--sidebar); --color-font-mono: var(--font-mono); --color-font-sans: var(--font-sans); --color-secondary: var(--secondary); --color-background: var(--background); --color-font-serif: var(--font-serif); --color-foreground: var(--foreground); --color-destructive: var(--destructive); --color-shadow-blur: var(--shadow-blur); --color-shadow-color: var(--shadow-color); --color-sidebar-ring: var(--sidebar-ring); --color-shadow-spread: var(--shadow-spread); --color-shadow-opacity: var(--shadow-opacity); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-border: var(--sidebar-border); --color-card-foreground: var(--card-foreground); --color-shadow-offset-x: var(--shadow-offset-x); --color-shadow-offset-y: var(--shadow-offset-y); --color-sidebar-primary: var(--sidebar-primary); --color-muted-foreground: var(--muted-foreground); --color-accent-foreground: var(--accent-foreground); --color-popover-foreground: var(--popover-foreground); --color-primary-foreground: var(--primary-foreground); --color-sidebar-foreground: var(--sidebar-foreground); --color-secondary-foreground: var(--secondary-foreground); --color-destructive-foreground: var(--destructive-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); } /* ── PHASE D: GOLD THREAD (page-wide visual through-line) ── Vertical gold gradient pinned to right edge of viewport on desktop. Height grows with --page-progress (0→1) updated by useBlockScrollProgress. Acts as both a progress indicator AND a luxury motif tying every block together. Hidden on mobile (right-edge clutter) and reduced-motion. */ .gold-thread { position: fixed; top: 0; right: 18px; width: 1px; height: 100vh; background: linear-gradient( 180deg, transparent 0%, rgba(184, 134, 11, 0.55) 18%, rgba(184, 134, 11, 0.85) 50%, rgba(184, 134, 11, 0.55) 82%, transparent 100% ); transform-origin: top center; transform: scaleY(var(--page-progress, 0)); z-index: 30; pointer-events: none; will-change: transform; } .gold-thread::before, .gold-thread::after { /* Soft glow halo to sell the "molten gold" feel */ content: ''; position: absolute; inset: -2px -3px; background: inherit; filter: blur(2.5px); opacity: 0.55; } @media (max-width: 1023px) { .gold-thread { display: none; } } @media (prefers-reduced-motion: reduce) { .gold-thread { transform: scaleY(1); opacity: 0.4; } } /* ── PHASE D: MOBILE TAP MICRO-FEEDBACK ───────────────────── Small scale pulse on touch tap to compensate for missing hover state. Only applies on touch-only devices (`hover: none`). */ @media (hover: none) and (pointer: coarse) { html.snap-landing button, html.snap-landing a[role="button"], html.snap-landing [data-tap-feedback="true"] { transition: transform 0.14s cubic-bezier(0.22, 0.61, 0.36, 1); } html.snap-landing button:active, html.snap-landing a[role="button"]:active, html.snap-landing [data-tap-feedback="true"]:active { transform: scale(0.96); } } @media (prefers-reduced-motion: reduce) { html.snap-landing button, html.snap-landing a[role="button"] { transition: none !important; } } /* ── PHASE C: VIEW TRANSITIONS (theme crossfade) ────────── Chrome 111+ / Safari 18+. ThemeToggle wraps the class swap in document.startViewTransition(), browser produces a fade between the captured "old" snapshot and the new render. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ── PHASE C: HERO CURTAIN ──────────────────────────────── First-paint reveal — covers the hero with the dark theme color until LandingPage mounts, then "lifts" with clip-path inset. Body bg is the same dark obsidian so there's no flash before React mounts. `.hero-curtain` is rendered by LandingPage and animates only on first page load (not on rerenders — animation runs once via `forwards`). */ .hero-curtain { position: fixed; inset: 0; background: #f8f6f6; z-index: 200; pointer-events: none; animation: hero-curtain-out 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards; } .dark .hero-curtain { background: #1a1514; } @keyframes hero-curtain-out { 0% { opacity: 1; clip-path: inset(0 0 0 0); } 55% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 100% 0); } } @media (prefers-reduced-motion: reduce) { .hero-curtain { animation: hero-curtain-out-reduced 220ms ease-out forwards; } @keyframes hero-curtain-out-reduced { from { opacity: 1; } to { opacity: 0; } } } /* ── FULL-PAGE SCROLL SNAP — DISABLED (Sprint May 2026) ── Removed because the proximity snap + wheel hijack made mobile scroll feel sticky/laggy and on iOS Safari outright trapped users in the Hero (touch-y events were captured by the snap container before they could bubble up to scroll the body). Landing page is performant enough on desktop that we no longer need the snap to land cleanly on blocks. Class `.snap-block` and `.snap-landing` are kept because they're load- bearing for entrance animations + parallax (.is-visible / .is-leaving), but no scroll-snap CSS is applied any more. */ html.snap-landing .snap-block { scroll-margin-top: 0; /* Entrance animation — opacity + translateY + scale, JS toggles .is-visible. Transform doesn't affect layout so snap math is unchanged. Stronger motion (80px + 0.97 scale) so the fade-in is unmistakable. */ opacity: 0; transform: translate3d(0, 80px, 0) scale(0.97); transform-origin: center top; transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity, transform; } html.snap-landing .snap-block.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* ── PHASE A: STAGGER CHOREOGRAPHY ──────────────────────── Children inside a snap-block can opt into staggered entrance by adding .snap-stagger-child class + inline style="--stagger-idx: N". Each child cascades in with delay = base + idx * step. Parent must have .is-visible class for transition to fire. */ html.snap-landing .snap-stagger-child { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--stagger-base, 120ms) + var(--stagger-idx, 0) * var(--stagger-step, 90ms)); will-change: opacity, transform; } html.snap-landing .snap-block.is-visible .snap-stagger-child { opacity: 1; transform: translate3d(0, 0, 0); } /* Word-level reveal — for headlines. wraps each word in a span.snap-split-word with --word-idx. Words rise + un-blur in sequence. Tighter timing than block stagger since words are quick. */ .snap-split-word { display: inline-block; opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px); transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.55s ease-out; transition-delay: calc(var(--word-base, 200ms) + var(--word-idx, 0) * 70ms); will-change: opacity, transform, filter; } html.snap-landing .snap-block.is-visible .snap-split-word { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); } /* ── PHASE B: BACKGROUND PARALLAX & OUTGOING TRANSITION ── --block-progress is updated by rAF in LandingPage: negative = block still below viewport 0 = block top reached viewport top +1 = block bottom reached viewport top (fully past) parallax-bg translates at ~0.4x scroll speed — depth without WebGL. FALLBACK path (browsers without `animation-timeline: view()`): JS writes `--block-progress` each rAF tick from getBoundingClientRect. Works everywhere, but costs a layout read per block per frame. MODERN path (Chrome 115+, Edge 115+, Safari 26+): the @supports block below uses scroll-driven CSS animations. The browser samples the timeline on the compositor thread, no JS, no forced layout. The keyframe range matches the JS math: ~120px total travel (matches `progress * -60px` over the typical [-1, +1] range). */ html.snap-landing .snap-block .parallax-bg { transform: translate3d(0, calc(var(--block-progress, 0) * -60px), 0); will-change: transform; } /* Scope view-timeline parallax to motion-OK users only — under prefers-reduced-motion the wildcard `animation-duration: 0.01ms` rule below would collapse the timeline-driven animation to nothing, AND parallax is a vestibular trigger we shouldn't apply to users who opted out anyway. The existing reduced-motion rule (transform: none) handles those users without help from view-timeline. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { @keyframes parallax-bg-rise { from { transform: translate3d(0, 60px, 0); } to { transform: translate3d(0, -60px, 0); } } html.snap-landing .snap-block .parallax-bg { animation: parallax-bg-rise linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } /* Outgoing block transition — block recedes ("camera dolly back") as user scrolls past. JS toggles .is-leaving when block-progress > 0.35. SOURCE ORDER MATTERS: this rule sits after .is-visible so its transform wins when both classes are present (same specificity = later wins). */ html.snap-landing .snap-block.is-leaving { opacity: 0.5; transform: translate3d(0, -24px, 0) scale(0.96); transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Mobile: kill the .is-leaving dim entirely. Free-scroll on phones means the "leaving" block is still substantially visible while the user is trying to read or tap it; opacity 0.5 + blur looked broken / unclickable. Desktop keeps the cinematic dolly as a passive parallax effect. */ @media (max-width: 767px) { html.snap-landing .snap-block.is-leaving { opacity: 1; transform: none; filter: none; } } /* Reduced-motion: subtle fade only (no slide / blur / scale). All cascades + parallax + leaving collapse to opacity-only fades. */ @media (prefers-reduced-motion: reduce) { html.snap-landing .snap-block { transform: none; transition: opacity 0.45s ease-out; } html.snap-landing .snap-block.is-visible { transform: none; } html.snap-landing .snap-stagger-child, .snap-split-word { transform: none; filter: none; transition: opacity 0.35s ease-out; transition-delay: 0ms; } html.snap-landing .snap-block .parallax-bg { transform: none; } html.snap-landing .snap-block.is-leaving { transform: none; filter: none; opacity: 0.7; transition: opacity 0.3s ease-out; } } /* ── SCROLL-IDLE PAUSE ──────────────────────────────────── While the user is actively scrolling, `useBlockScrollProgress` adds `.is-scrolling` to (cleared 150ms after scroll stops). We use that class to pause decorative CSS animations that otherwise contend with the scroll compositor: hero twinkle stars, gold-particle drifts, splash sparkles, scroll-indicator bounce, and the AsianZodiacText ember motion. Pausing `animation-play-state` freezes layer-promoting transforms on the compositor thread without unmounting any DOM — animations resume seamlessly the frame after scroll idles. Skipped under prefers-reduced-motion (those animations are already nerfed there, so there's nothing to gain). */ @media (prefers-reduced-motion: no-preference) { html.is-scrolling .hero-sky-twinkle, html.is-scrolling .nebula-blob, html.is-scrolling [class*="animate-"], html.is-scrolling .fx-aurora, html.is-scrolling .fx-foil { animation-play-state: paused !important; } } /* ── MOBILE BASE RESETS ───────────────────────────────── */ html { /* Single scroll container = . `overflow-x: hidden` here implicitly makes overflow-y: auto, which is exactly what the document scroller needs — and gives the page a well-defined scroll-container ancestor so scroll lands consistently across browsers. The original iOS "stuck at hero" bug was NOT from this rule alone — it was caused by combining it with `height: -webkit-fill-available`, which pinned to viewport height and made compete for touch events. Removing the height pin is the load-bearing part of that fix; keep this overflow as `hidden`, not `clip`, so we don't end up in the "no scroll container anywhere" state where hero scroll silently breaks on some browsers. */ overflow-x: hidden; /* Prevent iOS font scaling on orientation change */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: 'Space Grotesk', 'Inter', sans-serif; background-color: #f8f6f6; /* warm cream fallback (dark mode uses #201412 via Tailwind dark: class) */ /* Safe Area support for iPhone X/notch/Dynamic Island */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); min-height: 100vh; min-height: 100dvh; /* Same reasoning as html — `clip` keeps horizontal-overflow protection without making body a scroll container. */ overflow-x: hidden; overflow-x: clip; /* Remove tap highlight on Android/iOS */ -webkit-tap-highlight-color: transparent; /* Smooth font rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── MOBILE SCROLL SMOOTHNESS ────────────────────────── Three things kill mobile scroll fps in this app: (a) backdrop-filter: blur(*) — the GPU recomposites a blur of everything behind the card on every scroll frame, (b) the .snap-block 80px translate + scale entrance — heavy transform layers stacked vertically, (c) parallax-bg translate3d driven by --block-progress — that recomputes on every scroll event. Below 768px we drop blurs entirely (cards fall back to their solid bg-white/80 token), shorten the entrance transition, and freeze parallax-bg. The visual difference at 1× is barely perceptible; the scroll-fps gain is large. */ @media (max-width: 767px) { .backdrop-blur-sm, .backdrop-blur, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl, .backdrop-blur-2xl, .backdrop-blur-3xl, .glass-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.snap-landing .snap-block { transform: translate3d(0, 24px, 0); transition: opacity 0.45s ease-out, transform 0.45s ease-out; will-change: auto; } html.snap-landing .snap-block.is-visible { transform: translate3d(0, 0, 0); } html.snap-landing .snap-block .parallax-bg { transform: none !important; will-change: auto; } } /* ── PREVENT iOS ZOOM ON INPUT FOCUS ────────────────── */ /* iOS zooms in when input font-size < 16px */ input, select, textarea { font-size: max(16px, 1em); } /* ── HIDE SCROLLBAR GLOBALLY (keep scroll) ──────────── */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* ── MOBILE SHEET SLIDE-UP ANIMATION ────────────────── */ @keyframes slide-up-from-bottom { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .animate-slide-up { animation: slide-up-from-bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards; } @keyframes slide-down-to-bottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } .animate-slide-down { animation: slide-down-to-bottom 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards; } /* Hide Clerk Development Mode Badge */ .cl-internal-b3al4t, .cl-internal-1dauvpw { display: none !important; } /* --- ORBITAL TIMELINE ANIMATIONS --- */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes element-breathe { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes star-glow-pulse { 0%, 100% { filter: brightness(0.95) saturate(1); } 50% { filter: brightness(1.22) saturate(1.15); } } /* Resonance breathing — big, obvious eye-grab for Element nodes that share a year with the currently-selected Guardian. Scale breathes 1 → 1.18 and an orange glow halo expands and fades in lockstep. */ @keyframes resonance-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(184, 134, 11,0.00), 0 0 0 0 rgba(184, 134, 11,0.00), 0 0 10px rgba(255,220,180,0.65); } 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(184, 134, 11,0.45), 0 0 22px 8px rgba(184, 134, 11,0.55), 0 0 36px 12px rgba(255,200,140,0.35); } } .resonance-breathe { animation: resonance-breathe 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @media (prefers-reduced-motion: reduce) { .element-breathe, .star-glow-pulse, .resonance-breathe { animation: none !important; } } .duration-300 { transition-duration: 300ms; } .duration-700 { transition-duration: 700ms; } .duration-1000 { transition-duration: 1000ms; } .backdrop-blur-lg { backdrop-filter: blur(16px); } .bg-gradient-orbital { background: linear-gradient(to bottom right, #6366f1, #3b82f6, #14b8a6); } .shadow-orbital { box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); } .cl-internal-b3al4t, .cl-internal-1dauvpw { display: none !important; } /* --- ANIMATION KEYFRAMES --- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 0 0px rgba(99, 102, 241, 0.7); /* indigo-500 */ } 50% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0); } } .animate-pulse-ring { animation: pulse-ring 2s infinite; } /* --- RAINBOW BUTTON (MAGIC UI) --- */ :root { --color-1: hsl(0, 100%, 63%); --color-2: hsl(270, 100%, 63%); --color-3: hsl(210, 100%, 63%); --color-4: hsl(195, 100%, 63%); --color-5: hsl(90, 100%, 63%); } @keyframes rainbow { 0% { background-position: 0%; } 100% { background-position: 200%; } } .animate-rainbow { animation: rainbow 2s infinite linear; } /* --- BORDER BEAM --- */ @keyframes border-beam { 100% { offset-distance: 100%; } } /* --- ORBITING CIRCLES --- */ @keyframes orbit { 0% { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); } 100% { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg)); } } /* --- Glow for Yellow (S-Rank, Legendary, Decade Highlight) --- */ @keyframes pulse-glow-yellow { 0% { box-shadow: 0 0 0 0px rgba(251, 191, 36, 0.7); } /* amber-400 */ 70% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0px rgba(251, 191, 36, 0); } } .animate-pulse-glow-yellow { animation: pulse-glow-yellow 2s infinite; border-color: #fbbf24 !important; /* amber-400 */ } /* --- Glow for Purple (A-Rank, Epic) --- */ @keyframes pulse-glow-purple { 0% { box-shadow: 0 0 0 0px rgba(192, 132, 252, 0.7); } /* purple-400 */ 70% { box-shadow: 0 0 0 8px rgba(192, 132, 252, 0); } 100% { box-shadow: 0 0 0 0px rgba(192, 132, 252, 0); } } .animate-pulse-glow-purple { animation: pulse-glow-purple 2s infinite; border-color: #c084fc !important; /* purple-400 */ } /* --- Glow for Green (B-Rank, Rare) --- */ @keyframes pulse-glow-green { 0% { box-shadow: 0 0 0 0px rgba(74, 222, 128, 0.7); } /* green-400 */ 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0px rgba(74, 222, 128, 0); } } .animate-pulse-glow-green { animation: pulse-glow-green 2s infinite; border-color: #4ade80 !important; /* green-400 */ } /* --- Glow for Red (D-Rank, Cursed) --- */ @keyframes pulse-glow-red { 0% { box-shadow: 0 0 0 0px rgba(248, 113, 113, 0.7); } /* red-400 */ 70% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0px rgba(248, 113, 113, 0); } } .animate-pulse-glow-red { animation: pulse-glow-red 2s infinite; border-color: #f87171 !important; /* red-400 */ } /* --- Glow for Gray (C-Rank, Common) --- */ @keyframes pulse-glow-gray { 0% { box-shadow: 0 0 0 0px rgba(156, 163, 175, 0.7); } /* gray-400 */ 70% { box-shadow: 0 0 0 8px rgba(156, 163, 175, 0); } 100% { box-shadow: 0 0 0 0px rgba(156, 163, 175, 0); } } .animate-pulse-glow-gray { animation: pulse-glow-gray 2s infinite; border-color: #9ca3af !important; /* gray-400 */ } /* --- Glow for Blue (Water) --- */ @keyframes pulse-glow-blue { 0% { box-shadow: 0 0 0 0px rgba(96, 165, 250, 0.7); } /* blue-400 */ 70% { box-shadow: 0 0 0 8px rgba(96, 165, 250, 0); } 100% { box-shadow: 0 0 0 0px rgba(96, 165, 250, 0); } } .animate-pulse-glow-blue { animation: pulse-glow-blue 2s infinite; border-color: #60a5fa !important; /* blue-400 */ } @keyframes pulse-glow-cyan { 0% { box-shadow: 0 0 0 0px rgba(34, 211, 238, 0.7); } /* cyan-400 */ 70% { box-shadow: 0 0 0 8px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0px rgba(34, 211, 238, 0); } } .animate-pulse-glow-cyan { animation: pulse-glow-cyan 2s infinite; border-color: #22d3ee !important; /* cyan-400 */ } @keyframes pulse-glow-indigo { 0% { filter: drop-shadow(0 0 0px rgba(184, 134, 11, 0)); /* indigo-400 */ transform: scale(1); } 50% { filter: drop-shadow(0 0 15px rgba(184, 134, 11, 0.7)); transform: scale(1.07); } 100% { filter: drop-shadow(0 0 0px rgba(184, 134, 11, 0)); transform: scale(1); } } .animate-pulse-glow-indigo { animation: pulse-glow-indigo 2.5s ease-in-out infinite; } /* --- HOLOGRAPHIC NEON STYLES --- Legendary / S-rank shimmer — key selling point. Wider hue travel (cyan → gold → white → fuchsia → violet → cyan) makes the moving highlight obviously visible across any reading length. animation uses !important so it survives prefers-reduced-motion (gradient shift is safe per WCAG; we only slow it, never stop). */ .text-holo { background: linear-gradient(90deg, #22d3ee 0%, #f5b478 20%, #ffffff 40%, #DAA520 60%, #a855f7 80%, #22d3ee 100%); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 11s linear infinite !important; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.55)); } /* Gentle variant for large display text (e.g. the MBTI letters on the result card) — at that size the 3s sweep reads as flashing, so the hues drift slowly instead. Outranks .text-holo's !important shorthand via the extra class. */ .text-holo.holo-slow { animation-duration: 21s !important; } .border-holo { border-color: #c084fc !important; box-shadow: 0 0 8px rgba(34, 211, 238, 0.2), inset 0 0 4px rgba(232, 121, 249, 0.1); } .bg-holo { background-color: rgba(17, 24, 39, 0.95); } /* --- RANK TIER COLORS --- S / Legendary → .text-holo (already defined above, shimmer ember→cyan→magenta) A / Epic → .text-holo-epic (shimmer violet→fuchsia→indigo) B / Rare → .text-holo-rare (static emerald→teal gradient + glow) D / Cursed → .text-holo-cursed (static crimson→magenta gradient + glow) C / Common → plain slate (no class) */ .text-holo-epic { background: linear-gradient(90deg, #7c3aed 0%, #B8860B 25%, #B8860B 50%, #B8860B 75%, #7c3aed 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7.5s linear infinite; filter: drop-shadow(0 0 2px rgba(184, 134, 11, 0.45)); } .text-holo-rare { background: linear-gradient(90deg, #10b981 0%, #14b8a6 50%, #6ee7b7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 2px rgba(110, 231, 183, 0.45)); } .text-holo-cursed { background: linear-gradient(90deg, #dc2626 0%, #be185d 50%, #f43f5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 2px rgba(244, 63, 94, 0.45)); } .border-holo-epic { border-color: #B8860B !important; box-shadow: 0 0 12px rgba(184, 134, 11, 0.35), 0 0 22px rgba(218, 165, 32, 0.18), inset 0 0 4px rgba(184, 134, 11, 0.15); } .border-holo-rare { border-color: #10b981 !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.3), 0 0 18px rgba(20, 184, 166, 0.15), inset 0 0 4px rgba(110, 231, 183, 0.15); } .border-holo-cursed { border-color: #dc2626 !important; box-shadow: 0 0 10px rgba(220, 38, 38, 0.35), 0 0 18px rgba(190, 24, 93, 0.18), inset 0 0 4px rgba(244, 63, 94, 0.15); } @media (prefers-reduced-motion: reduce) { /* Legendary/Epic shimmer is a decorative gradient shift (no translate/zoom), safe per WCAG vestibular guidelines. Slow it down, don't stop. */ .text-holo { animation: shimmer 30s linear infinite !important; } .text-holo-epic { animation: shimmer 21s linear infinite !important; } } @keyframes fade-in-scale-up { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .palace-cell-animated { opacity: 0; animation: fade-in-scale-up 0.4s ease-out forwards; } /* --- ASTROLABE LINES --- */ .astrolabe-line { stroke-width: 1.5; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; stroke-dasharray: none !important; /* Force solid */ animation: none !important; /* Remove any lingering animation */ } .astrolabe-line.visible { opacity: 0.6; } .astrolabe-line--trine { stroke: #6366f1; /* indigo-500 */ } /* Opposition line colors now based on opposing palace's trine element */ .astrolabe-line--water { stroke: #60a5fa; /* blue-400 */ } .astrolabe-line--fire { stroke: #f87171; /* red-400 */ } .astrolabe-line--wood { stroke: #4ade80; /* green-400 */ } .astrolabe-line--metal { stroke: #9ca3af; /* gray-400 */ } @keyframes gemini-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gemini-spinner { animation: gemini-spinner 1.2s linear infinite; border-color: rgba(99, 102, 241, 0.2); /* ring-indigo-500/20 */ border-top-color: #a5b4fc; /* text-indigo-300 */ } /* --- HIGHLIGHT CARD HOVER --- */ .highlight-card-hover { transition: filter 0.2s ease-in-out; } .highlight-card-hover:hover { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 1)); } /* --- HOVER GLOW --- */ .hover-glow { /* Base class for elements with hover glow */ transition: filter 0.2s ease-in-out; } .hover-glow-yellow:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 1)); } .hover-glow-purple:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(192, 132, 252, 1)); } .hover-glow-green:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(74, 222, 128, 1)); } .hover-glow-red:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(248, 113, 113, 1)); } .hover-glow-gray:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(156, 163, 175, 1)); } .hover-glow-blue:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(96, 165, 250, 1)); } .hover-glow-teal:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(20, 184, 166, 1)); } .hover-glow-orange:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(249, 115, 22, 1)); } .hover-glow-white:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); } /* Holographic Glow */ .hover-glow-holo:not(:disabled):hover { filter: drop-shadow(0 0 10px rgba(232, 121, 249, 0.8)); } /* --- MODAL ANIMATIONS --- */ @keyframes modal-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fade-in 0.3s ease-out forwards; } /* --- AVATAR CAROUSEL SLIDE ANIMATION --- */ @keyframes slide-in-from-right { from { transform: translateX(50%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in-from-right { animation: slide-in-from-right 0.3s ease-out; } @keyframes slide-in-from-left { from { transform: translateX(-50%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in-from-left { animation: slide-in-from-left 0.3s ease-out; } /* --- TOUR GUIDE --- */ .tour-backdrop { position: fixed; inset: 0; z-index: 999; background-color: transparent; } .tour-highlight-hole { position: absolute; border-radius: 0.75rem; /* 12px */ box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .tour-popover { position: absolute; z-index: 1000; width: min(300px, calc(100vw - 2rem)); max-width: 300px; background-color: #1f2937; /* gray-800 */ border: 1px solid #4b5563; /* gray-600 */ border-radius: 0.75rem; padding: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: fade-in-scale-up 0.4s ease-out forwards; } /* --- INTRODUCTION ANIMATIONS --- */ @keyframes star-twinkle { 0%, 100% { opacity: 0.5; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } } /* --- GLOBAL SCROLLBAR — HIDDEN --- The brand gold-thread + SectionProgressDots already provide visual scroll feedback in the brand palette; the old cyan→indigo native scrollbar duplicated that and clashed with the warm theme. Inner scroll regions (.artifact-scroll-container, .custom-scrollbar, etc.) keep their own explicit styling below this rule. */ ::-webkit-scrollbar { width: 0; height: 0; } /* Firefox fallback */ html { scrollbar-width: none; } .artifact-scroll-container { -webkit-overflow-scrolling: touch; } .artifact-scroll-container::-webkit-scrollbar { width: 4px; } .artifact-scroll-container::-webkit-scrollbar-track { background: transparent; margin-top: 4px; margin-bottom: 4px; } .artifact-scroll-container::-webkit-scrollbar-thumb { background-color: #4b5563; /* gray-600 */ border-radius: 20px; } .artifact-scroll-container::-webkit-scrollbar-thumb:hover { background-color: #6b7280; /* gray-500 */ } /* --- FLIP CARD ANIMATION --- */ .palace-card-container { perspective: 1000px; } .palace-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .palace-card-inner.is-flipped { transform: rotateY(180deg); } .palace-card-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 0.5rem; } .palace-card-front { transform: rotateY(180deg); } .palace-card-back { transform: rotateY(0deg); display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; } /* --- SPATIAL GLASS STYLES --- */ .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.4); } .glass-button { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glass-button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255, 255, 255, 0.05); } .glass-button:active { transform: scale(0.98); } /* --- SCI-FI HUD STYLES (Neural Resonance Sequence) --- */ .sci-fi-grid-bg { position: relative; } .sci-fi-grid-bg::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(34, 211, 238, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, 0.02) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.3; /* Làm mờ Matrix */ pointer-events: none; z-index: 0; } .font-mono-sci-fi { font-family: 'Orbitron', 'JetBrains Mono', 'Courier New', monospace; letter-spacing: 0.05em; } .font-chakra { font-family: 'Chakra Petch', sans-serif; } .glow-text-cyan { text-shadow: 0 0 8px rgba(34, 211, 238, 0.8); } .glow-text-red { text-shadow: 0 0 8px rgba(248, 113, 113, 0.8); } .glow-text-yellow { text-shadow: 0 0 8px rgba(250, 204, 21, 0.8); } /* Transitions for Questions */ @keyframes slide-in-right-fast { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .animate-slide-in-right-fast { animation: slide-in-right-fast 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes slide-out-left-fast { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-40px); opacity: 0; } } .animate-slide-out-left-fast { animation: slide-out-left-fast 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* HUD Button Style */ .hud-btn { position: relative; overflow: hidden; transition: all 0.2s ease; /* Angled edges */ clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); background: rgba(31, 41, 55, 0.6); border: 1px solid rgba(75, 85, 99, 0.5); } .hud-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s; } .hud-btn:hover::before { left: 100%; } .hud-btn:hover { transform: translateY(-2px); box-shadow: 0 0 15px rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.6); } .hud-btn:active { transform: translateY(1px); } /* Redesigned YES button - Neon Emerald */ .hud-btn-yes { border-color: rgba(16, 185, 129, 0.5); /* emerald-500 */ color: #34d399; /* emerald-400 */ background: linear-gradient(90deg, rgba(6, 78, 59, 0.3) 0%, rgba(6, 78, 59, 0) 100%); } .hud-btn-yes:hover { border-color: #34d399; background: rgba(16, 185, 129, 0.2); box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); text-shadow: 0 0 8px rgba(52, 211, 153, 0.8); } /* Redesigned NOT SURE button - Electric Amber */ .hud-btn-unsure { border-color: rgba(245, 158, 11, 0.5); /* amber-500 */ color: #fbbf24; /* amber-400 */ background: linear-gradient(90deg, rgba(120, 53, 15, 0.3) 0%, rgba(120, 53, 15, 0) 100%); } .hud-btn-unsure:hover { border-color: #fbbf24; background: rgba(245, 158, 11, 0.2); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); text-shadow: 0 0 8px rgba(251, 191, 36, 0.8); } /* DNA/Circular Loader */ .sci-fi-loader { width: 48px; height: 48px; border: 2px solid rgba(34, 211, 238, 0.3); border-radius: 50%; border-top-color: #22d3ee; animation: spin 1s linear infinite; position: relative; } .sci-fi-loader::after { content: ''; position: absolute; inset: 6px; border: 2px solid rgba(168, 85, 247, 0.3); border-radius: 50%; border-bottom-color: #a855f7; animation: spin 2s linear infinite reverse; } @keyframes spin { 100% { transform: rotate(360deg); } } /* Loading Bar Animation */ @keyframes loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .animate-blink { animation: blink 1s step-end infinite; } /* --- REPLACED INTRO TEXT ANIMATION --- */ @keyframes shimmer { 0% { background-position: 200% center; } 100% { background-position: -200% center; } } .text-shimmer { background: linear-gradient(90deg, #22d3ee 0%, #DAA520 25%, #ffffff 50%, #DAA520 75%, #22d3ee 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; } @keyframes blur-in { 0% { filter: blur(10px); opacity: 0; transform: scale(0.95); } 100% { filter: blur(0); opacity: 1; transform: scale(1); } } .animate-blur-in { animation: blur-in 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* --- MYSTICISM ANIMATIONS --- */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 20s linear infinite; } @keyframes float-up { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } } @keyframes pulse-opacity { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* --- NEW SCI-FI EFFECTS (Intro V2) --- */ /* Shake Effect for Hold Button */ @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .animate-shake { animation: shake 0.5s; animation-iteration-count: infinite; } /* New: Progressive Shake Effects for Lock Breaking - INCREASED INTENSITY */ @keyframes shake-1 { 0% { transform: translate(0, 0); } 20% { transform: translate(-3px, 3px); } 40% { transform: translate(3px, -3px); } 60% { transform: translate(-3px, -3px); } 80% { transform: translate(3px, 3px); } 100% { transform: translate(0, 0); } } .animate-shake-1 { animation: shake-1 0.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake-2 { 0% { transform: translate(0, 0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(5px, -5px); } 60% { transform: translate(-5px, -5px); } 80% { transform: translate(5px, 5px); } 100% { transform: translate(0, 0); } } .animate-shake-2 { animation: shake-2 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake-3 { 0% { transform: translate(0, 0); } 10% { transform: translate(-7px, 7px) rotate(-2deg); } 30% { transform: translate(7px, -7px) rotate(2deg); } 50% { transform: translate(-7px, -7px); } 70% { transform: translate(7px, 7px); } 90% { transform: translate(-4px, 4px); } 100% { transform: translate(0, 0); } } .animate-shake-3 { animation: shake-3 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake-4 { 0% { transform: translate(0, 0); } 10% { transform: translate(-15px, 15px) rotate(-5deg); } 30% { transform: translate(15px, -15px) rotate(5deg); } 50% { transform: translate(-15px, -15px) scale(1.05); } 70% { transform: translate(15px, 15px) scale(0.95); } 90% { transform: translate(-8px, 8px); } 100% { transform: translate(0, 0); } } .animate-shake-4 { animation: shake-4 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake-5 { 0% { transform: translate(0, 0); } 10% { transform: translate(-20px, 20px) rotate(-10deg); } 30% { transform: translate(20px, -20px) rotate(10deg); } 50% { transform: translate(-20px, -20px) scale(1.2); } 70% { transform: translate(20px, 20px) scale(0.8); } 90% { transform: translate(-10px, 10px) rotate(-5deg); } 100% { transform: translate(0, 0); } } .animate-shake-5 { animation: shake-5 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } /* Hacking Glitch Animation */ @keyframes system-glitch { 0% { transform: translate(0); clip-path: inset(0 0 0 0); } 10% { transform: translate(-5px, 2px); clip-path: inset(10% 0 85% 0); filter: hue-rotate(90deg); } 20% { transform: translate(5px, -2px); clip-path: inset(85% 0 10% 0); filter: invert(0.2); } 30% { transform: translate(-5px, -2px); clip-path: inset(40% 0 40% 0); } 40% { transform: translate(5px, 2px); clip-path: inset(80% 0 5% 0); } 50% { transform: translate(-2px, 5px); clip-path: inset(10% 0 60% 0); filter: hue-rotate(-90deg); } 60% { transform: translate(2px, -5px); clip-path: inset(50% 0 30% 0); } 70% { transform: translate(0); clip-path: inset(0 0 0 0); } 80% { transform: translate(-2px, 2px); clip-path: inset(20% 0 20% 0); filter: invert(0.1); } 90% { transform: translate(2px, -2px); clip-path: inset(60% 0 10% 0); } 100% { transform: translate(0); clip-path: inset(0 0 0 0); } } .animate-system-glitch { animation: system-glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } /* Flash Effect */ @keyframes flash-white { 0% { opacity: 0; } 10% { opacity: 1; background-color: white; } 100% { opacity: 0; } } .animate-flash { animation: flash-white 0.5s ease-out forwards; } /* Invert Flash Effect */ @keyframes invert-flash { 0% { filter: invert(0); } 20% { filter: invert(1); } 40% { filter: invert(0); } 60% { filter: invert(1); } 100% { filter: invert(0); } } .animate-invert-flash { animation: invert-flash 0.3s steps(2, start) forwards; } /* Hyper Zoom Effect */ @keyframes hyper-zoom { 0% { transform: scale(1) translateZ(0); opacity: 1; } 100% { transform: scale(50) translateZ(100px); opacity: 0; } } .animate-hyper-zoom { animation: hyper-zoom 0.5s cubic-bezier(0.7, 0, 0.84, 0) forwards; } /* --- NEW: VISUAL MELTDOWN EFFECTS --- */ /* 1. RGB Split (Chromatic Aberration) */ @keyframes rgb-split { 0% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; } 25% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; transform: translate(2px, 0); } 50% { text-shadow: -1px 0 #ff0000, 1px 0 #00ffff; transform: translate(-2px, 0); } 75% { text-shadow: 3px 0 #ff0000, -3px 0 #00ffff; } 100% { text-shadow: 0 0 transparent; transform: translate(0, 0); } } .animate-rgb-split { animation: rgb-split 0.2s steps(4) infinite; } /* 2. Screen Tear */ @keyframes screen-tear { 0% { clip-path: inset(0 0 0 0); transform: translateX(0); } 20% { clip-path: inset(0 0 60% 0); transform: translateX(-10px); } 40% { clip-path: inset(40% 0 0 0); transform: translateX(10px); } 60% { clip-path: inset(0 0 0 0); transform: translateX(0); } 80% { clip-path: inset(20% 0 20% 0); transform: translateX(-5px); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } } .animate-screen-tear { animation: screen-tear 0.15s linear infinite; } /* 3. Negative Strobe */ @keyframes negative-strobe { 0% { filter: invert(0); background-color: black; } 50% { filter: invert(1); background-color: #330000; } /* Dark red inverted */ 100% { filter: invert(0); background-color: black; } } .animate-negative-strobe { animation: negative-strobe 0.1s steps(2) infinite; } /* 4. Reality Warp */ @keyframes reality-warp { 0% { transform: scale(1) skew(0deg); filter: blur(0px); } 25% { transform: scale(1.1) skew(5deg); filter: blur(2px); } 50% { transform: scale(0.9) skew(-5deg); filter: blur(1px) hue-rotate(90deg); } 75% { transform: scale(1.05) skew(2deg); filter: blur(3px); } 100% { transform: scale(1) skew(0deg); filter: blur(0px); } } .animate-reality-warp { animation: reality-warp 0.3s ease-in-out infinite; } /* --- TIME RESONANCE ANIMATED BORDER --- */ @keyframes spin-border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .resonance-border { position: relative; overflow: hidden; } .resonance-border::before { content: ''; position: absolute; top: 50%; left: 50%; width: 400%; height: 400%; margin-top: -200%; margin-left: -200%; background: var(--resonance-gradient, transparent); animation: spin-border var(--resonance-speed, 4s) linear infinite; z-index: 0; transform-origin: center; } .resonance-border::after { content: ''; position: absolute; inset: var(--resonance-inset, 2px); /* Border thickness */ background: var(--resonance-bg, #1f2937); /* gray-800 fallback */ border-radius: inherit; z-index: 1; } /* Ensure content is above the border */ .resonance-border>* { position: relative; z-index: 2; } /* P9 — Chain beam (seam between adjacent MacroCycle chips). Vertical bar with a flowing highlight that travels top→bottom so the beam reads as "energy flowing downward" through the scale chain. --beam-glow carries the primary color; opacity kept low so the shimmer doesn't compete with the existing conic-gradient spin. */ .chain-beam { overflow: hidden; } .chain-beam::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, var(--beam-glow, #ffffff) 50%, transparent 100% ); opacity: 0.55; animation: chain-beam-flow 2.4s ease-in-out infinite; pointer-events: none; } @keyframes chain-beam-flow { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 0.55; } 80% { opacity: 0.55; } 100% { transform: translateY(100%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .chain-beam::after { animation: none; transform: none; opacity: 0.35; } } /* Upgrade â‘  — Magnetic Tilt 3D. Chip nghiêng theo cursor qua CSS vars --tilt-x / --tilt-y set từ React onMouseMove. Dùng perspective riêng cho từng chip để không ảnh hưởng layout, transition ngắn cho cảm giác từ tính. */ .macro-tilt { transform-style: preserve-3d; transform: perspective(680px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)) translateY(var(--tilt-lift, 0px)) scale(var(--tilt-scale, 1)); transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease; will-change: transform; } /* Keep tilt interactive — user explicitly opted in to these upgrades. */ /* Upgrade â‘¡ — Aurora Breathing Halo. Active chip phát halo màu dominant-resonance, thở 4s. Render là DOM layer (không ::before) để không va chạm pseudo vá»›i resonance-border. Inset 2px để nằm trong clip của resonance-border's overflow:hidden. */ .aurora-layer, .resonance-border > .aurora-layer { position: absolute; inset: 2px; border-radius: inherit; background: radial-gradient( ellipse at center, var(--halo-color, #B8860B) 0%, transparent 72% ); filter: blur(14px); opacity: 0.75; z-index: 3; pointer-events: none; animation: aurora-breathe var(--halo-speed, 4s) ease-in-out infinite; } @keyframes aurora-breathe { 0%, 100% { transform: scale(0.95); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 0.95; } } /* aurora breathes on every client — the effect itself is the signal. */ /* Upgrade â‘¢ — Temporal Flow Wave. Overlay gradient chạy từ Age → Hour suốt bar, 8s loop. Dùng mix-blend-mode: overlay để sáng active chip khi wave Ä‘i qua mà không đè màu nền. pointer-events-none để không ăn click. */ .temporal-wave::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 100deg, transparent 0%, rgba(184, 134, 11, 0.00) 25%, rgba(184, 134, 11, 0.65) 46%, rgba(255, 230, 210, 0.85) 50%, rgba(168, 230, 207, 0.60) 56%, transparent 80%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; mix-blend-mode: screen; pointer-events: none; z-index: 15; animation: temporal-flow 5s linear infinite; } .dark .temporal-wave::before { background: linear-gradient( 100deg, transparent 0%, rgba(184, 134, 11, 0.00) 25%, rgba(184, 134, 11, 0.80) 46%, rgba(255, 230, 210, 0.95) 50%, rgba(168, 230, 207, 0.70) 56%, transparent 80%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; mix-blend-mode: screen; opacity: 1; } @keyframes temporal-flow { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } } /* wave runs on all clients. */ /* Upgrade â‘£ — Seed Particle Emitter. Má»—i particle là span absolute positioned vá»›i animation bay lên từ bottom → top. Chaos seed đảo hÆ°á»›ng qua class .seed-particle-fall. --particle-color từ inline style, --particle-delay để stagger. */ .seed-particle { position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--particle-color, #fbbf24); box-shadow: 0 0 10px var(--particle-color, #fbbf24), 0 0 18px var(--particle-color, #fbbf24), 0 0 26px var(--particle-color, #fbbf24); opacity: 0; pointer-events: none; z-index: 25; animation: seed-particle-rise 2.6s ease-out infinite; animation-delay: var(--particle-delay, 0s); } .seed-particle.seed-particle-fall { bottom: auto; top: 4px; animation-name: seed-particle-fall; } @keyframes seed-particle-rise { 0% { transform: translateY(0) scale(0.7); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.9; } 100% { transform: translateY(-48px) scale(0.4); opacity: 0; } } @keyframes seed-particle-fall { 0% { transform: translateY(0) scale(0.7); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 0.9; } 100% { transform: translateY(48px) scale(0.4); opacity: 0; } } /* particles emit on all clients. */ /* Upgrade ⑤ — Liquid Glass Morph + Conic Shine + Ripple. Shine sweep chạy 800ms khi chip vừa active. Ripple 600ms từ tâm. Liquid glass là backdrop-filter blur(12px) saturate(1.4) — apply inline trên content card khi isActive. */ .shine-sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 22; } .shine-sweep::after { content: ''; position: absolute; top: -50%; left: -30%; width: 50%; height: 200%; background: linear-gradient( 105deg, transparent 20%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.55) 55%, transparent 80% ); transform: translateX(-140%) skewX(-18deg); animation: shine-sweep 800ms cubic-bezier(0.3, 0.1, 0.2, 1) 1; } .dark .shine-sweep::after { background: linear-gradient( 105deg, transparent 20%, rgba(184, 134, 11, 0.40) 45%, rgba(255, 220, 200, 0.70) 50%, rgba(184, 134, 11, 0.40) 55%, transparent 80% ); } @keyframes shine-sweep { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } } .chip-ripple { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient( circle, var(--ripple-color, rgba(184, 134, 11, 0.7)) 0%, transparent 70% ); transform: translate(-50%, -50%) scale(0); opacity: 0.9; pointer-events: none; z-index: 21; animation: chip-ripple 700ms ease-out 1; } @keyframes chip-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.75; } 70% { opacity: 0.35; } 100% { transform: translate(-50%, -50%) scale(8); opacity: 0; } } /* shine + ripple play on all clients. */ /* Custom Range Slider Styling */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 2px; background: #22d3ee; cursor: pointer; margin-top: -8px; box-shadow: 0 0 10px #22d3ee; border: 1px solid #fff; transform: rotate(45deg); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: rgba(75, 85, 99, 0.5); border-radius: 0; border: 1px solid rgba(34, 211, 238, 0.3); } /* GLITCH EFFECT */ .glitch-text { position: relative; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch-text::before { left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; } .glitch-text::after { left: -2px; text-shadow: -1px 0 #00fff9; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-2 5s infinite linear alternate-reverse; } @keyframes glitch-anim { 0% { clip: rect(32px, 9999px, 81px, 0); } 5% { clip: rect(54px, 9999px, 14px, 0); } 10% { clip: rect(96px, 9999px, 2px, 0); } 15% { clip: rect(4px, 9999px, 92px, 0); } 20% { clip: rect(18px, 9999px, 55px, 0); } 25% { clip: rect(76px, 9999px, 28px, 0); } 30% { clip: rect(62px, 9999px, 3px, 0); } 35% { clip: rect(45px, 9999px, 98px, 0); } 40% { clip: rect(12px, 9999px, 7px, 0); } 45% { clip: rect(85px, 9999px, 32px, 0); } 50% { clip: rect(2px, 9999px, 46px, 0); } 55% { clip: rect(19px, 9999px, 83px, 0); } 60% { clip: rect(67px, 9999px, 11px, 0); } 65% { clip: rect(38px, 9999px, 52px, 0); } 70% { clip: rect(91px, 9999px, 25px, 0); } 75% { clip: rect(5px, 9999px, 73px, 0); } 80% { clip: rect(27px, 9999px, 64px, 0); } 85% { clip: rect(50px, 9999px, 19px, 0); } 90% { clip: rect(82px, 9999px, 41px, 0); } 95% { clip: rect(14px, 9999px, 88px, 0); } 100% { clip: rect(69px, 9999px, 37px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(10px, 9999px, 91px, 0); } 5% { clip: rect(84px, 9999px, 3px, 0); } 10% { clip: rect(26px, 9999px, 62px, 0); } 15% { clip: rect(55px, 9999px, 18px, 0); } 20% { clip: rect(93px, 9999px, 44px, 0); } 25% { clip: rect(31px, 9999px, 75px, 0); } 30% { clip: rect(7px, 9999px, 29px, 0); } 35% { clip: rect(68px, 9999px, 96px, 0); } 40% { clip: rect(42px, 9999px, 13px, 0); } 45% { clip: rect(89px, 9999px, 57px, 0); } 50% { clip: rect(21px, 9999px, 80px, 0); } 55% { clip: rect(64px, 9999px, 23px, 0); } 60% { clip: rect(35px, 9999px, 71px, 0); } 65% { clip: rect(99px, 9999px, 6px, 0); } 70% { clip: rect(16px, 9999px, 48px, 0); } 75% { clip: rect(53px, 9999px, 87px, 0); } 80% { clip: rect(79px, 9999px, 34px, 0); } 85% { clip: rect(13px, 9999px, 66px, 0); } 90% { clip: rect(46px, 9999px, 92px, 0); } 95% { clip: rect(88px, 9999px, 15px, 0); } 100% { clip: rect(33px, 9999px, 59px, 0); } } /* STATIC NOISE */ @keyframes static-noise-anim { 0% { background-position: 0 0; } 100% { background-position: 100px 100px; } } .static-noise-bg { background-image: repeating-radial-gradient(#000 0 0.0001%, #222 0 0.0002%); background-size: 3px 3px; animation: static-noise-anim 0.2s linear infinite; } /* BLOCK CURSOR */ .boot-cursor { display: inline-block; width: 10px; height: 1.2em; background-color: #22d3ee; /* cyan-400 */ vertical-align: text-bottom; animation: blink 1s step-end infinite; } /* DATA STREAM SCROLL */ .data-stream { mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); } /* NEW BOOT SEQ ANIMATIONS */ @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .scanline { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(34, 211, 238, 0.1) 50%, transparent 100%); animation: scanline 4s linear infinite; pointer-events: none; } @keyframes hologram-flicker { 0%, 100% { opacity: 1; } 3% { opacity: 0.8; } 6% { opacity: 1; } 7% { opacity: 0.9; } 9% { opacity: 1; } 10% { opacity: 0.1; } 11% { opacity: 1; } } .animate-hologram-flicker { animation: hologram-flicker 3s infinite; } /* Marquee Animation */ @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .animate-marquee { white-space: nowrap; animation: marquee 15s linear infinite; } /* Seamless Marquee */ @keyframes marquee-seamless { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee-seamless { display: flex; width: max-content; /* Ensure it takes full width of content */ animation: marquee-seamless 25s linear infinite; } /* ── HERO ORBITAL ENTRANCE (Phase 3 / S3) ───────── Headline wins the 2-second test — delay the orbital by 300ms and start at 0.7 opacity so the eye reads the H1 first. */ @keyframes hero-orbital-enter { 0% { opacity: 0.7; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } .animate-hero-orbital { animation: hero-orbital-enter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms backwards; } /* ── PREFERS-REDUCED-MOTION ───────────────────────── */ /* WCAG 2.3.3 — honor user's reduced-motion preference. Kills CSS animations (the long-running vestibular triggers: blob drift, shimmer, marquee, shake, glitch, pulse-glows, float, spin-slow) but does NOT nuke transition-duration globally — a wildcard transition-nerf also broke framer-motion's opacity fades, which are WCAG-safe. Components that need to soften their own transitions use `useReducedMotion()` instead. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } /* Time Analysis chip upgrades — opacity fades + tiny scale shifts, not vestibular triggers. Exempt from the wildcard nerf above so the chip still signals its active state (breathing halo, flowing wave, rising seed particles, shine + ripple on activation). */ .aurora-layer { animation-duration: var(--halo-speed, 4s) !important; animation-iteration-count: infinite !important; } .temporal-wave::before { animation-duration: 5s !important; animation-iteration-count: infinite !important; } .seed-particle { animation-duration: 2.6s !important; animation-iteration-count: infinite !important; } .shine-sweep::after { animation-duration: 800ms !important; } .chip-ripple { animation-duration: 700ms !important; } }