/* eetecko.cz – efekty titulní stránky (2026-10-08).
   Zásady: obsah je vždy vidět. Skrývání (odhalování při posouvání) jen pod html.fx,
   kterou přidá effects.js a jen když uživatel NEMÁ prefers-reduced-motion: reduce.
   Bez JS / při reduce zůstane jen statické zkrášlení (záře za hero, tečkovaná mřížka). */

/* ---------- záře (aurora) za hero – statická vždy, pohyb jen bez reduce ---------- */
.landing .hero { position: relative; isolation: isolate; }
.landing .hero::before,
.landing .hero::after { content: ''; position: absolute; pointer-events: none; z-index: -1; }
.landing .hero::before {
  inset: -170px -14% -90px 22%;
  background:
    radial-gradient(42% 46% at 52% 50%, rgba(200, 245, 66, .55), transparent 70%),
    radial-gradient(30% 36% at 94% 84%, rgba(200, 245, 66, .22), transparent 70%),
    radial-gradient(24% 28% at 18% 16%, rgba(200, 245, 66, .30), transparent 70%);
  transform-origin: 55% 50%;
}
/* limetková záře pod zařízením (statická) */
.landing .device-real { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .4), 0 50px 120px -40px rgba(200, 245, 66, .5); }
/* jemná tečkovaná mřížka, ztrácí se do stran */
.landing .hero::after {
  inset: -60px 0 0 0;
  background-image: radial-gradient(rgba(18, 20, 15, .10) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask: radial-gradient(60% 70% at 60% 40%, #000 0%, transparent 75%);
  mask: radial-gradient(60% 70% at 60% 40%, #000 0%, transparent 75%);
}
@media (max-width: 900px) {
  .landing .hero::before { inset: 30% -30% -10% -30%; }
}

@media (prefers-reduced-motion: no-preference) {
  .landing .hero::before { animation: fx-aurora 22s ease-in-out infinite alternate; }
  @keyframes fx-aurora {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate3d(-4%, 3%, 0) scale(1.08) rotate(6deg); }
    100% { transform: translate3d(3%, -2%, 0) scale(.96) rotate(-4deg); }
  }

  /* „Opravdu." – limetkový zvýrazňovač se dotáhne zleva (text je vidět celou dobu) */
  :root[data-theme="light"] .landing .hero h1 em {
    background-repeat: no-repeat; background-size: 100% 100%; background-position: left center;
    animation: fx-mark .9s cubic-bezier(.2, .8, .2, 1) .35s both;
  }
  @keyframes fx-mark { from { background-size: 0% 100%; } }

  /* odlesk přes hlavní tlačítko v hero – jednou po načtení */
  .landing .hero-cta .btn-primary::after { animation: fx-shine 1.1s cubic-bezier(.2, .8, .2, 1) 1.3s 1 both; }
  @keyframes fx-shine { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(420%) skewX(-20deg); } }
}

/* tmavá karta „Prodej na dvě klepnutí“ ve světlém webu: popis byl tmavě šedý na černé (nečitelný) */
:root[data-theme="light"] .landing .bento .card.dark p { color: rgba(242, 244, 234, .72); }

/* ---------- odlesk (shine) na tlačítkách ---------- */
.landing :is(.btn-primary, .cta-box .btn, .mode.hl .mode-try .btn) { position: relative; overflow: hidden; isolation: isolate; }
.landing :is(.btn-primary, .cta-box .btn, .mode.hl .mode-try .btn)::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 38%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(0) skewX(-20deg);
}
.landing :is(.cta-box .btn, .mode.hl .mode-try .btn)::after { background: linear-gradient(100deg, transparent, rgba(200, 245, 66, .35), transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .landing :is(.btn-primary, .cta-box .btn, .mode.hl .mode-try .btn):hover::after { transform: translateX(420%) skewX(-20deg); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
}

/* ======== vše níže jen s JS a bez reduced motion (html.fx) ======== */

/* odhalování při posouvání – .rv přidá JS jen prvkům pod okrajem obrazovky */
html.fx .rv { opacity: 0; translate: 0 26px; }
html.fx .rv.in {
  opacity: 1; translate: 0 0;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), translate .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms),
              transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
@media (prefers-reduced-motion: reduce) { html .rv { opacity: 1 !important; translate: none !important; } }
@media print { html .rv { opacity: 1 !important; translate: none !important; } }

/* zařízení v hero: náklon podle myši + odlesk skla (jen myš, od 901 px) */
@media (min-width: 901px) {
  html.fx .landing .device-real {
    transform: perspective(1600px) rotateY(calc(-6deg + var(--ry, 0deg))) rotateX(calc(2deg + var(--rx, 0deg)));
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  }
  html.fx .landing .device-real.tilting { transition-duration: .25s; }
  html.fx .landing .device-real::after {
    content: ''; position: absolute; inset: 8px; border-radius: 15px; pointer-events: none;
    background: radial-gradient(520px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 45%);
    opacity: var(--go, 0); transition: opacity .5s;
  }
  html.fx .landing .receipt {
    translate: var(--px, 0px) var(--py, 0px);
    transition: translate .7s cubic-bezier(.2, .8, .2, 1);
    animation: fx-bob 7s ease-in-out infinite;
  }
  @keyframes fx-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-7px); } }
}

/* karty: zvednutí a světelný kurzor (spotlight) */
html.fx .landing :is(.needs, .modes, .bento, .pricing) > .card { position: relative; }
@media (hover: hover) {
  html.fx .landing :is(.needs, .bento, .pricing) > .card { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s; }
  html.fx .landing :is(.needs, .modes, .bento, .pricing) > .card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(18, 20, 15, .05), 0 26px 50px -24px rgba(18, 20, 15, .35); border-color: rgba(120, 160, 0, .35); }
  html.fx .landing .pricing > .card.featured:hover { box-shadow: 0 34px 90px -30px rgba(200, 245, 66, .7); border-color: transparent; }
  html.fx .landing :is(.needs, .modes, .bento, .pricing) > .card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 245, 66, .55), transparent 62%);
    mix-blend-mode: multiply; opacity: 0; transition: opacity .35s;
  }
  html.fx .landing :is(.mode.hl, .price-card.featured)::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 62%); mix-blend-mode: soft-light; }
  html.fx .landing .bento .card.dark::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 245, 66, .22), transparent 62%); mix-blend-mode: screen; }
  html.fx .landing :is(.needs, .modes, .bento, .pricing) > .card:hover::after { opacity: 1; }
}

/* klávesnice v kartě „Ovládání z klávesnice“ – klávesy se postupně stisknou */
html.fx .fx-play .kbd-demo span { animation: fx-key .5s ease-out both; }
html.fx .fx-play .kbd-demo span:nth-child(2) { animation-delay: .35s; }
html.fx .fx-play .kbd-demo span:nth-child(3) { animation-delay: .7s; }
html.fx .fx-play .kbd-demo span:nth-child(4) { animation-delay: 1.05s; }
@keyframes fx-key {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 2px; background: var(--primary); color: var(--primary-ink); border-color: rgba(18, 20, 15, .35); }
}

/* kroky EET: číslo naskočí */
html.fx .steps-list li.in::before { animation: fx-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + 120ms) both; }
@keyframes fx-pop { from { scale: .4; opacity: 0; } }