/* Home review motion. Place after the shared Home and navigation styles. */
@property --uck-profile-halo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 95deg;
}

header.site-header .home-profile-halo {
  --uck-profile-halo-angle: 95deg;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-block-size: 38px;
  padding: 0 11px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--uck-profile-halo-angle),
      #e4e5ef 0% 35%, #b2cbff 41%, #4668fa 47%, #9058f5 53%,
      #d43cea 59%, #ff9b7a 64%, #e4e5ef 71% 100%) border-box;
  color: #262c46;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

header.site-header .home-profile-halo:hover {
  color: #253ab2;
}

header.site-header .home-profile-halo:focus-visible {
  outline: 2px solid #314dd0;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  header.site-header .home-profile-halo {
    min-block-size: 34px;
    padding-inline: 8px;
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  header.site-header[data-v4-shell="header"] .header-inner { gap: 6px; }
  header.site-header[data-v4-shell="header"] .brand img { inline-size: 64px; }
  header.site-header[data-v4-shell="header"] .header-right { gap: 4px; }
  header.site-header[data-v4-shell="header"] .header-right > .sign-in { font-size: 11px; }
  header.site-header[data-v4-shell="header"] .header-right > .chrome-cta {
    min-inline-size: 64px;
    padding-inline: 6px;
    font-size: 11px;
  }
  header.site-header[data-v4-shell="header"] .mobile-trigger {
    flex-basis: 24px;
    min-inline-size: 24px;
  }
  header.site-header .home-profile-halo {
    padding-inline: 5px;
    font-size: 10px;
  }
}

@keyframes uck-home-profile-orbit {
  to { --uck-profile-halo-angle: 455deg; }
}

@keyframes uck-home-profile-orbit-interaction {
  to { --uck-profile-halo-angle: 455deg; }
}

/* NOTE D'INCIDENT — 12/11/2026 (SOCLE ; Kevin, sur la Home V4 EN à 1440 : « la bande Works in ne défile plus »).
   Cause : le train 4 (216864754, 10/11 17:28, servi par le train 5 f75fc8be) avait retiré d'ici le défilement en boucle
   (22 s, uck-home-names-scroll), sa copie des noms et ses règles, pour rendre la bande FIXE — c'était alors la lettre du
   design §10.5 (QA 27/10 22:32, EMIL 22:52). Les trains BW et BX du 12/11 n'y sont pour rien : la bande était déjà
   immobile avant eux (mesuré). Kevin tranche le 12/11 : la bande DÉFILE, en continu, et RIEN ne l'arrête au survol —
   ni elle ni aucune démo. §10.5 est amendé dans le même geste. Le défilement revient donc ici, sans sa règle de pause
   au survol ; seul le focus CLAVIER posé sur la bande la retient (le seul arrêt qui reste à qui ne peut pas la suivre),
   et « réduire les animations » la laisse immobile, comme le script absent. Banc : test/home-bande-defile.mjs. */
.works-band .names-track [data-home-motion-copy] { display: none; }

@keyframes uck-home-names-scroll {
  to { translate: -50% 0; }
}

/* Rangée immobile (« réduire les animations », ou script absent) : le fondu des deux bords de s18.css (fait pour un
   défilement) mangeait le « C » de ChatGPT et la fin de Google AI Studio. Plus de fondu à large écran ; sur téléphone,
   un seul fondu à droite qui dit « ça continue », et la rangée garde à sa fin la place de ce fondu pour que le dernier
   nom se lise entier une fois défilée. Quand la bande défile, elle reprend un fondu aux deux bords (plus bas). */
.s18-opening .works-band .names-window { mask-image: none; -webkit-mask-image: none; }
@media (max-width: 760px) {
  .s18-opening .works-band .names-window {
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .s18-opening .works-band .names-track ul { padding-inline-end: 28px; }
}

.home-motion-label {
  white-space: nowrap;
}

/* A small transparent extension keeps the hover stable along a lifted card's edge. */
main#top :is(.home-review-card, .home-review-catalogue .big-tool-card)::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  block-size: 6px;
}

main#top .home-review-catalogue .big-tool-card:is(:hover, :focus-visible) {
  transform: none;
}

[data-home-review-kevin] :is(#ux-situation-1, #ux-situation-2, #ux-situation-4) .home-review-kind {
  --home-kind-bg: #e4ee99;
  --home-kind-ink: #263153;
  --home-kind-glint: #6949a8;
  background: var(--home-kind-bg);
  color: var(--home-kind-ink);
}

[data-home-review-kevin] #ux-situation-2 .home-review-kind {
  --home-kind-bg: #4458ac;
  --home-kind-ink: #fcfcff;
  --home-kind-glint: #e4ee99;
}

