/* ============================================================
   BARRINGTON INTERIORS — EFFECTS TOOLKIT
   Reusable, on-brand micro-interactions. Vanilla CSS (+ effects.js for
   cursor tracking & magnetic pull). One red, on near-black — premium,
   "alive on hover", never neon/rainbow. Everything degrades gracefully:
   no JS = clean CSS hover; touch = calm static states; reduced-motion = no motion.
   Apply via class / data-attr; effects.js sets --mx/--my + magnetic transforms.
   ============================================================ */

/* animatable angle for the brand-border sweep (graceful static frame if @property unsupported) */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 130deg; }

/* ---- 1. Animated brand-border CTA (.fx-energy) ----------------------------------
   Dark glass + a red conic-gradient border that lights and slowly sweeps on hover,
   with a cursor-tracked inner glow. Use on a SECONDARY/ghost-style CTA; pair with .btn. */
.fx-energy {
  position: relative; isolation: isolate;
  background: rgba(10, 10, 11, .55);
  color: var(--cream); border-color: transparent;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.fx-energy::before {                     /* the border ring, masked to a ~1.6px frame */
  content: ""; position: absolute; inset: 0; z-index: -2; padding: 1.6px; border-radius: inherit;
  background: conic-gradient(from var(--fx-angle),
    var(--red-deep), var(--red-bright) 12%, var(--red) 26%, rgba(224,27,34,.12) 50%, var(--red-deep) 78%, var(--red-bright));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .6; transition: opacity .3s var(--ease-out);
}
.fx-energy::after {                      /* cursor-tracked inner glow (effects.js sets --mx/--my) */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255,42,48,.22), transparent 62%);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.fx-energy:hover, .fx-energy:focus-visible { color: #fff; }
.fx-energy:hover::before, .fx-energy:focus-visible::before { opacity: 1; animation: fxSweep 3.4s linear infinite; }
.fx-energy:hover::after,  .fx-energy:focus-visible::after  { opacity: 1; }
@keyframes fxSweep { to { --fx-angle: 490deg; } }

/* ---- 2. Magnetic CTA ([data-magnetic]) -----------------------------------------
   effects.js translates the element toward the cursor (desktop only) via inline
   transform + rAF lerp — so we drop transform from the transition here and let JS own it. */
[data-magnetic] { will-change: transform; transition: color .2s, background .2s, box-shadow .2s, border-color .2s; }

/* ---- 3. Spotlight card ([data-spotlight]) --------------------------------------
   Soft red cursor light + fine inner border + small lift. Content stays above the glow. */
[data-spotlight] { position: relative; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
[data-spotlight] > * { position: relative; z-index: 1; }
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(224,27,34,.13), transparent 56%);
  opacity: 0; transition: opacity .35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  [data-spotlight]:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); border-color: rgba(224,27,34,.45); }
  [data-spotlight]:hover::after { opacity: 1; }
}

/* ---- 4. Before / after comparison slider (.ba) ---------------------------------
   Two layered photos; the "before" is clipped to --ba and revealed by a glass handle.
   Works on touch + mouse + keyboard (effects.js). Swap the .ba-before image + drop the
   demo filter when a REAL before/after pair is supplied. */
.ba-head { margin-bottom: clamp(20px, 3vw, 34px); }
.ba {
  position: relative; width: 100%; aspect-ratio: 3 / 4; max-width: 600px; margin-inline: auto; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; background: var(--ink-2);
  --ba: 50%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-drag: none; }
.ba .ba-after { z-index: 1; }                                   /* finished, full-colour base */
.ba .ba-before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-label {
  position: absolute; top: 14px; z-index: 4; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--cream); background: rgba(10,10,11,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; pointer-events: none;
}
.ba-label.before { left: 14px; } .ba-label.after { right: 14px; color: #fff; border-color: rgba(224,27,34,.5); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); z-index: 3; width: 0; transform: translateX(-50%); pointer-events: none; }
.ba-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--red-bright), var(--red) 50%, var(--red-bright), transparent); box-shadow: 0 0 18px rgba(224,27,34,.55); }
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%;
  background: rgba(10,10,11,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1.5px solid rgba(244,241,236,.85); box-shadow: 0 10px 34px -8px rgba(0,0,0,.85); display: grid; place-items: center;
}
.ba-grip svg { width: 22px; height: 22px; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ba:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }
.ba-note { margin-top: 14px; font-size: .82rem; color: var(--muted-2); text-align: center; }

/* ---- motion / touch guards ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-energy:hover::before, .fx-energy:focus-visible::before { animation: none; }
  [data-magnetic] { transition: none; }
  [data-spotlight] { transition: none; }
  [data-spotlight]:hover { transform: none; }
}