/* ==========================================================================
   HyperOS 3 – 120 Hz Micro-Interactions (Global)
   GPU-only (transform, opacity, filter). Follows Tailwind/DaisyUI defaults.
   ========================================================================== */
:root{
  --hyper-vt-dur: 560ms;
  /* HyperOS-like easing + slightly longer timings for a smoother, premium feel */
  --hyper-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hyper-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hyper-fast: 180ms;
  --hyper-med: 260ms;
  --hyper-slow: 420ms;
  /* Slightly more restrained scaling for stability (less jitter on low-end GPUs) */
  --hyper-hover-scale: 1.008;
  --hyper-press-scale: 0.992;
  --hyper-card-hover: 1.006;
  --hyper-shadow: 0 8px 30px rgba(0,0,0,.25);
  /* Used by dialog backdrop animations below (was referenced but not defined). */
  --hyper-popup-in: var(--hyper-med);
}

/* Alpine helper: prevent flicker before Alpine initializes */
[x-cloak]{ display: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Base interactive surfaces */
.btn, .button, .menu a, .tab, .badge, .chip, .card, .input, .select, .textarea, .dropdown .dropdown-content, .modal .modal-box {
  transition-property: transform, opacity, filter, box-shadow;
  transition-duration: var(--hyper-med);
  transition-timing-function: var(--hyper-ease);
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Hover elevation & scale */
.btn:hover, .menu a:hover, .tab:hover, .card:hover {
  transform: scale(var(--hyper-hover-scale));
  box-shadow: var(--hyper-shadow);
}

/* Active press */
.btn:active, .menu a:active, .tab:active, .card:active,
.is-pressed {
  transform: scale(var(--hyper-press-scale));
  filter: brightness(0.98);
}

/* Focus ring subtle lift */
.btn:focus-visible, .menu a:focus-visible, .tab:focus-visible, .card:focus-visible {
  transform: scale(1.01);
  outline: none;
}

/* Cards gentle float */
.card { transition-duration: var(--hyper-slow); }
.card:hover { transform: translateY(-2px) scale(var(--hyper-card-hover)); }

/* Ripple element (created by JS) */
.hyper-ripple-container { position: relative; overflow: hidden; }
.hyper-ripple {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  transform: scale(0);
  opacity: .35;
  background: radial-gradient(circle closest-side, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  mix-blend-mode: overlay;
  animation: hyper-ripple-expand 600ms var(--hyper-ease) forwards;
}
@keyframes hyper-ripple-expand {
  to { transform: scale(1); opacity: 0; }
}

/* Modals (DaisyUI .modal) */
.modal .modal-box {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
}
.modal[open] .modal-box,
.modal.modal-open .modal-box,
html.modal-open .modal .modal-box,
body.modal-open .modal .modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform var(--hyper-med) var(--hyper-ease), opacity var(--hyper-med) var(--hyper-ease);
}

/* Dropdowns (DaisyUI) */
.dropdown .dropdown-content {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  filter: blur(6px);
  transform-origin: top center;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:focus-within .dropdown-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Alpine / custom dropdown panels (HyperOS 3 style)
   Usage: x-transition:enter="hyper-dd-enter" x-transition:enter-start="hyper-dd-enter-start" ... */
.hyper-dd-enter{
  transition: transform 220ms var(--hyper-ease-out), opacity 220ms var(--hyper-ease-out), filter 220ms var(--hyper-ease-out);
}
.hyper-dd-enter-start{ opacity:0; transform: translateY(12px) scale(0.982); filter: blur(7px); }
.hyper-dd-enter-end{   opacity:1; transform: translateY(0)    scale(1);     filter: blur(0); }

.hyper-dd-leave{
  transition: transform 160ms var(--hyper-ease), opacity 160ms var(--hyper-ease), filter 160ms var(--hyper-ease);
}
.hyper-dd-leave-start{ opacity:1; transform: translateY(0)    scale(1);     filter: blur(0); }
.hyper-dd-leave-end{   opacity:0; transform: translateY(12px) scale(0.982); filter: blur(7px); }

.ww-dropdown-panel{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Accordions / Details */
details > summary { cursor: pointer; transition: transform var(--hyper-fast) var(--hyper-ease); }
details[open] > summary { transform: translateY(0); }
details[open] > *:not(summary) {
  animation: hyper-accordion-in var(--hyper-med) var(--hyper-ease);
}
@keyframes hyper-accordion-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Toasts / Alerts */
.alert, .toast {
  transition: transform var(--hyper-med) var(--hyper-ease), opacity var(--hyper-med) var(--hyper-ease);
}
.alert[data-enter], .toast[data-enter] {
  opacity: 0; transform: translateY(8px) scale(0.985);
}
.alert[data-enter].in, .toast[data-enter].in {
  opacity: 1; transform: translateY(0)   scale(1);
}

/* Inputs */
.input, .select, .textarea {
  transition: box-shadow var(--hyper-med) var(--hyper-ease), transform var(--hyper-fast) var(--hyper-ease);
}
.input:focus, .select:focus, .textarea:focus {
  box-shadow: 0 0 0 2px rgba(139,92,246,.35), 0 8px 24px rgba(0,0,0,.25);
  transform: translateY(-1px);
}


/* Universal pressable surface (also for <a>) */
.hyper-pressable {
  transition: transform var(--hyper-med) var(--hyper-ease), opacity var(--hyper-med) var(--hyper-ease), box-shadow var(--hyper-med) var(--hyper-ease);
  backface-visibility: hidden;
  transform: translateZ(0);
}
.hyper-pressable:hover { transform: scale(var(--hyper-hover-scale)); box-shadow: var(--hyper-shadow); }
.hyper-pressable:active,
.hyper-pressable.is-pressed { transform: scale(var(--hyper-press-scale)); }

/* Opt-out flags */
[data-no-anim], [data-no-ripple] { animation: none !important; transition: none !important; }



/* ===== Universal Popup / Modal Animations (HyperOS style) ===== */
/* dialog element */
dialog {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
}
dialog[open] {
  animation: hyper-dialog-in var(--hyper-med) var(--hyper-ease) forwards;
}
dialog[closing] {
  animation: hyper-dialog-out 160ms var(--hyper-ease) forwards;
}
@keyframes hyper-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hyper-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.985); }
}
dialog::backdrop {
  background: rgba(0,0,0,.0);
  animation: hyper-backdrop-in var(--hyper-popup-in) var(--hyper-ease) forwards;
}
dialog[closing]::backdrop {
  animation: hyper-backdrop-out 160ms var(--hyper-ease) forwards;
}
@keyframes hyper-backdrop-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,.55); }
}
@keyframes hyper-backdrop-out {
  from { background: rgba(0,0,0,.55); }
  to   { background: rgba(0,0,0,0); }
}

