/* ==========================================================================
   Broken Tide — Parallax Background & Global Styles
   ========================================================================== */

/* ---------- @font-face ---------- */
@font-face {
    font-family: 'Tagesschrift';
    src: url('../fonts/Tagesschrift-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- Global text (skip admin bar) ---------- */
body.bt-parallax-active .site,
body.bt-parallax-active .site *:not(svg):not(svg *) {
    font-family: 'Tagesschrift', sans-serif !important;
    color: #fff !important;
}

body.bt-parallax-active .site a {
    color: #fff !important;
}

/* ---------- Logo glow ---------- */
.bt_logo {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.bt_logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/templates/Broken%20Sea%20logo%20gradient.png') center / contain no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* ---------- Parallax container ---------- */
#bt-parallax {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    background: rgb(87, 107, 119);
}

/* ---------- Layer ---------- */
.bt-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Canvas ratio: 3240 / 1920 = 168.75% of width */
    height: 168.75vw;
    will-change: transform;
}

/* Clouds: viewport-sized, no scroll */
.bt-layer--cloud {
    height: 100vh;
}

/* Tiles: same canvas height, per-element parallax */
.bt-layer--tile {
    height: 168.75vw;
}

/* ---------- Element ---------- */
.bt-el {
    position: absolute;
    display: block;
    height: auto;
}

/* ---------- BG tile: fixed fullscreen cover, no scroll ---------- */
.bt-el[data-bt-id="BG"] {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover;
    opacity: 0.5;
    animation: none !important;
    translate: none !important;
}

/* ---------- Boat tile: anchored top-right ---------- */
.bt-el[data-bt-id="tile_Boat"] {
    left: auto !important;
    right: 0;
    top: 0 !important;
    width: 65% !important;
    animation: none !important;
}

/* ---------- Cloud drift (JS-driven horizontal) ---------- */
.bt-layer--cloud .bt-el {
    will-change: transform;
}

/* ---------- Tile positioning via CSS custom properties ---------- */
.bt-tile-el {
    --bt-scroll: 0px;
    left: var(--el-l);
    top: var(--el-t);
    width: var(--el-w);
    translate: 0 var(--bt-scroll);
}

/* ---------- Mobile: differentiated tile sizing + repositioning ---------- */
@media (max-width: 768px) {
    .bt-layer,
    .bt-layer--tile {
        height: max(168.75vw, 100vh);
    }

    /* Base default: moderate scale, gentler Y spread */
    .bt-tile-el {
        top: calc(var(--el-t) * 2 - 5%);
        width: calc(var(--el-w) * 1.8);
    }

    /* --- Large scene pieces --- */

    /* Lighthouse: bigger but not overwhelming */
    .bt-el[data-bt-id="tile_lighthouse"] {
        width: 45% !important;
    }

    /* Boat: dominant top-right */
    .bt-el[data-bt-id="tile_Boat"] {
        width: 90% !important;
    }

    /* tile3 (left cliff piece): bigger */
    .bt-el[data-bt-id="tile3"] {
        width: 25% !important;
    }

    /* tile4 (right cliff): moderate */
    .bt-el[data-bt-id="tile4"] {
        width: 28% !important;
    }

    /* --- Medium tiles: 2.5× --- */
    .bt-el[data-bt-id="tile1"],
    .bt-el[data-bt-id="tile2"],
    .bt-el[data-bt-id="tile5"],
    .bt-el[data-bt-id="tile10"] {
        width: calc(var(--el-w) * 2.5);
    }

    /* Left-edge tiles: keep in bounds, enlarge */
    .bt-el[data-bt-id="tile6"],
    .bt-el[data-bt-id="tile6-2"] {
        width: calc(var(--el-w) * 2.5);
        left: 0 !important;
    }

    /* Right-edge tiles: anchor to right so they don't overflow */
    .bt-el[data-bt-id="tile2"],
    .bt-el[data-bt-id="tile9"] {
        left: auto !important;
        right: 2% !important;
    }

    /* --- Small deco tiles: 3.5× to stay visible --- */
    .bt-el[data-bt-id="tile8"],
    .bt-el[data-bt-id="tile9"],
    .bt-el[data-bt-id="tile11png"],
    .bt-el[data-bt-id="tile12"],
    .bt-el[data-bt-id="tile13"],
    .bt-el[data-bt-id="tile14"] {
        width: calc(var(--el-w) * 3.5);
    }

    /* --- Per-tile mobile position overrides --- */
    .bt-el[data-bt-id="tile1"] { top: 43% !important; }
    .bt-el[data-bt-id="tile2"] { top: 54% !important; }
    .bt-el[data-bt-id="tile5"] { left: 58% !important; }
    .bt-el[data-bt-id="tile6"] { top: 62% !important; }
    .bt-el[data-bt-id="tile10"] { top: 18% !important; }
    .bt-el[data-bt-id="tile11png"] { left: 4% !important; }
    .bt-el[data-bt-id="tile4"] { right: -16% !important; top: 38% !important; }
    .bt-el[data-bt-id="tile12"] { left: 44% !important; }
    .bt-el[data-bt-id="tile14"] { left: 59% !important; top: 60% !important; }
}

/* ---------- Tile idle float ---------- */
@keyframes bt-float-tile {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    20% {
        transform: translateY(-6px) rotate(0.5deg);
    }
    40% {
        transform: translateY(2px) rotate(-0.3deg);
    }
    60% {
        transform: translateY(-4px) rotate(0.3deg);
    }
    80% {
        transform: translateY(2px) rotate(-0.2deg);
    }
}

/* ---------- Theme overrides (GeneratePress) ---------- */
body.bt-parallax-active {
    background: transparent !important;
}

body.bt-parallax-active .site,
body.bt-parallax-active #page,
body.bt-parallax-active .grid-container {
    background: transparent !important;
}

body.bt-parallax-active .site-content,
body.bt-parallax-active .content-area,
body.bt-parallax-active .inside-article {
    background: transparent !important;
}

body.bt-parallax-active .site {
    position: relative;
    z-index: 1;
}

/* ---------- Vignette overlay ---------- */
body.bt-parallax-active::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 200px 80px rgba(0, 0, 0, 0.4);
    z-index: 0;
}

/* ---------- Seagulls ---------- */
.bt-seagull {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .bt-layer {
        will-change: auto;
    }
    .bt-seagull,
    .bt-el {
        animation: none !important;
        display: none;
    }
}