/* ============================================================
   SIMPLE MODE — applied when body.simple-mode is set by mode.js
   Removes GIF backgrounds, animations, sparkle cursor.
   Replaces with clean white/neutral aesthetic.
   ============================================================ */

/* ---- GLOBAL BG + TEXT ---- */
html.simple-mode,
body.simple-mode {
    background: #f7f6f2 !important;
    background-color: #f7f6f2 !important;
    color: #111 !important;
    cursor: auto !important;
}

/* ---- HIDE GIF BACKGROUNDS ---- */
body.simple-mode #bg-video,
body.simple-mode #bg-video-container,
body.simple-mode #bg-video-container img {
    display: none !important;
}

/* ---- KILL ALL ANIMATIONS ---- */
body.simple-mode *,
body.simple-mode *::before,
body.simple-mode *::after {
    animation: none !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

/* ---- HIDE CURSOR & SPARKLE ELEMENTS ---- */
body.simple-mode #cursor-img,
body.simple-mode #glitter-canvas,
body.simple-mode #sparkle-trail {
    display: none !important;
}

/* ---- RESTORE DEFAULT CURSOR ---- */
body.simple-mode,
body.simple-mode * {
    cursor: auto !important;
}

body.simple-mode a,
body.simple-mode button,
body.simple-mode [onclick] {
    cursor: pointer !important;
}

/* ---- HIDE GRADIENT BORDER FRAME ---- */
body.simple-mode #gradient-frame {
    display: none !important;
}

/* ---- MAIN PAGE: Nav text colors ---- */
body.simple-mode h1.artist-name {
    color: #111 !important;
    text-shadow: none !important;
}

body.simple-mode .contact-info,
body.simple-mode .contact-link {
    color: #333 !important;
}

body.simple-mode .contact-link:hover {
    text-shadow: none !important;
    color: #000 !important;
}

body.simple-mode .text-btn {
    color: #111 !important;
    text-shadow: none !important;
}

body.simple-mode .text-btn:hover {
    color: #444 !important;
    opacity: 1 !important;
}

/* ---- SUB-PAGES: Header ---- */
body.simple-mode .header-title {
    color: #111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

body.simple-mode .header-link {
    color: #333 !important;
    text-shadow: none !important;
}

body.simple-mode .header-link:hover {
    color: #000 !important;
    text-shadow: none !important;
}

/* ---- PAGE TITLES ---- */
body.simple-mode .body-title-center {
    color: #111 !important;
    text-shadow: none !important;
}

/* ---- DIE / DICE: keep functional, no levitation ---- */
body.simple-mode .die-container {
    animation: none !important;
}

/* ---- BODY PAGE: circus section GIFs → show as normal images ---- */
/* GIFs in circus section are content images (not bg), keep visible */
body.simple-mode .circus-photo img,
body.simple-mode .image-item img,
body.simple-mode .media-item img,
body.simple-mode .media-item video {
    filter: none !important;
}

/* ---- BODY PAGE: modeling link (gradient text) → plain ---- */
body.simple-mode .modeling-link {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #333 !important;
    background-clip: unset !important;
    color: #333 !important;
}

/* ---- FINDINGS / FINE-ARTS: scatter photos stay visible ---- */
body.simple-mode .scatter-photo img,
body.simple-mode .masonry-item img,
body.simple-mode .sculpture-item {
    filter: none !important;
}

/* ---- LINKS: general readable color on light bg ---- */
body.simple-mode a {
    color: #222 !important;
}

body.simple-mode a:hover {
    color: #000 !important;
}

/* ---- FINE-ARTS: header cycling color text → static ---- */
body.simple-mode .body-title-center {
    animation: none !important;
}

/* ---- BODY PAGE: sideways title ---- */
body.simple-mode .sideways-title {
    color: #222 !important;
}

/* ---- CONTENT AREAS: readable on light bg ---- */
body.simple-mode .content-area,
body.simple-mode .content-area p,
body.simple-mode .content-area a {
    color: #222 !important;
}

/* ---- ABOUT PAGE: content text ---- */
body.simple-mode #about-content-wrapper .content-area {
    color: #222 !important;
}

/* ---- LIGHTBOXES: Keep dark overlay for image viewing ---- */
body.simple-mode #findings-lightbox,
body.simple-mode #gallery-lightbox {
    background: rgba(0, 0, 0, 0.94) !important;
}

/* ---- DIE RESULT ---- */
body.simple-mode .result-overlay {
    color: #111 !important;
    text-shadow: none !important;
}

/* ---- INSTAGRAM / EXTERNAL LINKS ---- */
body.simple-mode .contact-link,
body.simple-mode #about-content-wrapper a {
    color: #333 !important;
    opacity: 1 !important;
}

/* ---- PAGE FADE OVERLAY: disable in simple mode ---- */
body.simple-mode #page-fade {
    display: none !important;
}