/* Buttons: painted juniper, 3px corners. Plaques are square, slate, rimmed. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid var(--door-juniper);
    border-radius: 3px;
    background: var(--door-juniper);
    color: var(--trim-white);
    font: 500 1rem/1.2 var(--serif);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms ease-out, box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover {
    background: var(--door-deep);
    color: var(--trim-white);
}

.btn-primary,
.btn-secondary {
    background: var(--door-juniper);
    border-color: var(--door-juniper);
    color: var(--trim-white);
}

.btn-primary:hover,
.btn-secondary:hover {
    background: var(--door-deep);
    color: var(--trim-white);
}

/* The porch lamp burns against a dark ground only: on trim white it is a smudge. */
.cta-band .btn-lit,
.front-door .btn-lit,
.home-cta .btn-lit,
.door-panel .btn-lit,
.door-hero .btn-lit,
.section-dark .btn-lit {
    box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.62), 0 5px 14px -5px rgba(var(--lamp), 0.5);
    animation: lamp-on 1600ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cta-band .btn-lit:hover,
.front-door .btn-lit:hover,
.home-cta .btn-lit:hover,
.door-panel .btn-lit:hover,
.door-hero .btn-lit:hover,
.section-dark .btn-lit:hover {
    box-shadow: 0 20px 46px -8px rgba(var(--lamp), 0.85), 0 6px 16px -4px rgba(var(--lamp), 0.6);
}

@keyframes lamp-on {
    0% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0), 0 5px 14px -5px rgba(var(--lamp), 0); }
    12% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.3), 0 5px 14px -5px rgba(var(--lamp), 0.2); }
    18% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.05), 0 5px 14px -5px rgba(var(--lamp), 0.05); }
    100% { box-shadow: 0 14px 34px -8px rgba(var(--lamp), 0.62), 0 5px 14px -5px rgba(var(--lamp), 0.5); }
}

.btn-outline {
    background: transparent;
    color: var(--door-juniper);
    border-color: var(--door-juniper);
    box-shadow: none;
    animation: none;
}

.btn-outline:hover {
    background: rgba(31, 67, 55, 0.07);
    color: var(--door-deep);
    box-shadow: none;
}

.btn:disabled {
    background: var(--trim-white);
    border-color: var(--rule);
    color: var(--umber-soft);
    cursor: not-allowed;
    box-shadow: none;
}

.btn:disabled:hover {
    background: var(--trim-white);
    color: var(--umber-soft);
}

/* The secondary action in a door band: an unlit outline, so the lamp stays on the one way in. */
.btn-on-dark {
    background: transparent;
    border-color: var(--trim-white);
    color: var(--trim-white);
    box-shadow: none;
    animation: none;
}

.btn-on-dark:hover {
    background: rgba(246, 245, 241, 0.1);
    color: var(--trim-white);
}

.btn-small {
    padding: 9px 18px;
    font-size: var(--type-ui);
}

.btn-row,
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.text-link {
    font-size: var(--type-ui);
}

.cta-band .btn-primary,
.cta-band .btn-lit,
.front-door .btn-lit,
.front-door .btn-primary,
.home-cta .btn-primary {
    background: var(--trim-white);
    border-color: var(--trim-white);
    color: var(--door-juniper);
}

.cta-band .btn-primary:hover,
.cta-band .btn-lit:hover,
.front-door .btn-lit:hover,
.front-door .btn-primary:hover,
.home-cta .btn-primary:hover {
    background: var(--trim-shade);
    color: var(--door-deep);
}

/* A media query adds no specificity, so a bare `.btn-lit` (0,1,0) here never beat
   the `.door-hero .btn-lit` (0,2,0) that sets the lamp animation, the porch lamp
   kept firing for every visitor who asked for less motion. `:where()` contributes
   zero specificity, so `:where(...) .btn-lit` still scores (0,1,0) while matching
   the same places; `!important` on the reset would work too, but this keeps the
   cascade honest and reads as the deliberate override it is. */
@media (prefers-reduced-motion: reduce) {
    .btn-lit,
    :where(.cta-band, .front-door, .home-cta, .door-panel, .door-hero, .section-dark) .btn-lit {
        animation: none;
    }
}