/*
  -----------------------------------------------------------------------------
  CINEMATIC COMPONENTS
  -----------------------------------------------------------------------------
  The Props & Set Dressing
*/

/* ----------------------------------------------------------------------------
   1. BUTTONS (Action!)
   ---------------------------------------------------------------------------- */
.md-button {
    border-radius: 4px;
    /* Cinema is rectangular usually (screens) */
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.6em 1.4em;
    transition: all var(--duration-cut) var(--ease-cinema) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Primary Button - "The Hero" */
.md-button--primary {
    background: var(--cinematic-accent-primary) !important;
    border-color: var(--cinematic-accent-primary) !important;
    color: white !important;
    box-shadow: 0 4px 20px var(--cinematic-accent-glow);
}

.md-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--cinematic-accent-glow);
}

.md-button--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left var(--duration-fade);
    z-index: -1;
}

.md-button--primary:hover::after {
    left: 100%;
    transition: left 0.4s ease-in-out;
}

/* ----------------------------------------------------------------------------
   2. ADMONITIONS (Script Notes)
   ---------------------------------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
    background: rgba(var(--md-default-fg-color), 0.03) !important;
    /* Very subtle tint */
    border: 1px solid rgba(var(--md-default-fg-color), 0.1) !important;
    border-left-width: 4px !important;
    border-radius: 2px !important;
    /* Sharp corners */
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}

/* Glass effect for headers */
.md-typeset .admonition-title,
.md-typeset summary {
    background: transparent !important;
    border-bottom: 1px solid rgba(var(--md-default-fg-color), 0.05) !important;
    font-weight: var(--weight-bold) !important;
    letter-spacing: var(--tracking-wide) !important;
    opacity: 0.9;
}

/* Iconic Glows */
.md-typeset .admonition.note,
.md-typeset details.note {
    border-left-color: var(--cinematic-accent-primary) !important;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
    border-left-color: #f59e0b !important;
    /* Amber */
}

/* ----------------------------------------------------------------------------
   3. CODE BLOCKS (The Terminal)
   ---------------------------------------------------------------------------- */
.md-typeset pre>code {
    font-family: "Roboto Mono", monospace;
    font-size: 0.9em;
    background: var(--cinematic-bg-depth);
    /* Ensure depth */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Line numbers */
.md-typeset table:not([class]) th {
    color: var(--cinematic-light-fill);
}

/* ----------------------------------------------------------------------------
   4. IMAGES & MEDIA (The Dailies)
   ---------------------------------------------------------------------------- */
.md-typeset img {
    border-radius: 2px;
    filter: sepia(10%) contrast(105%);
    /* Values dependent on mode mainly */
    transition: filter var(--duration-fade), transform var(--duration-fade);
}

.md-typeset img:hover {
    filter: sepia(0%) contrast(100%);
    transform: scale(1.01);
}

/* Caption styling */
.md-typeset figcaption {
    font-family: var(--md-text-font-family);
    font-style: italic;
    opacity: 0.7;
    margin-top: 0.5em;
    text-align: center;
}