/**
 * reveal-extensions.css
 *
 * Combined styles for custom Reveal.js deck extensions.
 * Companion to reveal-extensions.js.
 *
 * Contents:
 *   1. Alberta Buck Calculator — responsive control panel layout
 *   2. Notes watermark — toggle link at screen edge
 *   3. Timed highlights — data-highlight-at animations
 */

/* ── 1. Alberta Buck Calculator ─────────────────────────────────────
 * Responsive control panel styles for mortgage/value sliders.
 */

/* Horizontal control panels fill available width */
div.ab-control-panel[style*="flex"] {
    width: 100%;
    box-sizing: border-box;
}

/* Each control stretches equally within horizontal panels */
div.ab-control-panel > .control-group {
    flex: 1;
    min-width: 0;
}

/* Sliders fill their control-group container */
div.ab-control-panel > .control-group input[type="range"] {
    width: 100%;
}

/* Portrait displays: stack horizontal controls vertically */
@media (max-aspect-ratio: 1/1) {
    div.ab-control-panel[style*="flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    div.ab-control-panel > .control-group {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
    }

    div.ab-control-panel > .control-group > span:first-child {
        min-width: 6em;
        text-align: right;
    }

    div.ab-control-panel > .control-group input[type="range"] {
        flex: 1;
    }
}

/* ── 2. Notes watermark ─────────────────────────────────────────────
 * Vertical NOTES toggle positioned in the gap between BUCKy
 * (top: 24px, right: 24px) and the viewport edge.
 */

.notes-watermark {
    position: fixed;
    top: 24px;
    right: 2px;
    z-index: 9999;
    writing-mode: vertical-rl;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(128, 128, 128, .2);
    text-decoration: none;
    padding: 10px 4px;
    cursor: pointer;
    transition: color .3s ease;
    background: transparent;
    border-radius: 4px;
}

.notes-watermark:hover {
    color: rgba(128, 128, 128, .5);
    text-decoration: none;
}

/* ── 2b. Audio auto toggle ──────────────────────────────────────────
 * Positioned just right of the audio player (right edge).
 * Watermark-style: low opacity, visible on hover.
 */

