/* Plays inside the same hero window as the cartoon. The cartoon file is not changed. */
.hero-photo.hero-video { position: relative; }
.hero-bling {
  position: absolute;
  inset: 0;
  z-index: 4;
  container-type: size;
  perspective: 900px;
  display: grid;
  place-items: center;
  background: #05070d;
  color: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.hero-bling.is-on { opacity: 1; visibility: visible; }
.bling-glow,
.bling-streaks {
  position: absolute;
  inset: -12%;
  pointer-events: none;
}
.bling-glow {
  background:
    radial-gradient(42% 55% at 50% 48%, var(--glow, rgb(126 249 255 / .45)), transparent 68%),
    radial-gradient(30% 40% at 12% 88%, rgb(255 45 180 / .35), transparent 70%),
    radial-gradient(28% 36% at 88% 12%, rgb(198 255 26 / .28), transparent 70%);
  filter: blur(6px);
  animation: bling-drift 5.5s ease-in-out infinite alternate;
}
.bling-streaks {
  opacity: .35;
  background:
    repeating-linear-gradient(115deg, transparent 0 28px, rgb(126 249 255 / .16) 28px 30px),
    conic-gradient(from 90deg at 50% 50%, transparent, #7ef9ff, transparent 16%, #ff4dff, transparent 34%, #c6ff1a, transparent 52%, #ffd27a, transparent 70%, #7ef9ff);
  mix-blend-mode: screen;
  filter: blur(8px);
}
.hero-bling.is-words .bling-streaks { opacity: .8; animation: bling-spin 2.4s linear infinite; }

.bling-id {
  position: absolute;
  z-index: 6;
  top: 5cqh;
  left: 6cqw;
  right: 6cqw;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.bling-id { display: none; }
.bling-name,
.bling-tag,
.bling-words {
  margin: 0;
  font-family: "Bricolage Grotesque", Outfit, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: .95;
}
.bling-name {
  font-size: clamp(.85rem, 5.4cqw, 1.45rem);
  background: linear-gradient(100deg, #e8fbff, #7ef9ff 40%, #fff 60%, #ff9af0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 8px #7ef9ff);
}
.bling-tag {
  margin-top: .35em;
  font-size: clamp(.62rem, 3.3cqw, .95rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #d6ff6a;
  text-shadow: 0 0 10px #c6ff1a, 0 0 22px rgb(198 255 26 / .45);
}
.bling-words {
  position: absolute;
  z-index: 6;
  max-width: 18ch;
  padding: 0 6cqw;
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
  font-size: clamp(1.05rem, 7.2cqw, 2.15rem);
  opacity: 0;
  transform: scale(.94);
  background: linear-gradient(105deg, #7ef9ff, #fff 22%, #ff4dff 48%, #ffe56a 72%, #c6ff1a 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px #7ef9ff) drop-shadow(0 0 22px #ff2d95);
}
.hero-bling.is-words .bling-words {
  opacity: 1;
  transform: none;
  animation: bling-shine 2.2s linear infinite;
}
.bling-phone {
  position: absolute;
  z-index: 2;
  height: 90cqh;
  width: auto;
  aspect-ratio: 9 / 19.5;
  max-width: 70cqw;
  padding: 1.4cqh;
  border-radius: 2.4cqw;
  background: linear-gradient(160deg, #f7f8fb 0%, #9aa0ab 16%, #22262e 40%, #e4e6ec 58%, #3a3e48 80%, #c5c8d0);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .65) inset,
    0 0 0 2px rgb(0 0 0 / .5),
    0 18px 40px rgb(0 0 0 / .45),
    0 0 36px var(--glow, #7ef9ff);
  opacity: 0;
  transform: translateZ(-420px) scale(.22);
  transform-style: preserve-3d;
}
.hero-bling.is-arrive .bling-phone { animation: bling-fly 1.55s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero-bling.is-hold .bling-phone { opacity: 1; transform: translateZ(0) scale(1); }
.hero-bling.is-scroll .bling-phone {
  opacity: 1;
  transform: translateZ(0) scale(1);
}
.hero-bling.is-words .bling-phone {
  opacity: 0;
  transform: translateZ(40px) scale(1.2);
  transition: opacity .4s ease, transform .5s ease;
}
@keyframes bling-fly {
  0% { opacity: 0; transform: translateZ(-520px) scale(.18); filter: blur(5px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateZ(0) scale(1); filter: blur(0); }
}
.bling-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.7cqw;
  background: #000;
  container-type: size;
}
.bling-site {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(0);
}
.hero-bling.is-scroll .bling-site {
  animation: bling-scroll var(--scroll, 3.2s) ease-in-out forwards;
}
@keyframes bling-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(var(--shift, -240px)); }
}
.bling-island {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 50%;
  width: 28%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #050505;
}
.bling-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .28) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: bling-sheen 2.6s ease-in-out infinite;
}
@keyframes bling-sheen {
  0%, 35% { transform: translateX(-45%); }
  100% { transform: translateX(45%); }
}
@keyframes bling-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
@keyframes bling-spin { to { transform: rotate(24deg) scale(1.25); } }
@keyframes bling-shine {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bling { display: none; }
}