/* ============================================================
   SENSE OF SOUND — 3D FESTIVAL EXPERIENCE
   Technical Build 27.10.0
   ============================================================ */

:root {
  --fx-cyan: #58eaff;
  --fx-violet: #9d75ff;
  --fx-lime: #caff75;
  --fx-bg: #02040a;
  --fx-surface: rgba(8, 12, 20, .78);
  --fx-border: rgba(255,255,255,.09);
  --fx-ease: cubic-bezier(.22,1,.36,1);
  --fx-card-radius: 22px;
}

html {
  background: var(--fx-bg);
  scrollbar-gutter: stable;
}

body {
  background:
    radial-gradient(circle at 80% 0%, rgba(61,115,255,.05), transparent 26%),
    radial-gradient(circle at 5% 35%, rgba(125,70,255,.04), transparent 30%),
    var(--fx-bg);
  overflow-x: clip;
}

/* -------------------------------------------
   HEADER
   ------------------------------------------- */
.reference-header {
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(2,4,9,.82), rgba(2,4,9,.26));
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  transition:
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.reference-header.scrolled {
  border-bottom-color: rgba(255,255,255,.075);
  background: rgba(4,7,13,.90);
  box-shadow: 0 14px 42px rgba(0,0,0,.20);
}

.reference-header .menu-button {
  display: flex !important;
}

.reference-header .header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* -------------------------------------------
   HERO — MULTI-LAYER 3D SCENE
   ------------------------------------------- */
.coded-psy-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: #02040a !important;
  perspective: 1200px;
}

.coded-psy-hero .psy-background {
  display: none !important;
}

.fx3d-scene,
.fx3d-mid,
.fx3d-light,
.fx3d-fog,
.fx3d-vignette,
.fx3d-grid {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

/* Main photo layer */
.fx3d-scene {
  z-index: -10;
  inset: -7%;
  background:
    url("../assets/images/hero-bg.webp")
    center 52% / cover no-repeat;
  transform:
    translate3d(
      var(--fx-scene-x, 0px),
      var(--fx-scene-y, 0px),
      -80px
    )
    scale(1.14);
  filter:
    saturate(.95)
    contrast(1.07)
    brightness(.72);
  will-change: transform;
  animation:
    fxSceneCamera 22s var(--fx-ease)
    infinite alternate;
}

@keyframes fxSceneCamera {
  from {
    transform:
      translate3d(-.8%, .3%, -80px)
      scale(1.13);
  }
  to {
    transform:
      translate3d(.8%, -.6%, -80px)
      scale(1.18);
  }
}

/* Secondary depth layer made from same image but blurred + offset */
.fx3d-mid {
  z-index: -9;
  inset: -10%;
  opacity: .24;
  background:
    url("../assets/images/hero-bg.webp")
    center 48% / cover no-repeat;
  filter:
    blur(18px)
    saturate(1.18)
    brightness(.62);
  transform:
    translate3d(
      var(--fx-mid-x, 0px),
      var(--fx-mid-y, 0px),
      -40px
    )
    scale(1.16);
  will-change: transform;
  mix-blend-mode: screen;
  animation:
    fxMidDrift 16s ease-in-out
    infinite alternate;
}

@keyframes fxMidDrift {
  from {
    transform:
      translate3d(-1.2%, .5%, -40px)
      scale(1.14);
  }
  to {
    transform:
      translate3d(1.3%, -.8%, -40px)
      scale(1.19);
  }
}

/* Moving light */
.fx3d-light {
  z-index: -8;
  inset: -16%;
  opacity: .48;
  background:
    radial-gradient(circle at 50% 31%, rgba(74,221,255,.17), transparent 17%),
    radial-gradient(ellipse at 18% 55%, rgba(118,69,255,.12), transparent 32%),
    radial-gradient(ellipse at 80% 50%, rgba(40,158,255,.10), transparent 32%);
  mix-blend-mode: screen;
  filter: blur(30px);
  animation:
    fxLightTravel 13s ease-in-out
    infinite alternate;
}

@keyframes fxLightTravel {
  from {
    transform:
      translate3d(-2%, 1%, 0)
      rotate(-1deg)
      scale(1);
    opacity: .34;
  }
  to {
    transform:
      translate3d(2%, -1.5%, 0)
      rotate(1deg)
      scale(1.04);
    opacity: .58;
  }
}

/* Soft fog moving horizontally */
.fx3d-fog {
  z-index: -7;
  top: 52%;
  bottom: -12%;
  opacity: .30;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(119,211,255,.06) 23%,
      rgba(255,255,255,.045) 50%,
      rgba(144,91,255,.06) 73%,
      transparent 100%
    );
  filter: blur(36px);
  animation:
    fxFogMove 18s linear
    infinite alternate;
}

