/* ============================================================
   OUT OUT FEST — "WOW" layer. Loads after the site-wide design
   system (Customizer Additional CSS) and adds real motion:
   animated gradient mesh, floating blobs, scroll-reveal, marquee,
   proper display/body typefaces, richer hover states.
   ============================================================ */

.oo h1, .oo h2, .oo-hero-inner, .oo .oo-section-title, .oo .oo-eyebrow, .oo-nav-cta {
  font-family: 'Unbounded', Arial, sans-serif !important;
}
.oo, .oo p, .oo a, .oo li, .oo span:not(.icon) {
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
}
.oo h1 { letter-spacing: -0.5px; }
.oo .oo-section-title { letter-spacing: -0.5px; }

/* ---- Animated gradient mesh hero ---- */
.oo-hero {
  background: linear-gradient(120deg, #FF2FEA, #8B14D1 45%, #00F0F8 100%);
  background-size: 220% 220%;
  animation: oo-gradient-shift 14s ease-in-out infinite;
}
@keyframes oo-gradient-shift {
  0%   { background-position: 0% 30%; }
  50%  { background-position: 100% 70%; }
  100% { background-position: 0% 30%; }
}
.oo-hero .oo-blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none;
  animation: oo-float 10s ease-in-out infinite;
}
.oo-hero .oo-blob.b1 { width: 320px; height: 320px; background: #FF2FEA; top: -60px; left: -80px; animation-delay: 0s; }
.oo-hero .oo-blob.b2 { width: 260px; height: 260px; background: #00F0F8; bottom: -60px; right: -60px; animation-delay: -3s; }
.oo-hero .oo-blob.b3 { width: 200px; height: 200px; background: #8B14D1; top: 40%; right: 10%; animation-delay: -6s; }
@keyframes oo-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -30px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .oo-hero, .oo-hero .oo-blob, .oo-marquee-track { animation: none !important; }
}

/* ---- Eyebrow pulse ---- */
.oo-eyebrow { position: relative; }
.oo-eyebrow::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #7CFCFC; margin-right: 8px; box-shadow: 0 0 0 0 rgba(124,252,252,0.7);
  animation: oo-pulse-dot 2s infinite;
}
@keyframes oo-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(124,252,252,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(124,252,252,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,252,252,0); }
}

/* ---- Marquee ticker ---- */
.oo-marquee { overflow: hidden; background: #0d0d15; border-top: 1px solid var(--oo-border); border-bottom: 1px solid var(--oo-border); padding: 0.9rem 0; }
.oo-marquee-track { display: flex; width: max-content; animation: oo-marquee 28s linear infinite; }
.oo-marquee-track span {
  display: inline-flex; align-items: center; font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; color: var(--oo-text-dim);
  padding: 0 2rem; white-space: nowrap;
}
.oo-marquee-track span::after { content: '✦'; margin-left: 2rem; color: var(--oo-pink); }
@keyframes oo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Scroll reveal ---- */
.oo-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.oo-reveal.is-visible { opacity: 1; transform: translateY(0); }
.oo-reveal.d1 { transition-delay: 0.08s; } .oo-reveal.d2 { transition-delay: 0.16s; }
.oo-reveal.d3 { transition-delay: 0.24s; } .oo-reveal.d4 { transition-delay: 0.32s; }

/* ---- Richer card hover ---- */
.oo-card { position: relative; overflow: hidden; }
.oo-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px;
  background: linear-gradient(135deg, var(--oo-pink), var(--oo-cyan));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease;
}
.oo-card:hover::before { opacity: 1; }
.oo-card .icon { transition: transform 0.3s ease; }
.oo-card:hover .icon { transform: scale(1.15) rotate(-4deg); }

/* ---- Button glow ---- */
.oo-btn { position: relative; box-shadow: 0 0 0 0 rgba(255,47,234,0.5); }
.oo-btn:not(.outline):hover { box-shadow: 0 6px 24px rgba(255,47,234,0.45); }

/* ---- Sticky header blur on scroll ---- */
#masthead.oo-scrolled { backdrop-filter: blur(10px); background: rgba(20,20,31,0.88) !important; }

