/* Unified motion layer for public Finda pages. */
:root {
  --motion-cyan: #27c7d8;
  --motion-cyan-deep: #0ea5b7;
  --motion-navy: #0d1b3e;
  --motion-yellow: #ffc800;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-behavior: smooth; }

body.finda-motion-page {
  overflow-x: hidden;
  --or: #ffc400;
  --or2: #ff9f00;
  --or-l: #fff5cc;
  --or-d: #c97800;
  --nv: #123f9c;
  --nv2: #0b2f7d;
  --nv3: #071a3d;
  --nv-l: #e8f1ff;
  --nv-ll: #f2f7ff;
  --sky: #16c7d8;
  --bg: #f3f7fc;
  --bd: #d9e5f2;
  --tx: #071a3d;
  --tx2: #465d7b;
  --tx3: #8297b2;
  background-image:
    radial-gradient(circle at 8% 10%, rgba(39,199,216,.10), transparent 26rem),
    radial-gradient(circle at 92% 28%, rgba(255,200,0,.08), transparent 24rem);
}

.finda-motion-page .nav {
  background: linear-gradient(105deg, #061631 0%, #0a2c68 58%, #084d69 100%);
  border-bottom-color: rgba(39,199,216,.32);
  box-shadow: 0 10px 30px rgba(4,20,48,.18);
}

.finda-motion-page :where(.nav-logo-icon, .hero-search-go, .btn-primary, .auth-submit) {
  box-shadow: 0 8px 24px rgba(255,196,0,.25);
}

.finda-motion-page :where(input, select, textarea):focus {
  border-color: var(--motion-cyan) !important;
  box-shadow: 0 0 0 4px rgba(22,199,216,.13) !important;
  outline: none;
}

.finda-motion-page :where(.rounded-3xl, .rounded-2xl, .card, .panel,
                          .service-card, .shop-card, .favorite-card,
                          .message-card, .notification-card) {
  border-color: rgba(111,139,174,.24);
}

.finda-motion-page :where(.rounded-3xl, .rounded-2xl, .service-card,
                          .shop-card, .favorite-card, .message-card,
                          .notification-card):hover {
  border-color: rgba(22,199,216,.48) !important;
  box-shadow: 0 18px 44px rgba(7,26,61,.12) !important;
}

.finda-motion-page :where(.section-title, h1, h2, h3) {
  text-wrap: balance;
}

.finda-motion-page :where(.section-title-ic, .profile-guide-icon, .how-ic) {
  box-shadow: 0 8px 22px rgba(22,199,216,.15);
}

.finda-motion-page :where(a, button, input, select, textarea) {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease,
              box-shadow .22s ease, transform .22s var(--motion-ease);
}

.finda-motion-page :where(button, .btn, [class*="-btn"], [class*="-go"]):not(:disabled):active {
  transform: translateY(1px) scale(.985);
}

/* Home */
.finda-motion-page .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.finda-motion-page .hero::before,
.finda-motion-page .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

.finda-motion-page .hero::before {
  width: 30rem;
  height: 30rem;
  right: -8rem;
  top: -12rem;
  background: radial-gradient(circle, rgba(39,199,216,.34), rgba(39,199,216,0) 68%);
  animation: findaFloat 9s ease-in-out infinite;
}

.finda-motion-page .hero::after {
  width: 20rem;
  height: 20rem;
  left: 42%;
  bottom: -14rem;
  background: radial-gradient(circle, rgba(255,200,0,.25), rgba(255,200,0,0) 70%);
  animation: findaFloat 11s ease-in-out infinite reverse;
}

.finda-motion-page .hero-search:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 20px 55px rgba(4, 25, 58, .24), 0 0 0 4px rgba(39,199,216,.20);
}

.finda-motion-page :where(.hero-tag, .cat-item, .cat-card, .ad-card, .how-card, .why-card) {
  will-change: transform;
}

.finda-motion-page :where(.hero-tag, .cat-item, .cat-card):hover {
  transform: translateY(-4px);
}

.finda-motion-page :where(.ad-card, .how-card, .why-card):hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 44px rgba(13,27,62,.13);
}

/* Login and registration */
.finda-motion-page .auth-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
}

.finda-motion-page .auth-wrap::before,
.finda-motion-page .auth-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .72;
}

.finda-motion-page .auth-wrap::before {
  width: 25rem;
  height: 25rem;
  background: rgba(39,199,216,.20);
  top: -10rem;
  right: -7rem;
  animation: findaDrift 12s ease-in-out infinite;
}

.finda-motion-page .auth-wrap::after {
  width: 20rem;
  height: 20rem;
  background: rgba(255,200,0,.16);
  bottom: -9rem;
  left: -6rem;
  animation: findaDrift 14s ease-in-out infinite reverse;
}

.finda-motion-page .auth-card {
  animation: findaCardIn .7s var(--motion-ease) both;
  box-shadow: 0 26px 70px rgba(13,27,62,.16);
  border: 1px solid rgba(39,199,216,.20);
}

.finda-motion-page .auth-card:focus-within {
  box-shadow: 0 30px 80px rgba(13,27,62,.20), 0 0 0 4px rgba(39,199,216,.10);
}

.finda-motion-page .auth-logo-icon {
  animation: findaLogoPulse 3.6s ease-in-out infinite;
}

.finda-motion-page .auth-tab.on {
  box-shadow: inset 0 -2px 0 var(--motion-cyan);
}

/* Profile */
.finda-motion-page :where(.profile-sidebar-card, .profile-main-card, .profile-guide-card,
                          .profile-action-strip, .profile-ad-card, .summary-card) {
  transition: transform .28s var(--motion-ease), box-shadow .28s ease, border-color .28s ease;
}

.finda-motion-page :where(.profile-guide-card, .profile-ad-card, .summary-card):hover {
  transform: translateY(-5px);
  border-color: rgba(39,199,216,.45) !important;
  box-shadow: 0 16px 38px rgba(13,27,62,.11) !important;
}

.finda-motion-page .profile-sidebar-card {
  animation: findaSlideRight .65s var(--motion-ease) both;
}

.finda-motion-page .profile-main-card {
  animation: findaCardIn .7s .08s var(--motion-ease) both;
}

/* Scroll reveal: content remains visible when JS is unavailable. */
.finda-motion-ready [data-finda-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.finda-motion-ready [data-finda-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s var(--motion-ease);
  transition-delay: var(--finda-delay, 0ms);
}

@keyframes findaCardIn {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes findaSlideRight {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}

@keyframes findaFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-18px,18px,0) scale(1.05); }
}

@keyframes findaDrift {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(24px,-18px,0); }
}

@keyframes findaLogoPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(39,199,216,0)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 7px 12px rgba(39,199,216,.24)); }
}

@media (max-width: 720px) {
  .finda-motion-page .hero::before { width: 20rem; height: 20rem; }
  .finda-motion-page :where(.ad-card, .how-card, .why-card):hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .finda-motion-page *,
  .finda-motion-page *::before,
  .finda-motion-page *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .finda-motion-ready [data-finda-reveal] { opacity: 1; transform: none; }
}