/* =====================================================================
   Cinkáto – efekty: reveal, tilt + spotlight, grain, kurzor, mince
   Vše vypnuté při prefers-reduced-motion (viz konec souboru).
   ===================================================================== */

/* ---------- Grain přes celou stránku (SVG feTurbulence) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- Reveal ---------- */
/* 1) Moderní prohlížeče: CSS scroll-driven animations, bez JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(28px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* 2) Záloha: IntersectionObserver přidá .is-visible (jen když běží JS) */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(28px); }
    html.js .reveal { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
  }
}

/* ---------- Karty: 3D tilt + spotlight (JS nastavuje proměnné) ---------- */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
  transform-style: preserve-3d;
}
.tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 224, 102, 0.14), transparent 45%);
  transition: opacity 0.3s;
}
.tilt.is-tilting { transition: transform 0.08s linear, border-color 0.3s; border-color: var(--line-strong); }
.tilt.is-tilting::before { opacity: 1; }

/* ---------- Magnetická CTA ---------- */
[data-magnet] {
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}
[data-magnet].is-magnet { transition: transform 0.12s linear; }

/* ---------- Mince (částice) ---------- */
.coin-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
}
.coin-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Velká mince v závěrečném CTA: cinknutí */
.cta-coin.is-ringing { animation: coin-ring 0.9s var(--ease-out); }
@keyframes coin-ring {
  0% { transform: rotateY(0) scale(1); }
  30% { transform: rotateY(180deg) scale(1.08); }
  60% { transform: rotateY(360deg) scale(0.98); }
  80% { transform: rotate(-6deg) scale(1.02); }
  100% { transform: none; }
}
.cta-coin-wrap::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.cta-coin-wrap.is-ringing::after { animation: coin-wave 1s var(--ease-out); }
@keyframes coin-wave {
  from { opacity: 0.8; transform: scale(0.6); }
  to { opacity: 0; transform: scale(1.4); }
}

/* Jemná levitace mince v CTA */
@media (prefers-reduced-motion: no-preference) {
  .cta-coin-wrap { animation: float 5s ease-in-out infinite; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Vlastní kurzor (jen jemný ukazatel: myš) ---------- */
.cursor-ring,
.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s, width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out), background-color 0.25s;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 14px rgba(245, 197, 24, 0.35);
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold-light);
}
html.has-cursor .cursor-ring,
html.has-cursor .cursor-dot { opacity: 1; }
html.has-cursor.cursor-hidden .cursor-ring,
html.has-cursor.cursor-hidden .cursor-dot { opacity: 0; }
html.cursor-hover .cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  background: rgba(245, 197, 24, 0.08);
}
@media (hover: hover) and (pointer: fine) {
  /* Systémový kurzor skryjeme jen mimo textová pole a posuvníky */
  html.has-cursor,
  html.has-cursor a,
  html.has-cursor button,
  html.has-cursor summary,
  html.has-cursor [data-seg] { cursor: none; }
  html.has-cursor input,
  html.has-cursor textarea,
  html.has-cursor select { cursor: auto; }
  html.has-cursor input[type="range"] { cursor: pointer; }
}

/* ---------- Omezený pohyb: vše statické ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .tilt { transform: none !important; }
  [data-magnet] { transform: none !important; }
  .coin-layer { display: none; }
}