/* CEG hero reel — base stage + homepage pause control. Concept styles live in /hero-reel/{concept}/concept.css */

/*
 * Root positioning sits in @layer base so Tailwind utilities on the harness element (absolute, inset-0,
 * h-full…, all in @layer utilities) always win. Unlayered rules would beat any layered utility.
 */
@layer base {
    .ceg-reel {
        position: relative;
        overflow: hidden;
    }
}

.ceg-reel {
    --ceg-black: #202020;
    --ceg-ink: #111111;
    --ceg-orange: #FFAC46;
    --ceg-dark-orange: #FF8C00;
    --ceg-light-orange: #FFE8D3;
    --ceg-white: #FFFFFF;
    --ceg-font: 'Space Grotesk', system-ui, sans-serif;
    --ceg-font-body: 'Work Sans', system-ui, sans-serif;
    --ceg-font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

    isolation: isolate;
    contain: layout paint;
    font-family: var(--ceg-font);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.ceg-reel .reel-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ceg-reel .reel-canvas {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

.ceg-reel .reel-char,
.ceg-reel .reel-word {
    display: inline-block;
    will-change: transform, opacity;
}

.ceg-reel .reel-logo {
    display: block;
    overflow: visible;
}

.ceg-reel .reel-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/* ------------------------------------------------------------------ homepage pause control (default look) */

.hero-reel-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #ffffff33;
    background: #20202099;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s, background-color 0.2s;
}

.hero-reel-toggle:hover {
    border-color: #FFAC46;
}

.hero-reel-toggle:focus-visible {
    outline: 2px solid #FFAC46;
    outline-offset: 2px;
}

.hero-reel-toggle svg {
    width: 16px;
    height: 16px;
}

.hero-reel-toggle[data-state='playing'] .hero-reel-toggle__play,
.hero-reel-toggle[data-state='paused'] .hero-reel-toggle__pause {
    display: none;
}