/* Effets « wow » de mykutenova.fr (voir outils/effet_wow.py). */

/* ---------- Transitions de page : pas d'écran blanc, un volet bleu balaie l'écran. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .7s; }
::view-transition-old(root) { animation: .7s var(--ease) both mk-sortie; }
::view-transition-new(root) { animation: .7s var(--ease) both mk-entree; }
.mk-guide { view-transition-name: mk-kuto; }
::view-transition-group(mk-kuto) { animation-duration: .7s; animation-timing-function: var(--ease); }
@keyframes mk-sortie { to { transform: scale(.94); opacity: .35; filter: blur(6px); } }
@keyframes mk-entree {
  from { clip-path: polygon(110% 0, 140% 0, 120% 100%, 90% 100%); filter: brightness(1.8) saturate(1.4); }
  60% { filter: brightness(1.15); }
  to { clip-path: polygon(-30% 0, 140% 0, 120% 100%, -50% 100%); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html[data-visual-quality="static"] ::view-transition-old(root),
html[data-visual-quality="static"] ::view-transition-new(root) { animation: none; }

/* ---------- Kuto qui accompagne. */
.mk-guide { position: fixed; right: clamp(12px, 2.4vw, 32px); bottom: clamp(12px, 2.4vw, 28px); z-index: 60; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; transform: translateY(160%); transition: transform .8s var(--ease); }
.mk-guide[data-present="true"] { transform: none; }
.mk-guide-corps { pointer-events: auto; position: relative; width: 84px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(var(--saut, 0)) rotate(var(--penche, 0)); transform-origin: 50% 90%; animation: 3.6s ease-in-out infinite mk-flotte; }
.mk-guide-corps img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px #0009) drop-shadow(0 0 22px #2457ff55); transition: opacity .25s, transform .35s var(--ease); }
.mk-guide-sourire { opacity: 0; transform: scale(.9) rotate(-4deg); }
.mk-guide[data-content="true"] .mk-guide-sourire { opacity: 1; transform: none; }
.mk-guide[data-content="true"] .mk-guide-regard { opacity: 0; }
.mk-guide-corps:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
@keyframes mk-flotte { 50% { translate: 0 -5px; } }
.mk-guide-bulle { order: -1; max-width: min(300px, 62vw); margin: 0 0 54px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--panel-2) 88%, transparent); backdrop-filter: blur(12px); color: var(--ink); font: 500 14px/1.4 var(--font); box-shadow: 0 18px 40px #0008; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 100% 100%; transition: opacity .3s, transform .45s var(--ease); }
.mk-guide[data-parle="true"]:not([data-silence="true"]) .mk-guide-bulle { opacity: 1; transform: none; }
.mk-guide[data-silence="true"] .mk-guide-corps { opacity: .7; }
html[data-mk-radio="on"] .mk-guide { transform: translateY(160%); }
@media (max-width: 700px) {
  .mk-guide-corps { width: 60px; height: 57px; }
  .mk-guide-bulle { margin-bottom: 40px; font-size: 13px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .mk-guide-corps { animation: none; transform: none; } }

/* ---------- Radiographie. */
.mk-radio-bouton { position: fixed; left: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 61; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(12px); color: var(--ink); font: 600 13px/1 var(--font); letter-spacing: .02em; cursor: pointer; box-shadow: 0 12px 30px #0007; transition: border-color .2s, background .2s; }
.mk-radio-bouton svg { width: 20px; height: 20px; fill: none; stroke: var(--accent-light); stroke-width: 1.8; stroke-linecap: round; }
.mk-radio-bouton:hover, .mk-radio-bouton[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 28%, var(--panel)); }
.mk-radio-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-mk-radio="on"] body { cursor: crosshair; }

