/*========================================================
  INTRO.CSS – kouzelná úvodní animace
--------------------------------------------------------
  Motýl přeletí zleva doprava a za sebou ODKRÝVÁ stránku
  přes měkkou rozpitou clonu. Za křídly mu jde třpytivá
  stopa (tu kreslí js/intro.js na <canvas>).

  Stránka je celou dobu POD clonou (nezmenšuje se, nemizí).
  Po přeletu se celá vrstva sama odstraní (řeší JS).

  Sprite sheet motýla: images/hero/butterfly-sprite.png
    - 8 fází mávnutí vedle sebe
    - jedna fáze = 200 × 168 px, celý sheet = 1600 × 168 px
    - v CSS motýla zmenšujeme na 170px šířky (viz .intro-butterfly)

  CO TU LADÍŠ:
    - rychlost/dráha letu → @keyframes intro-fly
    - měkkost clony → gradient v .intro-veil
    - rychlost mávání → "0.65s" u .intro-butterfly
    - velikost motýla → width/height .intro-butterfly
========================================================*/

/*--------------------------------------------------------
  VRSTVA PŘES CELÉ OKNO
--------------------------------------------------------*/
.intro-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    overflow:hidden;
    pointer-events:none;          /* web pod tím zůstává klikací */
}

/* Když JS rozhodne intro nepřehrát (opakovaná návštěva /
   pomalé připojení / Safari-Firefox), přidá na <html>
   třídu "intro-skip" a nic se nezobrazí. */
.intro-skip .intro-overlay{ display:none !important; }

/*--------------------------------------------------------
  PLACHTA (to, co se odkrývá) + MĚKKÁ CLONA
  Maska: vlevo průhledno (odkryto), pak široký rozpitý
  přechod, pak plno (zakryto). Posuvem masky doprava se
  web odkrývá pozvolna, jako rozplývající se mlha.
--------------------------------------------------------*/
.intro-veil{
    position:absolute;
    inset:0;
    background:radial-gradient(140% 100% at 30% 40%, #17102b 0%, #0a0715 70%);

    -webkit-mask:linear-gradient(90deg,
        transparent 0%, transparent 30%,
        rgba(0,0,0,.5) 42%, #000 55%, #000 100%);
            mask:linear-gradient(90deg,
        transparent 0%, transparent 30%,
        rgba(0,0,0,.5) 42%, #000 55%, #000 100%);
    -webkit-mask-size:220% 100%;  mask-size:220% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:0 0;     mask-position:0 0;

    animation:intro-veil 2s linear forwards;
}
@keyframes intro-veil{
    0%   { -webkit-mask-position:0 0;     mask-position:0 0; }
    100% { -webkit-mask-position:-120% 0; mask-position:-120% 0; }
}

/*--------------------------------------------------------
  CANVAS na třpytky (kreslí js/intro.js)
--------------------------------------------------------*/
.intro-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/*--------------------------------------------------------
  MOTÝL
  Dva pohyby: LET (intro-fly) + MÁVÁNÍ křídel (intro-wing).
--------------------------------------------------------*/
.intro-butterfly{
    position:absolute;
    top:0; left:0;
    width:170px;                  /* zmenšeno z 200px fáze */
    height:143px;                 /* poměrově z 168px */

    background-image:url("../images/hero/butterfly-sprite.png");
    background-repeat:no-repeat;
    background-size:1360px 143px; /* 8 × 170px */
    background-position:0 0;

    animation:
        intro-fly  2s linear forwards,
        intro-wing 0.5s steps(8) infinite;

    will-change:transform;
    backface-visibility:hidden;
    transform:translate3d(-220px, 44vh, 0);   /* start mimo vlevo (translate3d = GPU) */
    filter:drop-shadow(0 0 14px rgba(215,127,249,.7));
}

/*--------------------------------------------------------
  DRÁHA LETU – jemná vlnka zleva doprava
  Procenta = průběh času. vw/vh = šířka/výška okna.
  Chceš klidnější let? Přibliž hodnoty vh k sobě.
--------------------------------------------------------*/
@keyframes intro-fly{
    0%   { transform:translate3d(-220px, 44vh, 0); }
    18%  { transform:translate3d(14vw,  32vh, 0); }
    38%  { transform:translate3d(34vw,  38vh, 0); }
    58%  { transform:translate3d(54vw,  28vh, 0); }
    78%  { transform:translate3d(76vw,  36vh, 0); }
    100% { transform:translate3d(112vw, 24vh, 0); }
}

/*--------------------------------------------------------
  MÁVÁNÍ KŘÍDEL (sprite sheet)
  -1360px = celková šířka (8 fází × 170px).
--------------------------------------------------------*/
@keyframes intro-wing{
    from{ background-position:0 0; }
    to  { background-position:-1360px 0; }
}

/*--------------------------------------------------------
  PŘÍSTUPNOST – kdo má vypnuté animace, intro se neukáže.
--------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
    .intro-overlay{ display:none; }
}