/* custom_styles.css */

/*
   It's a good practice to define your color palette as CSS variables
   for easy reuse and maintenance.
*/
:root {
    --primary-dark-purple: rgb(59, 28, 99);
    --primary-magenta: rgb(157, 29, 89);
    --primary-orange-red: rgb(222, 63, 15);

    --secondary-dark-yellow: rgb(234, 186, 46);
    --secondary-olive-green: rgb(180, 162, 66);
    --secondary-teal: rgb(122, 193, 188);

    --pastel-light-lavender: rgb(215, 223, 243);
    --pastel-light-pink: rgb(232, 121, 151);
    --pastel-light-yellow: rgb(255, 231, 148);
    --pastel-light-green: rgb(203, 202, 109);
    --pastel-light-blue: rgb(187, 215, 225);

    /* Define a main background and text color for the theme */
    --main-bg-color: var(--pastel-light-lavender);
    --main-text-color: var(--primary-dark-purple);
    --header-bg-color: var(--primary-dark-purple);
    --header-text-color: var(--pastel-light-yellow);
    --sidebar-bg-color: var(--primary-magenta);
    --sidebar-text-color: var(--pastel-light-lavender);
    --sidebar-hover-bg-color: var(--primary-orange-red);
    --sidebar-hover-text-color: white;
    --card-overlay-bg: linear-gradient(to top, rgba(59, 28, 99, 0.9), rgba(59, 28, 99, 0.3)); /* Example with Dark Purple */
    --card-text-color: white;
    --link-color: var(--primary-orange-red);
    --link-hover-color: var(--primary-magenta);
}

/* Apply to the main app container or body */
html, body {
    background-color: var(--main-bg-color) !important; /* Overriding Bootstrap's potential !important */
    color: var(--main-text-color);
}

#app.app {
    /* If the .app class itself has background/color, override it here */
    background-color: var(--main-bg-color) !important;
}

/* --- Header (header.html) --- */
#header.app-header {
    background-color: var(--header-bg-color) !important; /* HUD specific class */
    border-bottom: 1px solid var(--primary-magenta); /* Example border */
}

#header.app-header .brand .brand-logo,
#header.app-header .brand .brand-text {
    color: var(--header-text-color) !important;
}

/* Header menu togglers (hamburger icons) */
#header.app-header .menu-toggler .bar {
    background: var(--header-text-color) !important;
}
#header.app-header .menu-toggler:hover .bar {
    background: white !important; /* A lighter color on hover */
}

/* Header menu items (search icon, user dropdown) */
#header.app-header .menu .menu-link {
    color: var(--header-text-color) !important;
}
#header.app-header .menu .menu-link:hover {
    color: white !important;
    background-color: rgba(255, 255, 255, 0.1) !important; /* Subtle hover */
}
#header.app-header .menu .menu-item .menu-icon,
#header.app-header .menu .menu-item .menu-text {
    color: var(--header-text-color) !important;
}
#header.app-header .menu .menu-item:hover .menu-icon,
#header.app-header .menu .menu-item:hover .menu-text {
    color: white !important;
}

/* User dropdown menu */
#header.app-header .menu .dropdown-menu {
    background-color: var(--header-bg-color) !important;
    border: 1px solid var(--primary-magenta) !important;
}
#header.app-header .menu .dropdown-menu .dropdown-item {
    color: var(--header-text-color) !important;
}
#header.app-header .menu .dropdown-menu .dropdown-item:hover {
    background-color: var(--primary-magenta) !important;
    color: white !important;
}
#header.app-header .menu .dropdown-menu .dropdown-item .text-theme { /* Target specific icons if needed */
    color: var(--secondary-teal) !important;
}

/* Header Search Bar */
#header.app-header .menu-search {
    background: var(--header-bg-color) !important;
}
#header.app-header .menu-search .menu-search-icon i {
    color: var(--header-text-color) !important;
}
#header.app-header .menu-search .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: 1px solid var(--primary-magenta) !important;
}
#header.app-header .menu-search .form-control::placeholder {
    color: var(--pastel-light-lavender) !important;
}


