/* ============================================
   WASARATHI - WhatsApp Messaging API Theme
   LIGHT MODE - Flying Messages Background
   ============================================ */

/* --- CSS Variables --- */
:root {
  --wa-green: #25D366;
  --wa-green-dark: #128C7E;
  --wa-teal: #075E54;
  --wa-light-green: #DCF8C6;
  --wa-bg: #efeae2;
  --wa-bg-alt: #f0ebe3;
  --wa-chat-bg: #ffffff;
  --wa-bubble-out: #d9fdd3;
  --wa-bubble-in: #ffffff;
  --wa-bubble-out-shadow: rgba(37, 211, 102, 0.15);
  --wa-bubble-in-shadow: rgba(0, 0, 0, 0.06);
  --wa-text: #111b21;
  --wa-text-secondary: #3b4a54;
  --wa-text-muted: #667781;
  --wa-border: rgba(0, 0, 0, 0.08);
  --wa-focus-glow: 0 0 0 3px rgba(37, 211, 102, 0.15);
  --card-radius: 20px;
  --input-radius: 12px;
  --btn-radius: 12px;
}

/* --- Base Body --- */
body {
  background: var(--wa-bg) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  margin: 0;
  padding: 0;
}

/* --- Main Auth Container --- */
#auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-bg);
  background-image:
    radial-gradient(ellipse at 20% 40%, rgba(37, 211, 102, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 25%, rgba(18, 140, 126, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 85%, rgba(7, 94, 84, 0.04) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* --- WhatsApp-style doodle pattern overlay --- */
#auth::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M10 10 L20 5 L20 15 Z' fill='%23128C7E'/%3E%3Ccircle cx='45' cy='12' r='4' fill='%23128C7E'/%3E%3Crect x='5' y='40' width='10' height='8' rx='4' fill='%23128C7E'/%3E%3Cpath d='M35 35 Q40 30 45 35 Q40 40 35 35' fill='%23128C7E'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23128C7E'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
}

/* ============================================
   FLYING MESSAGE BUBBLES (Pure CSS)
   Light-colored chat bubbles floating everywhere
   ============================================ */

/* --- Bubble Layer 1: Left-to-Right outgoing messages --- */
#auth .container::before {
  content: "Hey! How are you?";
  position: fixed;
  top: 12%;
  left: -220px;
  padding: 10px 18px;
  background: var(--wa-bubble-out);
  color: rgba(17, 27, 33, 0.35);
  font-size: 13px;
  border-radius: 12px 12px 12px 4px;
  pointer-events: none;
  animation: flyRight1 14s linear infinite;
  box-shadow:
    0 25vh 0 0 var(--wa-bubble-in),
    0 55vh 0 0 var(--wa-bubble-out),
    0 80vh 0 0 var(--wa-bubble-in);
  z-index: 0;
  opacity: 0.45;
}

/* --- Bubble Layer 2: Right-to-Left incoming messages --- */
#auth .container::after {
  content: "Let's connect!";
  position: fixed;
  top: 8%;
  right: -220px;
  padding: 10px 18px;
  background: var(--wa-bubble-in);
  color: rgba(17, 27, 33, 0.3);
  font-size: 12px;
  border-radius: 12px 12px 4px 12px;
  pointer-events: none;
  animation: flyLeft1 18s linear infinite 3s;
  box-shadow:
    0 1px 3px var(--wa-bubble-in-shadow),
    0 35vh 0 0 var(--wa-bubble-out),
    0 65vh 0 0 var(--wa-bubble-in),
    0 90vh 0 0 var(--wa-bubble-out);
  z-index: 0;
  opacity: 0.4;
}

/* --- Bubble Layer 3: Diagonal floating outgoing --- */
#auth .row.d-flex::before {
  content: "";
  position: fixed;
  width: 130px;
  height: 38px;
  background: var(--wa-bubble-out);
  border-radius: 18px 18px 18px 4px;
  top: 28%;
  left: 4%;
  pointer-events: none;
  animation: floatDiag1 20s ease-in-out infinite;
  opacity: 0.3;
  z-index: 0;
  box-shadow: 0 2px 8px var(--wa-bubble-out-shadow);
}

/* --- Bubble Layer 4: Diagonal floating incoming --- */
#auth .row.d-flex::after {
  content: "";
  position: fixed;
  width: 100px;
  height: 34px;
  background: var(--wa-bubble-in);
  border-radius: 18px 18px 4px 18px;
  top: 68%;
  right: 6%;
  pointer-events: none;
  animation: floatDiag2 16s ease-in-out infinite 2s;
  opacity: 0.35;
  z-index: 0;
  box-shadow: 0 2px 8px var(--wa-bubble-in-shadow);
}

