/* Polish layer: hover-lift, press, sent tick, scroll reveal, cross-document view transition.
   Finished state is the default; every animated state is opt-in behind a media query or html.ix-js.
   Uses the individual `translate` and `scale` properties so it never clobbers a `transform` set by other modules. */

/* Hover and focus use the skin's states (ix-skin.css): a hairline edge that is strongest at the top-left corner and a faint
   wash from the same corner. Nothing moves; only colour and opacity change. ::before is the edge, ::after the wash.
   Ledger rows (.ed__row, .offer, .case-row) keep their rules and extend the edge into the gutter; panels become hairline boxes.
   .btn is excluded: buttons carry their own states. The doubled class beats the older card and panel rules without !important. */
.hover-lift.hover-lift:not(.btn, .ix-fan__card) {
  position: relative;
  --lift-wash: var(--ix-wash-hover);
}

.hover-lift.hover-lift:is(.card, .glass-card, .sv-checks, .sv-tools) {
  overflow: visible;
  background: transparent;
  background-image: none;
  border: 1px solid var(--ix-hair);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hover-lift:not(.btn, .ix-fan__card)::before,
.hover-lift:not(.btn, .ix-fan__card)::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
}

.hover-lift:not(.btn, .ix-fan__card)::before {
  padding: 1px;
  background: linear-gradient(to bottom right, var(--ix-blue) 0%, transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.hover-lift:not(.btn, .ix-fan__card)::after {
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--ix-blue) var(--lift-wash), transparent) 0%, transparent 62%);
}

.hover-lift:is(.ed__row, .offer, .case-row):not(.btn)::before,
.hover-lift:is(.ed__row, .offer, .case-row):not(.btn)::after { inset: -1px calc(var(--s-4) * -1); }

.hover-lift:not(.btn, .ix-fan__card):focus-within::before,
.hover-lift:not(.btn, .ix-fan__card):focus-within::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .hover-lift:not(.btn, .ix-fan__card):hover::before,
  .hover-lift:not(.btn, .ix-fan__card):hover::after { opacity: 1; }
}

.hover-lift:not(.btn, .ix-fan__card):active { --lift-wash: var(--ix-wash-press); }

@media (prefers-reduced-motion: no-preference) {
  .hover-lift:not(.btn, .ix-fan__card)::before,
  .hover-lift:not(.btn, .ix-fan__card)::after { transition: opacity var(--ix-t-fast) var(--ix-ease); }
}

/* Press: no movement. Elements that carry the skin raise their wash one step (see ix-skin.css); the rest keep their own :active. */

/* Sent tick: finished (drawn) by default. */
[data-sent-tick] {
  display: inline-grid;
  place-items: center;
  width: var(--s-8);
  height: var(--s-8);
  color: var(--accent-solid);
}

[data-sent-tick] svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

[data-sent-tick] rect {
  stroke: var(--ix-rule);
  stroke-width: 1;
}

[data-sent-tick] rect,
[data-sent-tick] path { stroke-dasharray: 100; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ix-js [data-sent-tick]:not(.is-drawn) rect,
  .ix-js [data-sent-tick]:not(.is-drawn) path { stroke-dashoffset: 100; }

  .ix-js [data-sent-tick] rect { transition: stroke-dashoffset 480ms var(--ease-out); }
  .ix-js [data-sent-tick] path { transition: stroke-dashoffset 280ms var(--ease-out) 360ms; }
}

/* Reveal: hidden only once JS has run and only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .ix-js [data-reveal] {
    transition: opacity var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .ix-js [data-reveal]:not(.is-in) {
    opacity: 0;
    translate: 0 12px;
  }
}

/* Cross-document view transition. Include this file on BOTH the source and the destination page.
   Firefox ignores @view-transition and navigates normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .nav { view-transition-name: ix-nav; }
  .btn--primary[data-vt],
  [data-vt-target] { view-transition-name: ix-cta; }

  ::view-transition-group(*) {
    animation-duration: 280ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 280ms; }
}