/* Generic role=dialog (e.g., DaisyUI .modal with overlays) */
[role="dialog"], .modal .modal-box, .drawer .drawer-content {
  transition: transform var(--hyper-med) var(--hyper-ease), opacity var(--hyper-med) var(--hyper-ease);
}
[role="dialog"][data-enter], .modal[data-enter] .modal-box, .drawer[data-enter] .drawer-content {
  opacity: 0; transform: translateY(8px) scale(0.985);
}
[role="dialog"][data-enter].in, .modal[data-enter] .modal-box.in, .drawer[data-enter] .drawer-content.in {
  opacity: 1; transform: translateY(0) scale(1);
}
.modal::backdrop { background: rgba(0,0,0,.55); }



/* Modal polish for WAAPI */
.modal .modal-box,
[role="dialog"],
.drawer .drawer-content {
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* ===== Centering + Control-Center Style Backdrop ===== */
.modal, [role="dialog"] {
  display: grid;
  place-items: center;
}

dialog::backdrop,
.modal::backdrop {
  background: rgba(0,0,0,.0);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hyper-backdrop-in var(--hyper-popup-in) var(--hyper-ease) forwards;
}
dialog[closing]::backdrop,
.modal[closing]::backdrop {
  animation: hyper-backdrop-out var(--hyper-popup-out) var(--hyper-ease) forwards;
}

@keyframes hyper-backdrop-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,.55); }
}
@keyframes hyper-backdrop-out {
  from { background: rgba(0,0,0,.55); }
  to   { background: rgba(0,0,0,0); }
}

/* Ensure modal content is centered and GPU promoted */
.modal .modal-box, [role="dialog"] .modal-box, [role="dialog"] > *,
dialog .modal-box, dialog > *[data-dialog-content] {
  margin: 0 auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}



/* ===== Center all app popups (incl. members.php) with slow HyperOS timings ===== */
:root{
  --hyper-popup-in: 560ms;   /* slow & luxurious */
  --hyper-popup-out: 320ms;
  --hyper-popup-ease: cubic-bezier(0.32, 0, 0.08, 1);
}

.modal, [role="dialog"], .ww-modal, dialog {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 60;
  padding: 1rem;
}

.modal .modal-box, [role="dialog"] .modal-box, .ww-modal .modal-box, dialog .modal-box, dialog > *[data-dialog-content] {
  width: min(92vw, var(--modal-w, 560px));
  max-height: 86vh;
  overflow: auto;
  border-radius: 16px;
}

/* Ensure members.php modals (common ids/classes) are centered as well */
#memberAddModal, #memberEditModal, [id*="mitglied"], [id*="member"] {
  display: grid;
  place-items: center;
}



/* ===== Modal Pro Spring & Center Fix ===== */
:root{
  --hyper-popup-in: 580ms;
  --hyper-popup-out: 340ms;
  --hyper-popup-ease: cubic-bezier(0.32, 0.00, 0.08, 1.00);
}

.modal, [role="dialog"], dialog, .ww-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 60;
}

.modal .modal-box, [role="dialog"] .modal-box, dialog .modal-box,
dialog > *[data-dialog-content], .ww-modal .modal-box {
  width: min(96vw, var(--modal-w, 600px));
  max-height: 86vh;
  border-radius: 16px;
  overflow: auto;
  background: rgba(22,22,24, 0.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transform: translateZ(0);
  backface-visibility: hidden;
}

dialog::backdrop, .modal::backdrop {
  background: rgba(0,0,0,0);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hyper-backdrop-in var(--hyper-popup-in) var(--hyper-popup-ease) forwards;
}
dialog[closing]::backdrop, .modal[closing]::backdrop {
  animation: hyper-backdrop-out var(--hyper-popup-out) var(--hyper-popup-ease) forwards;
}



/* Force password modal extras */
.hyper-shake{
  animation: ww-hyper-shake 420ms var(--hyper-ease) both;
}
@keyframes ww-hyper-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(6px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(4px); }
}

/* Subtle neon pulse for lock icon */
.ww-forcepw-icon{
  filter: drop-shadow(0 0 10px rgba(167,139,250,.18));
  animation: ww-hyper-pulse 1800ms var(--hyper-ease) infinite;
}
@keyframes ww-hyper-pulse{
  0%,100%{ transform: translateZ(0) scale(1); filter: drop-shadow(0 0 10px rgba(167,139,250,.18)); }
  50%{ transform: translateZ(0) scale(1.03); filter: drop-shadow(0 0 18px rgba(232,121,249,.22)); }
}