@import url('asap.css');

body {
    margin: 0;
    background: url('../img/tiled_brick.png') repeat;
    /* background-color: white; */
    overflow: hidden;
}

/* ----------------------------
    Main wrapper: wide layout
---------------------------- */
#menu_wrapper {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 3vw;
    margin-right: 3vw;
    width: min(calc(100vw - 6vw), calc(100vh * (10/6)));
    height: min(100vh, calc((100vw - 6vw) * (6/10)));
    container-type: size;
}

/* ----------------------------
    Grid definition
---------------------------- */
#menu_grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 22% 22% 22% 34%;
    grid-template-rows: 30% 15% 55%;
    column-gap: 2.5%;
}

.cell_div {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ----------------------------
    Posters
---------------------------- */
.img_div {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/4;
    /* background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    position: relative;
    filter: drop-shadow(10px 10px 10px #26a4e7);
    display: flex;
    justify-content: center;
    /* font-size: 1em; */
    container-type: size;
    container-name: poster;
    position: relative;
}

.img_div:hover {
    filter: drop-shadow(10px 10px 10px #db41ad);

    #pose_gallery_label,
    #tutorials_label,
    #patreon_label {
        text-decoration: underline;
        /* text-decoration-color: #26a4e7;
        text-decoration-style: solid; */
    }
}


/* Poster label text */
.poster_label {
    position: absolute;
    text-align: center;
    color: #1f1f1f;
    /* font-weight: 700; */
    font-family: Asap-Bold, Arial, Helvetica, sans-serif;
    pointer-events: none;
    left: 50%;
    width: 90%;
    /* transform: translateX(-50%) rotate(var(--r)); */
    transform: translateX(-50%);
    font-size: clamp(0.4rem, 12cqw, 3rem);
}

/* Poster subtext */
.poster_subtext {
    position: absolute;
    left: 5%;
    /* transform: rotate(var(--r)); */
    width: 90%;
    color: #1f1f1f;
    font-family: Asap-Regular, Arial, Helvetica, sans-serif;
    text-align: left;
    font-size: clamp(0.3rem, 10cqw, 2rem);
    line-height: 1.2;
    pointer-events: none;
}

/* ----------------------------
    Pose Gallery Poster
---------------------------- */
#pose_gallery_img {
    transform: rotate(-5deg) translateX(-1%) translateY(-7%);

    img {
        position: absolute;
        display: block;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        object-fit: contain;
        z-index: -50;
    }
}

#pose_gallery_label {
    /* --r: -5deg; */
    bottom: 4%;
    font-size: clamp(0.4rem, 13cqw, 3rem);
}

