/*
 * GENZ.TV — supplied glass Z, unchanged artwork.
 * Source: /workspace/scratch/29f3806550b8/upload/01-Z_glass.png
 * RGBA PNG, 1226 × 1283. Use the original PNG, with no generated replacement.
 * Set --z-artwork to the final URL once the original asset is copied into Site.
 *
 * Decorative markup:
 * <div class="z-mark z-mark--hero" aria-hidden="true">
 *   <img class="z-mark__image" src="/assets/z-glass-v13.png" alt=""
 *        width="1226" height="1283" decoding="async" />
 * </div>
 * Use z-mark--closing for the second instance.
 * The hero parent needs position: relative. Keep this prop clear of copy/CTA.
 */

.z-mark {
  --z-artwork: url("/assets/z-glass-v13.png");
  --z-angle: -11deg;
  --z-yaw: -12deg;
  --z-lift: 0px;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1226 / 1283;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  transform: perspective(1000px) translateY(var(--z-lift))
    rotate(var(--z-angle)) rotateY(var(--z-yaw)) rotateX(4deg);
  transform-origin: 50% 55%;
}

.z-mark__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Shadows follow the PNG's alpha. Original color and opacity stay intact. */
  filter: drop-shadow(0 16px 16px rgb(0 0 0 / 28%))
    drop-shadow(-7px 2px 12px rgb(0 218 255 / 12%))
    drop-shadow(8px -1px 14px rgb(132 70 255 / 12%));
}

.z-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 15% -16% 10%;
  background:
    radial-gradient(ellipse at 30% 38%, rgb(0 215 255 / 22%), transparent 58%),
    radial-gradient(ellipse at 75% 62%, rgb(131 64 255 / 20%), transparent 60%);
  filter: blur(24px);
}

.z-mark--hero {
  position: absolute;
  z-index: 2;
  width: clamp(140px, 14vw, 210px);
  inset-inline-end: clamp(28px, 6vw, 112px);
  inset-block-start: clamp(160px, 23vh, 245px);
}

.z-mark--closing {
  --z-angle: 9deg;
  --z-yaw: 10deg;
  width: clamp(240px, 28vw, 380px);
  margin: 0 auto 5rem;
}

.z-mark--closing::before {
  inset: 4% -22% -8%;
  filter: blur(40px);
}

/* Faint floor reflection reuses the exact same PNG. No image alteration. */
.z-mark--closing::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  inset-block-start: 70%;
  height: 100%;
  background: var(--z-artwork) center / contain no-repeat;
  transform: scaleY(-0.48);
  transform-origin: 50% 50%;
  opacity: 0.12;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 44%);
  mask-image: linear-gradient(to top, #000, transparent 44%);
}

@media (prefers-reduced-motion: no-preference) {
  .z-mark--hero {
    animation: z-mark-hover 7s ease-in-out infinite;
  }

  @keyframes z-mark-hover {
    0%, 100% {
      transform: perspective(1000px) translateY(0)
        rotate(var(--z-angle)) rotateY(var(--z-yaw)) rotateX(4deg);
    }
    50% {
      transform: perspective(1000px) translateY(-7px)
        rotate(calc(var(--z-angle) + 2deg)) rotateY(var(--z-yaw)) rotateX(4deg);
    }
  }
}

@media (max-width: 700px) {
  /* Flow placement avoids collisions with the hero headline on narrow screens. */
  .z-mark--hero {
    position: relative;
    inset: auto;
    width: 132px;
    margin: 0 1rem -0.5rem auto;
  }

  .z-mark--closing {
    width: min(65vw, 280px);
    margin-block-end: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .z-mark,
  .z-mark::before,
  .z-mark::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Campaign placement is independent of the portrait and creator atoms. */
.z-mark--hero{left:41%;right:auto;top:40%;width:clamp(140px,13vw,180px);z-index:6}
.journey-stage:not([data-scene=hero]) .z-mark--hero{display:none}
.z-mark--closing{z-index:2;margin:15px auto 50px;width:290px}
.motion-paused .z-mark--hero{animation-play-state:paused}
@media(max-width:700px){.z-mark--hero{position:absolute;left:auto;right:3%;top:192px;width:99px;margin:0}.z-mark--closing{width:225px;margin:25px auto 40px}}