/* ---- Gradient text utility ---- */
.oo-gradient-text {
  background: linear-gradient(90deg, var(--oo-pink), var(--oo-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ---- Page load fade ---- */
.oo { animation: oo-page-in 0.6s ease both; }
@keyframes oo-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Top announcement bar (theme-rendered, one copy, every page) ---- */
.oo-topbar { background: #0a0a12; border-bottom: 1px solid var(--oo-border); padding: 0.55rem 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.oo-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.oo-topbar-msg { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--oo-text-dim); font-weight: 600; }
.oo-topbar-msg svg { width: 14px; height: 14px; flex-shrink: 0; }
.oo-topbar-social { display: flex; gap: 0.9rem; align-items: center; }
.oo-topbar-social a { color: var(--oo-text-dim); display: flex; }
.oo-topbar-social a:hover { color: var(--oo-pink-light); }
.oo-topbar-social svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .oo-topbar-inner { justify-content: center; text-align: center; } .oo-topbar-msg { order: 2; } }

/* ---- Social icon sizing wherever [oot_icon] is used inline (footer, cards) ---- */
.oo-footer-social svg { width: 17px; height: 17px; }

/* ---- Branded header: gradient wash + animated glow line, not a flat stock bar ----
   Astra paints its own opaque white background on inner bars (.ast-primary-header-bar,
   .main-header-bar) that sit ON TOP of #masthead's own background, more specifically
   than #masthead itself — so #masthead's gradient was only ever visible in a 2px sliver.
   Those inner bars must be made transparent for the gradient to actually show. */
#masthead {
  background: linear-gradient(180deg, #1a1a28 0%, var(--oo-bg) 100%) !important;
  position: relative;
  padding-top: 2px;
}
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .ast-above-header,
#masthead .ast-below-header {
  background: transparent !important;
  border: none !important;
}
#masthead::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--oo-pink), var(--oo-purple), var(--oo-cyan), var(--oo-pink));
  background-size: 300% 100%;
  animation: oo-header-glow 8s linear infinite;
}
@keyframes oo-header-glow { from { background-position: 0% 0; } to { background-position: 300% 0; } }
#masthead.oo-scrolled::before { opacity: 0.7; }

/* Logo: subtle glow + lift on hover instead of a static image */
#masthead .ast-site-identity img, #masthead .custom-logo-link img {
  transition: filter 0.3s ease, transform 0.3s ease;
}
#masthead .ast-site-identity:hover img, #masthead .custom-logo-link:hover img {
  filter: drop-shadow(0 0 14px rgba(255,47,234,0.55));
  transform: translateY(-1px);
}

/* ---- Branded nav: animated centre-out underline instead of a plain colour swap ---- */
#masthead .main-header-menu > .menu-item { position: relative; }
#masthead .main-header-menu > .menu-item > .menu-link {
  font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important;
  color: #fff !important; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px;
  transition: color 0.2s ease;
  position: relative;
}
#masthead .main-header-menu > .menu-item > .menu-link::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, var(--oo-pink), var(--oo-cyan));
  transition: left 0.25s ease, right 0.25s ease;
}
#masthead .main-header-menu > .menu-item > .menu-link:hover,
#masthead .main-header-menu > .current-menu-item > .menu-link { color: var(--oo-pink-light) !important; }
#masthead .main-header-menu > .menu-item:hover > .menu-link::after,
#masthead .main-header-menu > .current-menu-item > .menu-link::after { left: 0; right: 0; }

/* ---- Get Tickets header button: one clean solid-pink pill, same on every viewport ----
   Astra's mobile header layout sets line-height:3 on the header bar (to vertically-center
   the menu-toggle icon touch target), and .ast-custom-button-link never gets that reset —
   so its line-height balloons to 3x its font-size, stretching the pill tall enough that its
   rounded caps poke out top/bottom as separate-looking pink blobs. Force a normal line-height
   directly on the button so it renders as one clean pill, not a distended stadium shape.
   (Previously had a pulsing box-shadow glow here — dropped because on small screens the ring
   read as a second, different-colored button rather than "one solid pink colour".) */
#masthead .ast-builder-button-wrap .ast-custom-button-link {
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}
@media (prefers-reduced-motion: reduce) {
  #masthead::before { animation: none !important; }
}