[data-home-review-kevin] main#top > #tools .big-tool-card:is(#handoff, #merge, #ai-profile):is(:hover, :focus-visible) {
  background: #e4ee99;
  color: #263153;
}

[data-home-review-kevin] main#top > #tools .big-tool-card:is(#handoff, #merge, #ai-profile):is(:hover, :focus-visible) :is(h4, p, .card-arrow) {
  color: #263153;
}

[data-home-review-kevin] main#top > #tools .big-tool-card:is(#summarize, #memo, #export):is(:hover, :focus-visible) {
  background: #4458ac;
  color: #fcfcff;
}

[data-home-review-kevin] main#top > #tools .big-tool-card:is(#summarize, #memo, #export):is(:hover, :focus-visible) :is(h4, p, .card-arrow) {
  color: #fcfcff;
}

[data-home-review-kevin] main#top > #tools .big-tool-card:is(#summarize, #memo, #export):is(:hover, :focus-visible) .card-icon {
  background: #fcfcff;
  color: #4458ac;
}

@keyframes uck-home-label-glint {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: no-preference) {
  header.site-header .home-profile-halo {
    animation: uck-home-profile-orbit 4s linear;
  }

  header.site-header .home-profile-halo:is(:hover, :focus-visible) {
    animation-name: uck-home-profile-orbit-interaction;
  }

  /* La bande « Works in » défile (NOTE D'INCIDENT du 12/11, plus haut). Deux listes identiques bout à bout — l'originale
     et sa copie —, chacune au moins aussi large que la fenêtre ; la piste glisse d'une liste exactement (−50 %) puis
     recommence : aucun saut. `translate`, pas `transform` : how-tools.css fige `transform` et `animation` en !important.
     L'écart entre deux noms est le même à la jointure qu'ailleurs (demi-écart de chaque côté, répartition « around »). */
  .s18-opening .works-band .names-window[data-home-motion-ready] {
    container-type: inline-size;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 max(2%, 20px), #000 calc(100% - max(2%, 20px)), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 max(2%, 20px), #000 calc(100% - max(2%, 20px)), transparent);
  }

  .s18-opening .works-band .names-window[data-home-motion-ready] > .names-track {
    display: flex;
    gap: 0;
    inline-size: max-content;
    min-inline-size: 0;
    animation: uck-home-names-scroll 22s linear infinite !important;
  }

  .s18-opening .works-band .names-window[data-home-motion-ready] > .names-track > ul {
    display: flex;
    flex: 0 0 auto;
    justify-content: space-around;
    gap: clamp(26px, 3.4vw, 48px);
    inline-size: max-content;
    min-inline-size: 100cqw;
    box-sizing: border-box;
    padding-inline: calc(clamp(26px, 3.4vw, 48px) / 2);
  }

  /* Aucune règle :hover ici, et il n'en faut aucune (Kevin, 12/11). Le focus clavier seul retient la bande. */
  .s18-opening .works-band .names-window[data-home-motion-ready]:focus-visible > .names-track {
    animation-play-state: paused !important;
  }

  main#top .home-review-card,
  main#top .home-review-catalogue .big-tool-card,
  header.site-header #tools-menu .tool-link {
    transition: translate 170ms ease, background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
  }

  main#top .home-review-card:focus-visible,
  main#top .home-review-catalogue .big-tool-card:focus-visible,
  header.site-header #tools-menu .tool-link:focus-visible {
    translate: 0 -4px;
  }

  @media (hover: hover) {
    main#top .home-review-card:hover,
    main#top .home-review-catalogue .big-tool-card:hover,
    header.site-header #tools-menu .tool-link:hover {
      translate: 0 -4px;
    }
  }

  @supports (background-clip: text) {
    [data-home-review-kevin] :is(#ux-situation-1, #ux-situation-2, #ux-situation-4):is(:hover, :focus-visible) .home-motion-label-text {
      background: linear-gradient(100deg,
        var(--home-kind-ink) 20% 39%, var(--home-kind-glint) 49%,
        var(--home-kind-ink) 60%) 100% 50% / 250% 100%;
      background-clip: text;
      color: transparent;
      animation: uck-home-label-glint 850ms ease-out both;
    }
  }
}

@media (forced-colors: active) {
  header.site-header .home-profile-halo {
    border-color: ButtonText;
    color: ButtonText;
    animation: none;
  }

  [data-home-review-kevin] :is(#ux-situation-1, #ux-situation-2, #ux-situation-4):is(:hover, :focus-visible) .home-motion-label-text {
    color: LinkText;
    animation: none;
  }
}