/* Idiots English smooth UX layer * Safe global motion layer. It deliberately avoids transforming , because * body transforms create a containing block for fixed/fullscreen layouts and can * break immersive pages such as study/review. */ :root { --ux-ease-out: cubic-bezier(.22, 1, .36, 1); --ux-ease-soft: cubic-bezier(.2, .8, .2, 1); --ux-fast: 140ms; --ux-normal: 220ms; --ux-slow: 320ms; } html { scroll-behavior: smooth; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } body.ux-ready { animation: ux-page-fade var(--ux-slow) var(--ux-ease-out) both; } @keyframes ux-page-fade { from { opacity: .001; } to { opacity: 1; } } html.ajax-page-leave body { opacity: .90; transition: opacity var(--ux-fast) ease; } /* Avoid mobile flashing caused by expensive paint layers. */ .aurora-bg, .sidebar, .bottom-nav, .mobile-footer, .modal, .toast, #ajax-progress-bar { transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sidebar, .bottom-nav, .mobile-footer { contain: layout paint style; } /* Unified interactive feel. Keep the selector conservative: only normal shell pages load this file now; immersive study pages opt out completely. */ a, button, .btn, .action-btn, .primary-btn, .secondary-btn, .danger-btn, .submit-btn, .tab, .chip, .nav-link, .side-item a, .book-card, .article-card, .memory-card, .group-card, .word-card, .stat-card, .summary-card, .upload-card, .panel, .card, .glass-card, .option-card, .tool-card, .item-card, .list-item, .result-item, .review-item, .mode-card, .setting-card, input, select, textarea { transition-property: transform, opacity, box-shadow, background-color, border-color, color, filter; transition-duration: var(--ux-normal); transition-timing-function: var(--ux-ease-out); } button, .btn, .action-btn, .primary-btn, .secondary-btn, .danger-btn, .submit-btn, .tab, .chip, .nav-link, .side-item a, .book-card, .article-card, .memory-card, .group-card, .word-card, .stat-card, .summary-card, .upload-card, .panel, .card, .glass-card, .option-card, .tool-card, .item-card, .list-item, .result-item, .review-item, .mode-card, .setting-card { will-change: transform; } @media (hover: hover) and (pointer: fine) { button:hover, .btn:hover, .action-btn:hover, .primary-btn:hover, .secondary-btn:hover, .danger-btn:hover, .submit-btn:hover, .book-card:hover, .article-card:hover, .memory-card:hover, .group-card:hover, .word-card:hover, .stat-card:hover, .summary-card:hover, .upload-card:hover, .panel:hover, .card:hover, .glass-card:hover, .option-card:hover, .tool-card:hover, .item-card:hover, .list-item:hover, .result-item:hover, .review-item:hover, .mode-card:hover, .setting-card:hover { transform: translate3d(0, -2px, 0); } .side-item a:hover, .nav-link:hover, .tab:hover, .chip:hover { transform: translate3d(0, -1px, 0); } } button:active, .btn:active, .action-btn:active, .primary-btn:active, .secondary-btn:active, .danger-btn:active, .submit-btn:active, .tab:active, .chip:active, .nav-link:active, .side-item a:active, .book-card:active, .article-card:active, .memory-card:active, .group-card:active, .word-card:active, .stat-card:active, .summary-card:active, .upload-card:active, .panel:active, .card:active, .glass-card:active, .option-card:active, .tool-card:active, .item-card:active, .list-item:active, .result-item:active, .review-item:active, .mode-card:active, .setting-card:active { transform: translate3d(0, 0, 0) scale(.99); transition-duration: var(--ux-fast); } input:focus, select:focus, textarea:focus { transform: none; box-shadow: 0 0 0 4px rgba(0, 113, 227, .10); outline: none; } .side-item a.active, .nav-link.active { transform: translateZ(0); } /* Soft reveal only after JS marks elements, so no content is hidden without JS. */ .ux-animate { opacity: 0; transform: translate3d(0, 8px, 0); } .ux-animate.ux-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* Smooth skeleton/progress states for AJAX and uploads. */ html.ajax-busy body { cursor: progress; } .ux-pending { pointer-events: none; opacity: .72; filter: saturate(.92); } .ux-ripple { position: absolute; border-radius: 999px; pointer-events: none; transform: translate(-50%, -50%) scale(0); opacity: .14; background: currentColor; animation: ux-ripple 460ms var(--ux-ease-out) forwards; } @keyframes ux-ripple { to { transform: translate(-50%, -50%) scale(12); opacity: 0; } } [data-ux-ripple] { position: relative; overflow: hidden; isolation: isolate; } /* Mobile: reduce costly blur/repaint while keeping the glass look. */ @media (max-width: 768px) { body { touch-action: manipulation; } .bottom-nav { background: rgba(255, 255, 255, .94) !important; backdrop-filter: blur(14px) saturate(1.05) !important; -webkit-backdrop-filter: blur(14px) saturate(1.05) !important; } .aurora-bg { background-attachment: scroll !important; } .book-card, .article-card, .memory-card, .group-card, .word-card, .stat-card, .summary-card, .upload-card, .panel, .card, .glass-card, .option-card, .tool-card, .item-card, .list-item, .result-item, .review-item, .mode-card, .setting-card { will-change: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .ux-animate { opacity: 1 !important; transform: none !important; } }