/* Bubble Layer 5 removed — fixed-position box-shadows
   were bleeding through the card as green spots */

/* ============================================
   FLYING ANIMATIONS
   ============================================ */

/* Left-to-right flight */
@keyframes flyRight1 {
  0% {
    transform: translateX(0) translateY(0) rotate(-2deg);
    opacity: 0;
  }
  5% { opacity: 0.45; }
  90% { opacity: 0.45; }
  100% {
    transform: translateX(calc(100vw + 440px)) translateY(25px) rotate(3deg);
    opacity: 0;
  }
}

/* Right-to-left flight */
@keyframes flyLeft1 {
  0% {
    transform: translateX(0) translateY(0) rotate(2deg);
    opacity: 0;
  }
  5% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% {
    transform: translateX(calc(-100vw - 440px)) translateY(-18px) rotate(-3deg);
    opacity: 0;
  }
}

/* Diagonal floating */
@keyframes floatDiag1 {
  0%, 100% {
    transform: translate(0, 0) rotate(-4deg);
    opacity: 0.3;
  }
  25% {
    transform: translate(12vw, -6vh) rotate(2deg);
    opacity: 0.4;
  }
  50% {
    transform: translate(28vw, 4vh) rotate(-2deg);
    opacity: 0.25;
  }
  75% {
    transform: translate(8vw, 8vh) rotate(3deg);
    opacity: 0.35;
  }
}

@keyframes floatDiag2 {
  0%, 100% {
    transform: translate(0, 0) rotate(3deg);
    opacity: 0.35;
  }
  25% {
    transform: translate(-8vw, 6vh) rotate(-2deg);
    opacity: 0.25;
  }
  50% {
    transform: translate(-22vw, -4vh) rotate(4deg);
    opacity: 0.4;
  }
  75% {
    transform: translate(-6vw, -8vh) rotate(-3deg);
    opacity: 0.3;
  }
}

/* scatterDrift removed with Bubble Layer 5 */

/* ============================================
   FLYING PAPER PLANES (Pure CSS + SVG)
   ============================================ */

/* Paper plane SVG as background-image on unused pseudo-elements */

/* --- Plane 1: Bottom-left to top-right, large --- */
#auth form::before {
  content: "";
  position: fixed;
  width: 38px;
  height: 38px;
  bottom: 15%;
  left: -60px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly1 12s linear infinite 1s;
}

/* --- Plane 2: Top-right to bottom-left, medium --- */
#auth form::after {
  content: "";
  position: fixed;
  width: 28px;
  height: 28px;
  top: 10%;
  right: -50px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325D366' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly2 16s linear infinite 5s;
}

/* --- Plane 3: Left to right, mid-height, small --- */
#auth .text-center.mb-5::before {
  content: "";
  position: fixed;
  width: 22px;
  height: 22px;
  top: 45%;
  left: -40px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23128C7E' fill-opacity='0.35' stroke='none'%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly3 10s linear infinite 3s;
}

/* --- Plane 4: Right to left, lower, tiny --- */
#auth .text-center.mb-5::after {
  content: "";
  position: fixed;
  width: 18px;
  height: 18px;
  top: 75%;
  right: -35px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366' fill-opacity='0.3' stroke='none'%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly4 14s linear infinite 8s;
}

/* --- Plane 5: Diagonal swooping arc, medium --- */
#auth .clearfix::before {
  content: "";
  position: fixed;
  width: 30px;
  height: 30px;
  top: 20%;
  left: -50px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075E54' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly5 18s linear infinite 11s;
}

/* --- Plane 6: Fast small plane, top area --- */
#auth .clearfix::after {
  content: "";
  position: fixed;
  width: 16px;
  height: 16px;
  top: 8%;
  left: -30px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366' fill-opacity='0.25' stroke='none'%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: planeFly6 8s linear infinite 2s;
}

/* --- Paper Plane Animations --- */

/* Plane 1: bottom-left to top-right, rising arc */
@keyframes planeFly1 {
  0% {
    transform: translate(0, 0) rotate(-30deg);
    opacity: 0;
  }
  5% { opacity: 0.4; }
  50% {
    transform: translate(calc(50vw + 100px), -30vh) rotate(-20deg);
    opacity: 0.5;
  }
  90% { opacity: 0.35; }
  100% {
    transform: translate(calc(100vw + 120px), -55vh) rotate(-15deg);
    opacity: 0;
  }
}

