/*!
 * ink-reveal.css — révélation d'un contenu à travers une tache d'encre animée.
 * Amélioration progressive : sans JS aucun masque n'est appliqué, le contenu
 * reste entièrement visible.
 */

[data-ink-reveal] {
  position: relative;
  overflow: hidden;
}

/* The home hero leaves with the same gentle fade as the page content. */
.site-main > .hero.is-hero-leaving {
  animation: gf-content-leave 980ms ease-in forwards;
  pointer-events: none;
}

/* Only the class hero artwork moves; the rest of the class sheet fades in. */
.paladin-hero__art.is-class-path-slide-outgoing,
[data-ink-content].is-class-path-slide-in .paladin-hero__art,
[data-ink-content].is-class-path-slide-in .paladin-hero__copy {
  animation-duration: 760ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  will-change: opacity, transform;
}

.paladin-hero__art.is-class-path-slide-outgoing--next {
  animation: gf-class-path-art-out 260ms ease-out both;
  will-change: opacity;
}

.paladin-hero__art.is-class-path-slide-outgoing--previous {
  animation: gf-class-path-art-out 260ms ease-out both;
  will-change: opacity;
}

[data-ink-content].is-class-path-slide-in--next .paladin-hero__art:not(.is-class-path-slide-outgoing) {
  animation-name: gf-class-path-slide-in-next;
}

[data-ink-content].is-class-path-slide-in--next .paladin-hero__copy {
  animation-name: gf-class-path-copy-soft-in-next;
}

[data-ink-content].is-class-path-slide-in--previous .paladin-hero__art:not(.is-class-path-slide-outgoing) {
  animation-name: gf-class-path-slide-in-previous;
}

[data-ink-content].is-class-path-slide-in--previous .paladin-hero__copy {
  animation-name: gf-class-path-copy-soft-in-previous;
}

[data-ink-content].is-class-path-slide-in .paladin-page__breadcrumb,
[data-ink-content].is-class-path-slide-in .paladin-role {
  animation: gf-class-path-content-in 520ms ease-out both;
}

[data-ink-content].is-class-path-slide-in .paladin-path {
  animation: none;
}

[data-ink-content].is-class-path-slide-in .paladin-page__primary-heading,
[data-ink-content].is-class-path-slide-in .paladin-page__primary-title,
[data-ink-content].is-class-path-slide-in .paladin-page__primary-ornament,
[data-ink-content].is-class-path-slide-in .paladin-stats h2,
[data-ink-content].is-class-path-slide-in .paladin-stats__ornament {
  animation: none;
}

[data-ink-content].is-class-path-slide-in .paladin-skills__grid,
[data-ink-content].is-class-path-slide-in .paladin-preview,
[data-ink-content].is-class-path-slide-in .paladin-stats__chart,
[data-ink-content].is-class-path-slide-in .paladin-stats ul {
  animation: gf-class-path-content-in 360ms ease-out both;
}

@keyframes gf-class-path-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gf-class-path-art-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes gf-class-path-slide-in-next {
  from { transform: translateX(60%); }
  to { transform: translateX(0); }
}

@keyframes gf-class-path-slide-in-previous {
  from { transform: translateX(-60%); }
  to { transform: translateX(0); }
}

@keyframes gf-class-path-copy-soft-in-next {
  from { opacity: 0; transform: translateX(14%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes gf-class-path-copy-soft-in-previous {
  from { opacity: 0; transform: translateX(-14%); }
  to { opacity: 1; transform: translateX(0); }
}

/* Palmarès navigation uses a soft lateral fade instead of the ink reveal. */
[data-ink-content].is-palmares-slide-in .content-page__panel--palmares {
  animation-duration: 780ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-ink-content].is-palmares-slide-in--next .content-page__panel--palmares {
  animation-name: gf-palmares-slide-in-next;
}

[data-ink-content].is-palmares-slide-in--previous .content-page__panel--palmares {
  animation-name: gf-palmares-slide-in-previous;
}

@keyframes gf-palmares-slide-in-next {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes gf-palmares-slide-in-previous {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Le masque n'existe qu'une fois la sprite prête (classe posée par le script). */
[data-ink-reveal].is-armed > [data-ink-content] {
  -webkit-mask-image: var(--ink-sprite);
          mask-image: var(--ink-sprite);
  /* N frames côte à côte : le masque fait N fois la largeur du conteneur. */
  -webkit-mask-size: calc(var(--ink-frames, 48) * 100%) 100%;
          mask-size: calc(var(--ink-frames, 48) * 100%) 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

/* animation-duration et steps() sont posés en inline par le script,
   parce que steps() n'accepte pas de var(). */
[data-ink-reveal].is-playing > [data-ink-content] {
  animation-name: ink-reveal;
  animation-fill-mode: forwards;
}

@keyframes ink-reveal {
  from { -webkit-mask-position: 0 0;    mask-position: 0 0; }
  to   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}