/* KAPITO FX — socle commun des pages publiques (« cartoon premium »).
   Courbes et durées : skills emil-design-eng / apple-design. Matières : verre (backdrop-filter), grain imprimé.
   Ce fichier ne change pas les couleurs d'une page : il apporte mouvements, matières, confort mobile et accessibilité. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --kfx-ink: #1b1d2a;
  /* ombre « jouet » : liseré d'encre court + ombre portée douce (plus fine que l'ancien 5px plein) */
  --shadow-toy: 2px 2px 0 var(--kfx-ink), 0 10px 26px -12px rgba(27, 29, 42, 0.32);
  --shadow-toy-lg: 3px 3px 0 var(--kfx-ink), 0 22px 50px -20px rgba(27, 29, 42, 0.42);
  --shadow-soft: 0 1px 2px rgba(27, 29, 42, 0.08), 0 12px 32px -14px rgba(27, 29, 42, 0.28);
  --glass-bg: rgba(255, 253, 248, 0.62);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-line: rgba(27, 29, 42, 0.1);
  /* grain d'impression (bruit SVG, 2 Ko) */
  --kfx-grain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- confort mobile (skill mobile-native) ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, [role="button"], label, summary { touch-action: manipulation; }
button, [role="button"], .k-btn { -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } }

/* ---------- appui : retour immédiat, propriété « scale » indépendante (se combine aux transforms) ---------- */
.kfx-press { transition: scale 160ms var(--ease-out), translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.kfx-press:active { scale: 0.97; }

/* ---------- verre ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-soft);
}
.glass.dark, .dark .glass {
  --glass-bg: rgba(20, 17, 33, 0.55); --glass-edge: rgba(255, 255, 255, 0.14); --glass-line: rgba(255, 255, 255, 0.1);
}
/* liseré clair qui accroche la lumière sur les surfaces réfractées */
.glass-lg { box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.18), var(--shadow-soft); }

/* bord de défilement : au lieu d'un trait, une fine bande floue sous l'en-tête flottant */
.kfx-edge { position: relative; }
.kfx-edge::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg, #f7f1e6) 70%, transparent), transparent); opacity: 0; transition: opacity 200ms ease; }
.kfx-scrolled .kfx-edge::after { opacity: 1; }

/* ---------- fond animé (canvas WebGL) ---------- */
.kfx-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.kfx-bg > canvas { opacity: 0; transition: opacity 900ms ease; }
.kfx-bg.kfx-ready > canvas { opacity: 1; }
.kfx-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--kfx-grain); opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; }
.kfx-metal { position: relative; display: block; }
.kfx-metal > canvas { opacity: 0; transition: opacity 700ms ease; }
.kfx-metal.kfx-ready > canvas { opacity: 1; }
.kfx-metal.kfx-ready > .kfx-metal-fallback { opacity: 0; }
.kfx-metal-fallback { position: absolute; inset: 0; transition: opacity 500ms ease; }

/* ---------- inclinaison + reflet ---------- */
[data-tilt] { transform-style: preserve-3d; will-change: auto; }
.kfx-glare { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; border-radius: inherit;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 250ms ease; mix-blend-mode: soft-light; }
.kfx-hot > .kfx-glare { opacity: 1; }

/* ---------- apparition au défilement (le JS ajoute .kfx-js sur <html>) ---------- */
.kfx-js [data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
.kfx-js [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ---------- accessibilité : mouvement, transparence, contraste ---------- */
@media (prefers-reduced-motion: reduce) {
  .kfx-js [data-reveal] { transform: none; filter: none; transition: opacity 300ms ease; }
  .kfx-press:active { scale: 1; }
  [data-tilt] { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--surface, #fffdf8); -webkit-backdrop-filter: none; backdrop-filter: none !important; }
  .glass.dark, .dark .glass { background: #1f1c2c; }
}
@media (prefers-contrast: more) {
  .glass { background: var(--surface, #fffdf8); -webkit-backdrop-filter: none; backdrop-filter: none !important; border: 2px solid var(--kfx-ink); }
}
:focus-visible { outline: 2.5px solid var(--accent, #ff6b2c); outline-offset: 3px; }