/* ── Studio hero — bespoke phone-mockup + gradient-shape subsystem ──────── */
/* Loads AFTER feature-page.css and reuses its fadeInRight keyframe.         */
/* Everything else on the Studio page comes from feature-page.css.           */

/* phone mockup */

.phone-container {
  position: relative;
  width: min(680px, 45vw);
  perspective: 1000px;
  flex-shrink: 0;
}

.gradient-shape {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: min(620px, 90%);
  height: min(620px, 90%);
  background: linear-gradient(140deg, #4A5FD5 0%, #B030A8 55%, #E6005F 100%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  z-index: 0;
}

.phone-mockup {
  position: relative;
  width: 100%;
  display: block;
  z-index: 1;
  transition: transform 0.15s ease;
  will-change: transform;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.75));
}

/* floating shadow beneath the phone */
.phone-container::after {
  content: '';
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 45%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, transparent 75%);
  z-index: 0;
  animation:
    shadowFloat 5s ease-in-out 1.5s infinite;
}

/* ── Animations (studio-specific) ─────────────────────────── */

@keyframes gradientExpand {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.3) rotate(0deg);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0px);    }
  50%       { transform: translateY(-18px);  }
}

@keyframes shadowFloat {
  0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.55; }
  50%       { transform: translateX(-50%) scaleX(0.65); opacity: 0.25; }
}

/* entrance + float */
.phone-container {
  /* translate property handles entrance; transform handles float — no conflict */
  animation:
    fadeInRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both,
    phoneFloat 5s ease-in-out 1.5s infinite;
}

.gradient-shape {
  animation: gradientExpand 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

/* pause float while hovered so tilt feels clean */
.phone-container:hover {
  animation-play-state: running, paused;
}

/* gradient shape glows brighter on phone hover */
.gradient-shape {
  transition: filter 0.4s ease;
}

.phone-container:hover .gradient-shape {
  filter: brightness(1.2) saturate(1.15);
}

/* mobile */

@media screen and (max-width: 768px) {
  .phone-container {
    width: min(280px, 75vw);
  }

  .gradient-shape {
    width: min(260px, 70vw);
    height: min(260px, 70vw);
    right: -10px;
  }
}