/* IDs plus plugin-only classes outrank common.css even when the theme loads last.
   No default hidden content, layout dimensions, or global theme overrides. */
#page-content > section.laptova-motion-hero > .l-section-overlay {
    overflow: hidden;
}

#page-content > section.laptova-motion-hero > .l-section-overlay > .laptova-motion-glow {
    position: absolute;
    inset: -60px;
    display: block;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at 70% 45%, rgba(255, 255, 255, 0.13) 0%, rgba(226, 255, 237, 0.06) 24%, rgba(226, 255, 237, 0) 53%);
    transition: opacity 240ms ease-out;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    #page-content > section.laptova-motion-hero > .l-section-overlay > .laptova-motion-glow.is-active {
        opacity: 1;
        will-change: transform;
    }
}

#page-content .main_benefit.laptova-motion-benefit {
    transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
    #page-content .main_benefit.laptova-motion-benefit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(3, 75, 30, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }
}

/* These are currently informational divs: do not add artificial tab stops. */
#page-content .main_benefit.laptova-motion-benefit:focus-within {
    box-shadow: 0 8px 20px rgba(3, 75, 30, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

#page-content .main_benefit.laptova-motion-benefit :focus-visible,
#page-content > section.laptova-motion-hero .w-btn:focus-visible {
    /* common.css explicitly suppresses outlines with !important on buttons. */
    outline: 2px solid #fff !important;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #page-content .main_benefit.laptova-motion-benefit,
    #page-content .main_benefit.laptova-motion-benefit:hover {
        transform: none;
        transition: none;
    }

    #page-content > section.laptova-motion-hero > .l-section-overlay > .laptova-motion-glow {
        display: none;
        transition: none;
    }
}

@media print {
    #page-content > section.laptova-motion-hero > .l-section-overlay > .laptova-motion-glow {
        display: none;
    }

    #page-content .main_benefit.laptova-motion-benefit {
        transform: none;
        box-shadow: none;
        transition: none;
    }
}

/* v1.1: all new drawing is clipped to measured margins OUTSIDE .l-section-h.
   No theme markup, content widths, or stacking order is changed. */
#page-content .l-section-overlay > .laptova-motion-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    color: #e2ffed;
}

#page-content #consequences > .l-section-overlay > .laptova-motion-background {
    color: #23974b;
}

#page-content .laptova-motion-background > .laptova-motion-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

#page-content .laptova-motion-background > .laptova-motion-edge-left {
    left: 0;
    width: var(--lm-left-gutter, 0px);
}

#page-content .laptova-motion-background > .laptova-motion-edge-right {
    right: 0;
    width: var(--lm-right-gutter, 0px);
}

#page-content .laptova-motion-background .laptova-motion-shape {
    position: absolute;
    display: block;
    max-width: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    pointer-events: none;
    animation-play-state: paused;
}

#page-content .laptova-motion-background-hero > .laptova-motion-edge {
    /* The actual path ends are outside the section; soften the boundary itself. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

#page-content .laptova-motion-background .laptova-motion-hero-line {
    width: 100%;
    height: calc(100% + 240px);
    left: 0;
    top: -120px;
    stroke-width: 1;
}

#page-content .laptova-motion-background .laptova-motion-hero-line-1 {
    opacity: calc(var(--laptova-motion-strength, 1) * 0.26);
}
#page-content .laptova-motion-background .laptova-motion-hero-line-2 {
    opacity: calc(var(--laptova-motion-strength, 1) * 0.18);
}
#page-content .laptova-motion-background .laptova-motion-hero-line-3 {
    opacity: calc(var(--laptova-motion-strength, 1) * 0.13);
}
#page-content .laptova-motion-background .laptova-motion-hero-line-4 {
    opacity: calc(var(--laptova-motion-strength, 1) * 0.13);
}
#page-content .laptova-motion-background .laptova-motion-hero-line-5 {
    opacity: calc(var(--laptova-motion-strength, 1) * 0.09);
}

#page-content .laptova-motion-background .laptova-motion-wave {
    width: 180px;
    height: calc(100% + 180px);
    top: -90px;
    right: 0;
    opacity: calc(var(--laptova-motion-strength, 1) * 0.16);
    stroke-width: 1;
}

#page-content .l-section-overlay > .laptova-motion-background.has-space {
    display: block;
}

/* Translate the outer SVG in CSS pixels, independently of its viewBox scale. */
#page-content .laptova-motion-background-hero .laptova-motion-edge-left {
    --lm-drift-x: var(--lm-left-drift, 10px);
    --lm-drift-y: 6px;
}
#page-content .laptova-motion-background-hero .laptova-motion-edge-right {
    --lm-drift-x: var(--lm-right-drift, 8px);
    --lm-drift-y: 5px;
}

