/* =========================================================
   NEXAS Media — Levitation Hero
   Floating PNG layers with parallax + CSS depth-of-field
   ========================================================= */

/* =========================================================
   SCENE CONTAINER
   ========================================================= */
.lv-scene {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: #08090f;
  isolation: isolate;
}

/* Room background — darkened for website theme */
.lv-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/hero-levitation/nexas-media-marketing-agentur-idstein-hero-raum-bg.webp') center / cover no-repeat;
  z-index: 0;
  filter: brightness(0.38) saturate(0.75);
  transform: scale(1.05); /* avoids blur-edge artifacts */
}

/* Cinematic dark overlay — keeps the mood dark in center */
.lv-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 90% 80% at 50% 55%, rgba(8,9,15,0.12), rgba(8,9,15,0.65) 100%);
  pointer-events: none;
}

/* Edge vignette */
.lv-vignette {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: radial-gradient(ellipse 92% 88% at 50% 50%, transparent 35%, rgba(8,9,15,0.92) 100%);
  pointer-events: none;
}

/* Bottom fade to --bg */
.lv-scene::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(120px, 20vh, 260px);
  background: linear-gradient(to bottom, transparent, var(--bg, #050608));
  z-index: 21;
  pointer-events: none;
}

/* =========================================================
   FLOATING OBJECT WRAPPER
   ========================================================= */

/*
  Layout trick:
  - left:50% top:50% places origin at viewport center
  - translate(-50%,-50%) centers the element on that point
  - translate(--ox, --oy) offsets from center (set per element)
  - translate(--px, --py) is parallax displacement (set by JS)
*/
.lv-obj {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z, 3);
  transform:
    translate(-50%, -50%)
    translate(var(--ox, 0px), var(--oy, 0px))
    translate(var(--px, 0px), var(--py, 0px));
  will-change: transform;
  /* depth-of-field blur on the whole wrapper (blurs shadow too — realistic) */
  filter: blur(var(--blur, 0px));
}

.lv-obj img {
  display: block;
  width: var(--w, auto);
  max-width: none;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

/* =========================================================
   FLOAT KEYFRAMES — 6 variants for variety
   ========================================================= */
@keyframes lv-a {
  0%,100% { transform: translateY(0px)   rotate(-2.5deg); }
  50%     { transform: translateY(-22px) rotate(2deg); }
}
@keyframes lv-b {
  0%,100% { transform: translateY(-8px)  rotate(1.5deg); }
  50%     { transform: translateY(14px)  rotate(-2deg); }
}
@keyframes lv-c {
  0%,100% { transform: translateY(4px)   rotate(3deg); }
  50%     { transform: translateY(-18px) rotate(-1.5deg); }
}
@keyframes lv-d {
  0%,100% { transform: translateY(0px)   rotate(-1deg); }
  50%     { transform: translateY(-26px) rotate(2.5deg); }
}
@keyframes lv-e {
  0%,100% { transform: translateY(-10px) rotate(2deg); }
  50%     { transform: translateY(10px)  rotate(-1.5deg); }
}
@keyframes lv-f {
  0%,100% { transform: translateY(2px)   rotate(-0.8deg); }
  50%     { transform: translateY(-14px) rotate(1.5deg); }
}
@keyframes lv-person {
  0%,100% { transform: translateY(0px)   rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(0.4deg); }
}

.lv-fa { animation: lv-a ease-in-out infinite; }
.lv-fb { animation: lv-b ease-in-out infinite; }
.lv-fc { animation: lv-c ease-in-out infinite; }
.lv-fd { animation: lv-d ease-in-out infinite; }
.lv-fe { animation: lv-e ease-in-out infinite; }
.lv-ff { animation: lv-f ease-in-out infinite; }
.lv-fp { animation: lv-person ease-in-out infinite; }

/* Pause floating on reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lv-fa, .lv-fb, .lv-fc, .lv-fd, .lv-fe, .lv-ff, .lv-fp { animation: none; }
}

/* =========================================================
   BACKGROUND LABEL — IMAGEFILM / RECRUITING etc.
   ========================================================= */
.lv-bg-text {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-family: var(--font-d, sans-serif);
  font-size: clamp(7rem, 21vw, 30rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  /* Stroke only → plakativ but not overpowering */
  color: rgba(245, 246, 248, 0.06);
  -webkit-text-stroke: 1.5px rgba(245, 246, 248, 0.20);
}

/* =========================================================
   HERO TEXT OVERLAY
   ========================================================= */
.lv-text {
  position: absolute;
  bottom: clamp(88px, 16vh, 200px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 22;
  pointer-events: none;
  white-space: nowrap;
}

.lv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-m, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan, #16e0ff);
  margin-bottom: 18px;
  padding: 6px 16px;
  border: 1px solid rgba(22, 224, 255, 0.28);
  border-radius: 100px;
  background: rgba(22, 224, 255, 0.06);
  animation: lv-fadein 1s 0.3s both;
  pointer-events: auto;
}

.lv-text h1 {
  font-family: var(--font-d, sans-serif);
  font-size: clamp(2.4rem, 5.5vw, 5.2rem);
  font-weight: 700;
  color: var(--ink, #f5f6f8);
  margin: 0 0 18px;
  letter-spacing: -0.035em;
  line-height: 1;
  animation: lv-fadein 1s 0.5s both;
  pointer-events: auto;
}

.lv-text h1 em {
  color: var(--cyan, #16e0ff);
  font-style: italic;
}

.lv-text p {
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: rgba(245, 246, 248, 0.65);
  margin: 0;
  line-height: 1.6;
  animation: lv-fadein 1s 0.7s both;
  pointer-events: auto;
}

/* CTA row in hero */
.lv-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
  pointer-events: auto;
  animation: lv-fadein 1s 0.85s both;
}

/* br only visible on wider screens */
.br-lg { display: none; }
@media (min-width: 768px) { .br-lg { display: block; } }

@keyframes lv-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE — hide objects on small screens
   ========================================================= */
@media (max-width: 900px) {
  /* Keep Andreas + 4 nearby objects, hide far/tiny ones */
  .lv-bg-obj   { display: none; }
  .lv-obj { --w: clamp(140px, var(--w-mob, 50vw), 320px); }
  .lv-person-obj { --w: 72vw !important; }
}

@media (max-width: 640px) {
  /* Only Andreas on mobile */
  .lv-obj:not(.lv-person-obj) { display: none; }
  .lv-person-obj { --w: 88vw !important; --oy: 0vh !important; }
  .lv-text { white-space: normal; max-width: 90vw; }
}