/* ==========================================================================
   Gizie (customer) — motion layer

   Loaded AFTER customer-v2.css. The motion is a clone of the Framer build of
   this page (only-spots-709172.framer.app): the same effects, on the same
   elements, with the same spring settings. customer-v2.js drives everything
   that is timed or scroll-linked; this file holds the states it starts from
   and the hover / tap transitions.

   Framer's springs are given as (duration, bounce). The linear() easings
   below are those springs sampled over their settle time, so a CSS
   transition follows the same curve Framer's animation does. A browser
   without linear() falls back to the cubic-bezier declared before it.
   ========================================================================== */

:root {
  /* spring(duration 0.4s, bounce 0.2): Framer's default component transition */
  --spring-a: cubic-bezier(0.25, 1.1, 0.4, 1);
  --spring-a: linear(0, 0.0247, 0.0869, 0.172, 0.2687, 0.3688, 0.4667, 0.5585, 0.6419, 0.7156, 0.7793, 0.8332, 0.8778, 0.914, 0.9428, 0.9652, 0.9821, 0.9945, 1.0033, 1.0091, 1.0127, 1.0146, 1.0152, 1.0149, 1.014, 1.0127, 1.0113, 1.0097, 1.0082, 1.0068, 1.0056, 1.0044, 1.0034, 1.0026, 1.0019, 1.0014, 1);
  --spring-a-ms: 379ms;

  /* spring(duration 1s, bounce 0.4): the steps card */
  --spring-b: cubic-bezier(0.3, 1.3, 0.4, 1);
  --spring-b: linear(0, 0.0358, 0.1265, 0.2501, 0.3889, 0.529, 0.6605, 0.7771, 0.8752, 0.9534, 1.0122, 1.0533, 1.0789, 1.0917, 1.0947, 1.0904, 1.0812, 1.0692, 1.0559, 1.0427, 1.0304, 1.0196, 1.0106, 1.0035, 0.9982, 0.9945, 0.9923, 0.9912, 0.991, 0.9915, 0.9925, 0.9936, 0.9949, 0.9961, 0.9973, 0.9983, 1);
  --spring-b-ms: 925ms;

  /* spring(duration 1s, bounce 0): the stories slider */
  --spring-c: cubic-bezier(0.2, 0.7, 0.3, 1);
  --spring-c: linear(0, 0.028, 0.0948, 0.1814, 0.2754, 0.3688, 0.4572, 0.538, 0.6101, 0.6733, 0.7279, 0.7745, 0.814, 0.8472, 0.8749, 0.8979, 0.9169, 0.9325, 0.9453, 0.9558, 0.9644, 0.9713, 0.9769, 0.9815, 0.9852, 0.9881, 0.9905, 0.9924, 0.9939, 0.9952, 0.9962, 0.9969, 0.9976, 0.9981, 0.9985, 0.9988, 1);
  --spring-c-ms: 1004ms;
}

/* ------------------------------------------------------ start states ---- */
/* What the hero looks like before customer-v2.js takes over, matching
   Framer's server-rendered first frame. Only with motion allowed: under
   reduced motion the script never runs the effects, so nothing may start
   hidden. */

@media (prefers-reduced-motion: no-preference) {
  .js .hero .nav { opacity: 0.001; scale: 1.5; }
  .js [data-fx="line"]:not(.fx-split) { opacity: 0.001; }
  .js .composer__bar { opacity: 0.001; scale: 0.5; }
  .js .hero__phone,
  .js .hcard { opacity: 0.001; transform: translateY(150px); }
  .js .hcard--pro { transform: translateY(300px); }
}

/* split text: the tokens animate, a hidden copy keeps the sentence whole for
   assistive tech */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-char { display: inline-block; }
.app__title .fx-word { width: auto; text-align: inherit; }

