/* =========================================================
   MEETDAY LOGIN
   Midnight Blue / Romantic Glass Edition
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

html {
  background: #020816;
}

body {
  min-height: 100vh;
  padding: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: #fff;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(118, 199, 255, 0.24),
      transparent 35%
    ),
    radial-gradient(
      circle at 8% 25%,
      rgba(32, 119, 255, 0.32),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 72%,
      rgba(68, 54, 255, 0.29),
      transparent 34%
    ),
    radial-gradient(
      circle at 45% 110%,
      rgba(0, 177, 255, 0.20),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #010713 0%,
      #04172e 35%,
      #06274a 67%,
      #07172f 100%
    );

  background-size: 130% 130%;
  animation: backgroundDrift 14s ease-in-out infinite alternate;
}


/* =========================================================
   CINEMATIC BACKGROUND LIGHT
========================================================= */

body::before {
  content: "";

  position: absolute;

  width: 850px;
  height: 850px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(40, 139, 255, 0.20),
      transparent,
      rgba(98, 77, 255, 0.16),
      transparent,
      rgba(57, 197, 255, 0.18),
      transparent
    );

  filter: blur(80px);

  animation: auroraRotate 22s linear infinite;

  pointer-events: none;
}


/* Tiny dreamy light field */

body::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.5;

  background-image:
    radial-gradient(
      circle at 15% 20%,
      rgba(255, 255, 255, 0.85) 0 1px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 73% 18%,
      rgba(170, 220, 255, 0.8) 0 1px,
      transparent 1.7px
    ),
    radial-gradient(
      circle at 87% 42%,
      rgba(255, 255, 255, 0.65) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 31% 77%,
      rgba(154, 214, 255, 0.75) 0 1px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 8% 72%,
      rgba(255, 255, 255, 0.65) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 66% 88%,
      rgba(190, 225, 255, 0.65) 0 1px,
      transparent 1.6px
    );

  animation: starBreath 6s ease-in-out infinite alternate;

  pointer-events: none;
}


@keyframes backgroundDrift {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}


@keyframes auroraRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


@keyframes starBreath {
  from {
    opacity: 0.28;
  }

  to {
    opacity: 0.65;
  }
}


/* =========================================================
   MAIN GLASS CARD
========================================================= */

form {
  position: relative;
  z-index: 10;

  width: 100%;
  max-width: 520px;

  padding:
    112px
    54px
    54px;

  display: flex;
  flex-direction: column;

  border-radius: 38px;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.055)
    );

  backdrop-filter:
    blur(38px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(38px)
    saturate(145%);

  box-shadow:
    0 55px 120px rgba(0, 2, 17, 0.62),

    0 12px 40px rgba(0, 82, 180, 0.17),

    inset 0 1px 0 rgba(255, 255, 255, 0.31),

    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  animation:
    cardArrival 1s cubic-bezier(.16, 1, .3, 1) both,
    cardFloat 7s ease-in-out 1s infinite;

  overflow: hidden;

  isolation: isolate;
}


/* =========================================================
   GLOWING LOVE CRYSTAL
========================================================= */

form::before {
  content: "♥";

  position: absolute;

  top: 28px;
  left: 50%;

  width: 66px;
  height: 66px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 23px;

  font-size: 28px;
  line-height: 1;

  color: #d9f1ff;

  background:
    linear-gradient(
      145deg,
      rgba(218, 242, 255, 0.26),
      rgba(90, 169, 255, 0.11)
    );

  border:
    1px solid
    rgba(218, 241, 255, 0.38);

  box-shadow:
    0 0 0 7px rgba(92, 179, 255, 0.035),

    0 0 35px rgba(80, 174, 255, 0.37),

    0 18px 34px rgba(0, 42, 100, 0.28),

    inset 0 1px 0 rgba(255, 255, 255, 0.48),

    inset 0 -10px 30px rgba(20, 98, 190, 0.12);

  text-shadow:
    0 0 15px rgba(199, 234, 255, 0.9),

    0 0 35px rgba(80, 174, 255, 0.7);

  animation: heartGlow 3.3s ease-in-out infinite;
}


/* Animated glass reflection */

form::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 700px;

  top: -180px;
  left: -360px;

  transform: rotate(24deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.17),
      rgba(255, 255, 255, 0.045),
      transparent
    );

  filter: blur(5px);

  animation: glassReflection 9s ease-in-out infinite;

  pointer-events: none;
}


form > * {
  position: relative;
  z-index: 2;
}


