/* ============================================================
   Web Design & Websites — unique animated hero visual
   A schematic browser window "drawing itself" in the site's
   circuit-board silkscreen language: thin amber/orange traces,
   a self-assembling page layout, a blinking cursor, and a single
   restrained pulse riding a lead line off the board.
   Mounts inside .svc-hero-visual (sized/positioned by services.css).
   ============================================================ */

.svc-hero-visual svg { overflow: visible; }

/* ---------- window frame (drawn once, like PCB silkscreen) ---------- */
.wd-frame {
    fill: none;
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(255, 179, 71, 0.55));
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: wd-draw 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

/* ---------- titlebar chrome ---------- */
.wd-chrome-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: wd-pop-in 0.35s ease-out forwards;
}
.wd-chrome-dot-a { fill: var(--ce-ember, #ff4d00); animation-delay: 0.75s; }
.wd-chrome-dot-b { fill: var(--ce-orange, #ff7a2f); animation-delay: 0.87s; }
.wd-chrome-dot-c { fill: var(--ce-amber, #ffb347); animation-delay: 0.99s; }

.wd-address {
    fill: rgba(255, 122, 47, 0.05);
    stroke: var(--ce-hairline, rgba(255, 122, 47, 0.35));
    stroke-width: 1.2;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: wd-draw 0.7s ease-out 1.05s forwards;
}
.wd-address-fill {
    fill: none;
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.85;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: wd-draw 0.9s ease-out 1.5s forwards;
}
.wd-status {
    fill: var(--ce-orange, #ff7a2f);
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255, 122, 47, 0.9));
    animation: wd-pop-in 0.3s ease-out 2.35s forwards,
               wd-status-pulse 2.6s ease-in-out 2.7s infinite;
}

/* ---------- page content assembling ---------- */
.wd-hero {
    fill: rgba(255, 122, 47, 0.07);
    stroke: var(--ce-hairline, rgba(255, 122, 47, 0.35));
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: wd-fade-in 0.6s ease-out 1.75s forwards,
               wd-hero-breathe 5s ease-in-out 2.5s infinite;
}

.wd-line {
    fill: none;
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(255, 179, 71, 0.5));
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: wd-draw 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.wd-line-1 { animation-delay: 2.35s; }
.wd-line-2 { animation-delay: 2.6s; }
.wd-line-3 { animation-delay: 2.85s; }

.wd-block {
    fill: rgba(255, 122, 47, 0.06);
    stroke: var(--ce-hairline, rgba(255, 122, 47, 0.35));
    stroke-width: 1.2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: wd-fade-in 0.5s ease-out forwards;
}
.wd-block-a { animation-delay: 3.15s; }
.wd-block-b { animation-delay: 3.35s; }

.wd-cursor {
    fill: var(--ce-amber, #ffb347);
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.9));
    animation: wd-pop-in 0.2s ease-out 3.65s forwards,
               wd-blink 1s step-end 4s infinite;
}

/* ---------- lead lines off the board, one restrained pulse ---------- */
.wd-lead {
    fill: none;
    stroke: var(--ce-hairline, rgba(255, 122, 47, 0.35));
    stroke-width: 1.2;
    opacity: 0;
    animation: wd-fade-in 0.5s ease-out 3.85s forwards;
}
.wd-pad {
    fill: var(--ce-board, #121212);
    stroke: var(--ce-amber, #ffb347);
    stroke-width: 1;
    opacity: 0;
    animation: wd-pop-in 0.3s ease-out 4.05s forwards;
}
.wd-pulse-dot {
    fill: var(--ce-amber, #ffb347);
    filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.9));
    opacity: 0;
    animation: wd-pulse-travel 3.2s ease-in-out 4.3s infinite;
}

/* ---------- keyframes ---------- */
@keyframes wd-draw { to { stroke-dashoffset: 0; } }

@keyframes wd-pop-in {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes wd-fade-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes wd-blink { 50% { opacity: 0; } }

@keyframes wd-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(1.4); }
}

@keyframes wd-hero-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.88; }
}

@keyframes wd-pulse-travel {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(12px, 12px); opacity: 0; }
}

/* ---------- reduced motion: keep the finished layout, drop the motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wd-frame,
    .wd-address,
    .wd-address-fill,
    .wd-line {
        animation: none;
        stroke-dashoffset: 0;
    }
    .wd-chrome-dot,
    .wd-hero,
    .wd-block,
    .wd-status,
    .wd-cursor,
    .wd-lead,
    .wd-pad {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .wd-pulse-dot { animation: none; opacity: 0; }
}