/* the composer while it grows from the search button into the full bar */
.composer__bar.is-staging { position: relative; justify-content: flex-end; }
.composer__bar.is-staging .composer__fields {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
@media (min-width: 1000px) {
  .composer__bar { justify-content: flex-end; }
}

/* ------------------------------------------------------------- loops ---- */
/* Framer's loop effect: a linear 2s tween to an offset and back, forever.
   It runs on `translate`, so it adds to whatever transform the script or the
   layout puts on the same element. */

@media (prefers-reduced-motion: no-preference) {
  .hcard--pro    { animation: fx-loop-a 2s linear infinite alternate; }
  .hcard--points { animation: fx-loop-b 2s linear infinite alternate; }
  .pcard--review { animation: fx-loop-a 2s linear infinite alternate; }
}
@keyframes fx-loop-a { from { translate: 0 0; } to { translate: 20px 21px; } }
@keyframes fx-loop-b { from { translate: 0 0; } to { translate: 30px -9px; } }

/* ------------------------------------------------------------ buttons --- */
/* Framer's Button: on hover the fill changes, the label rolls up and out
   while a copy rolls in from below, and the scan icon turns a quarter. The
   outlined variant only takes a faint fill. */

.btn {
  transition:
    background-color var(--spring-a-ms) var(--spring-a),
    border-color var(--spring-a-ms) var(--spring-a);
}
.btn__icon { transition: rotate var(--spring-a-ms) var(--spring-a); }
.roll { position: relative; display: block; height: 18px; line-height: 18px; }
.roll > span {
  display: block;
  transition:
    transform var(--spring-a-ms) var(--spring-a),
    opacity var(--spring-a-ms) var(--spring-a);
}
.roll > span + span { position: absolute; left: 0; right: 0; top: 40px; opacity: 0.5; }

@media (hover: hover) {
  .btn--primary:hover,
  .btn--dark:hover { background-color: rgb(250, 107, 60); }
  .btn--ghost:hover { background-color: rgba(255, 255, 255, 0.1); }
  .btn:hover .btn__icon { rotate: 90deg; }
  .btn:not(.btn--ghost):hover .roll > span { transform: translate3d(0, -40px, 0); opacity: 0.5; }
  .btn:not(.btn--ghost):hover .roll > span + span { opacity: 1; }
}

/* ------------------------------------------------------------ shelves --- */

.shelf__btn { transition: opacity var(--spring-a-ms) var(--spring-a); }
.shelf__btn:disabled { opacity: 0.38; }

/* ------------------------------------------------------------- steps ---- */
/* tapping a step makes it the white card, 200ms later, on a bouncy spring */

.js .step { cursor: pointer; transition: background-color var(--spring-b-ms) var(--spring-b); }
.step:not(.step--card) { background-color: rgba(255, 255, 255, 0); }

/* ------------------------------------------------------- story player --- */
/* Framer advances the slide and lights its bar together, each on a 1s spring
   that waits a second before it starts. The script sets that wait per move
   (none when an arrow is pressed). */

.carousel__track {
  transition: transform var(--spring-c-ms) var(--spring-c) var(--story-delay, 0ms);
}
.story__bars i::after,
.story__bars i.is-on::after {
  transform: none;
  opacity: 0;
  transition: opacity var(--spring-c-ms) var(--spring-c) var(--story-delay, 0ms);
}
.story__bars i.is-on::after { opacity: 1; }

/* ======================================================= reduced motion == */

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .story__bars i::after,
  .step,
  .btn,
  .btn__icon,
  .roll > span,
  .shelf__btn { transition: none !important; }
}

/* ============================================================== mobile == */

@media (max-width: 999.98px) {
  .chip, .field, .venue { -webkit-tap-highlight-color: transparent; }
}

/* lazily fetched art fades in rather than snapping into place */
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
.js img[loading="lazy"] { transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.js img[loading="lazy"].is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js img[loading="lazy"] { opacity: 1 !important; transition: none !important; }
}