/* Shared motion layer for all PromilleBox pages. Loaded after each page's inline styles. */

@property --spot {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Scroll progress hairline */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mint);
  box-shadow: 0 0 12px rgba(0, 229, 160, 0.55);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 101;
  pointer-events: none;
}

/* Cursor spotlight on cards (pointer devices only, set up by motion.js) */
:is(.benefit, .pricing-card, .rent-card).has-spotlight {
  background-image: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 229, 160, calc(0.1 * var(--spot))),
    transparent 62%
  );
  transition: --spot 0.4s var(--ease-out), background-color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease;
}

:is(.benefit, .pricing-card, .rent-card).has-spotlight:hover { --spot: 1; }

/* Arrow nudge on buttons */
.btn > span:last-child:not([id]) {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover > span:last-child:not([id]) { transform: translateX(4px); }
}

/* Section headings: masked wipe instead of a plain fade */
.reveal.is-armed .section-title {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.35em);
  transition: clip-path 1s var(--ease-expo) 0.06s, transform 1s var(--ease-expo) 0.06s;
}

.reveal.is-armed.visible .section-title {
  clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
  transform: none;
}

/* Gallery figures arrive one after another */
.reveal.is-armed .rent-gallery figure {
  opacity: 0;
  transform: translateY(28px);
  clip-path: inset(14% 0 0 0 round 14px);
  transition:
    opacity 0.8s var(--ease-expo) calc(var(--i, 0) * 80ms + 0.1s),
    transform 0.9s var(--ease-expo) calc(var(--i, 0) * 80ms + 0.1s),
    clip-path 0.9s var(--ease-expo) calc(var(--i, 0) * 80ms + 0.1s);
}

.reveal.is-armed.visible .rent-gallery figure {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 14px);
}

/* Visible keyboard focus everywhere */
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .reveal.is-armed .section-title,
  .reveal.is-armed .rent-gallery figure {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}