@keyframes fxFogMove {
  from {
    transform: translate3d(-6%,0,0) scaleX(1.08);
  }
  to {
    transform: translate3d(6%,0,0) scaleX(1.08);
  }
}

/* Subtle floor grid for 3D depth */
.fx3d-grid {
  z-index: -6;
  top: auto;
  height: 32%;
  bottom: -7%;
  opacity: .09;
  background-image:
    linear-gradient(rgba(88,234,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,234,255,.30) 1px, transparent 1px);
  background-size: 58px 58px;
  transform:
    perspective(560px)
    rotateX(67deg)
    scale(1.6);
  transform-origin: 50% 100%;
  mask-image:
    linear-gradient(
      to top,
      rgba(0,0,0,.92),
      transparent 85%
    );
}

/* Vignette controls contrast */
.fx3d-vignette {
  z-index: -5;
  background:
    radial-gradient(
      ellipse at center,
      transparent 20%,
      rgba(2,4,10,.08) 47%,
      rgba(2,4,10,.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,4,10,.16) 0%,
      rgba(2,4,10,.05) 34%,
      rgba(2,4,10,.35) 68%,
      rgba(2,4,10,.96) 100%
    );
}

/* Remove prior experimental generated layers */
.pro-hero-scene,
.pro-hero-light,
.pro-hero-vignette,
.pro-hero-grain,
.ui2781-particles,
.ui-hero-particles {
  display: none !important;
}

/* Central content transforms with mouse/scroll */
.coded-brand-composition {
  position: relative;
  z-index: 4;
  transform-style: preserve-3d;
  transform:
    translate3d(
      var(--fx-logo-x, 0px),
      var(--fx-logo-y, 0px),
      70px
    )
    rotateX(var(--fx-logo-rx, 0deg))
    rotateY(var(--fx-logo-ry, 0deg));
  transition:
    transform 700ms var(--fx-ease);
  will-change: transform;
}

.coded-brand-composition::before,
.coded-brand-composition::after,
.coded-psy-hero::before {
  content: none !important;
}

.coded-logo-art {
  width: min(580px, 60vw);
  transform: translateZ(65px);
  filter:
    drop-shadow(0 18px 28px rgba(0,0,0,.30))
    drop-shadow(0 0 22px rgba(62,208,255,.31))
    drop-shadow(0 0 42px rgba(130,76,255,.20));
  animation:
    fxLogoBreath 8.5s var(--fx-ease)
    infinite alternate !important;
}

@keyframes fxLogoBreath {
  from {
    transform:
      translate3d(0, 3px, 65px)
      scale(.998);
  }
  to {
    transform:
      translate3d(0, -7px, 72px)
      scale(1.007);
  }
}

.coded-brand-line {
  transform: translateZ(42px);
  color: rgba(246,249,255,.92);
  text-shadow: 0 2px 18px rgba(0,0,0,.70);
}

.coded-event-focus {
  transform:
    translateZ(34px);
  border: 1px solid rgba(115,225,255,.18);
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(14,24,38,.78), rgba(17,12,34,.75));
  box-shadow:
    0 22px 60px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: none !important;
  transition:
    transform 320ms var(--fx-ease),
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.coded-event-focus:hover {
  transform:
    translateY(-3px)
    translateZ(40px);
  border-color: rgba(108,229,255,.36);
  box-shadow:
    0 28px 70px rgba(0,0,0,.38),
    0 0 0 1px rgba(88,234,255,.035) inset;
}

