/* Capa de interacción del proto. El layout base viene del canvas (index.html). */

html{scroll-behavior:smooth}
.nav{transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.nav.is-hidden{translate:0 -140%}
.lang button{transition:opacity .2s}
.hero-tiles .ct{cursor:pointer;transform:rotate(var(--r,0deg)) scale(var(--s,1));transition:transform .25s ease}
.burst-piece{position:fixed;left:0;top:0;width:30px;height:30px;pointer-events:none;z-index:100;will-change:transform,opacity}

/* tile que muestra la cara y queda como hueco cuando la foto vuela */
.ct-b.has-face{padding:0;background:#15292E}
.ct-b.has-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;filter:saturate(.92) contrast(1.04)}
.ct.is-hole{cursor:default;outline:1px dashed rgba(244,235,221,.4);outline-offset:-1px}
.ct.is-hole .ct-in{visibility:hidden}
.face-fly{position:absolute;z-index:60;overflow:hidden;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.face-fly img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%;filter:saturate(.92) contrast(1.04)}

/* barra del QR: fija para que escondida no sume scroll al final; aparece después del hero */
.ready .qbar{position:fixed;left:0;right:0;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom))}
.ready .qbar{transition:translate .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ready .qbar:not(.is-shown){translate:0 140%;opacity:0;pointer-events:none}

@media (prefers-reduced-motion: no-preference){
  /* intro del hero */
  /* el titular nunca arranca invisible: solo se desplaza */
  .js .who{animation:nudge .8s cubic-bezier(.2,.8,.2,1) both}
  .js .phrase{animation:nudge .9s cubic-bezier(.2,.8,.2,1) .05s both}
  .js .hero-lede{animation:rise .7s cubic-bezier(.2,.8,.2,1) .25s both}
  .js .hero-ctas{animation:rise .7s cubic-bezier(.2,.8,.2,1) .35s both}
  .nav-links a.is-active .nl-ring .draw{stroke-dasharray:var(--da,1 2);stroke-dashoffset:var(--dl,1);animation:draw .5s cubic-bezier(.6,0,.2,1) forwards}
  @keyframes nudge{from{translate:0 14px}}

  /* foto entre paréntesis: respaldo por si el JS no corre */
  .js .pg-photo{animation:pgOpen 1.1s cubic-bezier(.75,0,.2,1) 2.6s both}
  .js .pg-photo img{animation:pgImg 1.5s cubic-bezier(.2,.8,.2,1) 2.6s both}
  /* sin vuelo (tile fuera de pantalla): se abre enseguida */
  .js .pg.pg-quick .pg-photo{animation:pgOpenB 1.2s cubic-bezier(.75,0,.2,1) .3s both}
  .js .pg.pg-quick .pg-photo img{animation:pgImgB 1.6s cubic-bezier(.2,.8,.2,1) .3s both}
  .js .pg.pg-quick ~ .hand-u .draw{animation-delay:1.3s}
  /* con vuelo: el hueco se abre mientras la cara llega desde la tarjeta */
  .js .pg.pg-fly .pg-photo{animation:pgOpenB .75s cubic-bezier(.7,0,.2,1) both}
  .js .pg.pg-fly .pg-photo img{animation:none;visibility:hidden}
  .js .pg.pg-fly.pg-landed .pg-photo img{visibility:visible}
  .js .hand-u .draw{stroke-dasharray:var(--da,1 2);stroke-dashoffset:var(--dl,1);animation:draw 1.1s cubic-bezier(.6,0,.2,1) 2.5s forwards}
  .js .hero-tiles .ct{animation:deal .55s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(.5s + var(--i,0) * 45ms)}
  .js .nav-island{animation:navIn .7s cubic-bezier(.2,.8,.2,1) both}

  @keyframes rise{from{opacity:0;translate:0 26px}}
  @keyframes pgOpen{from{width:0;margin:0}}
  @keyframes pgOpenB{from{width:0;margin:0}}
  @keyframes pgImg{from{scale:1.5}}
  @keyframes pgImgB{from{scale:1.5}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes deal{from{opacity:0;scale:.3;rotate:-30deg}}
  @keyframes navIn{from{opacity:0;translate:0 -20px}}

  /* aparición al hacer scroll */
  .ready [data-reveal]{opacity:0;translate:0 30px;transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
  .ready [data-reveal].in{opacity:1;translate:0 0}

  /* libro contable: las formas caen en orden */
  .ready .tiles .tile{transition:opacity .5s ease,translate .7s cubic-bezier(.2,.9,.3,1.3)}
  .ready .ledger:not(.in) .tile{opacity:0;translate:0 -18px}
  .ready .ledger.in .tile:nth-child(n){transition-delay:calc(.35s + var(--ti,0) * 60ms)}

  /* el hilo: el punto aparece y las fotos caen cuando la línea llega */
  .ready .th-mask{transition:stroke-dashoffset .12s linear}
  .ready .th-item::before{scale:0;transition:scale .5s cubic-bezier(.2,.9,.3,1.7)}
  .ready .th-item.is-reached::before{scale:1}
  .ready .th-item .ph{opacity:0;translate:0 -80px;scale:1.12;transition:opacity .5s ease,translate .95s cubic-bezier(.2,.9,.3,1.15),scale .95s cubic-bezier(.2,.9,.3,1.15)}
  .ready .th-item.is-reached .ph{opacity:1;translate:0 0;scale:1}
  .ready .th-item.is-reached .ph + .ph{transition-delay:.18s}

  /* mapa: la ruta sigue al scroll, el avión viaja y aparecen los pins */
  .ready .map .route-mask{transition:stroke-dashoffset .12s linear}
  .ready .map [data-at]{opacity:0;scale:.7;transition:opacity .35s ease,scale .5s cubic-bezier(.2,.9,.3,1.5)}
  .ready .map [data-at].on{opacity:1;scale:1}
  .ready .map .map-plane{opacity:0;transition:opacity .25s}
  .ready .map .map-plane.on{opacity:1}
  .ready .map .map-peek{opacity:0;translate:0 26px;scale:.55;rotate:-16deg;transition:opacity .3s ease,translate .6s cubic-bezier(.2,.9,.3,1.3),scale .6s cubic-bezier(.2,.9,.3,1.3),rotate .6s cubic-bezier(.2,.9,.3,1.3)}
  .ready .map .map-peek.on{opacity:1;translate:0 0;scale:1;rotate:0deg}

  /* stickers que se despegan cuando la ruta llega a Antalya */
  .ready .stk{opacity:0;translate:0 -50px;scale:.6;rotate:-14deg;transition:opacity .3s ease,translate .8s cubic-bezier(.2,.9,.3,1.35),scale .8s cubic-bezier(.2,.9,.3,1.35),rotate .8s cubic-bezier(.2,.9,.3,1.35)}
  .ready .stks.peel .stk{opacity:1;translate:0 0;scale:1;rotate:0deg}
  .ready .stks.peel .stk:nth-child(2){transition-delay:.12s}
  .ready .stks.peel .stk:nth-child(3){transition-delay:.24s}
  .ready .stks.peel .stk:nth-child(4){transition-delay:.36s}

  /* trazos a mano que se dibujan */
  .ready .cal-ring .draw,.ready .hand-o .draw{stroke-dasharray:var(--da,1 2);transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) .4s}
  .ready .cal:not(.in) .cal-ring .draw,.ready .hand-o:not(.in) .draw{stroke-dashoffset:var(--dl,1)}

  /* recortes que caen y se apilan al final */
  .ready .pile:not(.in) .pc{opacity:0}
  .ready .pile.in .pc{animation:fall 1.25s var(--d,0s) both}
  .ready .pile.in .pc.bump{animation:bump .55s cubic-bezier(.2,.9,.3,1.4)}
  @keyframes fall{
    0%{opacity:1;translate:0 -520px;rotate:-55deg;animation-timing-function:cubic-bezier(.55,0,1,.45)}
    58%{translate:0 0;rotate:5deg;animation-timing-function:cubic-bezier(0,.55,.45,1)}
    72%{translate:0 -30px;rotate:-2deg;animation-timing-function:cubic-bezier(.55,0,1,.45)}
    84%{translate:0 0;rotate:1deg;animation-timing-function:cubic-bezier(0,.55,.45,1)}
    92%{translate:0 -7px;animation-timing-function:cubic-bezier(.55,0,1,.45)}
    100%{opacity:1;translate:0 0;rotate:0deg}
  }
  @keyframes bump{35%{translate:0 -26px;rotate:9deg}}

  /* tiles y portadas */
  .tile.pop .cut{animation:pop .5s cubic-bezier(.2,.9,.3,1.6)}
  @keyframes pop{30%{scale:.82}100%{scale:1}}
  .caption.swap{animation:swap .45s cubic-bezier(.2,.8,.2,1)}
  @keyframes swap{from{opacity:.15;translate:0 10px}}
  .hero-pattern g{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ct-in{transition:none}
}