/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =========================
   BODY / APP BACKGROUND
========================= */

body {
  min-height: 100vh;

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

  overflow: hidden;

  font-family: Arial, Helvetica, sans-serif;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0, 153, 255, 0.20),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 30%,
      rgba(111, 76, 255, 0.18),
      transparent 35%
    ),

    radial-gradient(
      circle at 65% 85%,
      rgba(0, 255, 190, 0.14),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #020617,
      #0b1324,
      #10213c,
      #172554
    );

  background-size: 150% 150%;

  animation:
    backgroundMove 12s ease-in-out infinite alternate;
}


/* =========================
   BACKGROUND ANIMATION
========================= */

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

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


/* =========================
   BACKGROUND GLOW CIRCLES
========================= */

.bg-circle {
  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;

  opacity: 0.6;
}


.circle1 {
  width: 300px;
  height: 300px;

  background:
    rgba(0, 153, 255, 0.30);

  top: 8%;
  left: 8%;

  animation:
    glowMove1 9s ease-in-out infinite alternate;
}


.circle2 {
  width: 360px;
  height: 360px;

  background:
    rgba(125, 70, 255, 0.24);

  top: 20%;
  right: 5%;

  animation:
    glowMove2 11s ease-in-out infinite alternate;
}


.circle3 {
  width: 330px;
  height: 330px;

  background:
    rgba(0, 255, 180, 0.20);

  bottom: 5%;
  right: 20%;

  animation:
    glowMove3 10s ease-in-out infinite alternate;
}


@keyframes glowMove1 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(100px, 60px);
  }
}


@keyframes glowMove2 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-100px, 80px);
  }
}


@keyframes glowMove3 {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-60px, -80px);
  }
}


/* =========================
   CALCULATOR / MOBILE APP
========================= */

.calculator {
  position: relative;

  z-index: 10;

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

  min-height: 100vh;

  padding:
    32px 22px 35px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    );

  backdrop-filter:
    blur(28px);

  -webkit-backdrop-filter:
    blur(28px);

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

  box-shadow:
    0 30px 80px
      rgba(0, 0, 0, 0.42),

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

  animation:
    appEnter 0.7s ease-out;
}


/* =========================
   APP ENTRY
========================= */

@keyframes appEnter {
  from {
    opacity: 0;

    transform:
      translateY(35px)
      scale(0.96);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================
   HEADER
========================= */

.calc-header {
  margin-bottom:
    24px;
}


.calc-header p {
  color:
    rgba(255, 255, 255, 0.45);

  font-size:
    11px;

  letter-spacing:
    3px;

  margin-bottom:
    6px;
}


.calc-header h2 {
  color:
    white;

  font-size:
    32px;

  font-weight:
    700;

  letter-spacing:
    0.3px;

  text-shadow:
    0 0 12px
      rgba(255, 255, 255, 0.10);
}


/* =========================
   DISPLAY
========================= */

#display {
  width:
    100%;

  height:
    105px;

  margin-bottom:
    26px;

  padding:
    18px 20px;

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

  border-radius:
    28px;

  outline:
    none;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.07)
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  color:
    white;

  font-size:
    42px;

  font-weight:
    600;

  text-align:
    right;

  box-shadow:
    inset 0 5px 18px
      rgba(0, 0, 0, 0.28),

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

    0 0 22px
      rgba(59, 130, 246, 0.07);

  transition:
    0.25s ease;
}


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

.buttons {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    14px;
}


/* =========================
   NORMAL BUTTONS
========================= */

.btn {
  aspect-ratio:
    1 / 1;

  position:
    relative;

  overflow:
    hidden;

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

  border-radius:
    24px;

  cursor:
    pointer;

  color:
    white;

  font-size:
    26px;

  font-weight:
    500;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.15),
      rgba(255, 255, 255, 0.08)
    );

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  box-shadow:
    0 10px 22px
      rgba(0, 0, 0, 0.20),

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

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}


