* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #c5fe23;
  color: #111;
  font-family: "Plus Jakarta Sans", sans-serif;
  height: 100vh;
  overflow: hidden;
}
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 40px 50px;
}
.top-bar,
.hero-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-weight: 600;
}
.logo,
.studio-btn {
  text-decoration: none;
  color: #111;
}
.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero-center h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 11rem);
  line-height: 0.88;
}
.subtitle {
  margin-top: 20px;
}
.trail-trigger {
  display: inline-block;
}
.trail-image {
  position: fixed;
  width: 160px;
  height: 160px;
  object-fit: cover;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  border-radius: 14px;
  transform: translate(-50%, -50%) scale(0.4);
  transition:
    opacity 0.5s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.trail-image.show {
  opacity: 1;
}
.trail-image.hide {
  opacity: 0;
}

/* ==========================
   SIGNAL TRAIL
========================== */

#trail-container {
  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9999;
}

.trail-image {
  position: absolute;

  width: 140px;

  height: 140px;

  object-fit: cover;

  border-radius: 14px;

  opacity: 0;

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

  will-change: transform, opacity;

  pointer-events: none;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}
.studio-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 130px;

  height: 46px;

  border: 1px solid rgba(0, 0, 0, 0.7);

  border-radius: 999px;

  text-decoration: none;

  color: #111;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  transition: 0.3s ease;
}

.studio-btn:hover {
  background: #111;

  color: #fff;

  transform: translateY(-1px);
}
