/* Prop Firm Duel · effects (11.2)
   Loaded after screen.css. Every effect is progressive: browsers without support show the site exactly as before,
   and the global prefers-reduced-motion rule in screen.css switches all of it off.
   1  Instant firm pages ........ speculation rules in default.hbs
   2  Card-to-page morph ........ firm name glides into the firm page title
   3  Livery glint .............. one sweep when a main button first appears, lime underglow on hover
   4  Reveals ................... sections rise in once (IntersectionObserver, screen only; never hidden in print/PDF/screenshots)
   5  Pointer spotlight ......... lime glow follows the cursor on cards and board rows
   6  Award shine ............... medals tilt and catch a highlight
   7  Counting numbers .......... stats tick up to their value
   8  Menus and accordions ...... dropdowns drop in; FAQ and program panels open smoothly */

/* 2 · morph: the firm page title receives the name clicked on the board */
.page-top:has(+ .prof-wrap) > h1.display { view-transition-name: firm-name; }
::view-transition-group(firm-name) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(firm-name), ::view-transition-new(firm-name) { height: 100%; width: auto; object-fit: contain; object-position: left center; }

/* 3 · glint */
.btn--lime { transition: background-color .18s ease, color .18s ease, box-shadow .25s ease, translate .18s ease; }
.btn--lime:hover { box-shadow: 0 12px 30px -12px color-mix(in oklch, var(--lime) 75%, transparent); }
.btn--lime.fx-glint::after { animation: fx-glint .95s .25s cubic-bezier(.3, .6, .3, 1); }
@keyframes fx-glint { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* 4 · reveals (armed by fx.js only for below-the-fold elements, on screens) */
@media screen and (prefers-reduced-motion: no-preference) {
  .fx-armed .fx-r { transition: opacity .65s cubic-bezier(.2, .8, .2, 1), transform .65s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--fx-i, 0) * 70ms); }
  .fx-armed .fx-r:not(.fx-in) { opacity: 0; transform: translateY(22px); }
}

/* 5 · spotlight (added by fx.js only on elements with a plain background) */
@media (hover: hover) and (pointer: fine) {
  .fx-spot { background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--lime) 12%, transparent), transparent 70%); }
  tr.fx-spot { background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--lime) 9%, transparent), transparent 75%); background-attachment: scroll; }
}

/* 6 · award medals: tilt + a highlight masked to the medal's own shape */
.fx-medal { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; perspective: 600px; }
.fx-medal > img { display: block; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease; }
.fx-medal::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .6) 50%, transparent 62%) var(--sx, 50%) 0 / 260% 100% no-repeat;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; mix-blend-mode: soft-light; transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.fx-medal.is-lit::after { opacity: 1; }
.fx-medal.is-lit > img { filter: drop-shadow(0 14px 22px color-mix(in oklch, var(--lime) 35%, transparent)); }
.fx-medal.is-lit > img, .fx-medal.is-lit::after { transition-duration: .08s; }

/* 7 · counting numbers keep their width steady */
.fx-num { display: inline-block; font-variant-numeric: tabular-nums; }

/* 8 · dropdowns and accordions */
@media (prefers-reduced-motion: no-preference) {
  .has-sub[open] > .sub { animation: fx-drop .22s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
  @keyframes fx-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content, .prog-acc::details-content, .prog-more::details-content, .elig-more::details-content {
      block-size: 0; overflow-y: clip; transition: block-size .32s cubic-bezier(.2, .8, .2, 1), content-visibility .32s; transition-behavior: allow-discrete; }
    .faq details[open]::details-content, .prog-acc[open]::details-content, .prog-more[open]::details-content, .elig-more[open]::details-content { block-size: auto; }
  }
}

@media print {
  .fx-armed .fx-r { opacity: 1 !important; transform: none !important; }
  .fx-medal::after { display: none; }
}