.mk-radio { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
.mk-radio-calque { position: absolute; inset: 0; overflow: hidden; clip-path: circle(var(--r) at var(--x) var(--y));
  background:
    linear-gradient(#5385ff14 1px, transparent 1px) 0 var(--decal-y, 0) / 32px 32px,
    linear-gradient(90deg, #5385ff14 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at var(--x) var(--y), #0b1d3ef2, #050c17f7 70%);
  animation: .45s var(--ease) mk-ouvre; }
@keyframes mk-ouvre { from { clip-path: circle(0 at var(--x) var(--y)); } }
.mk-radio-anneau { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; border: 1.5px solid #83d9fa; box-shadow: 0 0 0 1px #050c17, 0 0 40px #5385ff66, inset 0 0 50px #5385ff33; }
.mk-radio-anneau::before, .mk-radio-anneau::after { content: ""; position: absolute; background: #83d9fa88; }
.mk-radio-anneau::before { left: 50%; top: 10px; bottom: 10px; width: 1px; mask: linear-gradient(#000 0 18%, #0000 0 82%, #000 0); }
.mk-radio-anneau::after { top: 50%; left: 10px; right: 10px; height: 1px; mask: linear-gradient(90deg, #000 0 18%, #0000 0 82%, #000 0); }
@media (pointer: coarse) { .mk-radio-anneau { pointer-events: auto; touch-action: none; } }
.mk-radio-boite { position: absolute; left: 0; top: 0; border: 1px solid #5385ffaa; border-radius: 3px; font: 500 10.5px/1.25 var(--mono); color: #dce7ff; }
.mk-radio-boite b, .mk-radio-boite i { position: absolute; left: -1px; padding: 2px 5px; white-space: nowrap; font-style: normal; }
.mk-radio-boite b { top: -17px; background: #2457ff; font-weight: 600; border-radius: 3px 3px 0 0; }
.mk-radio-boite i { bottom: -16px; color: #83d9fa; }
.mk-radio-boite i:empty { display: none; }
.mk-radio-boite[data-genre="zone"] { border: 1px dashed #83d9fa55; }
.mk-radio-boite[data-genre="zone"] b { top: 4px; left: 4px; background: #83d9fa22; color: #83d9fa; border-radius: 3px; }
.mk-radio-boite[data-genre="zone"] i { display: none; }
.mk-radio-boite[data-genre="titre"] { border-color: #f2f6fc; background: #f2f6fc0d; }
.mk-radio-boite[data-genre="titre"] b { background: #f2f6fc; color: #050c17; }
.mk-radio-boite[data-genre="lien"] { border-color: #3fe0a5; background: #3fe0a512; }
.mk-radio-boite[data-genre="lien"] b { background: #1fae7c; }
.mk-radio-boite[data-genre="lien"] i { color: #7cf0c3; }
.mk-radio-boite[data-genre="media"] { border-color: #ffb547; background: repeating-linear-gradient(135deg, #ffb54712 0 6px, transparent 6px 12px); }
.mk-radio-boite[data-genre="media"] b { background: #c77d12; }
.mk-radio-boite[data-genre="media"] i { color: #ffd08a; }
.mk-radio-boite[data-genre="texte"] { border-color: #5385ff55; }
.mk-radio-boite[data-genre="texte"] b { background: #5385ff55; }

.mk-radio-fiche { position: fixed; left: 0; top: 0; z-index: 59; display: grid; gap: 3px; width: 250px; padding: 10px 12px; border: 1px solid #83d9fa66; border-radius: 10px; background: #050c17e8; backdrop-filter: blur(8px); color: #dce7ff; font: 500 11.5px/1.35 var(--mono); pointer-events: none; transition: transform .12s linear; box-shadow: 0 14px 30px #000a; }
.mk-radio-fiche span:first-child { color: #fff; font-weight: 700; }
.mk-radio-fiche span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-radio-fiche span:nth-child(2) { white-space: normal; color: #83d9fa; font-family: var(--font); font-size: 12.5px; }

.mk-radio-capot { position: fixed; right: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 59; width: min(330px, calc(100vw - 24px)); padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #081120f0; backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 20px 50px #000a; animation: .5s var(--ease) mk-monte; }
@keyframes mk-monte { from { transform: translateY(20px); opacity: 0; } }
.mk-radio-capot h2 { margin: 0 0 8px; font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #83d9fa; }
.mk-radio-capot > p { margin: 0 0 10px; font: 500 13px/1.45 var(--font); color: var(--ink); }
.mk-radio-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; padding: 0; list-style: none; font: 500 12px/1 var(--font); color: var(--muted); }
.mk-radio-legende li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; border: 1px solid #5385ff; background: #5385ff55; }
.mk-radio-legende [data-genre="titre"]::before { border-color: #f2f6fc; background: #f2f6fc; }
.mk-radio-legende [data-genre="lien"]::before { border-color: #3fe0a5; background: #1fae7c; }
.mk-radio-legende [data-genre="media"]::before { border-color: #ffb547; background: #c77d12; }
.mk-radio-fermer { margin-top: 10px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 12.5px/1 var(--font); cursor: pointer; }
.mk-radio-capot dl { display: grid; gap: 4px; margin: 0; }
.mk-radio-capot dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font: 500 11.5px/1.35 var(--mono); }
.mk-radio-capot dt { color: var(--muted); }
.mk-radio-capot dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .mk-radio-bouton span { display: none; }
  .mk-radio-bouton { padding: 0 12px; }
  .mk-radio-capot { left: 12px; right: 12px; width: auto; bottom: 68px; padding: 10px 12px; }
  .mk-radio-capot dl div:nth-child(n+4) { display: none; }
  .mk-radio-capot > p { font-size: 12.5px; }
  .mk-radio-fiche { display: none; }
}

/* ---------- Défilement cinéma (accueil). */
.mk-cinema { position: relative; height: 420vh; margin: 0; }
.mk-cinema-cadre { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.mk-cinema-cadre canvas, .mk-cinema-cadre > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-cinema-cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#050c17 0, #050c1700 18%, #050c1700 72%, #050c17 100%); pointer-events: none; }
.mk-cinema-titres { position: absolute; inset: 0; z-index: 1; display: grid; pointer-events: none; }
.mk-cinema-titres > * { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 0 clamp(70px, 14vh, 150px) clamp(20px, 7vw, 120px); max-width: 560px; opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .8s var(--ease); }
.mk-cinema-titres > [data-visible="true"] { opacity: 1; transform: none; }
.mk-cinema-titres .eyebrow { margin-bottom: 10px; }
.mk-cinema-titres h2 { margin: 0; font: 650 clamp(30px, 4.6vw, 64px)/1.02 var(--font); letter-spacing: -.035em; color: var(--ink); text-shadow: 0 4px 30px #050c17; }
.mk-cinema-titres p { margin: 14px 0 0; color: var(--accent-light); font-size: clamp(15px, 1.3vw, 18px); text-shadow: 0 2px 16px #050c17; }
.mk-cinema-barre { position: absolute; z-index: 1; left: clamp(20px, 7vw, 120px); right: clamp(20px, 7vw, 120px); bottom: 34px; height: 2px; background: #ffffff1a; border-radius: 2px; overflow: hidden; }
.mk-cinema-barre i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2457ff, #83d9fa); transform-origin: 0 0; transform: scaleX(var(--avance, 0)); }
html[data-visual-quality="static"] .mk-cinema { height: auto; }
html[data-visual-quality="static"] .mk-cinema-cadre { position: relative; height: 70vh; }
html[data-visual-quality="static"] .mk-cinema-titres > :first-child { opacity: 1; transform: none; }
@media (max-width: 700px) { .mk-cinema { height: 320vh; } .mk-cinema-titres > * { margin-bottom: 200px; } }

/* ---------- Showreel (accueil). */
.mk-reel { position: relative; margin-block: clamp(30px, 6vw, 80px) 0; }
.mk-reel-ecran { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(14px, 2vw, 26px); border: 1px solid var(--line); background: #02060d; box-shadow: 0 40px 100px #000a, 0 0 0 1px #5385ff22, 0 0 120px #2457ff22; transform: perspective(1400px) rotateX(var(--incline, 8deg)) scale(var(--echelle, .94)); transform-origin: 50% 0; transition: transform .2s linear; }
.mk-reel video, .mk-reel-ecran > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-reel-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.mk-reel-tete h2 { margin: 0; font: 650 clamp(26px, 3.4vw, 44px)/1.05 var(--font); letter-spacing: -.03em; }
.mk-reel-son { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 13px/1 var(--font); cursor: pointer; }
.mk-reel-son:hover, .mk-reel-son[aria-pressed="true"] { border-color: var(--accent); }
.mk-reel-son svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mk-reel-son .on { display: none; }
.mk-reel-son[aria-pressed="true"] .on { display: block; }
.mk-reel-son[aria-pressed="true"] .off { display: none; }
.mk-reel-tete > div > p:not(.eyebrow) { margin: 10px 0 0; max-width: 620px; color: var(--muted); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5; }
.mk-reel-chapitres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.mk-reel-chapitres button { display: grid; gap: 6px; width: 100%; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .3s, background .3s, transform .3s var(--ease); }
.mk-reel-chapitres small { font: 600 11.5px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-light); }
.mk-reel-chapitres b { font: 600 14px/1.35 var(--font); }
.mk-reel-chapitres button:hover, .mk-reel-chapitres [data-actif="true"] button { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.mk-reel-chapitres [data-actif="true"] button { transform: translateY(-3px); }
@media (max-width: 900px) { .mk-reel-chapitres { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .mk-reel-chapitres { grid-template-columns: 1fr; gap: 8px; } .mk-reel-chapitres button { padding: 10px 12px; } }
@media (max-width: 700px) { .mk-reel-tete { flex-direction: column; align-items: start; } .mk-reel-ecran { transform: none; } }