/* mod_threejs_mbs — shared styles for all Three.js builder elements on OWEB */

/* NOTE: do NOT add `footer { position: relative; z-index: 100 }` here.
   On OWEB it broke the language switcher + VM currency selector — those modules
   live inside <footer> with `position: absolute; top:0` to render at the top of
   the page; making <footer> a containing block re-anchored them to the bottom.
   See README.md "Footer overlap" for safe alternatives if you need this. */


/* ── Animated logo (threejs_logo_animated) ──────────────────────────────────── */

a.oweb-logo-link {
    display: block;
    text-decoration: none;
}

.oweb-logo-wrap {
    position: relative;
    overflow: visible;
    width: 100%;
    z-index: 1;          /* keep above section background videos/images */
}

.oweb-logo-wrap canvas {
    display: block;
    width:  100% !important;
    height: 100% !important;
}

/* Foreground overlay — element relocates to be a child of the section
   and centers over it. Same pattern as TDM. */
.oweb-logo-foreground {
    position: absolute !important;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    width:     60%;
    z-index:   10;
    pointer-events: none;
}

/* ── Scroll mode "scrolling" — logo stays at its initial viewport position ── */
/* JS sets --oweb-scroll-y = window.scrollY on every scroll event; CSS reads it
   into a translateY transform. Net effect: as the page scrolls, the logo's
   document position shifts to compensate, so its viewport position is locked.
   Smooth, no threshold (unlike CSS sticky). Entry animations have higher
   specificity below and override this during the slide-in transition. */
.oweb-logo-wrap[data-scroll-mode="scrolling"] {
    transform:   translateY(var(--oweb-scroll-y, 0px));
    will-change: transform;
}
.oweb-logo-wrap.oweb-logo-foreground[data-scroll-mode="scrolling"] {
    transform: translate(-50%, calc(-50% + var(--oweb-scroll-y, 0px)));
}

/* ── Entry animation ───────────────────────────────────────────────────────── */
/* Initial state: off-screen via translateX. JS adds 'oweb-logo-entered' on
   viewport intersection to trigger the transition. Two specificity tracks —
   one for normal flow, one for foreground overlay (which has its own
   translate(-50%, -50%) that we must preserve when entered). */

.oweb-logo-wrap.oweb-logo-entry-from-left,
.oweb-logo-wrap.oweb-logo-entry-from-right {
    transition: transform var(--oweb-entry-duration, 1.5s) cubic-bezier(.2, .8, .3, 1) var(--oweb-entry-delay, 0s);
    will-change: transform;
}

.oweb-logo-wrap.oweb-logo-entry-from-left:not(.oweb-logo-entered):not(.oweb-logo-foreground) {
    transform: translateX(-200%);
}
.oweb-logo-wrap.oweb-logo-entry-from-right:not(.oweb-logo-entered):not(.oweb-logo-foreground) {
    transform: translateX(200%);
}

/* Foreground variant: keep the translate-Y(-50%) for vertical centering */
.oweb-logo-wrap.oweb-logo-foreground.oweb-logo-entry-from-left:not(.oweb-logo-entered) {
    transform: translate(-200%, -50%);
}
.oweb-logo-wrap.oweb-logo-foreground.oweb-logo-entry-from-right:not(.oweb-logo-entered) {
    transform: translate(200%, -50%);
}
/* When entered, the existing .oweb-logo-foreground rule applies its own
   translate(-50%, -50%) — we don't need to repeat it. */

/* ===== tunnel ===== */
/* mod_threejs_<site> — TUNNEL-specific styles (threejs_logo_tunnel v49).
 *
 * Merge into the site's existing mod_threejs_<site>/assets/css/style.css.
 * The `.oweb-logo-*` rules used by the LOGO inside the tunnel block live in
 * the LOGO_ANIMATED_v8i snapshot (the tunnel reuses the animated-logo wrap).
 * After search-replace `oweb` → `<site>`. */

/* ── Tunnel background canvas ──────────────────────────────────────────────── */
/* Fixed-position full-viewport background behind page content.
   z-index: -1 puts it BEHIND every page element including the navbar
   (the navbar's auto z-index becomes effectively 0, above us).
   pointer-events:none so it never intercepts clicks.
   Default = blue gradient if no background file is provided. */
.oweb-tunnel-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    background: #101010;
}

/* Background asset (image or video) fills the canvas */
.oweb-tunnel-canvas > video,
.oweb-tunnel-canvas > img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    position:   absolute;
    inset:      0;
}

/* Force tunnel sections to have transparent backgrounds so the canvas
   behind them is visible. Overrides YOOtheme's uk-section-* styles. */
