/* Purposeful motion and a restrained blue-to-purple brand treatment. */
:root {
    --brand-gradient: linear-gradient(110deg, #1761dc, #6941d9);
    --motion-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scrollbar-gutter: stable; }
body:has([role="dialog"]) { overflow: hidden; }
#main-content:focus { outline: none; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 200; background: #fff; color: var(--primary); border: 2px solid var(--primary); border-radius: 8px; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
.nav { box-shadow: 0 3px 18px rgb(24 34 56 / 3%); }

.nav-brand { transition: opacity 180ms ease; }
.nav-brand:hover { opacity: .8; }

.btn-primary, .btn-secondary { transition: transform 220ms var(--motion-ease), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease; }
.btn-primary { background: var(--brand-gradient); border-color: transparent; background-size: 150% 100%; box-shadow: 0 4px 12px rgb(58 80 207 / 14%); }
.btn-primary:hover { background: var(--brand-gradient); background-size: 150% 100%; background-position: 100% 0; box-shadow: 0 6px 18px rgb(58 80 207 / 22%); }
.btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
.btn-primary:disabled, .btn-secondary:disabled { transform: none; box-shadow: none; }
.btn-arrow { transition: transform 220ms var(--motion-ease); }

.hero-enter { animation: hero-enter 700ms var(--motion-ease) both; animation-delay: var(--enter-delay, 0ms); }

.gate-notice { background: linear-gradient(135deg, #fff, #fcfaff); }
.gate-icon { color: #6750c9; background: #f0ecff; border-radius: 16px; padding: 14px; font-size: 30px; }

.modal-backdrop { animation: backdrop-enter 160ms ease; }
.modal-panel { animation: dialog-enter 300ms var(--motion-ease); box-shadow: 0 24px 80px rgb(24 34 56 / 18%); }
.modal-panel:focus { outline: none; }

@media (hover: hover) and (pointer: fine) {
    .btn-primary:not(:disabled):hover, .btn-secondary:not(:disabled):hover { transform: translateY(-2px); }
}

@keyframes hero-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes soft-enter { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .hero-enter, .reveal-up { opacity: 1 !important; transform: none !important; }
    .btn-primary:hover, .btn-secondary:hover { transform: none !important; }
}