/* ==========================================================================
   CINEMA POLISH — desktop atmosphere (loads before mobile-premium.css)
   ========================================================================== */

@keyframes cinema-smoke-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; }
  50% { transform: translate3d(-14px, -10px, 0) scale(1.04); opacity: 0.95; }
}

@keyframes cinema-shine {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.75; }
}

@keyframes cinema-particle-float {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-12px); opacity: 0.9; }
}

/* ---- Global depth ---- */
.page-bg__glow--1 {
  opacity: 1.2;
  filter: blur(100px);
}

.page-bg__glow--2 {
  opacity: 1.1;
}

.page-bg__glow--3 {
  position: absolute;
  width: min(55vw, 580px);
  height: min(55vw, 580px);
  left: 58%;
  top: 32%;
  background: radial-gradient(circle, rgba(182, 255, 0, 0.1) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
}

.page-bg__lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 100px,
      rgba(182, 255, 0, 0.028) 100px,
      rgba(182, 255, 0, 0.028) 101px
    );
  opacity: 0.65;
  pointer-events: none;
}

.page-bg__smoke {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse 55% 42% at 68% 28%, rgba(90, 90, 90, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 42% 38% at 18% 72%, rgba(60, 60, 60, 0.1) 0%, transparent 60%);
  filter: blur(70px);
  animation: cinema-smoke-drift 20s ease-in-out infinite;
  pointer-events: none;
}

.page-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ---- Hero: NO box behind photo ---- */
.hero-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: min(85vw, 720px);
  height: min(78vh, 820px);
  transform: translateX(-50%);
  z-index: 0;
  background: radial-gradient(
    ellipse 55% 50% at 50% 55%,
    rgba(182, 255, 0, 0.38) 0%,
    rgba(182, 255, 0, 0.2) 25%,
    rgba(182, 255, 0, 0.06) 50%,
    transparent 72%
  );
  filter: blur(55px);
  pointer-events: none;
}

.hero-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 95%;
  height: 85%;
  transform: translateX(-50%);
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 42% at 45% 42%, rgba(255, 255, 255, 0.08) 0%, transparent 62%),
    radial-gradient(ellipse 38% 35% at 72% 50%, rgba(100, 100, 100, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 35% 32% at 22% 55%, rgba(80, 80, 80, 0.16) 0%, transparent 55%);
  opacity: 0.75;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cinema-smoke-drift 15s ease-in-out infinite;
}

.hero__atmo-glow--soft {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(105vw, 860px);
  height: min(92vh, 920px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(182, 255, 0, 0.25) 0%,
    rgba(182, 255, 0, 0.1) 38%,
    transparent 76%
  );
  filter: blur(45px);
}

.hero__atmo-beams {
  position: absolute;
  inset: -20% 0 0;
  background:
    linear-gradient(178deg, rgba(182, 255, 0, 0.12) 0%, transparent 38%),
    linear-gradient(188deg, rgba(255, 255, 255, 0.06) 0%, transparent 32%),
    linear-gradient(168deg, rgba(182, 255, 0, 0.08) 0%, transparent 35%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
  opacity: 0.85;
}

.hero__atmo-smoke--2 {
  inset: 5% 0 0 !important;
  background:
    radial-gradient(ellipse 52% 40% at 55% 42%, rgba(110, 110, 110, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 40% 34% at 20% 58%, rgba(70, 70, 70, 0.18) 0%, transparent 62%),
    radial-gradient(ellipse 36% 30% at 82% 52%, rgba(85, 85, 85, 0.16) 0%, transparent 58%) !important;
  animation: cinema-smoke-drift 14s ease-in-out infinite reverse;
}

.hero__atmo-lines {
  opacity: 0.9 !important;
  background:
    linear-gradient(118deg, transparent 40%, rgba(182, 255, 0, 0.1) 50%, transparent 60%),
    linear-gradient(72deg, transparent 54%, rgba(255, 255, 255, 0.06) 56%, transparent 62%),
    repeating-linear-gradient(-13deg, transparent, transparent 58px, rgba(182, 255, 0, 0.04) 58px, rgba(182, 255, 0, 0.04) 59px) !important;
}

.hero__atmo-triangle {
  border-width: 1.5px;
  border-color: rgba(182, 255, 0, 0.18);
  opacity: 0.55;
}

.hero__atmo-particles {
  opacity: 0.42 !important;
  background-size: 64px 64px, 96px 96px !important;
}

.hero__atmo-vignette {
  position: absolute;
  inset: -5%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 65% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.35) 100%);
  opacity: 0.55;
}

.hero__atmo-grain {
  opacity: 0.22 !important;
}

.hero__cinema-glow--right {
  width: min(62vw, 760px) !important;
  height: min(88vh, 860px) !important;
  background: radial-gradient(ellipse 50% 48% at 50% 42%, rgba(182, 255, 0, 0.28) 0%, transparent 68%) !important;
  filter: blur(85px) !important;
  opacity: 1 !important;
}

.hero__cinema-spotlight {
  opacity: 1 !important;
  background: radial-gradient(ellipse 50% 55% at 50% 38%, rgba(182, 255, 0, 0.16) 0%, transparent 72%) !important;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ---- About card effects ---- */
.about__portrait-smoke {
  inset: 2% 0 !important;
  background:
    radial-gradient(ellipse 80% 55% at 50% 55%, rgba(70, 70, 70, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 45% 40% at 8% 50%, rgba(55, 55, 55, 0.18) 0%, transparent 62%),
    radial-gradient(ellipse 45% 40% at 92% 50%, rgba(55, 55, 55, 0.18) 0%, transparent 62%) !important;
  opacity: 0.75 !important;
  animation: cinema-smoke-drift 13s ease-in-out infinite;
}

.about__portrait-shine {
  animation: cinema-shine 5s ease-in-out infinite;
  background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%) !important;
  height: 100% !important;
}

.about__portrait-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(182, 255, 0, 0.85) 0.5px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.45) 0.5px, transparent 1px);
  background-size: 72px 72px, 110px 110px;
  opacity: 0.35;
  animation: cinema-particle-float 9s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 15%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, #000 15%, transparent 85%);
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 42% at 12% 50%, rgba(182, 255, 0, 0.1) 0%, transparent 65%),
    radial-gradient(ellipse 32% 28% at 88% 58%, rgba(182, 255, 0, 0.05) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .page-bg__smoke,
  .hero-visual::after,
  .hero__atmo-smoke--2,
  .about__portrait-smoke,
  .about__portrait-shine,
  .hero__atmo-particles,
  .about__portrait-particles {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .hero__atmo-vignette {
    opacity: 0.35;
    background: radial-gradient(ellipse 85% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.25) 100%);
  }

  .hero__atmo-particles,
  .hero__atmo-triangle--2 {
    display: none;
  }

  .hero__atmo-triangle--1 {
    left: 8%;
    width: min(75vw, 340px);
    height: min(46vh, 380px);
    opacity: 0.4;
  }
}