.mbs-tunnel-section,
.mbs-tunnel-section.uk-section,
.mbs-tunnel-section.uk-section-default,
.mbs-tunnel-section.uk-section-primary,
.mbs-tunnel-section.uk-section-secondary,
.mbs-tunnel-section.uk-section-muted {
    background-color: transparent !important;
    background-image: none !important;
}
.mbs-tunnel-section .uk-section-default,
.mbs-tunnel-section .uk-section-primary,
.mbs-tunnel-section .uk-section-secondary,
.mbs-tunnel-section .uk-section-muted {
    background-color: transparent !important;
}

/* Tunnel sections break out of YOOtheme's uk-container so they reach
   viewport width when zoomed to scale 1. The negative margin trick
   centers the section at 100vw regardless of its parent's width.
   `display: block !important` overrides YOOtheme's `uk-flex` so the
   stage inside is the layout owner. */
.mbs-tunnel-section {
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display:      block !important;
    overflow:     visible;
    position:     relative;
}

/* Stage wraps the section's content (excluding the tunnel canvas, which
   the JS auto-wrap deliberately leaves outside). JS drives transform +
   opacity per scroll frame.
   `min-height: 100vh` (NOT 100%) — percentage height needs the parent
   to have explicit `height`, not `min-height`, so 100% resolved to 0
   and the stage collapsed to content height. With 100vh the stage is
   always a full viewport tall and its flex-center vertically centers
   content regardless of where uk-flex / uk-height-viewport classes
   live (outer section OR inner div). */
.mbs-tunnel-section .oweb-tunnel-stage {
    min-height:       100vh;
    width:            100%;
    display:          flex;
    flex-direction:   column;
    justify-content:  center;
    transform-origin: 50% 50%;
    will-change:      transform, opacity;
}

/* Mobile breathing room: the tunnel sections zero their own section padding
   (needed for the entry-zoom pivot), so on small screens a tall last-section
   content block butts straight against the footer with no gap. Add vertical
   padding to the stage on mobile/tablet only — desktop is left exactly as
   tuned. min-height:100vh is border-box (UIkit global) so the padding sits
   inside the viewport height and just guarantees a top/bottom gap. */
@media (max-width: 959px) {
    .mbs-tunnel-section .oweb-tunnel-stage {
        padding-top:    40px;
        padding-bottom: 40px;
    }
}

/* Zero uk-section's outer padding when stacked on `.mbs-tunnel-section`
   itself (e.g. intro). uk-section's default 80px top/bottom padding
   would push the stage content down by 80px and misalign it from the
   pivot calc. Sections that put uk-section on an INNER div are
   unaffected (selector needs both classes on same element). */
.mbs-tunnel-section.uk-section {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

/* ── Block wrapper (threejs_logo_tunnel) ────────────────────────────
   Wraps title + logo + text so they stack vertically and act as a
   single transform target for setupLogoTunnel — slide-in entry and
   scroll-driven 3D orbit don't desync the logo from the title/text.
   perspective + preserve-3d enable the 3dlogo behavior (translate3d
   + rotateY transforms on the link need 3D depth for perspective
   foreshortening). No `z-index` here — it would create a stacking
   context that intercepts clicks on the logo link. Mobile footer
   non-overlap is handled in JS via the pin-above-footer clamp. */
.oweb-tunnel-block {
    position:         relative;
    width:            100%;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    perspective:      1500px;
    transform-style:  preserve-3d;
    will-change:      transform, opacity, filter;
}
.oweb-tunnel-block > .oweb-tunnel-title { margin: 0 0 0.5em; }
.oweb-tunnel-block > .oweb-tunnel-text  { margin: 0.5em 0 0; max-width: 40em; }
.oweb-tunnel-block > .oweb-logo-link    { display: block; }

/* Footer click fix (non-3D heroes: slide-*/zoom/none).
   For those behaviors the block scales up to 50× and is pinned to the viewport
   centre during scroll WITHOUT the footer clamp (that clamp + blockScale=1 only
   run for 3dlogo). Its transform makes it a stacking context that paints ABOVE
   the in-flow <footer>, so the giant invisible block swallows clicks on the
   lower footer links (Sitemap / Login). The block holds no interactive content
   except the logo link, so make it transparent to pointer events and re-enable
   only the link (the JS still toggles the link off once it fades/leaves view). */
.oweb-tunnel-block               { pointer-events: none; }
.oweb-tunnel-block > .oweb-logo-link { pointer-events: auto; }
/* threejs_hero_tunnel "Entire hero" link scope — the wraps-all <a> is clickable;
   the JS toggles it off once the block fades past the hero so it can't eat
   footer clicks. */
.oweb-tunnel-block > .oweb-hero-link { pointer-events: auto; }

/* Hero: the block is a centered flex column (align-items:center), so a link
   wrapping the logo shrinks to content and the logo wrap (width:100%) collapses
   — the WebGL logo then renders into a tiny box and ignores its height. Force
   the logo link + wraps-all link to full width so the logo sizes from its
   height/width fields as intended. */
.oweb-hero > a.oweb-logo-link,
.oweb-hero > .oweb-hero-link {
    display: block;
    width: 100%;
}