/* --- Sidebar (sidebar.html) --- */
#sidebar.app-sidebar {
    background-color: var(--sidebar-bg-color) !important; /* HUD specific class */
    border-right: 1px solid var(--primary-dark-purple); /* Example border */
}

#sidebar.app-sidebar .menu .menu-header {
    color: var(--pastel-light-yellow) !important;
    opacity: 0.7;
}

#sidebar.app-sidebar .menu .menu-item > .menu-link {
    color: var(--sidebar-text-color) !important;
}

#sidebar.app-sidebar .menu .menu-item > .menu-link .menu-icon {
    color: var(--sidebar-text-color) !important;
    opacity: 0.8;
}

#sidebar.app-sidebar .menu .menu-item > .menu-link:hover,
#sidebar.app-sidebar .menu .menu-item.active > .menu-link {
    color: var(--sidebar-hover-text-color) !important;
    background-color: var(--sidebar-hover-bg-color) !important;
}

#sidebar.app-sidebar .menu .menu-item.active > .menu-link .menu-icon,
#sidebar.app-sidebar .menu .menu-item > .menu-link:hover .menu-icon {
    color: var(--sidebar-hover-text-color) !important;
    opacity: 1;
}

#sidebar.app-sidebar .menu .menu-item .menu-submenu {
    background-color: rgba(0,0,0,0.15) !important; /* Slightly darker/lighter submenu */
}
#sidebar.app-sidebar .menu .menu-item .menu-submenu .menu-item > .menu-link {
    color: var(--pastel-light-pink) !important;
}
#sidebar.app-sidebar .menu .menu-item .menu-submenu .menu-item > .menu-link:hover,
#sidebar.app-sidebar .menu .menu-item .menu-submenu .menu-item.active > .menu-link {
    color: white !important;
    background-color: var(--primary-orange-red) !important;
}

/* Caret color in sidebar */
#sidebar.app-sidebar .menu .menu-caret .caret {
    border-top-color: var(--sidebar-text-color) !important; /* For un-expanded */
}
#sidebar.app-sidebar .menu .menu-item.active > .menu-link .menu-caret .caret,
#sidebar.app-sidebar .menu .menu-item > .menu-link:hover .menu-caret .caret {
    border-top-color: var(--sidebar-hover-text-color) !important;
}


/* --- Content (home.html) --- */
#content.app-content {
    /* background-color: white; */ /* Or a very light pastel if main-bg is too dark */
}

/* Carousel (Announcements) */
#content.app-content .carousel {
    background-color: rgba(var(--primary-dark-purple-rgb), 0.05); /* Subtle background */
    border: 1px solid rgba(var(--primary-dark-purple-rgb), 0.2);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
}
#content.app-content .carousel .display-5 {
    color: var(--primary-orange-red);
}
#content.app-content .carousel .carousel-indicators button {
    background-color: var(--primary-magenta);
}
#content.app-content .carousel .carousel-control-prev-icon,
#content.app-content .carousel .carousel-control-next-icon {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(300deg); /* Example to make them pinkish */
}


/* Cards in home.html */
.card {
    /* You might want to remove the dark gradient overlay if you change card background to light */
    /* background-image: none !important; */ /* If you set card image via CSS background */
}

.card .overlay {
    background: var(--card-overlay-bg) !important;
    color: var(--card-text-color) !important;
}

.card .overlay h3,
.card .overlay span[style*="color: antiquewhite"], /* Target existing inline styles */
.card .overlay div[style*="color:white"] /* Target existing inline styles */
 {
    color: var(--pastel-light-yellow) !important; /* Or another light color */
}
.card .overlay a div {
    color: white !important; /* Keep link text white */
}
.card .overlay a:hover div {
    color: var(--pastel-light-pink) !important; /* Hover color for links in overlay */
}

