/* ODDSSEY — transitions, hover effects, entrance, liquid motion */
@property --glow { syntax: '<number>'; inherits: false; initial-value: 0; }

html { scroll-behavior: smooth; }

/* Buttons */
.btn { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, color .2s ease; }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.12), 0 0 0 4px rgba(181,255,112,0.14), 0 10px 30px -6px rgba(181,255,112,0.6); transform: translateY(-1px); }
.btn--ghost:hover { border-color: rgba(181,255,112,0.55); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 24px -8px rgba(181,255,112,0.45); }
.btn:active { transform: scale(.97); }

/* Navigation */
.nav::before, .nav::after { transition: background-color .3s ease, box-shadow .3s ease, opacity .3s ease; }
.nav__links a { transition: color .2s ease; }
.nav__links { transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.nav__toggle span { transition: transform .25s ease, top .25s ease; }
.footer__nav a { transition: color .2s ease; }

/* Search */
.search { transition: border-color .25s ease, box-shadow .3s ease; }
.search::before { transition: background .3s ease; }

/* Cards: edge lights up, reflection slides, green light rises */
.card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, background-color .3s ease, box-shadow .35s ease, --glow .5s ease; }
.card::before { transition: background-position .9s cubic-bezier(.2,.7,.2,1); }
.card::after { transition: opacity .35s ease; }
.card__icon { transition: background .3s ease, color .3s ease, border-color .3s ease, border-radius .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.card:hover, .card:focus-visible {
  --glow: 1;
  transform: translateY(-4px);
  border-color: rgba(181,255,112,0.28);
  background-color: rgba(24,30,24,0.62);
  box-shadow: var(--glass-edge), 0 22px 44px -18px rgba(0,0,0,0.8), 0 0 40px -22px rgba(181,255,112,0.55);
}
.card:hover::before, .card:focus-visible::before { background-position: 0 0, 100% 100%, 0 0; }
.card:hover::after, .card:focus-visible::after { opacity: 1; }
.card:hover .card__icon, .card:focus-visible .card__icon {
  background: linear-gradient(180deg, #CBFF97, #B5FF70 60%, #A2F05B);
  color: #0B1006; border-color: var(--accent); border-radius: 15px 11px 15px 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px -6px rgba(181,255,112,0.6);
}
.card:active { transform: translateY(-1px); }

.toast { transition: opacity .25s ease, transform .25s ease; }

/* Shared form components */
.input, .select, .textarea { transition: border-color .25s ease, box-shadow .3s ease; }
.switch__track { transition: background .25s ease, border-color .25s ease; }
.switch__track::after { transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease; }
.tool-header__back { transition: color .2s ease; }

/* Single orchestrated entrance: hero */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__inner > *, .tool-header > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero__inner > :nth-child(2), .tool-header > :nth-child(2) { animation-delay: .08s; }
.hero__inner > :nth-child(3), .tool-header > :nth-child(3) { animation-delay: .16s; }
.hero__inner > :nth-child(4) { animation-delay: .24s; }

/* Status dot pulse */
@keyframes pulse { 0%, 100% { box-shadow: 0 0 8px rgba(181,255,112,.8), 0 0 0 0 rgba(181,255,112,.5); } 50% { box-shadow: 0 0 8px rgba(181,255,112,.8), 0 0 0 6px rgba(181,255,112,0); } }
.dot { animation: pulse 2.4s ease-in-out infinite; }

/* Search results appearing */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.card:not([hidden]), .notice:not([hidden]) { animation: fade .25s ease both; }

/* Liquid ambient light: slow transform-only drifts (GPU friendly) */
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}
@keyframes liquid {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1, 1); }
  33%      { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.06, .95); }
  66%      { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(.96, 1.05); }
}
body::before { animation: drift 28s ease-in-out infinite; will-change: transform; }
/* Background symbol: constant, slow rotation on its own axis */
@keyframes logospin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
body::after { animation: logospin 60s linear infinite; will-change: transform; }
.hero::before { animation: liquid 22s ease-in-out infinite; will-change: transform; }
.cta::before { animation: liquid 26s ease-in-out infinite reverse; will-change: transform; }

/* Slow light sweep across the CTA edge */
@keyframes sweep { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cta::after { animation: sweep 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .card:hover, .card:focus-visible { transform: none; }
}