/*
|--------------------------------------------------------------------------
| Fiza Makeup Academy — 3D Swipe Sections Framework (CSS)
| File: assets/swipe-sections.css
|--------------------------------------------------------------------------
| Drop-in, no-framework full-page "swipe loop" system.
|
| HOW TO WRAP YOUR EXISTING HOMEPAGE SECTIONS (no rewrite needed):
|
|   <div class="swipe-stage" id="swipeStage">
|     <section class="swipe-frame">  ...your existing Hero HTML...   </section>
|     <section class="swipe-frame">  ...your existing Services HTML...</section>
|     <section class="swipe-frame">  ...your existing Events HTML...  </section>
|     ... one <section class="swipe-frame"> per homepage block ...
|   </div>
|   <div class="swipe-dots" id="swipeDots"></div>
|
| Until swipe-sections.js runs, .swipe-stage behaves like normal stacked
| <section> elements (JS adds the "is-enhanced" class) — so the page is
| still fully readable/crawlable with JS off or on slow connections, and
| nothing here changes your existing markup, classes or CSS.
|
| A "long frame" (a section taller than the screen, e.g. the Gallery or
| a long blog list) still swipes like any other frame, but its OWN
| content scrolls internally — see .swipe-frame-inner below.
|--------------------------------------------------------------------------
*/

.swipe-stage { position: relative; }

.swipe-stage.is-enhanced {
    height: 100svh;
    overflow: hidden;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    background: #0b0806;
    touch-action: pan-y; /* let vertical swipe be captured by JS, keep pinch-zoom working */
}

.swipe-stage.is-enhanced .swipe-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    transition: transform .68s cubic-bezier(.22,.61,.28,1), opacity .5s ease, filter .5s ease;
    opacity: 0;
    pointer-events: none;
    backface-visibility: hidden;
}

/* Scrollable inner wrapper so tall ("long") sections still work inside a frame. */
.swipe-frame-inner {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.swipe-stage.is-enhanced .swipe-frame.is-active {
    transform: translateZ(0) rotateX(0deg) scale(1);
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.swipe-stage.is-enhanced .swipe-frame.is-prev {
    transform: translateY(-14%) translateZ(-260px) rotateX(14deg) scale(.92);
    opacity: 0;
    filter: blur(2px);
    z-index: 2;
}

.swipe-stage.is-enhanced .swipe-frame.is-next {
    transform: translateY(14%) translateZ(-260px) rotateX(-14deg) scale(.92);
    opacity: 0;
    filter: blur(2px);
    z-index: 2;
}

.swipe-stage.is-enhanced .swipe-frame.is-hidden {
    transform: translateZ(-420px) scale(.85);
    opacity: 0;
    z-index: 1;
}

/* Right-hand dot navigation, tap to jump to any frame. */
.swipe-dots {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 40;
}
.swipe-stage.is-enhanced ~ .swipe-dots,
body.swipe-enhanced .swipe-dots { display: flex; }
.swipe-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.18);
    padding: 0;
    cursor: pointer;
    transition: transform .3s ease, background .3s ease;
}
.swipe-dots button.is-active {
    background: #e8c07d;
    border-color: #e8c07d;
    transform: scale(1.35);
}

/* Subtle swipe-up affordance hint on the active frame (mobile). */
.swipe-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    font: 700 11px/1 Outfit, Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
    animation: swipeHintFloat 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes swipeHintFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: .55; }
    50% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}

/* Respect users who asked for reduced motion: disable the 3D tilt/blur,
   keep a plain crossfade so the swipe system still works but isn't jarring. */
@media (prefers-reduced-motion: reduce) {
    .swipe-stage.is-enhanced .swipe-frame { transition: opacity .3s ease; }
    .swipe-stage.is-enhanced .swipe-frame.is-prev,
    .swipe-stage.is-enhanced .swipe-frame.is-next,
    .swipe-stage.is-enhanced .swipe-frame.is-hidden { transform: none; filter: none; }
}

/* Desktop: keep the same 3D swipe system, just with mouse-wheel + arrow-key input
   (wired in the JS file) instead of touch gestures. No separate desktop layout
   needed — this is what makes desktop "as good as mobile" per the same code path. */
@media (min-width: 961px) {
    .swipe-dots { right: 24px; gap: 14px; }
    .swipe-dots button { width: 11px; height: 11px; }
}