/* ==================================================================
   Owlyn Events homepage: 3D layer for the Elementor build.
   Hooks are element IDs set in Elementor (Settings > ID):
   #top (hero), #oe-hero-stage, #oe-hero-mark, #oe-event-grid, #oe-steps,
   #oe-wall, #oe-stack, #oe-mock-browser/email/phone, #oe-qr-email/phone,
   #oe-search, #oe-news, #oe-step-num-1/2/3, and the #cities section.
   IDs outrank Elementor's own classes, so no !important is needed.
   ================================================================== */

/* ---------- Hero: WebGL ticket canvas and a stage floor ---------- */
#top { isolation: isolate; }
#top > .oe-hero-floor,
#top > .oe-hero-canvas { position: absolute; pointer-events: none; z-index: 0; }
#top > :not(.oe-hero-floor):not(.oe-hero-canvas) { position: relative; z-index: 1; }

#top > .oe-hero-floor {
  left: -30%; right: -30%; bottom: 0; height: 52%;
  background-image:
    linear-gradient(rgba(167, 159, 194, .16) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(167, 159, 194, .16) 1.5px, transparent 1.5px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  animation: oe-floor 9s linear infinite;
}
@keyframes oe-floor { to { background-position: 0 72px, 0 0; } }

#top > .oe-hero-canvas { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
#top.is-3d > .oe-hero-canvas { opacity: 1; }

/* The flat logo is the fallback; hide it once the WebGL ticket is drawn. */
#oe-hero-mark, #oe-hero-stage img { transition: opacity .6s ease; }
#top.is-3d #oe-hero-mark, #top.is-3d #oe-hero-stage img { opacity: 0; }
#top.is-3d #oe-hero-stage { cursor: pointer; }
#oe-hero-stage:focus-visible { outline: 2px solid #F3B63F; outline-offset: 4px; border-radius: 24px; }

.oe-hero-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  font: 500 11.5px/1 "IBM Plex Mono", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #A79FC2; white-space: nowrap; padding: 8px 12px; border-radius: 99px;
  background: rgba(18, 14, 36, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .6s .8s; pointer-events: none;
}
#top.is-3d .oe-hero-hint { opacity: 1; }

/* ---------- Ticket notches cut out of the search strip, newsletter and step numbers ---------- */
#oe-search {
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
#oe-news {
  -webkit-mask: radial-gradient(circle 22px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 22px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 22px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 22px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
#oe-step-num-1, #oe-step-num-2, #oe-step-num-3 {
  -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}

/* ---------- City tabs: gold pill for the selected city, beside the heading on desktop ---------- */
#cities .e-tabs-base { position: relative; }
#cities .e-tabs-menu-base { width: max-content; max-width: 100%; }
#cities .e-tab-base:not(.e--selected):hover,
#cities .e-tab-base:not(.e--selected):focus-visible { background-color: rgba(255, 255, 255, .06); color: #F4F0FA; }
#cities .e-tab-base:focus:not(.e--selected):not(:hover) { background-color: transparent; color: #A79FC2; }
#cities .e-tab-base.e--selected,
#cities .e-tab-base.e--selected:hover,
#cities .e-tab-base.e--selected:focus { background-color: #F3B63F; color: #120E24; }
#cities .e-tab-base:focus-visible { outline: 2px solid #F3B63F; outline-offset: 2px; }
@media (min-width: 1025px) {
  /* Sits on the heading row: its bottom lines up with the heading, as in the design. */
  #cities .e-tabs-menu-base { position: absolute; right: 0; top: 0; transform: translateY(calc(-100% - 28px)); }
}

/* ---------- Pointer tilt: steps (cards use the carousel transform below) ---------- */
#oe-steps > .oe-tilt {
  transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
#oe-event-grid > .oe-tilt,
#oe-steps > .oe-tilt { transform-style: preserve-3d; will-change: transform; }
#oe-steps > .oe-tilt.is-tilting { transition: transform .08s linear, box-shadow .3s; }

#oe-event-grid > .oe-tilt { position: relative; }
#oe-event-grid > .oe-tilt::after,
#oe-steps > .oe-tilt::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .13), transparent 60%);
}
#oe-event-grid > .oe-tilt.is-tilting::after,
#oe-steps > .oe-tilt.is-tilting::after { opacity: 1; }

/* ---------- Featured events: 3D carousel ----------
   home-3d.js sets --cf-ry / --cf-z / --cf-s / --cf-o from each card's distance to
   the centre, and --rx / --ry / --lift while the pointer tilts a card. */
