/* ==========================================================================
   Grand Tour Adventure — capa de movimiento
   Se carga en todas las páginas, después de gt-base.css.

   Tres efectos, tomados de la idea de dribba.com y reescritos aquí:
     1. Aparición al hacer scroll  (desvanecido + subida)
     2. Deriva del resplandor dorado (la elipse ya existe en el Figma)
     3. Destello sobre los titulares con degradado

   Todo se anula con prefers-reduced-motion.
   ========================================================================== */

:root{
  --gt-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   1 · Aparición al hacer scroll
   El elemento parte oculto y sube 20px. gt-effects.js le pone .is-in cuando
   entra en pantalla. El retardo se controla con --gt-delay para escalonar
   grupos (las seis tarjetas, las entradas del menú…).

   OJO: se mueve con la propiedad `translate`, no con `transform`. Varios
   elementos revelables ya llevan su propio `transform` de maquetación —el
   skew de MORE INFO, el de los rótulos de tarjeta— y al terminar la
   aparición un `transform:none` se los comía y el botón salía recto.
   `translate` es una propiedad independiente: se compone con el skew en vez
   de sustituirlo.
   -------------------------------------------------------------------------- */
[data-gt-reveal]{
  opacity:0; translate:0 20px;
  transition:opacity .7s var(--gt-ease), translate .7s var(--gt-ease);
  transition-delay:var(--gt-delay, 0ms);
}
[data-gt-reveal].is-in{ opacity:1; translate:none; }

/* Sin JS no se puede quedar todo invisible */
.no-js [data-gt-reveal]{ opacity:1; translate:none; }

/* --------------------------------------------------------------------------
   2 · Deriva del resplandor dorado
   La elipse 5763:1743 del Figma es estática; con una deriva lenta el bloque
   del buscador deja de parecer un pantallazo. Ciclo largo a propósito.
   -------------------------------------------------------------------------- */
@keyframes gt-drift{
  0%, 100%{ opacity:.75; transform:translate(-50%, -6%) scale(1); }
  50%     { opacity:1;   transform:translate(-46%,  4%) scale(1.14); }
}
.gt-finder__glow, .gt-glow{
  animation:gt-drift 18s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   3 · Destello sobre los titulares con degradado
   Los H2 ya pintan el texto con background-clip:text. Ampliando el fondo y
   moviendo su posición, la luz recorre las letras. Sólo al pasar por encima,
   para que no distraiga mientras se lee.
   -------------------------------------------------------------------------- */
@keyframes gt-shimmer{
  0%  { background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.gt-fill-gold, .gt-fill-blue, .gt-fill{
  background-size:200% 100%;
  background-position:0 0;
}
.gt-fill-gold:hover, .gt-fill-blue:hover, .gt-fill:hover,
.gt-shimmer-on .gt-fill-gold, .gt-shimmer-on .gt-fill-blue{
  animation:gt-shimmer 2.4s linear 1;
}

/* --------------------------------------------------------------------------
   4 · Salto a las secciones de la propia página
   Los chips de la primera banda son anclas (#live-tracking, #vehicles…). El
   salto va con desplazamiento suave y con algo de aire por arriba para que el
   titular de destino no quede pegado al borde de la pantalla. La barra
   superior es `absolute`, no fija, así que no hay que dejarle hueco.
   -------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
.gt-scope [id]{ scroll-margin-top:32px; }

/* --------------------------------------------------------------------------
   5 · Cursor de círculo
   Tomado de la idea de effect-labs y reescrito aquí. El círculo sustituye al
   puntero. Es sólo una circunferencia: el centro va hueco y nunca lleva
   relleno, así que no altera nada de lo que pasa por debajo. En negro sobre
   las zonas claras y en blanco sobre las negras (ver .is-claro), que es lo
   único que hace falta para que se vea siempre.

   Sin `mix-blend-mode`: sin relleno no hay nada que mezclar, y el trazo en
   negro o blanco puros sale igual con mezcla que sin ella —comprobado píxel
   a píxel—. La composición normal es más barata y no crea contexto de
   apilado, que con `position:fixed` da problemas.

   Sólo entra donde hay ratón de verdad (hover + puntero fino): en pantalla
   táctil no se pinta nada y el dedo manda. Y nunca se oculta el cursor sobre
   los campos del formulario, donde hace falta el cursor de texto para saber
   dónde se escribe.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .gt-cursor{
    position:fixed; left:0; top:0; z-index:9999;
    width:var(--gt-cursor-d, 40px); height:var(--gt-cursor-d, 40px);
    margin:calc(var(--gt-cursor-d, 40px) / -2) 0 0 calc(var(--gt-cursor-d, 40px) / -2);
    border:1px solid var(--gt-black); border-radius:50%;
    pointer-events:none;
    opacity:0;
    transition:width .3s var(--gt-ease), height .3s var(--gt-ease),
               margin .3s var(--gt-ease), opacity .25s ease,
               border-color .2s ease;
    will-change:transform;
  }
  .gt-cursor.is-in{ opacity:1; }
  /* Sobre algo que se puede pulsar sólo crece el aro. El centro se queda
     limpio a propósito: no lleva relleno, así que no altera en nada lo que
     hay debajo y el texto o la foto se siguen leyendo tal cual. */
  .gt-cursor.is-active{ --gt-cursor-d:72px; }

  /* Sobre las zonas negras, el mismo efecto en espejo: círculo blanco que
     aclara en vez de oscurecer. Sin esto, sobre el negro no se vería nada. */
  .gt-cursor.is-claro{
    border-color:var(--gt-white);
  }

  html.gt-cursor-on,
  html.gt-cursor-on .gt-scope a,
  html.gt-cursor-on .gt-scope button{ cursor:none; }
  /* en los campos sí hace falta ver dónde se escribe */
  html.gt-cursor-on .gt-control,
  html.gt-cursor-on .gt-field{ cursor:auto; }
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-gt-reveal]{ opacity:1; translate:none; transition:none; }
  .gt-finder__glow, .gt-glow{ animation:none; }
  .gt-fill-gold, .gt-fill-blue, .gt-fill{ animation:none; background-size:100% 100%; }
  .gt-cursor{ display:none; }
  html.gt-cursor-on, html.gt-cursor-on *{ cursor:auto; }
}