.audio-auto-toggle {
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    z-index: 34;
    width: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity .3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-auto-toggle:hover {
    opacity: 0.7;
}

/* Audio player layout — override the audio-slideshow plugin's inline styles.
 * Plugin sets container to position:fixed; bottom:9.5vh; height:75px and each
 * <audio> to position:relative; top:20px; left:10%; width:80%.
 * JS moves .audio-controls to document.body to escape .reveal's overflow:hidden
 * (which clips on iOS where position:fixed inside a transform acts as absolute).
 * Flex centering aligns the toggle and audio controls vertically. */
.audio-controls {
    bottom: 12px !important;
    left: 0 !important;
    min-height: 80px;
    display: flex !important;
    align-items: center;
}

.audio-controls > audio {
    position: static !important;
    width: 100% !important;
}

/* iOS Safari renders native <audio> controls much taller than the CSS box;
 * explicit height prevents clipping.  Other platforms size naturally. */
@supports (-webkit-touch-callout: none) {
    .audio-controls > audio {
        height: 80px !important;
    }
}

/* Dim and sink the audio player when auto-play is disabled */
.audio-controls.audio-auto-off {
    opacity: 0.15 !important;
    z-index: 1 !important;
    transition: opacity .3s ease, z-index 0s;
}

.audio-auto-toggle.audio-auto-off {
    opacity: 0.3;
}

.audio-auto-toggle.audio-auto-off:hover {
    opacity: 0.7;
}

/* ── 3. Timed highlights ────────────────────────────────────────────
 * Usage:  <span hilite-at="10s" hilite="pulse">$23B</span>
 *
 * Attributes:
 *   hilite-at="5s"          delay after slide loads (CSS time)
 *   hilite="pulse"          effect name (see below)
 *   hilite-duration="1s"    override effect duration
 *
 * The .highlight-armed class is added/removed by reveal-extensions.js
 * on slide enter/leave, so animations reset on revisit.
 *
 * Effects requiring inline-block (may shift bullets in <li>):
 *   pulse  — scale up briefly with warm glow (default)
 *   sweep  — gold band slides left-to-right behind text
 *
 * Inline-safe effects (no layout shift):
 *   glow      — box-shadow halo fades in/out
 *   underline — highlight bar sweeps in under the text
 *   fade-in   — element starts invisible, fades to full opacity
 *   shimmer   — golden highlight band sweeps across text characters
 *
 */

/* Armed elements get animation applied; --highlight-delay controls when it fires */
.highlight-armed {
    animation-delay: var(--highlight-delay, 0s);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

/* Effect: pulse — scale up briefly with warm glow (default).
 * inline-block required for transform. */
.highlight-armed[hilite="pulse"],
.highlight-armed:not([hilite]) {
    display: inline-block;
    animation-name: highlight-pulse;
    animation-duration: var(--highlight-duration, 3s);
}

@keyframes highlight-pulse {
    0%, 100% { transform: scale(1); text-shadow: none; }
    50%      { transform: scale(1.15); text-shadow: 0 0 8px rgba(255, 180, 0, 0.7); }
}

/* Effect: sweep — pseudo-element band slides left-to-right behind text.
 * Uses translateX on a ::before, which is GPU-accelerated and smooth.
 * inline-block required for overflow:hidden and ::before positioning. */
.highlight-armed[hilite="sweep"] {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}

.highlight-armed[hilite="sweep"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 200, 0, 0) 0%,
        rgba(255, 200, 0, 0.5) 40%,
        rgba(255, 200, 0, 0.5) 60%,
        rgba(255, 200, 0, 0) 100%);
    transform: translateX(-100%);
    animation: highlight-sweep var(--highlight-duration, 3s) var(--highlight-delay, 0s) both;
    pointer-events: none;
    z-index: -1;
}

@keyframes highlight-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Effect: glow — smooth box-shadow fade in/out */
.highlight-armed[hilite="glow"] {
    animation-name: highlight-glow;
    animation-duration: var(--highlight-duration, 3s);
    border-radius: 3px;
}

@keyframes highlight-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 220, 80, 0); }
    30%, 70% { box-shadow: 0 0 12px 4px rgba(255, 220, 80, 0.5), inset 0 0 8px 2px rgba(255, 220, 80, 0.25); }
}

/* Effect: underline — highlight bar sweeps in under the text.
 * No inline-block needed; background properties work on inline elements. */
.highlight-armed[hilite="underline"] {
    animation-name: highlight-underline;
    animation-duration: var(--highlight-duration, 3s);
    background-image: linear-gradient(rgba(255, 200, 0, 0.5), rgba(255, 200, 0, 0.5));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 0.15em;
}

@keyframes highlight-underline {
    0%, 100% { background-size: 0% 0.15em; }
    20%, 80% { background-size: 100% 0.15em; }
}

/* Effect: fade-in — element starts invisible, fades to full opacity.
 * animation-fill-mode:both (from .highlight-armed) applies 0% during delay. */
.highlight-armed[hilite="fade-in"] {
    animation-name: highlight-fade-in;
    animation-duration: var(--highlight-duration, 2s);
}

@keyframes highlight-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Effect: shimmer — golden highlight band sweeps across text characters.
 * Uses background-clip:text with animated gradient position.
 * All visual properties are in keyframes with fill-mode:none so the text
 * renders normally before/after the animation. */
.highlight-armed[hilite="shimmer"] {
    animation-name: highlight-shimmer;
    animation-duration: var(--highlight-duration, 2s);
    animation-fill-mode: none;
}

@keyframes highlight-shimmer {
    from, to {
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(90deg, currentColor 30%, rgba(255, 200, 0, 0.9) 50%, currentColor 70%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
    }
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}