/* ============================================================
   Fresh Detailing 95 — effects.css
   Aurora background, glassmorphism, cursor, tilt, before/after,
   lightbox, cookie banner, map facade, counters
   ============================================================ */

/* ---------- Aurora / gradient-mesh background ----------
   Two earlier versions of this were expensive enough to visibly lag or
   even hang scrolling: v1 used filter:blur(90px) on ~800px circles, v2
   swapped to gradients but kept the layers at 130vmax (~1900px) rotating
   forever behind several backdrop-filter glass cards — still too much
   simultaneous raster/composite work on a modest GPU. This version keeps
   each blob a small, fixed-px, blur-free radial-gradient circle (the
   gradient's own falloff gives the soft edge) and moves it with
   translate3d only, which is the cheapest animation the compositor can
   do and needs no re-raster while it moves. */
.aurora {
  position: fixed;
  inset: 0;
  /* Must be negative, not 0: an explicit z-index (even 0) is a
     "positioned descendant with stack level 0", which paints AFTER
     ordinary in-flow content (our .section blocks use position:relative
     with z-index:auto). At z-index:0 this fixed, opaque-background div
     was painting on TOP of every section below the first viewport —
     looked like the page "went blank" as soon as you scrolled.
     Negative z-index is unambiguously painted first/bottom-most. */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--c-bg);
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.aurora__blob--1 {
  width: 640px; height: 640px;
  top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(205, 162, 84, 0.24) 0%, transparent 72%);
  animation: aurora-drift-1 36s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 560px; height: 560px;
  top: 18%; right: -180px;
  background: radial-gradient(circle, rgba(200, 50, 63, 0.14) 0%, transparent 72%);
  animation: aurora-drift-2 42s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 520px; height: 520px;
  bottom: -160px; left: 20%;
  background: radial-gradient(circle, rgba(183, 188, 196, 0.09) 0%, transparent 72%);
  animation: aurora-drift-3 30s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(70px, 60px, 0); }
}
@keyframes aurora-drift-2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-60px, 50px, 0); }
}
@keyframes aurora-drift-3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50px, -50px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora__blob { animation: none; }
}

/* ---------- Glassmorphism ---------- */
.glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--c-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--c-bg-elevated); }
}

/* ---------- Custom cursor (desktop only, booted by cursor.js) ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%);
}
.cursor__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-gold-300);
}
.cursor__ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 1px solid rgba(232, 200, 119, 0.5);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
              margin 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
}
.cursor.is-active .cursor__ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: rgba(232, 200, 119, 0.08);
}
.cursor.is-view .cursor__ring {
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  background: rgba(232, 200, 119, 0.1);
}
.cursor__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold-100);
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease-out);
}
.cursor.is-view .cursor__label { opacity: 1; }

/* ---------- Magnetic elements ---------- */
[data-magnetic] {
  display: inline-flex;
  will-change: transform;
  transition: transform 0.35s var(--ease-out);
}
[data-magnetic] > * { pointer-events: none; }

/* ---------- Tilt (gallery/cards) ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s var(--ease-out);
}

/* ---------- Animated counters ---------- */
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 1;
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ---------- Before / After slider ---------- */
.before-after {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
  background: var(--c-bg-elevated);
  box-shadow: var(--shadow-md);
  user-select: none;
}
.before-after__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.before-after__img--after {
  clip-path: inset(0 0 0 var(--reveal, 50%));
}
.before-after__tag {
  position: absolute;
  top: var(--space-sm);
  padding: 0.4em 0.9em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-border);
}
.before-after__tag--before { left: var(--space-sm); }
.before-after__tag--after { right: var(--space-sm); }
.before-after__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--reveal, 50%);
  width: 2px;
  background: var(--c-gold-100);
  transform: translateX(-1px);
  box-shadow: 0 0 12px rgba(246, 230, 180, 0.7);
  pointer-events: none;
}
.before-after__handle {
  position: absolute;
  top: 50%;
  left: var(--reveal, 50%);
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-gold);
  border: 0;
}
.before-after__handle svg { width: 18px; height: 18px; }
.before-after__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.before-after__range:focus-visible ~ .before-after__handle {
  outline: 2px solid var(--c-gold-100);
  outline-offset: 3px;
}
.before-after__caption {
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  text-align: center;
}

/* ---------- Gallery filters + grid ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}
.filter-chip {
  padding: 0.55em 1.15em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.filter-chip.is-active {
  background: var(--gradient-gold);
  color: #1a1206;
  border-color: transparent;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-sm);
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  cursor: pointer;
  perspective: 800px;
}
.gallery-item__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.gallery-item:hover .gallery-item__img { transform: scale(1.06); }
.gallery-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-within .gallery-item__overlay { opacity: 1; }
.gallery-item__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-text);
}
.gallery-item[hidden] { display: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: rgba(4, 4, 5, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
}
.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-surface-strong);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--c-surface); }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__nav--prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-md); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__nav { width: 40px; height: 40px; }
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: var(--z-toast);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transform: translateY(140%);
  transition: transform var(--dur-med) var(--ease-out);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
.cookie-banner__actions { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* ---------- Map facade (click-to-load) ---------- */
.map-facade {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border);
  background:
    linear-gradient(rgba(8,8,10,0.55), rgba(8,8,10,0.75)),
    repeating-linear-gradient(45deg, #16161b 0 2px, #131318 2px 40px);
}
.map-facade__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  color: var(--c-text);
  text-align: center;
  padding: var(--space-md);
}
.map-facade__btn svg { width: 32px; height: 32px; color: var(--c-gold-300); }
.map-facade iframe {
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Reveal helpers: scale/side variants ---------- */
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="scale"].is-visible { transform: scale(1); }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="left"].is-visible { transform: translateX(0); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="right"].is-visible { transform: translateX(0); }