.pose_fader {
    position: absolute !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* mask: url(img/poster_1.png);
    -webkit-mask: url(img/poster_1.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-mode: alpha; */
    z-index: 0;
}

.pose_fader img {
    position: absolute !important;
    width: 100%;
    /* transform: rotate(-5deg) translateX(-1%) translateY(-7%); */
    height: 100%;
    opacity: 0;
    -webkit-animation: pose_fade 70s infinite;
    animation: pose_fade 70s infinite;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    clip-path: polygon(
        2.10% 9.10%, 2.10% 99.50%, 92.00% 99.50%,
        93.50% 86.30%, 89.90% 84.60%, 90.50% 81.20%,
        85.80% 76.10%, 97.60% 70.00%, 98.80% 1.30%,
        16.90% 1.10%, 15.10% 9.30%, 2.10% 9.10%
    );




}

@keyframes pose_fade {
  0%     { opacity: 0; }
  1.43%  { opacity: 1; }   /* 1s of fade-in (1/70 = 1.43%) */
  8.57%  { opacity: 1; }   /* +5s visible (6/70 = 8.57%) */
  10%    { opacity: 0; }   /* +1s fade-out (7/70 = 10%) */
  100%   { opacity: 0; }
}

.pose_fader img:nth-child(1)  { --animation-order: 1;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(2)  { --animation-order: 2;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(3)  { --animation-order: 3;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(4)  { --animation-order: 4;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(5)  { --animation-order: 5;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(6)  { --animation-order: 6;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(7)  { --animation-order: 7;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(8)  { --animation-order: 8;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(9)  { --animation-order: 9;   animation-delay: calc((var(--animation-order) - 1) * 7s); }
.pose_fader img:nth-child(10) { --animation-order: 10;  animation-delay: calc((var(--animation-order) - 1) * 7s); }

/* ----------------------------
    Tutorials Poster
---------------------------- */
#tutorials_img {
    /* background-image: url('../img/poster_2.png'); */
    transform: rotate(-1deg) translateX(-3%) translateY(-7%);
}

#tutorials_label {
    /* --r: -1deg; */
    top: 4%;
    font-size: clamp(0.4rem, 20cqw, 3rem);
}

#tutorials_subtext {
    /* --r: -1deg; */
    top: 30%;
}

/* ----------------------------
    Support Poster
---------------------------- */
#support_img {
    /* background-image: url('../img/poster_3.png'); */
    transform: rotate(5deg) translateY(-10%);
}

#support_label {
    /* --r: 5deg; */
    top: 5%;
}

#support_subtext {
    /* --r: 5deg; */
    top: 30%;
}

/* ----------------------------
    Bee image
---------------------------- */
#bee_div {
    position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-65%);
    height: 100%;
    overflow: visible;
}

#bee_image {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* ----------------------------
    SVG title
---------------------------- */
@font-face {
    font-family: blank_river;
    src: url(../fonts/blank_river.ttf);
}

svg {
    width: 100%;
    height: 100%;
}

svg text {
    font-size: 200%;
    stroke-width: 10%;
    fill: #e4dfd1;
    stroke: #251719;
    font-family: blank_river, Arial;
    text-anchor: middle;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

/* ----------------------------
Grid positions for wide layout
---------------------------- */
#logo_cell {
    grid-column: 1 / 4;
    grid-row: 1;
    transform: rotate(-8deg);
    left: -20%;
}

#logo_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#subtitle_cell {
    grid-column: 1 / 4;
    grid-row: 2;
    transform: translateY(-25%) rotate(-2deg);
}

#pose_gallery_cell {
    grid-column: 1;
    grid-row: 3;
}

#tutorials_cell {
    grid-column: 2;
    grid-row: 3;
}

#support_cell {
    grid-column: 3;
    grid-row: 3;
}

#bee_cell {
    grid-column: 4;
    grid-row: 1 / 4;
}

/* ----------------------------
    Portrait / Tall Layout
---------------------------- */
@media (max-aspect-ratio: 1.25/1) {
    #menu_wrapper {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        /* height: min(100vh, calc(100vw * 4)); */
        height: 100vh;
        margin: 0;
    }

    #menu_grid {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 11% 7% 36% 36%;
        column-gap: 0;
        row-gap: 2%;
    }

    #logo_cell {
        grid-column: 1 / 5;
        grid-row: 1;
        justify-self: center;
        transform: rotate(0deg);
        left: 0;
    }

    #logo_image {
        width: 100%;
        height: 120%;
        object-fit: contain;
    }

    #subtitle_cell {
        grid-column: 1 / 5;
        grid-row: 2;
        justify-self: center;
        transform: translateY(0) rotate(0deg);
    }

    #pose_gallery_cell {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
    }

    
    #pose_gallery_img {
        transform: rotate(-1deg);
    }
    
    .pose_fader {
        transform: translateY(4%);
    }

    #tutorials_cell {
        grid-column: 2;
        grid-row: 4;
        justify-self: end;
    }

    #tutorials_img {
        transform: translateY(5%);
    }

    #support_cell {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
    }

    #support_img {
        transform: rotate(2deg) translateY(-3%);
    }

    /* #support_label {
        --r: 20deg;
        top: 5%;
    }

    #support_subtext {
        --r: 20deg;
        top: 30%;
    } */

    #bee_cell {
        grid-column: 3;
        grid-row: 4;
        justify-self: start;
    }

    #bee_div {
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-70%, -10%);
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    #bee_image {
        width: 130%;
        height: auto;
        object-fit: cover;
    }

    /* Posters scale properly */
    .img_div {
        height: 100%;
        width: auto;
        aspect-ratio: 0.7 / 1;
        margin: 0 auto;
    }

    /* Subtitle text scaling */
    #subtitle_cell svg text {
        font-size: 300%;
        stroke-width: 7%;
    }
}