/* Plane 2: top-right to bottom-left, descending */
@keyframes planeFly2 {
  0% {
    transform: translate(0, 0) rotate(150deg) scaleX(-1);
    opacity: 0;
  }
  5% { opacity: 0.35; }
  50% {
    transform: translate(calc(-50vw - 80px), 25vh) rotate(140deg) scaleX(-1);
    opacity: 0.4;
  }
  90% { opacity: 0.3; }
  100% {
    transform: translate(calc(-100vw - 100px), 45vh) rotate(135deg) scaleX(-1);
    opacity: 0;
  }
}

/* Plane 3: straight left to right, slight rise */
@keyframes planeFly3 {
  0% {
    transform: translate(0, 0) rotate(-15deg);
    opacity: 0;
  }
  5% { opacity: 0.35; }
  85% { opacity: 0.35; }
  100% {
    transform: translate(calc(100vw + 80px), -12vh) rotate(-10deg);
    opacity: 0;
  }
}

/* Plane 4: right to left, slight drop */
@keyframes planeFly4 {
  0% {
    transform: translate(0, 0) rotate(165deg) scaleX(-1);
    opacity: 0;
  }
  5% { opacity: 0.3; }
  85% { opacity: 0.3; }
  100% {
    transform: translate(calc(-100vw - 70px), 10vh) rotate(160deg) scaleX(-1);
    opacity: 0;
  }
}

/* Plane 5: sweeping diagonal arc with wobble */
@keyframes planeFly5 {
  0% {
    transform: translate(0, 0) rotate(-25deg);
    opacity: 0;
  }
  5% { opacity: 0.3; }
  25% {
    transform: translate(25vw, -10vh) rotate(-35deg);
    opacity: 0.4;
  }
  50% {
    transform: translate(50vw, -5vh) rotate(-20deg);
    opacity: 0.35;
  }
  75% {
    transform: translate(75vw, -18vh) rotate(-30deg);
    opacity: 0.3;
  }
  100% {
    transform: translate(calc(100vw + 100px), -25vh) rotate(-22deg);
    opacity: 0;
  }
}

/* Plane 6: fast straight shot */
@keyframes planeFly6 {
  0% {
    transform: translate(0, 0) rotate(-12deg);
    opacity: 0;
  }
  5% { opacity: 0.25; }
  85% { opacity: 0.25; }
  100% {
    transform: translate(calc(100vw + 60px), 5vh) rotate(-8deg);
    opacity: 0;
  }
}

/* ============================================
   EXTRA FLOATING MESSAGES
   Ticker-tape bubbles flowing behind card
   ============================================ */

#auth::after {
  content: "";
  position: absolute;
  top: 0; left: -300px;
  width: 150px;
  height: 42px;
  background: var(--wa-bubble-out);
  border-radius: 20px 20px 20px 6px;
  opacity: 0.2;
  pointer-events: none;
  animation: tickerFlow 22s linear infinite;
  box-shadow:
    0 2px 10px var(--wa-bubble-out-shadow),
    0 15vh 0 -2px var(--wa-bubble-in),
    180px 32vh 0 0 var(--wa-bubble-out),
    -80px 52vh 0 -2px var(--wa-bubble-in),
    130px 72vh 0 0 var(--wa-bubble-out),
    -40px 88vh 0 -3px var(--wa-bubble-in);
}

@keyframes tickerFlow {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(calc(100vw + 600px)) translateY(15px);
  }
}

/* ============================================
   CARD & FORM STYLES
   ============================================ */

/* --- Container Reset --- */
#auth .container {
  max-width: 100%;
  padding: 0;
  position: relative;
  z-index: 1;
}

#auth .row.d-flex {
  margin: 0;
  justify-content: center;
}

#auth .col-md-8.col-lg-6.col-xl-5.col-sm-12 {
  max-width: 460px;
  width: 100%;
  padding: 0;
}

/* --- Glass Card (Light) --- */
#auth .card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(20px);
  z-index: 2;
}

@keyframes cardAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Green accent top bar */
#auth .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--wa-green-dark),
    var(--wa-green),
    var(--wa-green-dark),
    transparent
  );
  animation: shimmer 4s ease-in-out infinite;
  z-index: 3;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; transform: translateX(-30%); }
  50% { opacity: 1; transform: translateX(30%); }
}

#auth .card-body {
  padding: 40px 36px 30px !important;
}

/* --- Logo & Title --- */
#auth .text-center.mb-5 img {
  filter: drop-shadow(0 4px 16px rgba(18, 140, 126, 0.2));
  transition: filter 0.4s ease, transform 0.4s ease;
  border-radius: 50%;
}

