/* Experimental candidates, not a released RevaCSS API.
   Demo boundary and ef-* classes are deliberately local to Effects Lab.
   Native hover/keyboard-focus and button-driven SVG state drive all effects.
   SVG <set> starts a finite preview from a native card-sized button.
   No JavaScript or on* hooks; a quick release does not truncate the effect.
   RevaCSS owns .card surfaces and materials. Decorations use separate spans
   so they do not consume the pseudo-elements used by decorative edges. */
.effects-site .ef-lab {
  --ef-time: 380ms;
  --ef-lift: -.35rem;
  --ef-back: .35rem;
  --ef-middle: -.25rem;
  --ef-front: -.65rem;
  --ef-ease: cubic-bezier(.2,.8,.2,1);
}

@supports (transition-timing-function: linear(0, 1.12, .97, 1)) {
  .effects-site .ef-lab {
    --ef-ease: linear(0, .3 12%, .78 30%, 1.08 50%, 1.035 65%, .99 82%, 1);
  }
}

.effects-site[data-motion="expressive"] .ef-lab {
  --ef-time: 560ms;
  --ef-lift: -.65rem;
  --ef-back: .6rem;
  --ef-middle: -.4rem;
  --ef-front: -1rem;
}

.effects-site .ef-effect {
  position: relative;
  isolation: isolate;
}

/* The timing SVG precedes the card. A direct sibling selector consumes its
   animated class, without depending on SVG-to-parent :has() invalidation. */
.effects-site .ef-tap-surface { position: relative; }
.effects-site .ef-tap-target { display: none; }
.effects-site .ef-input-state {
  position: absolute;
  inset: 0 auto auto 0;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  pointer-events: none;
}

.effects-site .ef-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 18% 15%, color-mix(in srgb, var(--re-primary) 22%, transparent), transparent 65%),
    radial-gradient(ellipse at 90% 85%, color-mix(in srgb, var(--re-primary-end) 15%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity var(--ef-time) ease;
}

.effects-site .ef-card-content { position: relative; z-index: 1; }
.effects-site .ef-spring { translate: 0 0; transition: translate var(--ef-time) var(--ef-ease); }
.effects-site :where(.ef-depth-back,.ef-depth-middle,.ef-depth-front) {
  translate: 0 0;
  transition: translate var(--ef-time) var(--ef-ease);
}

/* Hover is an enhancement for a fine pointer. Native keyboard focus and
   declarative card taps provide alternatives. */
@media (hover: hover) and (pointer: fine) {
  .effects-site .ef-aura:hover .ef-light { opacity: 1; }
  .effects-site .ef-spring:hover { translate: 0 var(--ef-lift); }
  .effects-site .ef-depth:hover .ef-depth-back { translate: 0 var(--ef-back); }
  .effects-site .ef-depth:hover .ef-depth-middle { translate: 0 var(--ef-middle); }
  .effects-site .ef-depth:hover .ef-depth-front { translate: 0 var(--ef-front); }
}

.effects-site .ef-aura:has(:focus-visible) .ef-light { opacity: 1; }
.effects-site .ef-spring:has(:focus-visible) { translate: 0 var(--ef-lift); }
.effects-site .ef-depth:has(:focus-visible) .ef-depth-back { translate: 0 var(--ef-back); }
.effects-site .ef-depth:has(:focus-visible) .ef-depth-middle { translate: 0 var(--ef-middle); }
.effects-site .ef-depth:has(:focus-visible) .ef-depth-front { translate: 0 var(--ef-front); }

/* Real native buttons receive quick taps on iOS without an ontouchstart hook.
   The button covers the preview surface; links sit above it and remain native.
   The timing marker is its sibling, so moving the card cannot lose the click. */
@media (hover: none), (pointer: coarse) {
  .effects-site .ef-tap-target {
    all: unset;
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }
  .effects-site .ef-tap-target::before,
  .effects-site .ef-tap-target::after { content: none; }
  .effects-site .ef-tap-target:focus-visible {
    outline: 2px solid var(--re-primary);
    outline-offset: 3px;
  }
  .effects-site .ef-effect:has(> .ef-tap-target) .ef-card-content {
    z-index: 2;
    pointer-events: none;
  }
  .effects-site .ef-effect:has(> .ef-tap-target) .ef-card-content a { pointer-events: auto; }
  .effects-site .ef-input-state.ef-tapped + .ef-aura .ef-light { opacity: 1; }
  .effects-site .ef-input-state.ef-tapped + .ef-spring { translate: 0 var(--ef-lift); }
  .effects-site .ef-input-state.ef-tapped + .ef-depth .ef-depth-back { translate: 0 var(--ef-back); }
  .effects-site .ef-input-state.ef-tapped + .ef-depth .ef-depth-middle { translate: 0 var(--ef-middle); }
  .effects-site .ef-input-state.ef-tapped + .ef-depth .ef-depth-front { translate: 0 var(--ef-front); }
}

/* All movement becomes zero; useful static light feedback can remain. */
.effects-site[data-motion="none"] .ef-lab {
  --ef-time: 0ms; --ef-lift: 0rem; --ef-back: 0rem; --ef-middle: 0rem; --ef-front: 0rem;
}
@media (prefers-reduced-motion: reduce) {
  .effects-site .ef-lab, .effects-site[data-motion] .ef-lab {
    --ef-time: 0ms; --ef-lift: 0rem; --ef-back: 0rem; --ef-middle: 0rem; --ef-front: 0rem;
  }
}

/* Decorative light yields to contrast and transparency preferences. */
.effects-site[data-contrast="more"] .ef-light { display: none; }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  .effects-site .ef-light { display: none; }
}
@media (forced-colors: active), print {
  .effects-site .ef-lab, .effects-site[data-motion] .ef-lab {
    --ef-time: 0ms; --ef-lift: 0rem; --ef-back: 0rem; --ef-middle: 0rem; --ef-front: 0rem;
  }
}