/*
 * Euphoric Entertainment — site-wide motion layer.
 * Additive only: targets existing markup/classes, never overrides layout or color.
 * Every decorative animation is disabled under prefers-reduced-motion (see bottom).
 */

:root {
  --efx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --efx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --efx-reveal-duration: 0.9s;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------- */
/* Keyframes                                                         */
/* ---------------------------------------------------------------- */

@keyframes efx-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(14px, -26px, 0) scale(1.04); }
  66%      { transform: translate3d(-10px, -12px, 0) scale(0.97); }
}

@keyframes efx-pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.55; }
  70%  { opacity: 0.15; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

@keyframes efx-wave {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

@keyframes efx-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@keyframes efx-shine {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(320%) skewX(-15deg); }
}

@keyframes efx-spin-slow {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------- */
/* Hero decorative shapes (.hero-shapes > .float-shape / .pulse-ring) */
/* ---------------------------------------------------------------- */

.hero-shapes .float-shape {
  animation: efx-float 9s ease-in-out infinite;
  will-change: transform;
}
.hero-shapes .float-shape:nth-child(1) { animation-duration: 10s; }
.hero-shapes .float-shape:nth-child(2) { animation-duration: 12s; animation-delay: -3s; }
.hero-shapes .float-shape:nth-child(3) { animation-duration: 8s;  animation-delay: -6s; }

.pulse-ring {
  animation: efx-pulse-ring 4.5s var(--efx-ease-soft) infinite;
}

/* ---------------------------------------------------------------- */
/* Audio wave bars (.wave-bar)                                       */
/* ---------------------------------------------------------------- */

.wave-bar {
  animation: efx-wave 1.1s ease-in-out infinite;
  transform-origin: bottom;
  will-change: transform;
}
.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: .1s; }
.wave-bar:nth-child(3) { animation-delay: .2s; }
.wave-bar:nth-child(4) { animation-delay: .3s; }
.wave-bar:nth-child(5) { animation-delay: .4s; }
.wave-bar:nth-child(6) { animation-delay: .5s; }
.wave-bar:nth-child(7) { animation-delay: .6s; }

.icon-pulse {
  animation: efx-icon-pulse 2.2s ease-in-out infinite;
}
.icon-pulse:nth-child(odd) { animation-delay: .3s; }

/* ---------------------------------------------------------------- */
/* Scroll reveal utility (classes added by animations.js at runtime) */
/* ---------------------------------------------------------------- */

.efx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--efx-reveal-duration) var(--efx-ease),
              transform var(--efx-reveal-duration) var(--efx-ease);
  transition-delay: calc(var(--efx-i, 0) * 70ms);
}
.efx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------- */
/* Cards (.service-card / .event-card / .contact-card)               */
/* ---------------------------------------------------------------- */

.service-card, .event-card, .contact-card {
  transition: transform .45s var(--efx-ease), box-shadow .45s var(--efx-ease);
}
.service-card:hover, .contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(26, 155, 142, 0.18);
}
.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.22);
}

.service-card .emoji, .contact-card .emoji, .event-card .emoji {
  display: inline-block;
  transition: transform .4s var(--efx-ease);
}
.service-card:hover .emoji,
.contact-card:hover .emoji,
.event-card:hover .emoji {
  transform: scale(1.18) rotate(-4deg);
}

/* ---------------------------------------------------------------- */
/* Buttons (.btn / .btn-hover / .btn-hover-white)                    */
/* ---------------------------------------------------------------- */

.btn, .btn-hover, .btn-hover-white {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--efx-ease-soft), box-shadow .35s var(--efx-ease);
}
.btn::after, .btn-hover::after, .btn-hover-white::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
}
.btn:hover::after, .btn-hover:hover::after, .btn-hover-white:hover::after {
  animation: efx-shine .85s ease forwards;
}

/* ---------------------------------------------------------------- */
/* Sticky header (.elementor-75 = site header template)              */
/* ---------------------------------------------------------------- */

.elementor-75 {
  transition: box-shadow .35s var(--efx-ease-soft);
}
.elementor-75.efx-scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------------- */
/* Count-up stat numbers (.count-up)                                  */
/* ---------------------------------------------------------------- */

.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- */
/* Cursor glow (element created by animations.js, desktop only)      */
/* ---------------------------------------------------------------- */

.efx-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  height: 380px;
  margin-left: -190px;
  margin-top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14), rgba(236, 72, 153, 0.07) 40%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

/* ---------------------------------------------------------------- */
/* Mobile tuning                                                      */
/* ---------------------------------------------------------------- */

@media (max-width: 768px) {
  .float-shape { width: 150px !important; height: 150px !important; }
  .pulse-ring  { width: 300px !important; height: 300px !important; }
  .efx-cursor-glow { display: none; }
}

