/* ═══════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════
   KEY TRICK: html is position:fixed so the
   document itself can NEVER scroll. This prevents
   mobile browsers from hiding the address bar.
   All scrolling happens inside #patek-website-content.
   ═══════════════════════════════════════════════ */
html {
    position: fixed;
    /* Pin all 4 corners to forcefully prevent document scrolling */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;

    /* REMOVED 100dvh. USE 100svh (Small Viewport Height) */
    height: 100%;
    height: 100svh;
    /* Locks the height to when the address bar is VISIBLE */
}

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
    overscroll-behavior: none;
    /* Hide scrollbar permanently to prevent layout shift */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    position: fixed;
    width: 100%;
    height: 100%;
    height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: black;
    overscroll-behavior: none;
    /* Hide scrollbar permanently to prevent layout shift */
    scrollbar-width: none;
    -ms-overflow-style: none;
}


html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}


/* ═══════════════════════════════════════════════
   PLAYCANVAS WRAPPER  (stacking context for splash)
   ═══════════════════════════════════════════════ */
#playcanvas-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}

/* Re-enable pointer events on splash content */
#custom-splash-wrapper {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════
   CANVAS
   ═══════════════════════════════════════════════ */
#application-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    /* By default (section closed), prevent all native browser gestures to allow full 3D rotation */
    touch-action: none !important;
}

/* Allow canvas interactions when section is open.
   touch-action stays 'none' — rotation is handled via window touch listeners,
   and vertical scroll happens on #patek-website-content (not the canvas). */
body.wm-section-open #application-canvas {
    pointer-events: auto !important;
    touch-action: none !important;
}

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
#wm-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    display: flex !important;
    visibility: visible !important;
    background: transparent;
    transition: background-color 0.4s ease;
}

/* When scrolling, give the header a background to make it a solid bar */
#wm-header.scrolled {
    background-color: white;
    pointer-events: auto !important;
    /* Ensures you can click things in the bar */
}

#wm-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 8px;
    cursor: pointer;
    display: none;
    pointer-events: auto;

    /* Smooth rotation animation */
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
}

#wm-header.show-close #wm-close-btn {
    display: block;
}

/* Rotate softly on hover */
#wm-close-btn svg {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center center;
}

#wm-close-btn:hover svg {
    transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════
   TEXT GROUP  (comp text + View Watch button)
   ═══════════════════════════════════════════════ */
#wm-text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    position: fixed;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Auto-hide text group when section is open */
body.wm-section-open #wm-text-group {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#wm-comp-text {
    opacity: 0;
    transition: opacity 1.5s ease;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-size: clamp(1.25rem, 2vw, 2.2rem);
    line-height: clamp(1.4rem, 2.4vw, 2.8rem);
    white-space: nowrap;
}

#wm-comp-text.visible {
    opacity: 1 !important;
}

#wm-view-btn {
    margin-top: clamp(1rem, 2vw, 2rem);
    padding: 0.5rem 2rem;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    letter-spacing: 0.1em;
    font-size: 0.75rem;

    /* Animate opacity slowly, but animate padding and letter-spacing quickly */
    transition: opacity 1.5s ease, padding 0.3s ease;
}

#wm-view-btn:hover {
    padding: 0.5rem 2.5rem;

}

#wm-view-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════
   WEBFLOW SECTION  (#patek-website-content)

   Scrolling is CONTAINED inside this fixed div.
   overscroll-behavior:contain prevents scroll-chaining
   to the document (which would trigger address-bar hide).
   touch-action:pan-y lets the browser handle vertical
   scroll natively while JS captures horizontal swipes
   for watch rotation.
   ═══════════════════════════════════════════════ */
#patek-website-content {
    position: fixed;
    /* REMOVED inset: 0; */

    /* 1px OFFSET HACK: Tricks browser into keeping address bar visible */
    top: 1px;
    left: 0;
    width: 100%;
    height: calc(100% - 1px);

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;

    /* NEW: HIDE SCROLLBAR IN FIREFOX & EDGE */
    scrollbar-width: none;
    -ms-overflow-style: none;

    display: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100vh);
    z-index: 2;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* NEW: HIDE SCROLLBAR IN CHROME, SAFARI, OPERA */
#patek-website-content::-webkit-scrollbar {
    display: none;
}

body.wm-section-open #patek-website-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

.parallax-container img,
.patek-img-parallax1,
.patek-img-parallax2,
.patek-photo img {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}