/* Tempzy — custom CSS (animations + small extras). Tailwind components: components.css */

[x-cloak], .js-hide { display: none !important; }

/* Hero background */
.hero-bg {
  background:
    radial-gradient(50rem 26rem at 50% -12%, rgba(37, 99, 235, .10), transparent 65%);
}
.dark .hero-bg {
  background:
    radial-gradient(50rem 26rem at 50% -12%, rgba(59, 130, 246, .14), transparent 65%);
}
.grid-pattern {
  background-image: linear-gradient(to right, rgba(100, 116, 139, .08) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(100, 116, 139, .08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 75%);
}

/* Animations */
@keyframes tz-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes tz-ping { 0% { transform: scale(1); opacity: .55 } 80%, 100% { transform: scale(1.9); opacity: 0 } }
@keyframes tz-flash { 0% { background-color: rgba(37, 99, 235, .12) } 100% { background-color: transparent } }
@keyframes tz-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45) } 100% { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0) } }
@keyframes tz-in { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes tz-sheet { from { transform: translateY(100%) } to { transform: none } }
@keyframes tz-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tz-spin { to { transform: rotate(360deg) } }

.animate-float { animation: tz-float 3.2s ease-in-out infinite; }
.animate-ping-slow { animation: tz-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }
.is-new { animation: tz-flash 2.5s ease-out; }
.otp-new { animation: tz-pulse-ring 1.2s ease-out 3; }
.animate-in { animation: tz-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.animate-fade { animation: tz-fade .2s ease-out both; }
.spin { animation: tz-spin .8s linear infinite; }

@media (max-width: 639px) {
  .modal-panel { animation: tz-sheet .3s cubic-bezier(.2, .8, .2, 1) both; }
}
@media (min-width: 640px) {
  .modal-panel { animation: tz-in .22s cubic-bezier(.2, .8, .2, 1) both; }
}

/* Refresh ring */
.ring-track { stroke: rgba(148, 163, 184, .25); }
.ring-progress { stroke: #2563eb; transition: stroke-dashoffset 1s linear; }

/* Mail iframe */
.mail-frame { width: 100%; border: 0; min-height: 240px; display: block; background: #fff; }

/* Bottom nav safe area */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Nicer scrollbars */
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, .4) transparent; }

/* Accordion */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .acc-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}