/* Cowboy hat mark — minimal monochrome silhouette, themed via --fg.
 *
 * Rendered as a CSS mask rather than inline SVG: mdBook lowercases attribute
 * names in inline HTML, which breaks the case-sensitive SVG `viewBox`. Keeping
 * the SVG in a data-URI here preserves it and lets the color track the theme.
 *
 * This silhouette is also the permanent fallback for the three.js mark that
 * theme/js/montana.js mounts into the same element when WebGL is available:
 * the .hat-3d / .hat-live classes below hand the box over to the canvas, and
 * any failure (no WebGL, context loss, script error) hands it straight back. */

#cowboy-hat-container {
    text-align: center;
    margin: 3rem auto 2.5rem;
}

#cowboyHat {
    display: inline-block;
    position: relative;
    width: 190px;
    max-width: 55%;
    aspect-ratio: 320 / 140;
    background-color: var(--fg, #c7c9d9);
    opacity: 0.9;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;

    --hat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20140'%3E%3Cpath%20d='M30%2094C80%2080%20120%2088%20160%2088C200%2088%20240%2080%20290%2094C248%20120%20196%20114%20160%20112C124%20114%2072%20120%2030%2094Z'/%3E%3Cpath%20d='M110%2088C108%2052%20110%2038%20126%2035C138%2033%20146%2041%20160%2041C174%2041%20182%2033%20194%2035C210%2038%20212%2052%20210%2088Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--hat) center / contain no-repeat;
            mask: var(--hat) center / contain no-repeat;
}

/* Empty helper span in the markup; the parent carries the silhouette. */
.cowboy-hat-fallback {
    display: none;
}

#cowboyHat:hover {
    /* a quiet tip of the hat — the canvas rides along in 3D mode too */
    transform: translateY(-4px) rotate(-4deg);
    opacity: 1;
}

/* 3D mode. montana.js renders the first frame before adding .hat-live, so
 * the swap from silhouette to canvas is atomic — never an empty box. The
 * mask must lift entirely: a CSS mask clips descendants, canvas included. */
#cowboyHat.hat-live {
    background-color: transparent;
    -webkit-mask: none;
            mask: none;
    opacity: 1;
}

#cowboyHat.hat-3d canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden;
}

#cowboyHat.hat-live canvas {
    visibility: visible;
}

@media (max-width: 768px) {
    #cowboyHat {
        width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cowboyHat {
        transition: none;
    }
    #cowboyHat:hover {
        transform: none;
    }
}