/* Scroll cue */
.coded-scroll i {
  animation:
    fxScrollCue 2s var(--fx-ease)
    infinite !important;
}

@keyframes fxScrollCue {
  0% {
    opacity: .15;
    transform: scaleY(.32);
    transform-origin: top;
  }
  50% {
    opacity: .88;
    transform: scaleY(1);
    transform-origin: top;
  }
  100% {
    opacity: .10;
    transform:
      translateY(8px)
      scaleY(.5);
    transform-origin: bottom;
  }
}

/* -------------------------------------------
   FESTIVAL CARDS — PREMIUM 3D
   ------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
  perspective: 1200px;
}

.event-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(7,10,17,.78);
  box-shadow:
    0 24px 70px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.025);
  transform-style: preserve-3d;
  transform:
    perspective(1100px)
    rotateX(var(--card-rx, 0deg))
    rotateY(var(--card-ry, 0deg))
    translate3d(0, var(--card-y, 0px), 0);
  transition:
    transform 280ms var(--fx-ease),
    box-shadow 280ms ease,
    border-color 280ms ease;
  will-change: transform;
}

.event-card::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: var(--card-shine, 0);
  border-radius: inherit;
  background:
    radial-gradient(
      circle at var(--card-light-x, 50%) var(--card-light-y, 50%),
      rgba(255,255,255,.12),
      transparent 28%
    );
  mix-blend-mode: screen;
  transition: opacity 220ms ease;
}

.event-card:hover {
  --card-y: -5px;
  border-color: rgba(92,226,255,.17);
  box-shadow:
    0 34px 90px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.event-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 0 !important;
  max-height: none;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(18px) scale(1.001);
  transition:
    transform 800ms var(--fx-ease),
    filter 500ms ease;
}

.event-card:hover .event-image img {
  transform:
    translateZ(24px)
    scale(1.028);
  filter:
    saturate(1.035)
    contrast(1.02);
}

.event-content {
  position: relative;
  z-index: 3;
  transform: translateZ(15px);
}

/* -------------------------------------------
   PROFESSIONAL SECTION MOTION
   ------------------------------------------- */
.section {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

.fx-reveal {
  opacity: 0;
  transform:
    translate3d(0, 24px, 0)
    scale(.992);
}

.fx-reveal.fx-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--fx-ease),
    transform 700ms var(--fx-ease);
  transition-delay:
    var(--fx-delay, 0ms);
}

/* -------------------------------------------
   MOBILE / SMALL SCREENS
   Festival cards deliberately become smaller.
   ------------------------------------------- */
@media (max-width: 900px) {
  .fx3d-scene {
    inset: -5%;
    animation-duration: 30s;
  }

  .fx3d-mid {
    opacity: .16;
    animation-duration: 24s;
  }

  .fx3d-grid {
    opacity: .055;
    height: 26%;
  }

  .coded-logo-art {
    width: min(520px, 74vw);
  }

  .event-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
  }

  .event-card {
    width: min(100%, 560px);
  }

  .event-image {
    aspect-ratio: 4 / 5;
  }
}

@media (max-width: 620px) {
  .coded-psy-hero {
    min-height: 92svh;
  }

  .coded-logo-art {
    width: min(420px, 78vw);
  }

  .coded-brand-line {
    max-width: 90vw;
    margin-inline: auto;
    font-size: .60rem;
    line-height: 1.55;
  }

  .event-grid {
    width: 100%;
    gap: 16px;
  }

  /* Key request: cards no longer fill the whole screen */
  .event-card {
    width:
      min(
        calc(100vw - 42px),
        390px
      );
    margin-inline: auto;
    border-radius: 18px;
  }

  .event-image {
    aspect-ratio: 4 / 5;
  }

  .event-content {
    padding:
      16px
      16px
      18px;
  }

  .event-content h3 {
    font-size:
      clamp(1.05rem, 5vw, 1.35rem);
  }

  .event-content p {
    font-size: .84rem;
    line-height: 1.55;
  }

  /* Disable tilt on touch devices, keep depth through shadow */
  .event-card {
    transform: none !important;
  }

  .event-card:hover {
    transform: none !important;
  }

  .fx3d-mid {
    display: none;
  }

  .fx3d-grid {
    opacity: .035;
  }

  .fx3d-light {
    opacity: .30;
  }
}

