/* 1334 CINEMATIC EXPERIENCE v2 — enhanced ambient scenery and real menu transitions.
   Does not change application forms, gallery sources, Discord or music controls. */

/* Slow-moving luminous background, visible in every page, including on scroll. */
#x1334-atmosphere {
  --x1334-x: 50%; --x1334-y: 50%;
  position: fixed; inset: 0; z-index: 12; overflow: hidden;
  pointer-events: none; user-select: none; mix-blend-mode: screen;
}
#x1334-atmosphere::before {
  /* Fare aydınlatması: daha küçük, daha yumuşak ve imlece tam hizalı. */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 160px 120px at var(--x1334-x) var(--x1334-y), rgba(193,215,250,.095) 0%, rgba(193,215,250,.035) 42%, transparent 82%);
  opacity: .65; filter: blur(10px); transition: opacity .8s ease;
}
#x1334-atmosphere::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 127px, rgba(205,217,239,.026) 128px, transparent 129px),
    repeating-linear-gradient(0deg, transparent 0 127px, rgba(205,217,239,.018) 128px, transparent 129px);
  mask-image: radial-gradient(ellipse 82% 82% at 50% 54%, #000, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 54%, #000, transparent 92%);
  opacity: .4;
}
.x1334-aura { position: absolute; display: block; width: 60vw; height: 68vh; border-radius: 50%; filter: blur(65px); opacity: .9; transform: translate3d(0,0,0); will-change: transform; }
.x1334-aura--one {
  top: -24%; left: -15%;
  background: radial-gradient(ellipse, rgba(125,158,210,.27) 0%, rgba(74,95,133,.11) 39%, transparent 73%);
  animation: x1334-aura-one 11s ease-in-out infinite alternate;
}
.x1334-aura--two {
  bottom: -31%; right: -17%;
  background: radial-gradient(ellipse, rgba(146,166,206,.24) 0%, rgba(70,91,130,.10) 40%, transparent 75%);
  animation: x1334-aura-two 14s ease-in-out infinite alternate;
}
.x1334-aura--three {
  top: 18%; left: 23%; width: 56vw; height: 58vh;
  background: radial-gradient(ellipse, rgba(190,202,230,.15) 0%, rgba(83,103,152,.07) 45%, transparent 76%);
  filter: blur(82px);
  animation: x1334-aura-three 16s ease-in-out infinite alternate;
}
.x1334-light-band {
  position: absolute; display: block; top: -50%; height: 190%; width: 24vw; transform: rotate(26deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(190,210,242,.085) 45%, rgba(229,237,251,.11) 50%, transparent 58%);
  filter: blur(23px); opacity: .7;
  animation: x1334-light-travel 16s linear infinite;
}
.x1334-light-band--one { left: -35%; }
.x1334-light-band--two { left: -45%; animation-duration: 23s; animation-delay: -11s; opacity: .5; }
.x1334-particles {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(240,246,255,.62) 1px, transparent 1.7px),
                    radial-gradient(circle, rgba(232,238,252,.4) .8px, transparent 1.5px);
  background-size: 261px 211px, 197px 223px;
  background-position: 32px 57px, 95px 28px;
  opacity: .28; animation: x1334-particle-drift 20s linear infinite alternate;
}
@keyframes x1334-aura-one { from {transform:translate3d(-7%,0,0) scale(.9)} to {transform:translate3d(20%,22%,0) scale(1.24)} }
@keyframes x1334-aura-two { from {transform:translate3d(2%,6%,0) scale(.9)} to {transform:translate3d(-27%,-18%,0) scale(1.16)} }
@keyframes x1334-aura-three { from {transform:translate3d(-12%,-8%,0)} to {transform:translate3d(17%,12%,0) scale(1.26)} }
@keyframes x1334-light-travel { from {transform:translateX(-24vw) rotate(26deg)} to {transform:translateX(158vw) rotate(26deg)} }
@keyframes x1334-particle-drift { from {background-position:32px 57px,95px 28px} to {background-position:105px -85px,20px -72px} }

