/* === CSS RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* === FONTS === */
@font-face {
    font-family: 'Bubblegum Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/BubblegumSans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Bubblegum Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/BubblegumSans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'ChubbyCheeks';
    src: url('../fonts/ChubbyCheeksRegular.woff2') format('woff2'),
        url('../fonts/ChubbyCheeksRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* === SKIP LINK === */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: #332B00;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    font-size: 1rem;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* === SCREEN READER ONLY === */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === BODY === */
body {
    background: transparent;
    font-family: 'ChubbyCheeks', cursive;
    font-weight: normal;
    letter-spacing: 0.05em;
    text-align: center;
    color: white;
    text-shadow: 3px 3px 5px black;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* === PARALLAX BACKGROUND === */
.parallax-bg {
    position: fixed;
    top: -30vh;
    left: 0;
    width: 100%;
    height: 160vh;
    background-color: #308b00;
    z-index: -1;
    overflow: hidden;
}

.parallax-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* === NAVIGATION === */
nav {
    font-size: clamp(1.35rem, 3.9vw, 2.25rem);
    position: relative;
}

.nav-toggle {
    display: none;
    background: #332B00;
    color: white;
    border: 3px solid white;
    border-radius: 8px;
    font-size: 2.7rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    margin: 0.5rem auto;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

.nav-list {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    column-gap: 2%;
    padding: 0;
    margin-top: 1em;
}

li {
    display: block;
    color: white;
}

.basicnav:link, .basicnav:visited {
    background: url('../assets/ui/btn-default.png') center/100% 100% no-repeat;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.2s;
}

.basicnav:hover, .basicnav:active {
    background: url('../assets/ui/btn-hover.png') center/100% 100% no-repeat;
    transform: scale(1.15);
}

.basicnav:focus-visible {
    outline: 3px solid yellow;
    outline-offset: 3px;
}

/* === BASIC STYLES === */
h1 {
    margin: 3% 3%;
    font-size: clamp(1.8rem, 3vw, 3rem);
    padding-left: 3%;
}

@keyframes title_anim {
    0%   {transform: rotate(-20deg) scale(1.09);}
    100% {transform: rotate(-10deg) scale(1.21);}
}

.titlepic {
    margin-top: 6.5em;
    margin-bottom: -6em;
    transform: rotate(-18deg);
    width: 57.5%;
    animation-name: title_anim;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.descpar {
    font-size: clamp(1.5rem, 3.45vw, 2.4rem);
    width: 80%;
    margin: auto;
    padding: 0.5rem 0;
}

.testdiv {
    font-size: clamp(1.8rem, 5.1vw, 3rem);
    flex-grow: 0;
    width: 30%;
    text-align: right;
    color: yellow;
}

.container {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    column-gap: 10px;
}

.basicimg {
    width: 100%;
}

.hero-img {
    max-width: 57.5vw;
}

/* === SECTION TITLES === */
section, footer {
    padding: 3rem 0;
}

.sectitle {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    color: yellow;
    margin: 1rem 0;
}

/* === FEATURES === */
.features-layout {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
}

.feature-slot {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
}

.feature-slot.zoom-out {
    opacity: 0;
    transform: scale(0);
}

.featstitle {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    flex-grow: 0;
    color: yellow;
    margin-top: 1.5em;
}

.featstext {
    font-size: clamp(1.35rem, 2.7vw, 1.95rem);
    flex-grow: 0;
    margin-top: 0.3em;
}

.feats_mid {
    width: 30%;
    height: 45vw;
    max-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feats_mid img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-img-slot {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
}

.feature-img-slot.zoom-out {
    opacity: 0;
    transform: scale(0);
}

.feats_left {
    width: 30%;
    text-align: right;
}

.feats_right {
    width: 30%;
    text-align: left;
}

/* === CONTACT === */
.container_contact {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
}

.contact_div {
    font-size: clamp(1.35rem, 3vw, 2.1rem);
    flex-grow: 0;
    width: 60%;
    text-align: center;
}

.ubrothers_div {
    width: 40%;
}

.ubrothers_div img {
    aspect-ratio: 445 / 85;
    object-fit: contain;
}

.cpright {
    font-size: clamp(1.5rem, 4.5vw, 2.7rem);
    margin-block-start: 0%;
    margin-block-end: 0%;
}

.emaillink {
    font-size: clamp(1.5rem, 4.5vw, 2.7rem);
    margin-block-start: 0%;
    margin-block-end: 2%;
}

.emaillink a {
    color: white;
    text-decoration: underline;
    padding: 0.5rem;
}

.emaillink a:focus-visible {
    outline: 3px solid yellow;
    outline-offset: 3px;
}

/* === SCROLL FADE-IN === */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === ANIMATED FEATURES (legacy zoom kept for replay) === */
@keyframes zoom_in_anim {
    0%   {transform: scale(0.05);}
    100% {transform: scale(1.0);}
}

.zoominanim {
    animation-name: zoom_in_anim;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* === VIDEO === */
.vid_border {
    position: relative;
    width: 80%;
    border: 5px solid black;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: block;
    aspect-ratio: 16 / 9;
}

.vid_content {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* === SCREENSHOT SLIDESHOW === */
.slideshow-container {
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid black;
    overflow: hidden;
}

.mySlides {
    width: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}

.mySlides.slide-active {
    display: block;
    position: relative;
    transform: translateX(0);
}

.mySlides.slide-out-left {
    display: block;
    transform: translateX(-100%);
}

.mySlides.slide-in-right {
    display: block;
    transform: translateX(100%);
}

.mySlides.slide-out-right {
    display: block;
    transform: translateX(100%);
}

.mySlides.slide-in-left {
    display: block;
    transform: translateX(-100%);
}

.slideimg {
    width: 100%;
    height: 100%;
    display: block;
}

/* SLIDESHOW CONTROLS */
.slideshow-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
}

.slide-btn {
    background: #332B00;
    color: white;
    border: 2px solid white;
    border-radius: 8px;
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.slide-btn:hover {
    background-color: red;
}

.slide-btn:focus-visible {
    outline: 3px solid yellow;
    outline-offset: 3px;
}

/* === ANIMATED HIDING MONSTERS === */
.mmimg_base {
    display: block;
    position: fixed;
    animation-fill-mode: forwards;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

@keyframes mmimg1_anim {
    0%   {transform: translateX(50px);}
    66% {transform: translateX(0px);}
    100% {transform: translateX(0px);}
}

.mmimg1 {
    top: 0px;
    right: 0px;
    animation-name: mmimg1_anim;
    animation-duration: 1s;
}

@keyframes mmimg2_anim {
    0%   {transform: translateY(-70px);}
    58% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
}

.mmimg2 {
    top: 0px;
    left: 0px;
    animation-name: mmimg2_anim;
    animation-duration: 0.7s;
}

@keyframes mmimg3_anim {
    0%   {transform: translateY(140px) translateX(-100px);}
    45% {transform: translateY(0px) translateX(0px);}
    100% {transform: translateY(0px) translateX(0px);}
}

.mmimg3 {
    bottom: 0px;
    left: 0px;
    animation-name: mmimg3_anim;
    animation-duration: 0.9s;
}

@keyframes mmimg4_anim {
    0%   {transform: translateY(140px) translateX(100px);}
    54% {transform: translateY(0px) translateX(0px);}
    100% {transform: translateY(0px) translateX(0px);}
}

.mmimg4 {
    bottom: 0px;
    right: 0px;
    animation-name: mmimg4_anim;
    animation-duration: 0.8s;
}

@keyframes mmimg5_anim {
    0%   {transform: translateX(-100px);}
    65% {transform: translateX(0px);}
    100% {transform: translateX(0px);}
}

.mmimg5 {
    top: 50%;
    left: 0px;
    animation-name: mmimg5_anim;
    animation-duration: 0.77s;
}

.mmimg6 {
    top: 30%;
    right: 0px;
    animation-name: mmimg1_anim;
    animation-duration: 0.7s;
}

@keyframes mmimg7_anim {
    0%   {transform: translateY(150px);}
    60% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
}

.mmimg7 {
    bottom: 0px;
    left: 20%;
    animation-name: mmimg7_anim;
    animation-duration: 0.83s;
}

/* === RESPONSIVE: MOBILE (max-width: 768px) === */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    /* Hamburger nav */
    .nav-toggle {
        display: block;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 0;
    }

    .nav-list.nav-open {
        display: flex;
    }

    .basicnav:link, .basicnav:visited {
        padding: 0.9rem 2rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Title */
    .titlepic {
        width: 85%;
        margin-bottom: 1rem;
    }

    @keyframes title_anim_mobile {
        0%   {transform: rotate(-16deg) scale(0.97);}
        100% {transform: rotate(-12deg) scale(1.03);}
    }

    .titlepic {
        animation-name: title_anim_mobile;
    }

    /* Hero stacking */
    .container {
        flex-direction: column;
        align-items: center;
    }

    .testdiv {
        width: 90%;
        text-align: center;
    }

    .hero-img {
        max-width: 44vw;
    }

    section, footer {
        padding: 1.5rem 0;
    }

    .descpar {
        width: 95%;
    }

    /* Features stacking */
    .features-layout {
        flex-direction: column;
        align-items: center;
    }

    .feats_left,
    .feats_mid,
    .feats_right {
        width: 90%;
        text-align: center;
        padding: 0 1rem;
    }

    .feats_mid {
        order: -1;
        padding: 0;
        margin-bottom: 2rem;
    }

    .feats_mid img {
        width: 50%;
        margin: 0 auto;
    }

    .featstitle {
        margin-top: 1em;
    }

    /* Slideshow & video full width */
    .slideshow-container,
    .vid_border {
        width: 95%;
    }

    /* Contact */
    .ubrothers_div {
        width: 70%;
    }

    .contact_div {
        width: 90%;
    }

    /* Hide monster decorations on mobile */
    .mmimg_base {
        display: none;
    }

    /* Hide floating leaves on mobile */
    .leaf {
        display: none;
    }

    /* Disable parallax on mobile */
    .parallax-bg {
        position: fixed;
        transform: none !important;
    }
}

/* === RESPONSIVE: SMALL PHONE (max-width: 480px) === */
@media (max-width: 480px) {
    .titlepic {
        width: 95%;
    }

    .slideshow-container,
    .vid_border {
        width: 98%;
        border-width: 3px;
    }

    .testdiv {
        width: 95%;
    }

    .hero-img {
        max-width: 48vw;
    }

    .feats_left,
    .feats_mid,
    .feats_right {
        width: 95%;
    }
}

/* === PREFERS REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .titlepic {
        animation: none;
        transform: rotate(-15deg);
    }

    .zoominanim {
        animation: none;
        transform: scale(1);
    }

    .mmimg_base {
        animation: none;
    }

    .leaf {
        animation: none;
        display: none;
    }

    .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* === FLOATING LEAVES === */
@keyframes leaf-fall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(110vh) translateX(80px) rotate(360deg);
        opacity: 0;
    }
}

.leaf {
    position: fixed;
    top: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(ellipse at center, #5ebd3e 0%, #2d7a0f 60%, transparent 70%);
    border-radius: 50% 0 50% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: leaf-fall linear infinite;
}

.leaf:nth-child(1)  { left: 5%;  animation-duration: 12s; animation-delay: 0s; width: 18px; height: 18px; }
.leaf:nth-child(2)  { left: 15%; animation-duration: 15s; animation-delay: 2s; width: 14px; height: 14px; }
.leaf:nth-child(3)  { left: 25%; animation-duration: 11s; animation-delay: 4s; width: 22px; height: 22px; }
.leaf:nth-child(4)  { left: 40%; animation-duration: 14s; animation-delay: 1s; width: 16px; height: 16px; }
.leaf:nth-child(5)  { left: 55%; animation-duration: 13s; animation-delay: 3s; width: 20px; height: 20px; }
.leaf:nth-child(6)  { left: 65%; animation-duration: 16s; animation-delay: 5s; width: 12px; height: 12px; }
.leaf:nth-child(7)  { left: 75%; animation-duration: 10s; animation-delay: 2.5s; width: 24px; height: 24px; }
.leaf:nth-child(8)  { left: 85%; animation-duration: 14s; animation-delay: 0.5s; width: 15px; height: 15px; }
.leaf:nth-child(9)  { left: 35%; animation-duration: 17s; animation-delay: 6s; width: 18px; height: 18px; }
.leaf:nth-child(10) { left: 92%; animation-duration: 12s; animation-delay: 3.5s; width: 13px; height: 13px; }

/* === FOCUS VISIBLE (general) === */
:focus-visible {
    outline: 3px solid yellow;
    outline-offset: 3px;
}