/* Generic link styling */
a {
    color: var(--link-color);
}
a:hover {
    color: var(--link-hover-color);
}

/* Override text-info if used for 'New Page' / 'New Blog' */
.text-info {
    color: var(--secondary-teal) !important;
}
.text-info:hover {
    color: var(--secondary-dark-yellow) !important;
}

/* Footer */
.app-footer {
    background-color: rgba(var(--main-bg-color-rgb), 0.8); /* Semi-transparent version of main bg */
    color: var(--main-text-color);
    border-top: 1px solid rgba(var(--primary-dark-purple-rgb), 0.3);
}

/* Scroll to top button */
.btn-scroll-top {
    background: var(--primary-orange-red) !important;
    color: white !important;
}
.btn-scroll-top:hover {
    background: var(--primary-magenta) !important;
}

/* --- Adjusting Bootstrap's data-bs-theme="dark" variables --- */
/*
  If you want to keep data-bs-theme="dark" but change its core colors,
  you would redefine Bootstrap's CSS variables within the [data-bs-theme="dark"] selector.
  However, it's often easier to remove data-bs-theme="dark" from <html>
  and define your light theme from scratch or use data-bs-theme="light" and override.

  If you MUST keep data-bs-theme="dark" and want to apply your new palette:
*/
[data-bs-theme="dark"] {
    --bs-body-color: var(--pastel-light-lavender) !important;
    --bs-body-bg: var(--primary-dark-purple) !important;
    --bs-heading-color: var(--pastel-light-yellow) !important;
    --bs-link-color: var(--secondary-teal) !important;
    --bs-link-hover-color: var(--pastel-light-pink) !important;
    --bs-border-color: rgba(255, 255, 255, 0.25) !important; /* Adjust as needed */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15) !important; /* Adjust as needed */

    /* For components like cards, dropdowns if they inherit from bs variables */
    --bs-component-bg: var(--primary-magenta) !important; /* Example for card, etc. background */
    --bs-component-color: var(--pastel-light-lavender) !important;

    /* And so on for other Bootstrap variables you see in app.min.css */
}

/*
   For jquery-jvectormap.css:
   The default map styles are fairly generic.
   If you need to change the map's background, region colors, etc.,
   you'd typically do this through the JavaScript options when initializing the map.
   However, tooltips and controls can be styled:
*/
.jvectormap-tip {
    background: var(--primary-dark-purple) !important;
    color: var(--pastel-light-yellow) !important;
    border: 1px solid var(--primary-magenta) !important;
    border-radius: 4px !important;
}

.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback {
    background: var(--primary-orange-red) !important;
    color: white !important;
    border-radius: 3px !important;
}
.jvectormap-zoomin:hover, .jvectormap-zoomout:hover, .jvectormap-goback:hover {
    background: var(--primary-magenta) !important;
}


/* =====================================================================
   RMCH UI ENHANCEMENTS — branding, animations & micro-interactions
   ===================================================================== */