@keyframes cardArrival {
  from {
    opacity: 0;

    transform:
      translateY(35px)
      scale(0.94);

    filter: blur(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter: blur(0);
  }
}


@keyframes cardFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}


@keyframes heartGlow {
  0%,
  100% {
    transform:
      translateX(-50%)
      scale(1);

    box-shadow:
      0 0 0 7px rgba(92, 179, 255, 0.035),
      0 0 30px rgba(80, 174, 255, 0.30),
      0 18px 34px rgba(0, 42, 100, 0.28);
  }

  50% {
    transform:
      translateX(-50%)
      scale(1.065);

    box-shadow:
      0 0 0 11px rgba(92, 179, 255, 0.045),
      0 0 52px rgba(80, 174, 255, 0.53),
      0 22px 42px rgba(0, 42, 100, 0.34);
  }
}


@keyframes glassReflection {
  0%,
  18% {
    left: -360px;
  }

  58%,
  100% {
    left: 780px;
  }
}


/* =========================================================
   LABELS
========================================================= */

label {
  margin:
    0
    0
    9px
    5px;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  color:
    rgba(223, 242, 255, 0.70);
}


label:not(:first-of-type) {
  margin-top: 22px;
}


/* =========================================================
   INPUTS
========================================================= */

input {
  width: 100%;
  height: 62px;

  padding: 0 20px;

  border-radius: 19px;

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  outline: none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.085),
      rgba(255, 255, 255, 0.045)
    );

  color: #fff;

  caret-color: #a9dfff;

  font-family: inherit;
  font-size: 16px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 5px 15px rgba(0, 10, 35, 0.06);

  transition:
    transform 0.28s cubic-bezier(.2, .8, .2, 1),
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}


input:hover {
  border-color:
    rgba(159, 215, 255, 0.28);

  background:
    rgba(255, 255, 255, 0.10);
}


input:focus {
  transform:
    translateY(-2px);

  border-color:
    rgba(137, 210, 255, 0.82);

  background:
    rgba(255, 255, 255, 0.125);

  box-shadow:
    0 0 0 4px rgba(71, 167, 255, 0.09),

    0 0 35px rgba(57, 148, 255, 0.13),

    0 14px 34px rgba(0, 12, 45, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}


/* Browser autofill */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;

  -webkit-box-shadow:
    0 0 0 1000px rgba(16, 54, 91, 0.9)
    inset;

  transition:
    background-color 5000s ease-in-out 0s;
}


/* =========================================================
   BUTTON
========================================================= */

button {
  width: 100%;
  height: 64px;

  margin-top: 34px;

  position: relative;

  border: 0;
  border-radius: 20px;

  cursor: pointer;

  overflow: hidden;

  font-family: inherit;

  font-size: 16px;
  font-weight: 700;

  letter-spacing: 0.15px;

  color: #031a33;

  background:
    linear-gradient(
      115deg,
      #e0f5ff 0%,
      #9cdbff 30%,
      #65baff 65%,
      #91d3ff 100%
    );

  background-size: 180% 180%;

  box-shadow:
    0 18px 40px rgba(19, 120, 226, 0.32),

    0 4px 15px rgba(61, 173, 255, 0.17),

    inset 0 1px 0 rgba(255, 255, 255, 0.92),

    inset 0 -2px 6px rgba(15, 104, 196, 0.12);

  transition:
    transform 0.25s cubic-bezier(.2, .8, .2, 1),
    box-shadow 0.25s ease,
    filter 0.25s ease;

  animation:
    buttonGradient 5s ease infinite;
}


button:hover {
  transform:
    translateY(-3px)
    scale(1.012);

  filter:
    brightness(1.06);

  box-shadow:
    0 25px 50px rgba(19, 120, 226, 0.43),

    0 0 35px rgba(93, 191, 255, 0.18),

    inset 0 1px 0 rgba(255, 255, 255, 1);
}


button:active {
  transform:
    translateY(0)
    scale(0.99);
}


@keyframes buttonGradient {
  0%,
  100% {
    background-position:
      0% 50%;
  }

  50% {
    background-position:
      100% 50%;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  body {
    padding: 18px;
  }

  form {
    max-width: 100%;

    padding:
      103px
      27px
      34px;

    border-radius: 31px;
  }

  form::before {
    width: 62px;
    height: 62px;

    top: 25px;

    border-radius: 21px;
  }

  input {
    height: 59px;
  }

  button {
    height: 61px;

    margin-top: 30px;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}