#events { overflow-x: clip; }
#oe-event-grid.oe-carousel {
  --oe-card: clamp(264px, 24vw, 300px);
  display: flex; flex-wrap: nowrap; gap: 22px; position: relative;
  width: 100vw; max-width: none; margin: -48px calc(50% - 50vw) -64px;
  padding: 48px calc(50vw - var(--oe-card) / 2) 64px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
  perspective: 1500px; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
#oe-event-grid.oe-carousel::-webkit-scrollbar { display: none; }
#oe-event-grid.oe-carousel.is-dragging { cursor: grabbing; user-select: none; }
#oe-event-grid.oe-carousel > * {
  flex: 0 0 var(--oe-card);
  transform: translateZ(var(--cf-z, 0px)) rotateY(var(--cf-ry, 0deg)) scale(var(--cf-s, 1))
             translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: var(--cf-o, 1);
  transition: transform .14s linear, opacity .3s, box-shadow .3s;
}
#oe-event-grid.oe-carousel > .is-center { box-shadow: inset 0 0 0 1px rgba(243, 182, 63, .55), 0 40px 60px -30px #000; }
#oe-event-grid.oe-carousel:focus-visible > .is-center { outline: 2px solid #F3B63F; outline-offset: 4px; }

.oe-car-ctrl { display: flex; align-items: center; gap: 12px; }
.oe-car-ctrl > :first-child:not(.oe-car-count) { margin-right: 8px; }
.oe-car-count { font: 600 12px/1 "IBM Plex Mono", Consolas, monospace; letter-spacing: .14em; color: #A79FC2; min-width: 4.5em; text-align: right; }
.oe-car-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #1E1838; color: #F3B63F; box-shadow: inset 0 0 0 1px #2F2852;
  transition: background-color .2s, color .2s, transform .15s, opacity .2s;
}
.oe-car-btn:hover:not(:disabled) { background: #F3B63F; color: #120E24; transform: translateY(-2px); }
.oe-car-btn:focus-visible { outline: 2px solid #F3B63F; outline-offset: 3px; }
.oe-car-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) {
  #oe-event-grid.oe-carousel { --oe-card: min(78vw, 320px); gap: 16px; }
  .oe-car-count { display: none; }
}

/* ---------- Gallery: two rows of tiles on a plane tipped back in 3D ---------- */
#oe-wall { perspective: 1100px; }
#oe-wall > .oe-plane {
  transform: rotateX(24deg) rotateZ(-7deg) translateY(-6%) scale(1.12);
  transform-style: preserve-3d; transform-origin: 50% 50%;
}
#oe-wall .oe-row { width: max-content; animation: oe-wall 60s linear infinite; }
#oe-wall .oe-row.oe-rev { animation-direction: reverse; }
#oe-wall:hover .oe-row { animation-play-state: paused; }
@keyframes oe-wall { to { transform: translateX(calc(-50% - 10px)); } }

/* ---------- Organizers: browser, email and phone stacked in depth ---------- */
#oe-stack { perspective: 1400px; }
#oe-stack > #oe-mock-browser,
#oe-stack > #oe-mock-email,
#oe-stack > #oe-mock-phone { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#oe-stack > #oe-mock-browser { transform: rotateY(-20deg) rotateX(9deg); }
#oe-stack > #oe-mock-email   { transform: rotateY(-20deg) rotateX(9deg) translateZ(90px); }
#oe-stack > #oe-mock-phone   { transform: rotateY(-20deg) rotateX(9deg) translateZ(170px); }
#oe-stack:hover > #oe-mock-browser { transform: rotateY(-9deg) rotateX(4deg); }
#oe-stack:hover > #oe-mock-email   { transform: rotateY(-9deg) rotateX(4deg) translateZ(130px); }
#oe-stack:hover > #oe-mock-phone   { transform: rotateY(-9deg) rotateX(4deg) translateZ(230px); }

#oe-qr-email svg, #oe-qr-phone svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1024px) {
  .oe-hero-hint { display: none; }
}
@media (max-width: 767px) {
  #oe-stack > #oe-mock-browser { transform: rotateY(-12deg) rotateX(6deg); }
  #oe-stack > #oe-mock-email   { transform: rotateY(-12deg) rotateX(6deg) translateZ(60px); }
  #oe-stack > #oe-mock-phone   { transform: rotateY(-12deg) rotateX(6deg) translateZ(110px); }
}

@media (prefers-reduced-motion: reduce) {
  #top > .oe-hero-floor, #oe-wall .oe-row { animation: none; }
  #oe-stack > #oe-mock-browser, #oe-stack > #oe-mock-email, #oe-stack > #oe-mock-phone,
  #oe-event-grid.oe-carousel > * { transition: none; }
}