/* =============================================
   BASE STYLES
   Shared across all device types.
   Always loaded first in index.html — device-
   specific stylesheets then layer on top.
   ============================================= */


/* --- CSS Variables --- */
:root {
    --scroll-padding: 50px;
    --BGColour: rgba(0, 226, 0, 1);
    --clickColour: rgb(255, 169, 1);
    --highlightColour: rgb(250, 227, 2);
    --textPanelBackgroundColor: rgba(64, 51, 69, 0.42);
    --locked-vh: 10vh;
}


/* --- Reset & Base --- */
html, body {
    background-color: black;
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-padding-top: var(--scroll-padding);
    scroll-behavior: smooth;
}


/* --- Hamburger Icon --- */
#HamburgerMenu img {
    filter: contrast(0%);
}


/* --- Section Headings (common properties) ---
   font-size is set per device since h2/h3 scale
   differently on small screens.              */
#AboutSectionTitle h2,
#TeamSectionTitle h2,
#DirectorSection h3,
#ArtistSection h3,
#WorkSectionTitle h2,
#WorkSection h3,
#UpdatesSection h2,
#ContactUsTitle h2 {
    position: relative;
    margin: 0;
    padding: 0;
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    color: white;
    font-weight: bold;
    text-align: center;
    z-index: 0;
}


/* --- About Section Text --- */
#AboutText p {
    position: relative;
    margin: 0;
    padding: 4%;
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    font-size: x-large;
    color: white;
    font-weight: bold;
    text-align: center;
}

#DebutTitleText p {
    position: relative;
    margin: 0;
    padding: 2%;
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    font-size: x-large;
    color: white;
    font-weight: bold;
    text-align: center;
}


/* --- News & Updates Section --- */
#StayTunedMsg {
    justify-items: center;
}

#StayTunedMsg p {
    padding-top: 10%;
    padding-bottom: 10%;
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    font-size: x-large;
    color: white;
    font-weight: bold;
    margin: 0;
}


/* --- Contact Form (shared field styles) --- */
#ContactForm label {
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    font-size: 120%;
    font-weight: bold;
    color: white;
    padding-top: 2%;
}

#ContactForm input {
    background-color: lightpink;
    box-sizing: border-box;
    border-radius: 10px;
}

#ContactForm textarea {
    background-color: lightpink;
    box-sizing: border-box;
    border-radius: 10px;
}


/* --- Social Menu Icons --- */
#LinkTree img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0.65);
}

#Mail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0.8);
}


/* --- Footer Text --- */
#Footer p {
    font-family: "Franklin Gothic Demi Cond", sans-serif;
    font-size: small;
    color: white;
    margin: 0;
}


/* --- Touch Press Feedback ---
   Used on mobile; harmless on desktop.       */
.pressed {
    background-color: var(--clickColour) !important;
}


/* --- Scroll Button Pulse Animation --- */
@keyframes pulse {
    0%   { transform: translateX(-50%) scale(1); }
    50%  { transform: translateX(-50%) scale(1.2); }
    100% { transform: translateX(-50%) scale(1); }
}