/* Font Face Declarations – WOFF2 primary, OTF fallback */
@font-face {
    font-family: 'Inversionz Unboxed';
    src: url('fonts/Inversionz Unboxed.woff2') format('woff2'),
         url('fonts/Inversionz Unboxed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('fonts/TT Commons Regular.woff2') format('woff2'),
         url('fonts/TT Commons Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('fonts/TT Commons Bold.woff2') format('woff2'),
         url('fonts/TT Commons Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ── Fix blurry text in GPU-composited Swiper layers ──────────────
   Swiper positions slides via translate3d() which creates GPU composite
   layers. Text rasterised inside can appear soft/blurry.
   NOTE: Do NOT use will-change:transform or translateZ(0) on ALL slides
   – too many composite layers crash mobile devices (OOM).
   Instead, only apply font-smoothing hints globally and use
   text-rendering: geometricPrecision on display-font elements.
   ──────────────────────────────────────────────────────────────── */
.swiper-slide {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Inversionz Unboxed is a geometric display font – force sub-pixel
   accurate rendering so clean edges stay crisp at all sizes. */
.artist-title-web,
.artist-title-mobile,
.page2-title,
.page2-date,
.page2-tickets-link,
#logo-title {
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Outer Swiper: Vertical, Fullscreen */
.outer-swiper {
    width: 100%;
    height: 100dvh;
    touch-action: pan-y;
}

.outer-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

/* Slide Pages */
.slide-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-content {
    text-align: center;
}

.slide-content h1 {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Background Colors for Pages */
.outer-swiper .swiper-slide:nth-child(1) {
    background: #000000;
}

.outer-swiper .swiper-slide:nth-child(2),
.outer-swiper .swiper-slide:nth-child(2) .slide-page,
.outer-swiper .swiper-slide:nth-child(2) .inner-swiper,
.outer-swiper .swiper-slide:nth-child(2) .inner-swiper .swiper-wrapper,
.outer-swiper .swiper-slide:nth-child(2) .inner-swiper .swiper-slide {
    background: transparent !important;
}

.outer-swiper .swiper-slide:nth-child(3) {
    background: transparent;
}

.outer-swiper .swiper-slide:nth-child(4) {
    background: transparent;
}

.outer-swiper .swiper-slide:nth-child(5) {
    background: transparent;
}

.outer-swiper .swiper-slide:nth-child(6) {
    background: transparent;
}

/* Inner Swiper: Horizontal, Fullscreen within parent */
.inner-swiper,
.inner-swiper .swiper-wrapper,
.inner-swiper .swiper-slide {
    width: 100%;
    height: 100%;
    touch-action: pan-x;
}

.inner-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure inner-swiper-2 has no background */
#inner-swiper-2,
#inner-swiper-2 .swiper-wrapper,
#inner-swiper-2 .swiper-slide,
#inner-swiper-2 .swiper-slide > * {
    background: transparent !important;
}

/* Background Colors for Subpages */
#inner-swiper-2,
#inner-swiper-2 .swiper-wrapper,
#inner-swiper-2 .swiper-slide,
#inner-swiper-2 .swiper-slide:nth-child(1),
#inner-swiper-2 .swiper-slide:nth-child(2),
#inner-swiper-2 .swiper-slide:nth-child(3),
#inner-swiper-2 .slide-subpage {
    background: transparent !important;
}


/* Custom Navigation - Base Component */
.custom-nav {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    width: fit-content;
    height: fit-content;
}

.nav-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Horizontal Navigation (Inner Swiper) */
.custom-nav-horizontal {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}

.custom-nav-horizontal .nav-pill {
    flex-direction: row;
}

.custom-nav-horizontal .nav-dot.active {
    width: 32px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

/* Vertical Navigation (Outer Swiper) */
.custom-nav-vertical {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.custom-nav-vertical .nav-pill {
    flex-direction: column;
    padding: 10px 6px;
}

.custom-nav-vertical .nav-dot.active {
    width: 8px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .slide-content h1 {
        font-size: 2.5rem;
    }
}