#auth .text-center.mb-5 img:hover {
  filter: drop-shadow(0 6px 24px rgba(18, 140, 126, 0.3));
  transform: scale(1.05);
}

#auth .text-center.mb-5 h3 {
  color: var(--wa-text) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  line-height: 1.5;
  background: linear-gradient(135deg, var(--wa-text), var(--wa-green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Labels --- */
#auth label {
  color: var(--wa-text-secondary) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* --- Input Fields --- */
#auth .form-control {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--input-radius) !important;
  color: var(--wa-text) !important;
  padding: 14px 16px 14px 48px !important;
  font-size: 0.95rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: auto !important;
}

#auth .form-control::placeholder {
  color: var(--wa-text-muted) !important;
}

#auth .form-control:focus {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--wa-green) !important;
  box-shadow: var(--wa-focus-glow), 0 0 12px rgba(37, 211, 102, 0.1) !important;
  outline: none !important;
}

/* --- Input Icons --- */
#auth .form-control-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--wa-text-muted) !important;
  z-index: 2;
  transition: color 0.3s ease;
}

#auth .form-control-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--wa-text-muted);
  transition: stroke 0.3s ease;
}

#auth .form-group:focus-within .form-control-icon svg {
  stroke: var(--wa-green-dark);
  filter: drop-shadow(0 0 4px rgba(18, 140, 126, 0.3));
}

#auth .form-group {
  margin-bottom: 20px !important;
}

/* --- Login Button (WhatsApp Green) --- */
#auth #form-submit-button {
  background: linear-gradient(135deg, var(--wa-green-dark), var(--wa-green)) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.5px;
  padding: 14px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.25);
}

#auth #form-submit-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

#auth #form-submit-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.35) !important;
}

#auth #form-submit-button:hover::before {
  left: 100%;
}

#auth #form-submit-button:active {
  transform: translateY(0) !important;
}

/* --- Google Button --- */
#auth .btn-white,
#auth a.btn.btn-lg.btn-white {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: var(--btn-radius) !important;
  color: var(--wa-text) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 14px !important;
  transition: all 0.3s ease !important;
}

#auth .btn-white:hover,
#auth a.btn.btn-lg.btn-white:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(18, 140, 126, 0.2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  color: var(--wa-text) !important;
}

/* --- Facebook Button --- */
#auth a.btn[style*="background: #1877F2"],
#auth a.btn.btn-primary.mt-2 {
  background: linear-gradient(135deg, #1877F2, #42a5f5) !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.2);
  color: #fff !important;
}

#auth a.btn[style*="background: #1877F2"]:hover,
#auth a.btn.btn-primary.mt-2:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.3) !important;
}

/* --- Footer Links --- */
#auth p.mt-3 {
  overflow: hidden;
}

#auth p.mt-3 a {
  color: var(--wa-text-muted) !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  font-weight: 400 !important;
}

#auth p.mt-3 a.float-start:hover {
  color: var(--wa-green-dark) !important;
}

#auth p.mt-3 a.float-end:hover {
  color: var(--wa-green-dark) !important;
}

/* --- Scrollbar --- */
#auth ::-webkit-scrollbar {
  width: 4px;
}

#auth ::-webkit-scrollbar-thumb {
  background: rgba(18, 140, 126, 0.2);
  border-radius: 4px;
}

/* --- Selection Color --- */
#auth ::selection {
  background: rgba(37, 211, 102, 0.2);
  color: var(--wa-text);
}

/* --- Responsive --- */
@media (max-width: 480px) {
  #auth .card-body {
    padding: 30px 24px 24px !important;
  }

  #auth .text-center.mb-5 h3 {
    font-size: 1rem !important;
  }

  #auth .card {
    border-radius: 16px !important;
  }

  /* Reduce animation intensity on mobile */
  #auth .container::before,
  #auth .container::after {
    opacity: 0.2;
  }

  #auth::after {
    display: none;
  }

  /* Hide some planes on mobile for performance */
  #auth .clearfix::before,
  #auth .clearfix::after,
  #auth .text-center.mb-5::after {
    display: none;
  }
}

/* --- Reduced Motion Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  #auth .container::before,
  #auth .container::after,
  #auth .row.d-flex::before,
  #auth .row.d-flex::after,
  #auth::after,
  #auth form::before,
  #auth form::after,
  #auth .text-center.mb-5::before,
  #auth .text-center.mb-5::after,
  #auth .clearfix::before,
  #auth .clearfix::after {
    animation: none !important;
    opacity: 0;
  }

  #auth .card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  #auth .card::before {
    animation: none !important;
    opacity: 0.7;
  }
}