/**
 * Effets portfolio DA — adaptés aux hôtes formation (module / chapitre / blocs).
 */

@property --da-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.formation-da-page {
  position: relative;
  isolation: isolate;
  --mx: 50%;
  --my: 40%;
  --sp: 0;
  background: var(--da-bg, transparent);
  color: var(--da-ink, inherit);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  min-height: 3.5rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.formation-da-page .formation-canvas,
.formation-da-canvas {
  color: var(--da-ink, inherit);
}

.formation-da-page .formation-block__title,
.formation-da-page .formation-block-point__title,
.formation-da-page .formation-chapter-preview__title {
  color: var(--da-ink, inherit);
}

.formation-da-page .formation-block__prose,
.formation-da-page .formation-block__meta {
  color: var(--da-ink-muted, var(--da-ink, inherit));
}

.formation-da-page .formation-block__placeholder,
.formation-da-page .formation-chapter-empty {
  color: var(--da-ink-muted, var(--da-ink, inherit));
}

.formation-da-page .formation-notion-chip {
  background: color-mix(in srgb, var(--da-accent, #4a6fa5) 18%, transparent);
  color: var(--da-ink, inherit);
  border-color: var(--da-line, transparent);
}

/* Surfaces de blocs : suivre la palette (les variantes layout gardent leur forme) */
.formation-da-page .formation-block.formation-da-root,
.formation-da-page .formation-block[class*="formation-text--"],
.formation-da-page .formation-block[class*="formation-point--"],
.formation-da-page .formation-block[class*="formation-video--"],
.formation-da-page .formation-block[class*="formation-image--"],
.formation-da-page .formation-block[class*="formation-exo--"],
.formation-da-page .formation-block[class*="formation-chord--"],
.formation-da-page .formation-block[class*="formation-repetition--"],
.formation-da-page .formation-block[class*="formation-link--"] {
  background: var(--da-card-bg, color-mix(in srgb, var(--da-bg, #fff) 88%, #fff));
  color: var(--da-card-ink, var(--da-ink, inherit));
  border-color: var(--da-line, transparent);
}

.formation-da-page .formation-block.formation-text--accent,
.formation-da-page .formation-block.formation-point--rail {
  border-left-color: var(--da-accent, currentColor);
}

.formation-da-page .formation-block-link {
  color: var(--da-accent, inherit);
}

.formation-da-root {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --mx: 50%;
  --my: 40%;
  --rx: 0deg;
  --ry: 0deg;
  --sp: 0;
}

/* Glow page (comme da-panel) */
.fx-glow.formation-da-page::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at var(--mx) var(--my), var(--da-accent-glow) 0%, transparent 62%),
    radial-gradient(46% 40% at calc(100% - var(--mx) * 0.5) 78%, var(--da-accent2-glow) 0%, transparent 60%);
  transition: background-position 0.2s ease;
}

/* Glow bloc */
.fx-glow.formation-da-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 55% at var(--mx) var(--my), var(--da-accent-glow) 0%, transparent 60%),
    radial-gradient(60% 60% at calc(100% - var(--mx)) 100%, var(--da-accent2-glow) 0%, transparent 62%);
  transition: background-position 0.15s ease;
}

.fx-glow.formation-da-root > * {
  position: relative;
  z-index: 1;
}

.fx-spotlight.formation-da-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 42% at var(--mx, 50%) var(--my, 40%),
    transparent 0%,
    rgba(0, 0, 0, 0.28) 78%
  );
}

.fx-tilt.formation-da-root {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.12s ease;
  transform-style: preserve-3d;
}

.fx-parallax.formation-da-root [data-parallax] {
  transition: transform 0.2s ease;
  will-change: transform;
}

.fx-zoom.formation-da-page::after,
.fx-zoom.formation-da-root::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 52% at 70% 26%, var(--da-accent-glow) 0%, transparent 62%),
    radial-gradient(56% 50% at 24% 96%, var(--da-accent2-glow) 0%, transparent 60%);
  transform: scale(calc(1 + var(--sp, 0) * 0.28));
  transform-origin: 60% 40%;
  transition: transform 0.1s linear;
}

.fx-kenburns.formation-da-page::after,
.fx-kenburns.formation-da-root::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 50% at 30% 30%, var(--da-accent-glow) 0%, transparent 60%),
    radial-gradient(54% 48% at 80% 84%, var(--da-accent2-glow) 0%, transparent 60%);
  animation: formationDaKen 16s ease-in-out infinite alternate;
}