@media (max-width: 380px) {
  .event-card {
    width:
      min(
        calc(100vw - 28px),
        350px
      );
  }
}

/* Touch devices should not fake hover tilting */
@media (hover: none), (pointer: coarse) {
  .event-card {
    transform: none !important;
  }

  .event-card::before {
    opacity: 0 !important;
  }
}

/* Performance / accessibility */
html.ui-lite-motion .fx3d-scene,
html.ui-lite-motion .fx3d-mid,
html.ui-lite-motion .fx3d-light,
html.ui-lite-motion .fx3d-fog,
html.ui-lite-motion .coded-logo-art {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fx3d-scene,
  .fx3d-mid,
  .fx3d-light,
  .fx3d-fog,
  .coded-logo-art,
  .coded-scroll i {
    animation: none !important;
  }

  .coded-brand-composition,
  .event-card {
    transform: none !important;
  }

  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   BUILD 27.11 — IMMERSIVE LAYER MOTION
   Continuous independent drift + breathing zoom for every hero
   depth layer while preserving content readability.
   ============================================================ */

.coded-psy-hero {
  background-position: 50% 50%;
  animation: sosBaseBackdropBreath 38s cubic-bezier(.45,0,.55,1) infinite alternate;
}

@keyframes sosBaseBackdropBreath {
  0%   { background-position: 49.3% 50.4%; }
  50%  { background-position: 50.6% 49.7%; }
  100% { background-position: 49.8% 50.8%; }
}

.fx3d-scene {
  animation: sosSceneBreath 30s cubic-bezier(.45,0,.55,1) infinite alternate;
}

@keyframes sosSceneBreath {
  0% {
    transform: translate3d(calc(-1.1% + var(--fx-scene-x, 0px)), calc(.5% + var(--fx-scene-y, 0px)), -80px) scale(1.13);
  }
  48% {
    transform: translate3d(calc(.55% + var(--fx-scene-x, 0px)), calc(-.35% + var(--fx-scene-y, 0px)), -80px) scale(1.175);
  }
  100% {
    transform: translate3d(calc(1.15% + var(--fx-scene-x, 0px)), calc(-.8% + var(--fx-scene-y, 0px)), -80px) scale(1.145);
  }
}

.fx3d-mid {
  animation: sosMidBreath 23s cubic-bezier(.42,0,.58,1) infinite alternate;
}

@keyframes sosMidBreath {
  0% {
    transform: translate3d(calc(-1.7% + var(--fx-mid-x, 0px)), calc(.8% + var(--fx-mid-y, 0px)), -40px) scale(1.13) rotate(-.25deg);
  }
  55% {
    transform: translate3d(calc(1.1% + var(--fx-mid-x, 0px)), calc(-.9% + var(--fx-mid-y, 0px)), -40px) scale(1.205) rotate(.35deg);
  }
  100% {
    transform: translate3d(calc(.4% + var(--fx-mid-x, 0px)), calc(.2% + var(--fx-mid-y, 0px)), -40px) scale(1.17) rotate(-.1deg);
  }
}

.fx3d-light {
  overflow: visible;
  animation: sosLightBodyDrift 17s ease-in-out infinite alternate;
}

.fx3d-light::before,
.fx3d-light::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.fx3d-light::before {
  background:
    radial-gradient(circle at 36% 36%, rgba(65,225,255,.24), transparent 18%),
    radial-gradient(circle at 66% 53%, rgba(130,72,255,.16), transparent 26%);
  filter: blur(24px);
  animation: sosLightLayerA 14s ease-in-out infinite alternate;
}

.fx3d-light::after {
  background:
    radial-gradient(ellipse at 72% 34%, rgba(42,188,255,.20), transparent 20%),
    radial-gradient(ellipse at 28% 62%, rgba(218,63,255,.13), transparent 24%);
  filter: blur(34px);
  animation: sosLightLayerB 19s ease-in-out infinite alternate-reverse;
}

@keyframes sosLightBodyDrift {
  0%   { transform: translate3d(-2.4%, 1.2%, 0) scale(1.00) rotate(-.7deg); opacity: .36; }
  55%  { transform: translate3d(1.7%, -1.1%, 0) scale(1.065) rotate(.45deg); opacity: .56; }
  100% { transform: translate3d(2.8%, -.3%, 0) scale(1.025) rotate(.9deg); opacity: .44; }
}

@keyframes sosLightLayerA {
  0%   { transform: translate3d(-4%, 2%, 0) scale(.96); opacity: .54; }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.10); opacity: .88; }
  100% { transform: translate3d(5%, 1%, 0) scale(1.02); opacity: .68; }
}

