/* ============================================================
   Animated service illustrations — the "Our Solutions" left stage
   on home-1 and services-1. One illustration per service, swapped
   when a service row is hovered (see index-1/Section4.tsx).

   Animations only run on the active panel, so hidden illustrations
   cost nothing and always replay from the start when re-shown.
   Colours come from the theme tokens, so light/dark both work.
   ============================================================ */

/* Shared by both placements: the big stage and the per-row thumbnail. Carries the
   palette and gates every animation behind `.is-active`. */
.at-service-illus {
    --il-surface: var(--at-neutral-0);
    --il-soft: var(--at-neutral-100);
    --il-muted: var(--at-neutral-300);
    --il-line: var(--at-neutral-900);
    --il-accent: var(--at-theme-primary);
}

.at-service-illus svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- big stage (left column, desktop/tablet) --------------- */
.at-service-illus-stage {
    position: relative;
    overflow: hidden;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: var(--at-neutral-50);
}

.at-service-illus--stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.45s;
}

.at-service-illus--stage.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ---- process-step card (service detail "our approach") ------ */
/* Landscape artwork, always on — these cards aren't hover-driven. */
.at-service-illus--card {
    aspect-ratio: 400 / 260;
    width: 100%;
}

/* ---- static panel (service detail page) -------------------- */
/* Always visible and always animating, so it needs no swap transition. */
.at-service-illus--panel {
    aspect-ratio: 400 / 460;
    max-height: 520px;
    margin-inline: auto;
    background: var(--at-neutral-50);
}

/* ---- per-row thumbnail ------------------------------------- */
/* Box matches the artwork's 400x460 viewBox so nothing is cropped, and grows the
   way the old photo did. Replaces `.at-service-item .thumb img` from main.css. */
/* No frame or backdrop — the artwork carries itself. */
.at-service-item .thumb .at-service-illus--mini {
    width: 100%;
    max-width: 150px;
    aspect-ratio: 400 / 460;
    margin-left: auto;
    transition: max-width 0.5s ease;
}

.at-service-item:hover .thumb .at-service-illus--mini {
    max-width: 215px;
}

/* Touch/narrow screens have no hover, so the row nearest the middle of the
   viewport grows instead — driven by the observer in index-1/Section4.tsx. */
@media (max-width: 991.98px) {
    .at-service-item.is-active .thumb .at-service-illus--mini {
        max-width: 215px;
    }
}

/* ---- paint helpers ---------------------------------------- */
.il-surface { fill: var(--il-surface); }
.il-soft { fill: var(--il-soft); }
.il-muted { fill: var(--il-muted); }
.il-accent { fill: var(--il-accent); }

.il-stroke,
.il-stroke-accent,
.il-stroke-muted {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.il-stroke { stroke: var(--il-line); }
.il-stroke-accent { stroke: var(--il-accent); }
.il-stroke-muted { stroke: var(--il-muted); }

/* Transforms on SVG children need a local box to resolve against. */
.at-service-illus [class*="il-"] {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---- entry animations (play once per activation) -----------
   Idle state is the FINISHED frame, so an inactive illustration reads as a
   complete drawing instead of a blank box. `animation-fill-mode: both` makes
   each element hold its 0% keyframe through its delay, so activating still
   plays the full build-in. */
.il-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.at-service-illus.is-active .il-draw {
    animation: il-draw 0.9s ease both;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-in {
    animation: il-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-pop {
    animation: il-pop 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-type {
    animation: il-type 0.5s ease both;
    animation-delay: var(--d, 0s);
    transform-origin: left center;
}

/* ---- looping animations ------------------------------------ */
.at-service-illus.is-active .il-float {
    animation: il-float 3.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-pulse {
    animation: il-pulse 2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-spin {
    animation: il-spin 14s linear infinite;
}

.at-service-illus.is-active .il-sweep {
    animation: il-sweep 3.4s ease-in-out infinite;
}

.at-service-illus.is-active .il-blink {
    animation: il-blink 1.1s steps(1, end) infinite;
}

.at-service-illus.is-active .il-rise {
    animation: il-rise 3.6s ease-out infinite both;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-fall {
    animation: il-fall 2.8s ease-in infinite both;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-flow {
    stroke-dasharray: 0.05 0.07;
    animation: il-flow 1.6s linear infinite;
    animation-delay: var(--d, 0s);
}

.at-service-illus.is-active .il-bar {
    animation: il-bar 1.1s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
    transform-origin: center bottom;
}

.at-service-illus.is-active .il-swatch {
    animation: il-swatch 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes il-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes il-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes il-pop {
    0% { opacity: 0; transform: scale(0.6); }
    60% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes il-type {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes il-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes il-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.14); opacity: 0.72; }
}

@keyframes il-spin {
    to { transform: rotate(360deg); }
}

@keyframes il-sweep {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--sweep, 200px)); }
}

@keyframes il-blink {
    0%, 49% { opacity: 1; }
    50%, 99% { opacity: 0; }
}

@keyframes il-rise {
    0% { opacity: 0; transform: translateY(6px) scale(0.7); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    78% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-64px) scale(0.92); }
}

@keyframes il-fall {
    0% { opacity: 0; transform: translateY(-14px) scale(0.8); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(96px) scale(0.75); }
}

@keyframes il-flow {
    to { stroke-dashoffset: -0.24; }
}

@keyframes il-bar {
    from { transform: scaleY(0.35); }
    to { transform: scaleY(1); }
}

@keyframes il-swatch {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ---- reduced motion: show the finished frame, no movement --- */
@media (prefers-reduced-motion: reduce) {
    .at-service-illus * {
        animation: none !important;
    }

    .at-service-illus .il-draw { stroke-dashoffset: 0; }
    .at-service-illus .il-type { transform: none; }
}