/* Everbright — micro-movements and cursor play (loads after polish.css).
   Rules: fine pointers only (JS adds nothing on touch), transform/opacity/translate/scale only, every effect decorative —
   nothing here is needed to read or use the page. Quiet under prefers-reduced-motion. */

/* ---------- shared: a warm "lamp" that follows the cursor through the lower sections ---------- */
.glow-cursor { position: fixed; left: 0; top: 0; width: 240px; height: 240px; margin: -120px 0 0 -120px; z-index: 74; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity 500ms var(--ease); background: radial-gradient(closest-side, rgba(255, 214, 150, .06), rgba(255, 214, 150, .022) 55%, transparent 100%); will-change: transform, opacity; }
.glow-cursor.on { opacity: 1; }
.glow-cursor[data-theme="paper"] { background: radial-gradient(closest-side, rgba(214, 150, 50, .08), rgba(214, 150, 50, .028) 55%, transparent 100%); }

/* ---------- 02 services: lead cards tilt toward the cursor, the ring and numeral drift against each other ---------- */
.js .card--lead[data-reveal].is-in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 620ms var(--ease-out), opacity 600ms var(--ease), border-color var(--t-med), box-shadow var(--t-med); transform-style: preserve-3d; }
.js .card--lead[data-reveal].is-in.is-live { transition: transform 140ms linear, opacity 600ms var(--ease), border-color var(--t-med), box-shadow var(--t-med); }
.card--lead .ico { translate: calc(var(--nx, 0) * 12px) calc(var(--ny, 0) * 12px); transition: translate 600ms var(--ease-out); }
.card--lead .no { translate: calc(var(--nx, 0) * -18px) calc(var(--ny, 0) * -12px); transition: translate 700ms var(--ease-out); }
.card--lead.is-live .ico, .card--lead.is-live .no { transition-duration: 160ms; transition-timing-function: linear; }
.svc__item h3, .svc__item p { transition: translate 500ms var(--ease-out), color var(--t-med); }
@media (hover: hover) {
  .svc__item:hover h3 { translate: 7px 0; color: var(--gold-hi); }
  .svc__item:hover p { translate: 7px 0; }
}

/* ---------- 03 looks: the photo leans toward the cursor; the bulbs on each style card start to chase ---------- */
.js #looks .photo.is-in img { transform: translate(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -9px)) scale(var(--z, 1)); transition: transform 800ms var(--ease-out); }
@keyframes march { to { background-position: 26px center, 39px center; } }
.style { transition: transform var(--t-med) var(--ease), border-color var(--t-med), box-shadow var(--t-med); }
@media (hover: hover) {
  .style:hover { transform: translateY(-4px); border-color: rgba(168, 122, 34, .45); box-shadow: 0 18px 36px -22px rgba(23, 20, 15, .5); }
  .style:hover .style__line { animation: march 1.4s linear infinite; }
}

/* ---------- 04 our work: the hovered photo leans a hair toward the cursor, its neighbours step back a little ---------- */
.work__btn img { translate: calc(var(--px, 0) * -5px) calc(var(--py, 0) * -4px); }
@media (hover: hover) {
  .work__btn:hover img { transform: scale(1.05); }
  .work:has(.work__btn:hover) .work__btn:not(:hover) img { opacity: .8; filter: saturate(.85); }
}
.work__btn img { transition: transform 1400ms var(--ease-out), filter 700ms var(--ease), opacity 700ms var(--ease), translate 700ms var(--ease-out); }

/* ---------- 05 why: each reason lights its own hairline and the others step back ---------- */
.reason { position: relative; transition: opacity 500ms var(--ease); }
.reason::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, #b3202f, #c58a2a, transparent); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); }
.reason .num { transition: translate 600ms var(--ease-out), scale 600ms var(--ease-out); transform-origin: left top; }
.reason h3 { transition: translate 600ms var(--ease-out); }
@media (hover: hover) {
  .reason:hover::before { transform: scaleX(1); }
  .reason:hover .num { translate: 0 -2px; scale: 1.18; }
  .reason:hover h3 { translate: 6px 0; }
  .reasons:has(.reason:hover) .reason:not(:hover) { opacity: .5; }
}