@keyframes sosLightLayerB {
  0%   { transform: translate3d(3%, -2%, 0) scale(1.02) rotate(-1deg); opacity: .48; }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.12) rotate(.7deg); opacity: .78; }
  100% { transform: translate3d(-1%, -1%, 0) scale(.98) rotate(1.2deg); opacity: .58; }
}

.fx3d-fog {
  animation: sosFogBreath 21s ease-in-out infinite alternate;
}

@keyframes sosFogBreath {
  0%   { transform: translate3d(-7%, .8%, 0) scale(1.04, .96); opacity: .20; }
  50%  { transform: translate3d(1%, -1%, 0) scale(1.13, 1.06); opacity: .34; }
  100% { transform: translate3d(7%, .3%, 0) scale(1.07, 1.00); opacity: .25; }
}

.fx3d-grid {
  animation: sosGridFloat 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes sosGridFloat {
  0% {
    transform: perspective(560px) translate3d(-1.5%, 1.5%, 0) rotateX(67deg) scale(1.58);
    opacity: .065;
  }
  50% {
    transform: perspective(560px) translate3d(.8%, -.8%, 0) rotateX(66deg) scale(1.66);
    opacity: .105;
  }
  100% {
    transform: perspective(560px) translate3d(1.6%, .3%, 0) rotateX(68deg) scale(1.61);
    opacity: .075;
  }
}

.fx3d-vignette {
  animation: sosVignetteBreath 18s ease-in-out infinite alternate;
}

@keyframes sosVignetteBreath {
  from { opacity: .94; transform: scale(1.00); }
  to   { opacity: 1; transform: scale(1.025); }
}

/* Current → Upcoming hierarchy */
.festival-showcase-section {
  position: relative;
  overflow: hidden;
}

.festival-showcase-block {
  position: relative;
}

.festival-showcase-divider {
  width: min(100%, 760px);
  height: 1px;
  margin: clamp(52px, 8vw, 92px) auto;
  background: linear-gradient(90deg, transparent, rgba(104,219,255,.32), rgba(202,74,255,.28), transparent);
  box-shadow: 0 0 24px rgba(84,190,255,.12);
}

.current-festival-block .section-label {
  color: #67e8ff;
}

.event-grid-current .event-card[data-status="live"] {
  box-shadow: 0 26px 70px rgba(29,191,255,.12), 0 0 0 1px rgba(96,228,255,.08) inset;
}

@media (max-width: 620px) {
  /* Keep every depth layer alive on mobile, but at lower intensity. */
  .fx3d-mid {
    display: block;
    opacity: .10;
    filter: blur(24px) saturate(1.05) brightness(.58);
  }

  .fx3d-grid { opacity: .028; }
  .fx3d-light { opacity: .25; }
  .fx3d-fog { opacity: .18; }

  .festival-showcase-divider {
    margin: 46px auto;
  }
}

html.ui-lite-motion .coded-psy-hero,
html.ui-lite-motion .fx3d-grid,
html.ui-lite-motion .fx3d-vignette,
html.ui-lite-motion .fx3d-light::before,
html.ui-lite-motion .fx3d-light::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .coded-psy-hero,
  .fx3d-grid,
  .fx3d-vignette,
  .fx3d-light::before,
  .fx3d-light::after {
    animation: none !important;
  }
}