* {
  box-sizing: border-box;
}

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

  overflow-x: auto;
  overflow-y: auto;

  background: #171310;
}

body {
  font-family: Georgia, "Times New Roman", serif;
}


/* =========================================================
   HOME
   ========================================================= */

.home {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: visible;

  isolation: isolate;
}


/* =========================================================
   SCENE
   Fixed internal canvas: 2048 × 1152
   ========================================================= */

@media (max-width: 768px) {
  .home {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .scene {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


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

.background {
  position: absolute;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  max-width: none;
  max-height: none;

  display: block;

  user-select: none;
  -webkit-user-drag: none;

  z-index: 0;
}


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

.phone-button {
  position: absolute;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;

  background: transparent;

  cursor: pointer;

  z-index: 10;

  -webkit-tap-highlight-color: transparent;

  transform-origin: center;

  animation:
    phone-idle
    2.7s
    ease-in-out
    infinite;
}


.phone-button:focus-visible {
  outline: 2px solid rgba(255, 220, 160, 0.7);
  outline-offset: -4px;
}


/* =========================================================
   PHONE PNG
   ========================================================= */

.phone {
  position: absolute;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  max-width: none;
  max-height: none;

  display: block;

  user-select: none;
  -webkit-user-drag: none;

  transform:
    translate(-10px, 45px);

  transform-origin: center;

  filter:
    drop-shadow(
      0 18px 16px rgba(24, 12, 8, 0.34)
    );

  transition:
    filter 0.22s ease,
    transform 0.22s ease;
}


/* =========================================================
   PHONE HOVER
   ========================================================= */

.phone-button:hover .phone {
  transform:
    translate(-10px, 45px)
    scale(1.006);

  filter:
    drop-shadow(
      0 18px 16px rgba(24, 12, 8, 0.34)
    )
    saturate(1.12)
    brightness(1.04);
}


/* =========================================================
   PHONE TINT
   ========================================================= */

.phone-tint {
  position: absolute;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  background:
    linear-gradient(
      135deg,
      rgba(85, 255, 215, 0.20),
      transparent 35%,
      rgba(255, 90, 190, 0.15)
    );

  mix-blend-mode: screen;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.1s ease;
}


.phone-button:hover .phone-tint {
  opacity: 1;

  animation:
    tint-pulse
    1.1s
    steps(2, end)
    infinite;
}


/* =========================================================
   PHONE GLOW
   ========================================================= */

.phone-glow {
  position: absolute;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(102, 255, 205, 0.20),
      transparent 35%
    );

  filter: blur(45px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.15s ease;
}


.phone-button:hover .phone-glow {
  opacity: 1;
}


/* =========================================================
   PHONE IDLE
   ========================================================= */

@keyframes phone-idle {

  0%,
  82%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  84% {
    transform:
      translate3d(-2px, 1px, 0)
      rotate(-0.45deg);
  }

  86% {
    transform:
      translate3d(3px, -1px, 0)
      rotate(0.55deg);
  }

  88% {
    transform:
      translate3d(-3px, 0, 0)
      rotate(-0.4deg);
  }

  90% {
    transform:
      translate3d(2px, 1px, 0)
      rotate(0.25deg);
  }

  92% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }
}


/* =========================================================
   TINT PULSE
   ========================================================= */

@keyframes tint-pulse {

  0%,
  100% {
    opacity: 0.10;
  }

  50% {
    opacity: 0.30;
  }
}


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

.phone-button.is-clicked {
  animation:
    phone-click
    0.36s
    cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}


.phone-button.is-clicked .phone-tint {
  opacity: 1;

  animation:
    click-flash
    0.36s
    steps(3, end)
    both;
}


@keyframes phone-click {

  0% {
    transform:
      scale(1)
      rotate(0deg);
  }

  35% {
    transform:
      scale(1.012)
      rotate(-1.5deg);
  }

  70% {
    transform:
      scale(0.995)
      rotate(1deg);
  }

  100% {
    transform:
      scale(1)
      rotate(0deg);
  }
}


@keyframes click-flash {

  0% {
    opacity: 0.05;
  }

  20% {
    opacity: 0.8;
  }

  42% {
    opacity: 0.18;
  }

  65% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
  }
}


/* =========================================================
   LIGHT LEAK
   Static position + subtle fade
   ========================================================= */

.light-leak {
  position: absolute;

  z-index: 11;

  left: 0;
  top: 0;

  width: 2048px;
  height: 1152px;

  max-width: none;
  max-height: none;

  background-image:
    url("../assets/light.jpg");

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  mix-blend-mode: hard-light;

  /*
    Subtle starting opacity.
  */

  opacity: 0.42;

  pointer-events: none;

  animation:
    light-fade
    7s
    ease-in-out
    infinite;
}


/* =========================================================
   LIGHT FADE
   ========================================================= */

@keyframes light-fade {

  0%,
  100% {
    opacity: 0.32;
  }

  50% {
    opacity: 0.50;
  }
}


/* =========================================================
   TRANSITION
   ========================================================= */

.transition {
  position: absolute;

  inset: 0;

  z-index: 20;

  background: #16110e;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.65s ease;
}


.transition.active {
  opacity: 1;
}


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

@media (max-width: 768px) {

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

    overflow-x: auto;
    overflow-y: auto;
  }

  .home {
    width: 2048px;
    min-width: 2048px;

    height: 1152px;
    min-height: 1152px;

    overflow: visible;
  }

  .scene {
    width: 2048px;
    min-width: 2048px;

    height: 1152px;
    min-height: 1152px;

    aspect-ratio: 2048 / 1152;

    margin: 0;

    overflow: hidden;
  }

  .background,
  .phone,
  .phone-button,
  .phone-tint,
  .phone-glow,
  .light-leak {
    width: 2048px;
    height: 1152px;

    max-width: none;
    max-height: none;
  }
}


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

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

  .phone-button,
  .light-leak {
    animation: none;
  }

  .phone-button:hover .phone {
    transform:
      translate(-10px, 45px);
  }
}