/* Animate Enter Screen atmosphere separately, behind its central typography. */
.pe-atmosphere::before {
  content: ""; position: absolute; inset: -15%;
  background:
    radial-gradient(ellipse 36% 48% at 20% 20%, rgba(168,197,241,.20), transparent 86%),
    radial-gradient(ellipse 34% 38% at 75% 76%, rgba(170,195,230,.18), transparent 85%),
    conic-gradient(from 70deg at 50% 50%,transparent 0deg,rgba(193,214,242,.05) 92deg,transparent 155deg,rgba(209,225,250,.06) 285deg,transparent 325deg);
  filter: blur(35px); opacity: .95;
  animation: x1334-intro-motion 10s ease-in-out infinite alternate;
}
.pe-atmosphere::after {
  content: ""; position: absolute; top: -40%; left:-40%; width: 32%; height: 180%;
  background:linear-gradient(90deg,transparent,rgba(231,242,255,.12),transparent);
  filter:blur(32px); transform:rotate(21deg);
  animation:x1334-intro-ray 11s linear infinite;
}
@keyframes x1334-intro-motion { from {transform:translate3d(-5%,-2%,0) rotate(-4deg) scale(1.08)} to {transform:translate3d(7%,5%,0) rotate(6deg) scale(1.12)} }
@keyframes x1334-intro-ray { from {left:-40%} to {left:140%} }

/* OUT / IN — exit remains visible long enough to animate before swapping sections. */
.page-section.active.x1334-page-exit {
  pointer-events:none!important; z-index:9!important;
  animation:x1334-section-exit 325ms cubic-bezier(.32,0,.54,1) both!important;
}
.page-section.active.x1334-page-enter {
  z-index:10!important;
  animation:x1334-section-enter 760ms cubic-bezier(.15,.78,.2,1) both!important;
}
@keyframes x1334-section-exit {
  from {opacity:1; filter:blur(0); transform:translateY(0) scale(1)}
  60% {opacity:.82; filter:blur(3px); transform:translateY(-7px) scale(.99)}
  to {opacity:0; filter:blur(9px); transform:translateY(-19px) scale(.976)}
}
@keyframes x1334-section-enter {
  from {opacity:0; filter:blur(10px); transform:translateY(30px) scale(.975)}
  26% {opacity:.74; filter:blur(3px); transform:translateY(16px) scale(.987)}
  63% {opacity:1; filter:blur(0)}
  to {opacity:1; filter:blur(0); transform:translateY(0) scale(1)}
}
#x1334-transition-flash {
  position:fixed; inset:0; z-index:140; pointer-events:none; opacity:0;
  background:
    linear-gradient(104deg,transparent 13%,rgba(109,127,158,.14) 43%,rgba(235,245,255,.11) 50%,rgba(109,127,158,.13) 58%,transparent 86%),
    rgba(2,4,7,.40);
}
#x1334-transition-flash.x1334-flash-active {
  animation:x1334-scene-flash 690ms ease-out both;
}
@keyframes x1334-scene-flash { 0%{opacity:0} 40%{opacity:.63} 53%{opacity:.52} 100%{opacity:0} }

/* Original audio bar system, retains original player controls. */
.music-player-content {position:relative}
.x1334-sound-meter {position:absolute;top:2px;right:2px;width:94px;height:23px;pointer-events:none;display:flex;gap:3px;align-items:center;justify-content:flex-end;opacity:.48;transition:opacity .28s ease;z-index:4}
.x1334-sound-meter span {width:2px;min-width:2px;height:100%;flex:0 0 2px;display:block;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(174,185,204,.38));transform-origin:50% 50%;transform:scaleY(.12)}
.x1334-sound-meter.is-playing {opacity:.92}
.music-player-content .music-title {padding-right:100px}
@media(max-width:620px) {
 .x1334-sound-meter {width:43px;gap:2px;height:17px}
 .x1334-sound-meter span:nth-child(-n+9) {display:none}
 .music-player-content .music-title {padding-right:48px}
 .x1334-aura {width:105vw;height:52vh;filter:blur(48px)}
 .x1334-aura--three {width:100vw}
}
@media(prefers-reduced-motion:reduce) {
 #x1334-atmosphere *, .pe-atmosphere::before,.pe-atmosphere::after {animation:none!important}
 .page-section.active.x1334-page-exit,.page-section.active.x1334-page-enter {animation:none!important}
 #x1334-transition-flash.x1334-flash-active {animation:none!important}
}