/* Wasted v123 „Hovor prijatý“ · jeden jazyk pohybu.
   Rýchlosti: dotyk 120 ms · hover a farba 180 ms · zmena stavu 280 ms · rozloženie 420 ms · zdvihnutie 1000 ms.
   Krivky: --ease-out pre odpoveď na človeka, --ease-inout pre pohyb po obrazovke, --ease-lift pre zdvihnutie.
   Jediný nevyžiadaný moment je zazvonenie v úvode: slúchadlo sa dvakrát krátko zachveje (prichádza hovor)
   a zdvihne sa (hovor prijatý). Text sa nehýbe a tlačidlo funguje od prvej snímky. Všetko ostatné odpovedá na
   človeka (výber, prepínač, otázka, krok formulára) alebo ukazuje poradie (slovesá hovoru). */
:root{--t-press:120ms;--t-quick:180ms;--t-state:280ms;--t-layout:420ms;--t-lift:1000ms}
@media(prefers-reduced-motion:no-preference){
  /* reakcie na človeka */
  .header{transition:background-color var(--t-state) ease,color var(--t-state) ease,box-shadow var(--t-state) ease}
  .nav a{transition:opacity var(--t-quick) ease}
  .nav a::after{transition:transform var(--t-state) var(--ease-out)}
  .button{transition:background-color var(--t-quick) ease,color var(--t-quick) ease,box-shadow var(--t-quick) ease,transform 160ms var(--ease-out)}
  .button:active{transition-duration:var(--t-quick),var(--t-quick),var(--t-quick),var(--t-press)}
  .button .i{transition:background-color var(--t-quick) ease}
  .textlink{transition:text-decoration-color var(--t-quick) ease}
  .textlink .i{transition:transform var(--t-state) var(--ease-out)}
  .form__back,.form__shortcut{transition:background-color var(--t-quick) ease,color var(--t-quick) ease,text-decoration-color var(--t-quick) ease,transform var(--t-press) ease}
  .option{transition:background-color var(--t-quick) ease,color var(--t-quick) ease,box-shadow var(--t-quick) ease,transform 160ms var(--ease-out)}
  .option:active{transform:scale(.985);transition-duration:var(--t-press)}
  .option__mark{transition:box-shadow var(--t-quick) ease,background-color var(--t-quick) ease}
  .option__mark::after{transition:transform var(--t-state) var(--ease-out)}
  .option__check{transition:stroke-dashoffset var(--t-state) var(--ease-out) 40ms}
  .form__bar li::after{transition:transform var(--t-layout) var(--ease-out),background-color var(--t-state) ease}
  .form input:not([type=hidden]),.form textarea{transition:box-shadow var(--t-quick) ease,background-color var(--t-quick) ease}
  .recap__edit{transition:color var(--t-quick) ease,text-decoration-color var(--t-quick) ease}
  .err:not([hidden]),.form__err:not([hidden]){animation:msg-in var(--t-quick) ease both}
  .form .button--submit:disabled::before{animation:spin .8s linear infinite}
  .person__ic,.person__out{transition:color var(--t-quick) ease}
  .person__value,.person__social a{transition:text-decoration-color var(--t-quick) ease,color var(--t-quick) ease}
  .person__link{transition:opacity var(--t-press) ease}
  .person__link--verify .person__out{transition:color var(--t-quick) ease,transform var(--t-state) var(--ease-out)}
  .qa__q{transition:color var(--t-quick) ease}
  .qa__ic{transition:background-color var(--t-quick) ease,color var(--t-quick) ease,box-shadow var(--t-quick) ease,transform var(--t-press) ease}
  .qa__ic::after{transition:transform var(--t-state) var(--ease-out)}
  .form__more-ic{transition:transform var(--t-state) var(--ease-out)}
  .doc__index a{transition:color var(--t-quick) ease,background-color var(--t-quick) ease}
  .doc__index a::before{transition:transform var(--t-state) var(--ease-out),background-color var(--t-quick) ease}

  /* prepínač trasy: palec sa presunie, AI a vy si vymenia miesto, vysvetlenie sa prelnie */
  .node{transition:transform 320ms var(--ease-out)}
  /* nastavenie: palec prepínača sa presunie ako v iOS, voľby a vysvetlenia sa prelínajú farbou */
  .seg__thumb{transition:transform var(--t-layout) var(--ease-drawer)}
  .seg__opt{transition:color var(--t-quick) ease}
  .seg__text{transition:color var(--t-state) ease}
  /* Úvod: zazvonenie a zdvihnutie. Predmet je viditeľný od prvej snímky (iba nižšie a naklonený, ako by ležal),
     dve krátke zachvenia okolo stredu mušle, potom plynulé zdvihnutie. Červené svetlo zdola dvakrát zosilnie
     spolu so zvonením a ustáli sa. Text úvodu sa nehýbe. */
  .hero__ring{animation:ring 1040ms linear 420ms both}
  .hero__handset{animation:lift var(--t-lift) var(--ease-lift) 1400ms both}
  .hero__glow{animation:glow 1500ms ease 380ms both}
  .hero__img,.hero__gl{transition:opacity 480ms ease}
  .aux-hero__art img{animation:lift-small 1100ms var(--ease-lift) 100ms both}
  .aux-hero__shadow{animation:lift-shadow 1100ms var(--ease-lift) 100ms both}

  /* Čo získate: slovesá sa pri prvom vstupe rozsvietia v poradí hovoru, potom červená bodka „vybavené“.
     Začínajú v tlmenom tóne (nie skryté), takže sú čitateľné hneď. */
  .motion-on .value__title:not(.is-played) .value__verb,.motion-on .value__title:not(.is-played) .value__dot{color:var(--mute)}
  .motion-on .value__title.is-played .value__verb{transition:color 520ms ease}
  .motion-on .value__title.is-played .value__verb:nth-child(2){transition-delay:220ms}
  .motion-on .value__title.is-played .value__verb:nth-child(3){transition-delay:440ms}
  .motion-on .value__title.is-played .value__dot{transition:color 280ms ease 900ms}
}
/* Tlačidlo v hlavičke úvodu: ukáže sa, keď tlačidlo úvodu odíde hore z obrazovky (časová os jeho viditeľnosti).
   Kým je skryté, nedá sa naň kliknúť ani prejsť klávesnicou (visibility). Bez podpory alebo na podstránkach
   je časová os neaktívna a tlačidlo je viditeľné vždy. Mení sa iba priehľadnosť, nie poloha. */
