/*
 * TV mount "stud x-ray" hero animation - self-contained.
 * Markup: tv-mount-animation.html (the <div class="hero-scene"> block).
 * No JavaScript, no libraries. Plays once on page load, then holds the
 * finished install. Colors below can be overridden by defining the CSS
 * custom properties --accent, --steel-strong, --font-mono, --ease on :root.
 */
/* ---------- Hero scene: the "stud x-ray" mount animation ---------- */

.hero-scene {
    position: relative;
    padding: 0.9rem 0.9rem 0;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.09));
    border-radius: var(--radius-lg, 28px);
    background: #ffffff;
    box-shadow: var(--shadow-lg, 0 28px 70px rgba(15, 23, 42, 0.16));
}

.hero-scene svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--radius-lg, 28px) - 8px);
}

.hero-scene-caption {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.4rem 0.9rem;
    color: var(--muted, #55647a);
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-scene-caption::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #e8442e);
    box-shadow: 0 0 0 4px var(--accent-soft, #fce1dc);
}

/* Scene palette - a painted wall with real furniture cues (picture, outlet,
   baseboard, floor) so the x-ray studs read as "inside this wall". */
/* Gradient fills live on the SVG elements as attributes: url(#id) inside an
   external stylesheet resolves against the CSS file, not the page. */
.hs-floor-lines { fill: none; stroke: rgba(90, 60, 30, 0.22); stroke-width: 1; }
.hs-baseboard { fill: #fbfaf7; }
.hs-baseboard-top { fill: #d9d6cf; }

.hs-studs { opacity: 0; }
.hs-stud rect { fill: #d9bd94; fill-opacity: 0.55; stroke: rgba(120, 85, 45, 0.45); stroke-width: 1; stroke-dasharray: 5 4; }
.hs-stud path { fill: none; stroke: rgba(120, 85, 45, 0.28); stroke-width: 1; }
.hs-stud-hit rect { fill: #f2b39f; fill-opacity: 0.7; stroke: var(--accent, #e8442e); stroke-dasharray: none; stroke-width: 1.4; transition: fill 0.4s ease, stroke 0.4s ease; }

.hs-frame { fill: #5a4536; }
.hs-mat { fill: #fbfaf6; }
.hs-art { fill: #cfe0ea; }
.hs-art-sun { fill: #f2b34d; }
.hs-art-hill { fill: #6f8f6a; }

.hs-outlet-plate { fill: #f7f6f2; stroke: #d3d0c8; stroke-width: 1; }
.hs-outlet-slots rect,
.hs-outlet-slots circle { fill: #7d838c; }
.hs-outlet-screw { fill: #b8bcc3; }

.hs-cord { fill: none; stroke: #2b3139; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.hs-plug rect { fill: #2f3640; }
.hs-plug rect:not(:first-child) { fill: #9aa3ae; }

.hs-finder-body { fill: #fbfbfb; stroke: #b9c2cc; stroke-width: 1.2; }
.hs-finder-screen { fill: #d5e4ee; }
.hs-finder-grip { fill: #c9d2da; }
.hs-finder .hs-led { fill: #c9d3dc; }

.hs-plate { stroke: #353c47; stroke-width: 1; }
.hs-plate-slot { fill: #2f3640; }
.hs-screw circle { fill: #c7ccd3; stroke: #8b939e; stroke-width: 0.8; }
.hs-screw path { fill: none; stroke: #4b5563; stroke-width: 1.1; stroke-linecap: round; }

.hs-tv-edge { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.hs-tv-screen { fill: #0a0e13; }
.hs-tv-screen-on { opacity: 0; }
.hs-tv-glare { opacity: 0; }
.hs-tv-chin { fill: #3a424d; }
.hs-tv-led { fill: #7f8994; }

.hs-label { fill: var(--steel-strong, #35586f); font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; opacity: 0; }

/* Every animated group uses its own box as the transform origin so scale /
   rotate happen around the element, not the SVG corner. */
.hs-finder,
.hs-bracket,
.hs-screw,
.hs-plug,
.hs-tv {
    transform-box: fill-box;
    transform-origin: center;
}

/* Timeline (plays once on load, then holds the finished install):
   0.0s painted wall with picture, outlet, baseboard - just a room
   0.5s stud finder slides in along the wall
   1.0s studs show through the drywall (x-ray)
   1.9s finder LED lights, the stud under it is highlighted
   2.5s finder leaves; 2.7s mount plate is pressed onto the wall
   3.2s four screws go into the stud, one after another
   3.9s TV drops onto the plate and settles level
   5.0s "LEVEL" label
   5.1s power cord runs from the TV down to the outlet, 5.8s plug goes in
   6.1s screen turns on */

.hs-finder {
    animation:
        hsFinderIn 1.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.5s both,
        hsFadeOut 0.4s ease 2.5s forwards;
}

.hs-studs {
    animation: hsFadeIn 0.7s ease 1s forwards;
}

.hs-finder .hs-led {
    animation: hsLed 0.2s ease 1.9s forwards;
}

.hs-stud-hit rect {
    animation: hsStudHit 0.4s ease 1.9s both;
}

.hs-bracket {
    opacity: 0;
    animation: hsPress 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 2.7s forwards;
}

.hs-screw {
    opacity: 0;
    animation: hsScrew 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}

.hs-bracket > g:nth-of-type(1) .hs-screw { animation-delay: 3.2s; }
.hs-bracket > g:nth-of-type(2) .hs-screw { animation-delay: 3.35s; }
.hs-bracket > g:nth-of-type(3) .hs-screw { animation-delay: 3.5s; }
.hs-bracket > g:nth-of-type(4) .hs-screw { animation-delay: 3.65s; }

.hs-tv {
    opacity: 0;
    animation: hsTvDrop 1.1s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 3.9s forwards;
}

.hs-label-level {
    animation: hsFadeIn 0.3s ease 5s forwards;
}

.hs-cord {
    animation: hsCord 0.7s ease-in-out 5.1s forwards;
}

.hs-plug {
    opacity: 0;
    animation: hsPlugIn 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 5.8s forwards;
}

.hs-tv-screen-on {
    animation: hsFadeIn 0.9s ease 6.1s forwards;
}

.hs-tv-glare {
    animation: hsFadeIn 0.9s ease 6.3s forwards;
}

@keyframes hsFinderIn {
    0% { transform: translateX(-190px); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes hsFadeIn {
    to { opacity: 1; }
}

@keyframes hsFadeOut {
    to { opacity: 0; }
}

@keyframes hsLed {
    to { fill: #e8442e; }
}

@keyframes hsStudHit {
    from { fill: #d9bd94; fill-opacity: 0.55; stroke: rgba(120, 85, 45, 0.45); }
    to { fill: #f2b39f; fill-opacity: 0.7; stroke: #e8442e; }
}

@keyframes hsPress {
    0% { opacity: 0; transform: scale(1.14); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes hsScrew {
    0% { opacity: 0; transform: scale(0.4) rotate(-90deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes hsCord {
    to { stroke-dashoffset: 0; }
}

@keyframes hsPlugIn {
    0% { opacity: 0; transform: translateY(-10px) scale(1.15); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hsTvDrop {
    0% { opacity: 0; transform: translateY(-110px) rotate(-2.5deg); }
    55% { opacity: 1; transform: translateY(5px) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Reduced motion: show the finished install straight away. */
@media (prefers-reduced-motion: reduce) {
    .hero-scene *,
    .hero-scene *::before,
    .hero-scene *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
    }

    .hs-finder {
        opacity: 0;
    }
}