:root {
    --primary-dark-purple-rgb: 59, 28, 99;
    --primary-magenta-rgb: 157, 29, 89;
    --primary-orange-red-rgb: 222, 63, 15;
    --rmch-shadow-sm: 0 2px 8px rgba(59, 28, 99, .08);
    --rmch-shadow-md: 0 10px 28px rgba(59, 28, 99, .14);
    --rmch-shadow-lg: 0 22px 55px rgba(59, 28, 99, .20);
    --rmch-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Smooth, global motion defaults */
html { scroll-behavior: smooth; }
a, button, .btn, .card, .menu-link, .form-control, .form-select,
.brand-img, .brand-logo, .carousel, .btn-scroll-top, .dropdown-item {
    transition: color .2s var(--rmch-ease),
                background-color .25s var(--rmch-ease),
                border-color .2s var(--rmch-ease),
                box-shadow .25s var(--rmch-ease),
                transform .25s var(--rmch-ease),
                opacity .25s var(--rmch-ease);
}

/* Entrance keyframes */
@keyframes rmchFadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rmchFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmchPop      { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rmchKenBurns { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Page content gently fades in */
#content.app-content { animation: rmchFadeInUp .5s var(--rmch-ease) both; }

/* --- Header brand: clean white logo plate on the dark header --- */
#header.app-header .brand .brand-logo { display: flex; align-items: center; }
#header.app-header .brand .brand-img {
    width: auto; height: 50px; min-width: 0; margin-right: .75rem;
    background: transparent; padding: 0; overflow: visible;
}
#header.app-header .brand .brand-img img { height: 100%; width: auto; display: block; }
#header.app-header .brand .brand-logo:hover .brand-img {
    transform: translateY(-1px) scale(1.03);
}

/* --- Cards: soft shadow everywhere; lift only the dashboard tiles --- */
.card { box-shadow: var(--rmch-shadow-sm); }
#content .row .card:hover { transform: translateY(-6px); box-shadow: var(--rmch-shadow-lg); }

/* --- Buttons --- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .2px; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--rmch-shadow-md); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-outline-theme {
    background: linear-gradient(135deg, var(--primary-orange-red), var(--primary-magenta)) !important;
    border: none !important; color: #fff !important;
}

/* --- Sidebar micro-interactions --- */
#sidebar.app-sidebar .menu .menu-item > .menu-link { border-radius: 8px; margin: 2px 8px; position: relative; }
#sidebar.app-sidebar .menu .menu-item > .menu-link:hover { transform: translateX(4px); }
#sidebar.app-sidebar .menu .menu-item.active > .menu-link::before {
    content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 4px; border-radius: 4px; background: var(--secondary-dark-yellow);
}
#sidebar.app-sidebar .menu .menu-item > .menu-link .menu-icon { transition: transform .25s var(--rmch-ease); }
#sidebar.app-sidebar .menu .menu-item > .menu-link:hover .menu-icon { transform: scale(1.15); }

/* --- Form focus rings --- */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-magenta) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--primary-magenta-rgb), .15) !important;
}

/* --- Home welcome hero (featured building image) --- */
.rmch-hero {
    position: relative; border-radius: 16px; overflow: hidden;
    min-height: 200px; display: flex; align-items: flex-end;
    background: linear-gradient(90deg, rgba(var(--primary-dark-purple-rgb), .82), rgba(var(--primary-magenta-rgb), .40)),
                url("../../images/rmch-building.jpg");
    background-size: cover; background-position: center 28%;
    box-shadow: var(--rmch-shadow-md);
    animation: rmchFadeIn .6s var(--rmch-ease) both;
}
.rmch-hero__overlay { padding: 2rem 2.25rem; color: #fff; }
.rmch-hero__title { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0; color: #fff; }
.rmch-hero__subtitle { margin: .35rem 0 0; opacity: .92; font-size: 1rem; }

.btn-scroll-top:hover { transform: translateY(-3px) scale(1.05); }

/* =====================  LOGIN PAGE (split + angled divider + 3D card)  ===================== */
body.rmch-login-page { margin: 0; }
@keyframes rmchFloat { from { transform: translate(0, 0); } to { transform: translate(16px, -28px); } }

.rmch-login {
    position: relative; min-height: 100vh; display: flex; overflow: hidden;
    background: #f3f1fa;
}
/* soft floating brand orbs for depth behind the form */
.rmch-login::before, .rmch-login::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none;
}
.rmch-login::before {
    width: 380px; height: 380px; right: -70px; top: -90px;
    background: radial-gradient(circle, rgba(var(--primary-orange-red-rgb), .50), transparent 70%);
    animation: rmchFloat 15s ease-in-out infinite alternate;
}
.rmch-login::after {
    width: 320px; height: 320px; right: 16%; bottom: -130px;
    background: radial-gradient(circle, rgba(var(--primary-magenta-rgb), .40), transparent 70%);
    animation: rmchFloat 19s ease-in-out infinite alternate-reverse;
}

/* LEFT — brand panel with the FULL (uncropped) featured photo + angled divider */
.rmch-login__media {
    position: relative; flex: 0 0 56%; max-width: 56%; overflow: hidden;
    display: flex; align-items: center;
    clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%);
    background: linear-gradient(160deg, rgb(var(--primary-dark-purple-rgb)) 0%, rgb(var(--primary-magenta-rgb)) 100%);
}
.rmch-login__media-content {
    position: relative; z-index: 1; color: #fff; padding: clamp(2rem, 5vw, 4.5rem); width: 100%; max-width: 46rem;
}
.rmch-login__eyebrow {
    display: inline-block; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 30px; padding: .35rem .9rem; margin-bottom: 1.1rem;
    animation: rmchFadeInUp .6s var(--rmch-ease) both; animation-delay: .05s;
}
.rmch-login__media-content h1 {
    font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.08; color: #fff; margin: 0;
    animation: rmchFadeInUp .7s var(--rmch-ease) both; animation-delay: .12s;
}
.rmch-login__media-content p {
    font-size: 1.1rem; opacity: .9; margin: 1.1rem 0 1.9rem; max-width: 30rem;
    animation: rmchFadeInUp .7s var(--rmch-ease) both; animation-delay: .2s;
}
/* the full, uncropped featured photo */
.rmch-login__photo {
    display: block; width: 100%; height: auto; margin-top: 1.8rem;
    border-radius: 14px; box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
    animation: rmchFadeInUp .8s var(--rmch-ease) both; animation-delay: .28s;
}