@media (max-width: 1024px) {
    #page-content .laptova-motion-background .laptova-motion-hero-line {
        /* Leave room for a fixed 5px drift inside the narrow, protected gutter. */
        left: 6px;
        width: calc(100% - 12px);
    }
    #page-content .laptova-motion-background-hero .laptova-motion-edge {
        --lm-drift-x: 5px;
    }
    #page-content .laptova-motion-background .laptova-motion-wave {
        width: calc(100% - 6px);
        right: 3px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    #page-content .laptova-motion-background .laptova-motion-hero-line-1 {
        animation: laptova-hero-line-drift-a 38s ease-in-out -5s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-hero-line-2 {
        animation: laptova-hero-line-drift-b 43s ease-in-out -11s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-hero-line-3 {
        animation: laptova-hero-line-drift-c 47s ease-in-out -18s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-hero-line-4 {
        animation: laptova-hero-line-drift-a 41s ease-in-out -15s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-hero-line-5 {
        animation: laptova-hero-line-drift-b 49s ease-in-out -22s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-wave-1 {
        animation: laptova-wave-drift-a 21.818181818182s ease-in-out -6s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-wave-2 {
        animation: laptova-wave-drift-b 26.363636363636s ease-in-out -14s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-wave-3 {
        animation: laptova-wave-drift-a 30s ease-in-out -21s infinite;
    }
    #page-content .laptova-motion-background .laptova-motion-shape {
        animation-play-state: paused;
    }
    #page-content .laptova-motion-background.is-running .laptova-motion-shape {
        animation-play-state: running;
    }
}

/* Preview may disable backgrounds independently without affecting v1. */
#page-content .l-section-overlay > .laptova-motion-background.is-disabled {
    display: none;
}
#page-content .laptova-motion-background.is-disabled .laptova-motion-shape {
    animation-play-state: paused;
}

@keyframes laptova-hero-line-drift-a {
    0%, 100% { transform: translate3d(calc(-1 * var(--lm-drift-x)), calc(-1 * var(--lm-drift-y)), 0); }
    50% { transform: translate3d(var(--lm-drift-x), var(--lm-drift-y), 0); }
}
@keyframes laptova-hero-line-drift-b {
    0%, 100% { transform: translate3d(var(--lm-drift-x), var(--lm-drift-y), 0); }
    50% { transform: translate3d(calc(-1 * var(--lm-drift-x)), calc(-1 * var(--lm-drift-y)), 0); }
}
@keyframes laptova-hero-line-drift-c {
    0%, 100% { transform: translate3d(calc(-1 * var(--lm-drift-x)), var(--lm-drift-y), 0); }
    50% { transform: translate3d(var(--lm-drift-x), calc(-1 * var(--lm-drift-y)), 0); }
}
@keyframes laptova-wave-drift-a {
    0%, 100% { transform: translate3d(-3px, -20px, 0); }
    50% { transform: translate3d(3px, 20px, 0); }
}
@keyframes laptova-wave-drift-b {
    0%, 100% { transform: translate3d(3px, 18px, 0); }
    50% { transform: translate3d(-3px, -18px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    #page-content .laptova-motion-background .laptova-motion-shape {
        animation: none;
        transform: none;
    }
}

@media print {
    #page-content .l-section-overlay > .laptova-motion-background {
        display: none;
    }
    #page-content .laptova-motion-background .laptova-motion-shape {
        animation: none;
    }
}