@keyframes formationDaKen {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.16) translate(-3%, -2%); }
}

.fx-grain.formation-da-page::after,
.fx-grain.formation-da-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: formationDaGrain 0.7s steps(3) infinite;
}

@keyframes formationDaGrain {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

.fx-mesh.formation-da-page::after,
.fx-mesh.formation-da-root::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 30% at 24% 30%, var(--da-accent-glow) 0%, transparent 60%),
    radial-gradient(34% 34% at 78% 26%, var(--da-accent2-glow) 0%, transparent 62%),
    radial-gradient(40% 36% at 60% 88%, var(--da-accent-glow) 0%, transparent 60%);
  filter: blur(22px);
  animation: formationDaMesh 18s ease-in-out infinite alternate;
}

@keyframes formationDaMesh {
  from { transform: translate(-3%, -2%) scale(1); }
  to { transform: translate(4%, 3%) scale(1.1); }
}

.fx-sheen.formation-da-root::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
}

.fx-sheen.is-in.formation-da-root::after {
  animation: formationDaSheen 1.4s ease 0.15s;
}

.fx-sheen.formation-da-root:hover::after {
  animation: formationDaSheen 1s ease;
}

@keyframes formationDaSheen {
  from { left: -70%; }
  to { left: 130%; }
}

.fx-gradtext.formation-da-root .formation-block__title em,
.fx-gradtext.formation-da-root .formation-block-point__title em {
  background: linear-gradient(90deg, var(--da-accent), var(--da-accent-2, var(--da-accent)), var(--da-accent));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: formationDaGradText 5s linear infinite;
}

@keyframes formationDaGradText {
  from { background-position: 0% 0; }
  to { background-position: 220% 0; }
}

.fx-beam.formation-da-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--da-beam-angle),
    transparent 0deg 250deg,
    var(--da-accent) 320deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: formationDaBeam 4.5s linear infinite;
}

@keyframes formationDaBeam {
  to { --da-beam-angle: 360deg; }
}

.fx-reveal.formation-da-root .formation-block__title,
.fx-reveal.formation-da-root .formation-block-point__title {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}

.fx-reveal.formation-da-root .formation-block__prose {
  opacity: 0;
  transition: opacity 0.65s ease 0.3s;
}

.fx-reveal.is-in.formation-da-root .formation-block__title,
.fx-reveal.is-in.formation-da-root .formation-block-point__title {
  clip-path: inset(0 0 0 0);
}

.fx-reveal.is-in.formation-da-root .formation-block__prose {
  opacity: 1;
}

.fx-stagger.formation-da-root .formation-block__title,
.fx-stagger.formation-da-root .formation-block__prose,
.fx-stagger.formation-da-root .formation-block-point__title,
.fx-stagger.formation-da-root .formation-block-point__children > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-stagger.is-in.formation-da-root .formation-block__title,
.fx-stagger.is-in.formation-da-root .formation-block-point__title {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

.fx-stagger.is-in.formation-da-root .formation-block__prose,
.fx-stagger.is-in.formation-da-root .formation-block-point__children > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}

.formation-da-blob {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--da-accent-glow) 0%, transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.formation-da-page:not(.is-in) .formation-da-root::after,
.formation-da-page:not(.is-in)::after,
.formation-da-root:not(.is-in)::after {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fx-kenburns.formation-da-page::after,
  .fx-kenburns.formation-da-root::after,
  .fx-grain.formation-da-page::after,
  .fx-grain.formation-da-root::after,
  .fx-mesh.formation-da-page::after,
  .fx-mesh.formation-da-root::after,
  .fx-sheen.formation-da-root::after,
  .fx-gradtext.formation-da-root .formation-block__title em,
  .fx-beam.formation-da-root::after {
    animation: none !important;
  }

  .fx-reveal.formation-da-root .formation-block__title,
  .fx-reveal.formation-da-root .formation-block-point__title {
    clip-path: none;
  }

  .fx-reveal.formation-da-root .formation-block__prose,
  .fx-stagger.formation-da-root .formation-block__title,
  .fx-stagger.formation-da-root .formation-block__prose,
  .fx-stagger.formation-da-root .formation-block-point__title,
  .fx-stagger.formation-da-root .formation-block-point__children > * {
    opacity: 1;
    transform: none;
  }
}