/* RIGHT — form panel with perspective for the 3D tilt */
.rmch-login__form {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 2rem; position: relative; z-index: 1; perspective: 1300px;
}
.rmch-login__card {
    position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 22px;
    padding: 2.75rem 2.5rem; box-shadow: var(--rmch-shadow-lg);
    transform-style: preserve-3d; will-change: transform;
    transition: transform .15s var(--rmch-ease), box-shadow .25s var(--rmch-ease);
    /* opacity-only entrance: a transform-based animation with fill would pin the
       card's transform and block the JS cursor-tilt below. */
    animation: rmchFadeIn .5s var(--rmch-ease) both;
}
/* cursor glare */
.rmch-login__card::before {
    content: ''; position: absolute; inset: 0; border-radius: 22px; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 45%);
    opacity: 0; transition: opacity .25s var(--rmch-ease);
}
.rmch-login__card:hover::before { opacity: .45; }
.rmch-login__card > * { position: relative; z-index: 1; }

.rmch-login__logo { display: block; max-width: 230px; width: 72%; margin: 0 auto 1.5rem; }
.rmch-login__card h2 { text-align: center; font-weight: 800; color: var(--primary-dark-purple); margin: 0; }
.rmch-login__subtitle { text-align: center; color: #8a8699; font-size: .92rem; margin: .4rem 0 1.5rem; }

.rmch-field { margin-bottom: 1.1rem; }
.rmch-field label {
    font-size: .75rem; font-weight: 700; color: var(--primary-dark-purple);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: .4rem; display: block;
}
.rmch-input {
    display: flex; align-items: center; gap: .6rem;
    border: 1.5px solid #e4e1ef; border-radius: 12px; padding: .7rem 1rem; background: #fbfaff;
}
.rmch-input i { color: #b3aecb; font-size: 1.05rem; transition: color .2s var(--rmch-ease); }
.rmch-input input { border: none; outline: none; background: transparent; width: 100%; font-size: 1rem; color: var(--primary-dark-purple); }
.rmch-input:focus-within { border-color: var(--primary-magenta); background: #fff; box-shadow: 0 0 0 4px rgba(var(--primary-magenta-rgb), .12); }
.rmch-input:focus-within i { color: var(--primary-magenta); }

.rmch-btn {
    position: relative; overflow: hidden;
    width: 100%; border: none; border-radius: 12px; padding: .85rem; margin-top: .5rem;
    font-weight: 700; font-size: 1rem; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--primary-orange-red), var(--primary-magenta));
    box-shadow: 0 8px 20px rgba(var(--primary-magenta-rgb), .35);
}
.rmch-btn::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transition: left .6s var(--rmch-ease);
}
.rmch-btn:hover::after { left: 130%; }
.rmch-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--primary-magenta-rgb), .45); }
.rmch-btn:active { transform: translateY(0); }