/* ---------- service area: the pill under the cursor lights up (nothing moves); the home pin sends out a ring ---------- */
.areas li { transition: background-color 450ms var(--ease), border-color 450ms var(--ease), color 450ms var(--ease), box-shadow 600ms var(--ease-out); }
@media (hover: hover) {
  .areas li:hover { background: rgba(233, 189, 98, .15); border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 24px -4px rgba(233, 189, 98, .6), inset 0 0 0 1px rgba(233, 189, 98, .22); }
  .areas .home:hover { background: var(--gold); color: var(--ink); box-shadow: 0 0 26px -3px rgba(233, 189, 98, .85); }
  .on-paper .areas li:hover { background: #fff; border-color: #b3202f; color: #b3202f; box-shadow: 0 0 22px -6px rgba(179, 32, 47, .4); }
  .on-paper .areas .home:hover { background: var(--dark-text); color: var(--paper); box-shadow: 0 0 22px -6px rgba(23, 20, 15, .5); }
}
.areas .home { position: relative; }
.areas .home::after { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: ping 3.2s var(--ease-out) infinite; pointer-events: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: .55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- 06 faq: panels open smoothly, a soft light follows the cursor across the row ---------- */
:root { interpolate-size: allow-keywords; }
.faq details { position: relative; overflow: hidden; isolation: isolate; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 520ms var(--ease-out), content-visibility 520ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(233, 189, 98, .13), transparent 70%); transition: opacity var(--t-med); }
@media (hover: hover) { .faq details:hover::before { opacity: 1; } .faq summary:hover::after { transform: scale(1.25); } .faq details[open] summary:hover::after { transform: rotate(135deg) scale(1.25); } }

/* ---------- free estimate: the choice slides, labels warm up, the button is pulled toward the cursor ---------- */
.seg.has-ind { position: relative; gap: 0; padding: 4px; background: rgba(6, 9, 19, .55); border: 1px solid var(--line-strong); border-radius: calc(var(--r-s) + 3px); }
.seg.has-ind label { background: transparent !important; border-color: transparent !important; min-height: 46px; z-index: 1; color: var(--muted); transition: color 300ms var(--ease); }
.seg.has-ind label:has(input:checked) { color: var(--gold-hi); }
.seg__ind { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: 100px; border-radius: var(--r-s); background: rgba(233, 189, 98, .16); border: 1px solid var(--gold); transform-origin: left center; transform: translateX(var(--x, 0)) scaleX(var(--w, 1)); transition: transform 520ms cubic-bezier(.22, 1, .36, 1); box-shadow: 0 0 22px -6px rgba(233, 189, 98, .5); pointer-events: none; }
.field label, .field legend { transition: color var(--t-med), translate var(--t-med) var(--ease-out); }
.field:focus-within > label { color: var(--gold-hi); translate: 3px 0; }
.est__facts a { transition: translate var(--t-med) var(--ease-out), color var(--t-med); }
.est__facts a svg { transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .est__facts a:hover { translate: 5px 0; color: var(--gold-hi); } .est__facts a:hover svg { transform: rotate(-12deg) scale(1.12); } }
[data-magnet] { transition: translate 420ms var(--ease-out), transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-position 1000ms var(--ease), border-color var(--t-fast) var(--ease); }
[data-magnet].is-pulled { transition-duration: 120ms, var(--t-fast), var(--t-med), 1000ms, var(--t-fast); transition-timing-function: linear, var(--ease), var(--ease), var(--ease), var(--ease); }

/* ---------- the end of the page: links draw an underline, the medallion turns toward you, a way back up ---------- */
.footer ul a { background: linear-gradient(currentColor, currentColor) left calc(100% - 4px) / 0 1px no-repeat; transition: background-size 480ms var(--ease-out), translate 480ms var(--ease-out), color var(--t-fast); }
@media (hover: hover) { .footer ul a:hover { background-size: 100% 1px; translate: 4px 0; } }
.footer .brand__logo { transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 700ms var(--ease-out), filter 600ms var(--ease); }
.footer .brand:hover .brand__logo { transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.04); }
.footer .brand__logo.is-live { transition-duration: 140ms, 600ms; transition-timing-function: linear, var(--ease); }
.totop { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; color: var(--gold-hi); text-decoration: none; font-weight: 700; font-size: .84rem; letter-spacing: .06em; }
.totop span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(233, 189, 98, .5); transition: translate 500ms var(--ease-out), background-color var(--t-med), border-color var(--t-med); }
.totop svg { width: 16px; height: 16px; }
@media (hover: hover) { .totop:hover span { translate: 0 -4px; background: rgba(233, 189, 98, .18); border-color: var(--gold); } }
.totop:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
  .areas .home::after { animation: none; }
  .glow-cursor { display: none; }
}