/* Willkommensrabatt-Popup — App-Anzeigen-Look: vertikal zentrierte Karte auf
   allen Viewports. Eine durchgehende Fläche (kein Box-in-Box). Alle Animationen
   laufen ausschließlich über transform/opacity (GPU-kompositiert); die
   Dauer-Effekte liegen in der dekorativen .__fx-Ebene (aria-hidden).
   Exit über .is-closing (siehe welcome_popup.js). */

.scharr-welcome-popup {
  position: fixed;
  inset: 0;
  z-index: 1400;
}

.scharr-welcome-popup[hidden] {
  display: none !important;
}

.scharr-welcome-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 22, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: swp-backdrop-in 280ms ease-out both;
}

.scharr-welcome-popup__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(100% - 32px, 470px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding: 34px 22px 26px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 28px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(130% 90% at 85% -15%, rgba(196, 141, 61, 0.38), transparent 58%),
    radial-gradient(110% 80% at 8% 112%, rgba(140, 95, 30, 0.30), transparent 55%),
    linear-gradient(163deg, #142238 0%, #0b1626 55%, #0a1220 100%);
  color: #f4f0e8;
  text-align: center;
  animation: swp-card-in 440ms cubic-bezier(0.34, 1.3, 0.5, 1) both;
}

.scharr-welcome-popup__dialog:focus {
  outline: none;
}

/* Dekorative Effekt-Ebene: driftende Lichtkugeln + aufsteigende Goldfunken. */
.scharr-welcome-popup__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scharr-welcome-popup__orb {
  position: absolute;
  width: min(280px, 70vw);
  height: min(280px, 70vw);
  border-radius: 50%;
}

.scharr-welcome-popup__orb--warm {
  top: -12%;
  left: -14%;
  background: radial-gradient(circle, rgba(216, 166, 88, 0.28), transparent 66%);
  animation: swp-orb-warm 13s ease-in-out infinite alternate;
}

.scharr-welcome-popup__orb--cool {
  right: -18%;
  bottom: -16%;
  background: radial-gradient(circle, rgba(96, 148, 224, 0.16), transparent 66%);
  animation: swp-orb-cool 17s ease-in-out infinite alternate;
}

.scharr-welcome-popup__spark {
  position: absolute;
  top: 100%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 223, 164, 0.95), rgba(216, 166, 88, 0.35) 70%, transparent);
  opacity: 0;
  animation: swp-spark 7s linear infinite;
}

.scharr-welcome-popup__spark:nth-of-type(3) { left: 12%; animation-duration: 6.4s; animation-delay: 600ms; }
.scharr-welcome-popup__spark:nth-of-type(4) { left: 27%; animation-duration: 8.2s; animation-delay: 2.6s; width: 4px; height: 4px; }
.scharr-welcome-popup__spark:nth-of-type(5) { left: 46%; animation-duration: 5.8s; animation-delay: 1.4s; }
.scharr-welcome-popup__spark:nth-of-type(6) { left: 63%; animation-duration: 7.6s; animation-delay: 3.8s; width: 8px; height: 8px; }
.scharr-welcome-popup__spark:nth-of-type(7) { left: 79%; animation-duration: 6.8s; animation-delay: 200ms; width: 5px; height: 5px; }
.scharr-welcome-popup__spark:nth-of-type(8) { left: 91%; animation-duration: 8.8s; animation-delay: 4.6s; }

.scharr-welcome-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #f4f0e8;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  animation: swp-spin-in 480ms cubic-bezier(0.34, 1.4, 0.64, 1) 260ms both;
}

.scharr-welcome-popup__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.scharr-welcome-popup__close:focus-visible,
.scharr-welcome-popup__btn:focus-visible {
  outline: 2px solid #e8b45f;
  outline-offset: 3px;
}

.scharr-welcome-popup__eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: #e3b568;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation:
    swp-rise 450ms ease-out 180ms both,
    swp-breathe 2800ms ease-in-out 2400ms infinite alternate;
}

.scharr-welcome-popup__title {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  animation: swp-title-float 3600ms ease-in-out 1400ms infinite alternate;
}

/* Weich pulsierender Lichtschein hinter der Rabattzahl. */
.scharr-welcome-popup__title::before {
  content: "";
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  background: radial-gradient(55% 70% at 50% 42%, rgba(216, 166, 88, 0.30), transparent 68%);
  pointer-events: none;
  animation: swp-glow 3800ms ease-in-out 900ms infinite alternate;
}

/* Langsam rotierender Lichtring um die Rabattzahl. */
.scharr-welcome-popup__title::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: -1;
  width: min(215px, 56vw);
  height: min(215px, 56vw);
  margin: calc(min(215px, 56vw) / -2) 0 0 calc(min(215px, 56vw) / -2);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(232, 180, 95, 0.30) 42deg,
    transparent 118deg,
    transparent 196deg,
    rgba(232, 180, 95, 0.18) 252deg,
    transparent 330deg
  );
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 60%, #000 70%, transparent 73%);
  mask: radial-gradient(circle, transparent 57%, #000 60%, #000 70%, transparent 73%);
  pointer-events: none;
  animation: swp-ring 9s linear infinite;
}