@supports (animation-timeline:view()){
  body{timeline-scope:--hero-cta}
  .hero__actions{view-timeline-name:--hero-cta}
  .header .button--nav{animation:nav-cta linear forwards;animation-timeline:--hero-cta;animation-range:entry 0% exit 100%}
}
/* slúchadlo sa pri prechode stránkou položí na stôl (nepovinné: len kde prehliadač vie viazať pohyb na scroll) */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .still__object{animation:set-down linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .still__shadow{animation:set-down-shadow linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* pohyb v priestore nie; zmena farby a priehľadnosti, ktorá potvrdzuje stav, ostáva krátka */
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .button,.option,.seg__opt,.qa__ic,.nav a,.form__back,.form__shortcut{transition-property:background-color,color,opacity,box-shadow!important;transition-duration:120ms!important}
  .button:active,.option:active,.qa summary:active .qa__ic{transform:none}
}
@media(prefers-contrast:more){
  :root{--ink-2:var(--ink);--ink-3:var(--ink);--mute:var(--ink-2);--line:var(--line-2)}
  .studio{--ink-2:#fff;--ink-3:#e3e5e8;--mute:#d6d8dc;--line:rgb(255 255 255/.4);--line-2:rgb(255 255 255/.5);--field-line:rgb(255 255 255/.55)}
}
@media(forced-colors:active){
  .button{border:1px solid ButtonText}
  .done{color:inherit}
  .tile,.seg{border:1px solid CanvasText}
  .seg__thumb{background:Highlight;forced-color-adjust:none}
  #rezim-busy:checked~.seg .seg__opt[for=rezim-busy],#rezim-all:checked~.seg .seg__opt[for=rezim-all]{forced-color-adjust:none;color:HighlightText}
  #rezim-busy:focus-visible~.seg .seg__opt[for=rezim-busy],#rezim-all:focus-visible~.seg .seg__opt[for=rezim-all]{outline-color:CanvasText}
  .route__link{border-top-color:CanvasText}.node__dot{background:CanvasText}
  .console,.price{border:1px solid CanvasText}
  .qa__ic{border:1px solid ButtonText}
  .qa__ic::before,.qa__ic::after{background:ButtonText}
  /* polia a voľby majú v bežnom režime okraj z tieňa; vo vynútených farbách dostanú skutočný okraj */
  .form :where(input:not([type=hidden]):not([type=radio]):not([type=checkbox]),textarea),.option{border:1px solid CanvasText}
  .option__mark{border:1.5px solid CanvasText}
  .option--radio input:checked+.option__mark::after{background:Highlight}
  .option:has(input:checked){outline:2px solid Highlight}
  .form input:focus{outline:2px solid Highlight}
  .form .button--submit:disabled::before{border-color:GrayText;border-top-color:CanvasText}
}
@media print{.value__verb,.value__verbs{color:#000!important}}
/* zachvenie: dve krátke dávky okolo stredu mušle (±1,6°, ±2 px), medzi nimi pauza */
@keyframes ring{
  0%{transform:none}
  4%{transform:translateX(-2px) rotate(-1.6deg)}8%{transform:translateX(2px) rotate(1.6deg)}12%{transform:translateX(-2px) rotate(-1.4deg)}
  16%{transform:translateX(2px) rotate(1.3deg)}20%{transform:translateX(-1px) rotate(-.8deg)}24%,52%{transform:none}
  56%{transform:translateX(-2px) rotate(-1.6deg)}60%{transform:translateX(2px) rotate(1.6deg)}64%{transform:translateX(-2px) rotate(-1.4deg)}
  68%{transform:translateX(2px) rotate(1.3deg)}72%{transform:translateX(-1px) rotate(-.8deg)}76%,100%{transform:none}
}
/* zdvihnutie: z polohy „leží“ (nižšie, mierne naklonené) do vzduchu */
@keyframes lift{0%{transform:translateY(5.5%) rotate(3.5deg) scale(.975)}100%{transform:none}}
@keyframes glow{0%{opacity:.55}18%{opacity:1}34%{opacity:.6}52%{opacity:1}70%,100%{opacity:.8}}
@keyframes lift-small{0%{opacity:.6;transform:translateY(9%) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes lift-shadow{0%{opacity:1;transform:scale(.62,1.3);filter:blur(3px)}100%{opacity:1;transform:none}}
@keyframes set-down{from{transform:translateY(-14%) rotate(-1.5deg)}to{transform:none}}
@keyframes set-down-shadow{from{opacity:.25;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes nav-cta{entry 0%{opacity:1;visibility:visible}entry 30%,exit 40%{opacity:0;visibility:hidden}exit 100%{opacity:1;visibility:visible}}
@keyframes msg-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}