/* ---------------------------------------------------------------- */
/* Accessibility: honor prefers-reduced-motion                       */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero-shapes .float-shape,
  .pulse-ring,
  .wave-bar,
  .icon-pulse,
  .btn::after, .btn-hover::after, .btn-hover-white::after {
    animation: none !important;
  }
  .efx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .efx-cursor-glow {
    display: none !important;
  }
}

/* ================================================================== */
/* PREMIUM REDESIGN                                                    */
/* Every section/card/heading below was authored with hardcoded inline */
/* styles (background: white, color: #333, etc.) with no !important,  */
/* so a later-loaded stylesheet using !important safely wins without   */
/* editing any stored content.                                         */
/* ================================================================== */

:root {
  --efx-bg-deep: #06070b;
  --efx-bg-elevated: #12141c;
  --efx-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  --efx-glass-border: rgba(255, 255, 255, 0.1);
  --efx-text-light: #edeef3;
  --efx-text-muted: #a7a7b3;
}

/* ---------------- Typography ---------------- */
.elementor-6 h1, .elementor-6 h2, .elementor-6 h3, .elementor-6 h4 {
  font-family: "Unbounded", "Plus Jakarta Sans", sans-serif !important;
  letter-spacing: -0.01em;
}
.elementor-6 p, .elementor-6 li, .elementor-6 span, .elementor-6 a, .elementor-6 div {
  font-family: "Plus Jakarta Sans", sans-serif;
}
.elementor-75 * {
  font-family: "Plus Jakarta Sans", sans-serif;
}

/* ---------------- Section backdrops: light -> deep premium dark ---------------- */
.euphoric-services,
.euphoric-about,
.euphoric-contact,
.whats-new-section,
.euphoric-events {
  position: relative;
}
.euphoric-services {
  background: radial-gradient(ellipse 120% 100% at 50% 0%, var(--efx-bg-elevated) 0%, var(--efx-bg-deep) 60%) !important;
}
.euphoric-about {
  background: radial-gradient(ellipse 120% 100% at 50% 100%, var(--efx-bg-elevated) 0%, var(--efx-bg-deep) 60%) !important;
}
.euphoric-contact {
  background: var(--efx-bg-deep) !important;
}
.whats-new-section {
  background: linear-gradient(160deg, #0d2e2a 0%, #071614 55%, var(--efx-bg-deep) 100%) !important;
}
.euphoric-events {
  background: linear-gradient(160deg, #0a2e2a 0%, #071614 60%, var(--efx-bg-deep) 100%) !important;
}

/* Hairline seam between sections */
.euphoric-services::before,
.euphoric-about::before,
.euphoric-contact::before,
.whats-new-section::before,
.euphoric-events::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 183, 49, 0.45), rgba(139, 92, 246, 0.45), transparent);
}

/* ---------------- Force readable text in the newly-dark sections ---------------- */
/* Broad pass: everything lights up, except things that must keep their own color */
/* :not(:where(...)) keeps the exclusion logic while contributing zero extra
   specificity, so the narrower "p" rule below can still win over this one */
.euphoric-services *:not(:where(.btn, .btn-hover, .btn-hover-white, a, svg, path, .count-up)),
.euphoric-about *:not(:where(.btn, .btn-hover, .btn-hover-white, a, svg, path, .count-up)),
.euphoric-contact *:not(:where(.btn, .btn-hover, .btn-hover-white, a, svg, path, .count-up)) {
  color: var(--efx-text-light) !important;
}
/* Narrower pass: body copy dials back to a softer muted tone (reads calmer at scale) */
.euphoric-services p,
.euphoric-about p,
.euphoric-contact p {
  color: var(--efx-text-muted) !important;
}

/* ---------------- Cards: light gradient card -> glass card ---------------- */
.service-card,
.contact-card {
  background: var(--efx-glass-bg) !important;
  border: 1px solid var(--efx-glass-border) !important;
  border-left: 3px solid #1a9b8e !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}
.event-card {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* ---------------- Buttons: shared premium glow signature ---------------- */
.btn, .btn-hover, .btn-hover-white {
  box-shadow: 0 8px 24px rgba(247, 183, 49, 0.25), 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}
.btn:hover, .btn-hover:hover, .btn-hover-white:hover {
  box-shadow: 0 14px 38px rgba(247, 183, 49, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* ---------------- Header: solid bar -> glass bar ---------------- */
.elementor-75 {
  background: rgba(6, 7, 11, 0.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------------- Hero: animated canvas overlay (injected by animations.js) ---------------- */
.euphoric-hero {
  isolation: isolate;
}
.efx-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  mix-blend-mode: screen;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .efx-hero-canvas {
    display: none;
  }
}