/* ----------------------------------------------------------
      ULTRA-TALL MODE LAYOUT (≤ 3/5)
      Show logo + subtitle + 3 new link rectangles + bee
      Hide ALL posters and everything else
----------------------------------------------------------- */
@media (max-aspect-ratio: 3/5) {

    /* Hide everything inside the grid by default */
    #menu_grid > * {
        display: none !important;
    }

    /* Show ONLY: logo, subtitle, and bee */
    #logo_cell,
    #bee_cell {
        display: block !important;
    }

    /* ------------------------------------------------------
         STACK LAYOUT: use wrapper instead of grid
    ------------------------------------------------------ */
    #menu_wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-top: 0;
        gap: 3vh;
    }

    /* Remove grid constraints */
    #menu_grid {
        display: contents !important;
    }

    /* ------------------------------------------------------
           LOGO
    ------------------------------------------------------ */
    #logo_cell {
        width: 95%;
        height: auto;
        text-align: center;
        margin-top: 2vh;
        flex-shrink: 0 !important;
    }

    #logo_image {
        transform: none !important;
        max-height: 20vh !important;
        height: auto !important;
        width: auto !important;
        max-width: 90vw !important;
        object-fit: contain !important;
    }

    /* ------------------------------------------------------
        3 NEW RECTANGLE LINK BUTTONS (using existing cells)
        We repurpose your THREE poster cells as rectangles.
    ------------------------------------------------------ */

    /* SHOW these three */
    #pose_gallery_cell,
    #tutorials_cell,
    #support_cell {
        display: block !important;
    }

    /* Turn them into uniform rectangles */
    #pose_gallery_cell,
    #tutorials_cell,
    #support_cell {
        width: 90vw !important;
        height: 14vh !important;
        background: rgba(255,255,255,0.85);
        border-radius: 2vh;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 0 20px rgba(0,0,0,0.35);
    }

    /* Make the entire DIV the clickable link */
    #pose_gallery_cell a,
    #tutorials_cell a,
    #support_cell a {
        margin-top: 5%;
        margin-left: 5%;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
        color: #1f1f1f !important;
        font-family: Asap-Bold, Arial;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6vw;
    }

    /* Remove ALL poster images and clutter */
    .img_div,
    .img_div *,
    .poster_background,
    .tutorials_background,
    .pose_fader,
    .pose_fader img,
    .poster_subtext,
    .mask-shape {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ------------------------------------------------------
        CUSTOM LABEL TEXT FOR EACH RECTANGLE
    ------------------------------------------------------ */
    #pose_gallery_cell a::after {
        content: "Pose Gallery";
    }

    #tutorials_cell a::after {
        content: "Tutorials";
    }

    #support_cell a::after {
        content: "Patreon";
    }

    /* ------------------------------------------------------
        BEE AT THE BOTTOM
    ------------------------------------------------------ */
    #bee_cell {
        display: block !important;
        position: fixed !important;   /* float over layout */
        bottom: 0 !important;         /* always at bottom */
        left: 50% !important;
        transform: translateX(-50%);
        width: 100%;
        height: auto;
        pointer-events: none !important; /* keep links tappable */
        z-index: 5; /* above content */
    }

    #bee_div {
        width: auto !important;
        height: auto !important;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    #bee_image {
        width: auto !important;
        height: 60vh !important;
        object-fit: contain !important;
        transform: translate(35%, 10%);
        clip-path: inset(0 0 -10% 0);
    }
}