/* =========================
   BUTTON LIGHT EFFECT
========================= */

.btn::before {
  content:
    "";

  position:
    absolute;

  width:
    60%;

  height:
    200%;

  top:
    -50%;

  left:
    -100%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,0.22),
      transparent
    );

  transform:
    rotate(20deg);

  transition:
    0.5s ease;
}


.btn:hover::before {
  left:
    150%;
}


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

.btn:hover {
  transform:
    translateY(-3px)
    scale(1.02);

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

  box-shadow:
    0 14px 28px
      rgba(0,0,0,0.24);
}


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

.btn:active {
  transform:
    scale(0.91);
}


/* =========================
   OPERATOR BUTTONS
========================= */

.operator {
  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #2563eb
    );

  box-shadow:
    0 10px 24px
      rgba(37, 99, 235, 0.25);
}


.operator:hover {
  box-shadow:
    0 14px 30px
      rgba(59, 130, 246, 0.38),

    0 0 18px
      rgba(59, 130, 246, 0.20);
}


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

.clear {
  background:
    linear-gradient(
      135deg,
      #ff4b4b,
      #dc2626
    );

  box-shadow:
    0 10px 24px
      rgba(239, 68, 68, 0.22);
}


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

.delete {
  background:
    linear-gradient(
      135deg,
      #ffae16,
      #d97706
    );

  font-size:
    20px;

  box-shadow:
    0 10px 24px
      rgba(245, 158, 11, 0.22);
}


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

.equal {
  background:
    linear-gradient(
      135deg,
      #10c795,
      #059669
    );

  box-shadow:
    0 10px 25px
      rgba(16, 185, 129, 0.25),

    0 0 15px
      rgba(16, 185, 129, 0.12);

  animation:
    equalGlow
    2.5s
    ease-in-out
    infinite alternate;
}


@keyframes equalGlow {
  from {
    box-shadow:
      0 10px 22px
        rgba(16, 185, 129, 0.20),

      0 0 5px
        rgba(16, 185, 129, 0.08);
  }

  to {
    box-shadow:
      0 14px 30px
        rgba(16, 185, 129, 0.32),

      0 0 22px
        rgba(16, 185, 129, 0.30);
  }
}


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

.zero {
  grid-column:
    span 2;

  aspect-ratio:
    auto;

  height:
    72px;
}


/* =========================
   DESKTOP PHONE PREVIEW
========================= */

@media (min-width: 501px) {

  body {
    padding:
      30px;
  }


  .calculator {
    min-height:
      760px;

    border-radius:
      40px;

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

    box-shadow:
      0 35px 90px
        rgba(0,0,0,0.50),

      0 0 70px
        rgba(59,130,246,0.06);
  }

}


/* =========================
   MOBILE APP MODE
========================= */

@media (max-width: 500px) {

  body {
    display:
      block;

    background:
      #071426;
  }


  .calculator {
    max-width:
      none;

    width:
      100%;

    min-height:
      100vh;

    border-radius:
      0;

    border:
      none;

    padding:
      35px 20px 30px;

    box-shadow:
      none;
  }


  .calc-header {
    margin-top:
      10px;
  }


  .calc-header h2 {
    font-size:
      30px;
  }


  #display {
    height:
      110px;

    font-size:
      40px;
  }


  .btn {
    border-radius:
      22px;

    font-size:
      24px;
  }


  .zero {
    height:
      auto;

    min-height:
      68px;
  }

}


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

@media (max-width: 380px) {

  .calculator {
    padding:
      25px 15px;
  }


  .buttons {
    gap:
      10px;
  }


  #display {
    height:
      95px;

    font-size:
      35px;

    margin-bottom:
      20px;
  }


  .btn {
    border-radius:
      19px;

    font-size:
      22px;
  }


  .delete {
    font-size:
      17px;
  }

}