.scharr-welcome-popup__discount {
  display: block;
  background: linear-gradient(100deg, #e8b45f 0%, #f8dfa4 22%, #c98f3e 48%, #f3d190 74%, #e8b45f 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(4.2rem, 19vw, 6.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  animation:
    swp-zoom 680ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both,
    swp-shine 3600ms linear 1400ms infinite;
}

.scharr-welcome-popup__title-line {
  display: block;
  color: #f4f0e8;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  animation: swp-zoom-soft 520ms cubic-bezier(0.34, 1.4, 0.64, 1) 520ms both;
}

.scharr-welcome-popup__text {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  margin: 0 auto;
  color: rgba(233, 227, 214, 0.82);
  font-size: 0.98rem;
  line-height: 1.55;
  animation: swp-rise 450ms ease-out 680ms both;
}

.scharr-welcome-popup__actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 22px;
  animation: swp-rise 450ms ease-out 800ms both;
}

.scharr-welcome-popup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.scharr-welcome-popup__btn:hover {
  transform: translateY(-1px);
}

.scharr-welcome-popup__btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e0ac54 0%, #b07d37 100%);
  color: #1c1204;
  box-shadow: 0 14px 34px rgba(224, 172, 84, 0.32);
  animation: swp-cta-pulse 2400ms ease-in-out 2200ms infinite;
}

/* Glanzstreifen, der regelmäßig über den Haupt-Button läuft. */
.scharr-welcome-popup__btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  pointer-events: none;
  animation: swp-sheen 3200ms ease-in-out 2600ms infinite;
}

.scharr-welcome-popup__btn--primary:hover,
.scharr-welcome-popup__btn--primary:focus-visible {
  background: linear-gradient(135deg, #eebd68 0%, #c08a3e 100%);
  animation-play-state: paused;
}

.scharr-welcome-popup__btn--secondary {
  border: 1px solid rgba(244, 240, 232, 0.30);
  background: transparent;
  color: #f4f0e8;
}

.scharr-welcome-popup__btn--secondary:hover {
  background: rgba(244, 240, 232, 0.10);
}

body.scharr-welcome-popup-open {
  overflow: hidden;
}

/* Exit-Choreografie: welcome_popup.js setzt .is-closing und blendet erst nach
   dem animationend des Dialogs aus. */
.scharr-welcome-popup.is-closing .scharr-welcome-popup__backdrop {
  animation: swp-backdrop-out 300ms ease both;
}

.scharr-welcome-popup.is-closing .scharr-welcome-popup__dialog {
  animation: swp-card-out 300ms cubic-bezier(0.5, 0, 0.75, 0.4) both;
}

@media (min-width: 641px) {
  .scharr-welcome-popup__dialog {
    padding: 40px 32px 32px;
    border-radius: 30px;
  }

  .scharr-welcome-popup__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes swp-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes swp-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes swp-card-in {
  from { transform: translate(-50%, -46%) scale(0.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes swp-card-out {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(-50%, -47%) scale(0.94); opacity: 0; }
}

@keyframes swp-rise {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes swp-zoom {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes swp-zoom-soft {
  from { transform: scale(0.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes swp-spin-in {
  from { transform: rotate(-120deg) scale(0.4); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }
}

@keyframes swp-shine {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@keyframes swp-glow {
  from { transform: scale(0.92); opacity: 0.55; }
  to { transform: scale(1.06); opacity: 1; }
}

@keyframes swp-ring {
  to { transform: rotate(360deg); }
}

@keyframes swp-title-float {
  from { transform: translateY(0); }
  to { transform: translateY(-5px); }
}

@keyframes swp-breathe {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

@keyframes swp-orb-warm {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(9%, 12%, 0) scale(1.18); }
}

@keyframes swp-orb-cool {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to { transform: translate3d(-11%, -9%, 0) scale(0.94); }
}

@keyframes swp-spark {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  60% { opacity: 0.55; transform: translate3d(-7px, -210px, 0); }
  100% { transform: translate3d(4px, -360px, 0); opacity: 0; }
}

@keyframes swp-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes swp-sheen {
  0% { transform: translateX(-130%); }
  55% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .scharr-welcome-popup__fx {
    display: none;
  }

  .scharr-welcome-popup__backdrop,
  .scharr-welcome-popup__dialog,
  .scharr-welcome-popup__close,
  .scharr-welcome-popup__eyebrow,
  .scharr-welcome-popup__title,
  .scharr-welcome-popup__title::before,
  .scharr-welcome-popup__title::after,
  .scharr-welcome-popup__discount,
  .scharr-welcome-popup__title-line,
  .scharr-welcome-popup__text,
  .scharr-welcome-popup__actions,
  .scharr-welcome-popup__btn--primary,
  .scharr-welcome-popup__btn--primary::before,
  .scharr-welcome-popup.is-closing .scharr-welcome-popup__backdrop,
  .scharr-welcome-popup.is-closing .scharr-welcome-popup__dialog {
    animation: none;
  }

  .scharr-welcome-popup__btn {
    transition: none;
  }

  .scharr-welcome-popup__btn:hover {
    transform: none;
  }
}