/* v22 — home-anywhere. « Your company. Wherever you are. »
   Double page de magazine : l'aquarelle occupe la page de gauche, le titre la page
   de droite. Tout est scopé à #anywhere. Chargé après les feuilles existantes. */

#anywhere.v22-anywhere {
  --v22-ease: cubic-bezier(.2, .7, .2, 1);
  /* Cadrage de l'aquarelle : agrandissement optique + point d'ancrage. */
  --v22-art-scale: 1.10;
  --v22-art-x: 1.5%;
  --v22-art-y: 0.5%;
  --v22-art-origin: 26% 96%;
  /* Amplitude de la parallaxe, jamais au-dessus de 12 px (brief §3). */
  --v22-par-art: 10px;
  --v22-par-copy: 4px;
}

/* ---------- Rythme vertical ---------- */
/* Le cadre suit exactement la hauteur que prend l'aquarelle en `contain`
   (56,28vw = largeur / 1,777). L'ancien `min-height: 640px` forçait une bande
   plus haute que la peinture entre 760 et 1140 px : le tableau flottait au
   milieu d'un grand vide. Le clamp garde un plancher de lecture confortable. */
#anywhere .story-frame {
  min-height: 0;
  height: clamp(430px, 56.28vw, 856px);
}

/* ---------- L'aquarelle ---------- */
/* Le webp a un fond à 253/255 : sur du blanc pur il dessinait un rectangle beige
   visible sur toute la bande. Les quatre fondus le dissolvent et donnent au
   tableau le bord humide d'une vraie aquarelle. */
#anywhere .story-art.v22-art {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 58%, transparent 83%),
    linear-gradient(to bottom, transparent 0, #000 21%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 58%, transparent 83%),
    linear-gradient(to bottom, transparent 0, #000 21%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

#anywhere .v22-art-parallax,
#anywhere .v22-art-rise {
  position: absolute;
  inset: 0;
}

#anywhere .v22-art-parallax {
  transform: translate3d(0, var(--v22-shift, 0px), 0);
}

#anywhere .story-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(var(--v22-art-x), var(--v22-art-y)) scale(var(--v22-art-scale));
  transform-origin: var(--v22-art-origin);
}

/* ---------- Titre ---------- */
#anywhere .story-content {
  transform: translate3d(0, var(--v22-shift-copy, 0px), 0);
}

#anywhere .story-copy {
  width: 43%;
  margin-left: 57%;
  /* Le bloc de titre se pose légèrement au-dessus du centre optique du cadre,
     à hauteur du regard du passager. */
  margin-top: -16px;
}

#anywhere h2 {
  font-size: clamp(2.6rem, 4.32vw, 4.2rem);
  line-height: 1.06;
  /* Interlettrage optique : plus le corps est gros, plus on resserre. */
  letter-spacing: -.045em;
  text-wrap: balance;
  hanging-punctuation: last;
}

#anywhere .v22-line {
  display: inline-block;
}

/* ---------- Entrée chorégraphiée : aquarelle → ligne 1 → ligne 2 ---------- */
.js #anywhere .v22-art-rise {
  opacity: 0;
  transform: scale(1.028);
  transition: opacity .7s var(--v22-ease), transform .9s var(--v22-ease);
}
.js #anywhere .v22-art-rise.is-visible {
  opacity: 1;
  transform: none;
}

.js #anywhere .v22-line {
  opacity: 0;
  will-change: opacity, transform;
  transform: translateY(14px);
  transition: opacity .52s var(--v22-ease), transform .52s var(--v22-ease);
  transition-delay: .12s;
}
.js #anywhere .v22-line.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.js #anywhere .v22-line-2 {
  transition-delay: .22s;
}

/* Le conteneur .reveal du titre ne porte plus d'animation : ce sont ses deux
   lignes qui entrent, décalées de 100 ms. */
.js #anywhere .story-copy {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .js #anywhere .v22-art-rise,
  .js #anywhere .v22-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #anywhere .v22-art-parallax,
  #anywhere .story-content {
    transform: none;
  }
}

/* ---------- Mobile 390 ---------- */
@media (max-width: 760px) {
  #anywhere.v22-anywhere {
    --v22-art-scale: 1;
    --v22-art-x: 0%;
    --v22-art-y: 0%;
    --v22-par-art: 6px;
    --v22-par-copy: 2px;
  }
  #anywhere .story-frame {
    min-height: 0;
    height: auto;
    padding-top: 56px;
    padding-bottom: 8px;
  }
  #anywhere .story-copy {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }
  #anywhere h2 {
    font-size: clamp(2.2rem, 8.8vw, 3.6rem);
    letter-spacing: -.04em;
    max-width: none;
  }
  /* Cadrage serré : on entre dans la peinture pour supprimer le vide au-dessus
     du passager et donner à la scène la même présence qu'en desktop. */
  #anywhere .story-art.v22-art {
    position: relative;
    width: 100%;
    height: min(78.5vw, 440px);
    margin-top: 16px;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 4%, #000 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }
  #anywhere .story-art img {
    position: absolute;
    width: min(196vw, 1120px);
    height: auto;
    max-width: none;
    left: calc(50% - min(55.2vw, 315px));
    top: max(-26.6vw, -186px);
    object-fit: contain;
  }
}