.rmch-alert {
    background: rgba(var(--primary-orange-red-rgb), .12); color: var(--primary-orange-red);
    border: 1px solid rgba(var(--primary-orange-red-rgb), .3); border-radius: 10px;
    padding: .7rem 1rem; font-size: .9rem; text-align: center; margin-bottom: 1rem;
}
.rmch-login__footer { text-align: center; color: #a8a4b8; font-size: .8rem; margin-top: 1.75rem; }

@media (max-width: 991.98px) {
    .rmch-login__media { display: none; }
}

/* =====================  INNER APP — extra polish & animations  ===================== */
@keyframes rmchSlideInLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes rmchShine { 0% { transform: translateX(-140%) skewX(-18deg); } 55%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes rmchGlowPulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(var(--primary-orange-red-rgb), .35); }
    50%      { box-shadow: 0 9px 28px rgba(var(--primary-orange-red-rgb), .65); }
}

/* Sidebar — staggered entrance + glowing active item */
#sidebar.app-sidebar .menu > .menu-item { animation: rmchSlideInLeft .45s var(--rmch-ease) both; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(2) { animation-delay: .04s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(3) { animation-delay: .10s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(4) { animation-delay: .16s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(5) { animation-delay: .22s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(6) { animation-delay: .28s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(7) { animation-delay: .34s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(8) { animation-delay: .40s; }
#sidebar.app-sidebar .menu > .menu-item:nth-child(n+9) { animation-delay: .46s; }
#sidebar.app-sidebar .menu .menu-item.active > .menu-link { animation: rmchGlowPulse 3.2s ease-in-out infinite; }

/* Header — playful search icon + dropdown item slide */
#header.app-header .menu .menu-item .menu-icon i { transition: transform .3s var(--rmch-ease); display: inline-block; }
#header.app-header .menu .menu-item:hover .menu-icon i { transform: scale(1.18) rotate(-8deg); }
#header.app-header .menu .dropdown-menu .dropdown-item { transition: padding-left .2s var(--rmch-ease), background-color .2s var(--rmch-ease); }
#header.app-header .menu .dropdown-menu .dropdown-item:hover { padding-left: 1.4rem; }

/* Welcome hero — text reveal, periodic shine sweep, hover depth */
.rmch-hero { transition: box-shadow .3s var(--rmch-ease); }
.rmch-hero:hover { box-shadow: var(--rmch-shadow-lg); }
.rmch-hero::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    transform: translateX(-140%) skewX(-18deg);
    animation: rmchShine 7s ease-in-out infinite 1.6s;
}
.rmch-hero__overlay { position: relative; z-index: 2; }
.rmch-hero__title { animation: rmchFadeInUp .7s var(--rmch-ease) both; animation-delay: .08s; }
.rmch-hero__subtitle { animation: rmchFadeInUp .7s var(--rmch-ease) both; animation-delay: .2s; }

/* Section headings — animated gradient underline */
#content.app-content h4 { position: relative; display: inline-block; padding-bottom: .35rem; }
#content.app-content h4::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--primary-orange-red), var(--primary-magenta));
    animation: rmchUnderline .7s var(--rmch-ease) .25s forwards;
}
@keyframes rmchUnderline { to { width: 56px; } }

/* Scroll-reveal (driven by the script in sidebar.html; only hides when JS+IO run) */
.rmch-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--rmch-ease), transform .6s var(--rmch-ease); }
.rmch-reveal.rmch-in { opacity: 1; transform: none; }

/* Honour users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}