/* ==========================================================================
   Myrak — accueil, rangée de projets
   Même rendu que le site actuel (photo pleine carte, titre sur dégradé,
   pilule « Cliquez et glissez »), en plus fin :
   - dégradé plus doux, textes un peu plus lisibles
   - survol : la rangée continue, les autres cartes s'estompent,
     une flèche glisse à côté du titre, des points ronds suivent la galerie
   - la photo n'est plus désaturée au survol
   Défilement piloté par home.js.
   ========================================================================== */

.tk-ticker{ --tk-lemon: var(--interaction, #D7FF3F); }

.tk-ticker .ticker-card{
  border-radius: 12px;
  transition: opacity 450ms var(--ease);
}
.tk-ticker .ticker-card::after{
  inset: 30% 0 0;
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 22%) 45%, rgb(0 0 0 / 66%));
}
.tk-ticker .ticker-card img{ transition: transform 1100ms var(--ease), opacity 420ms ease; }
.tk-ticker .ticker-card:hover img{ filter: none; transform: scale(1.04); }

.tk-ticker .ticker-card > span{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.05rem;
}
.tk-ticker .ticker-card small{ font-size: .7rem; color: rgb(250 248 243 / 80%); }

/* a round lemon dot pops in next to the title */
.tk-arrow{
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--tk-lemon);
  opacity: 0;
  scale: 0;
  transition: opacity 200ms ease, scale 460ms cubic-bezier(.34, 1.56, .64, 1);
}
.tk-ticker .ticker-card:hover .tk-arrow,
.tk-ticker .ticker-card:focus-visible .tk-arrow{ opacity: 1; scale: 1; }

/* gallery progress : tiny round dots, bottom right, while the gallery plays */
.tk-dots{
  position: absolute; right: 14px; bottom: 17px;
  display: flex; gap: 4px;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.tk-dots b{ width: 5px; height: 5px; border-radius: 50%; background: rgb(250 248 243 / 45%); transition: background 250ms ease; }
.tk-dots b.is-on{ background: var(--tk-lemon); }
.tk-ticker .ticker-card.is-gallery-playing .tk-dots{ opacity: 1; }

/* focus on the one you look at */
@media (hover: hover){
  .tk-ticker .project-ticker-track:has(.ticker-card:hover) .ticker-card:not(:hover){ opacity: .55; }
}
.tk-ticker .ticker-card:focus-visible{ outline: 2px solid var(--primary, #0212EE); outline-offset: 3px; }

/* social docks step aside while the row passes under them */
body.home-page .social-dock{ transition: opacity 350ms ease, translate 450ms var(--ease); }
body.home-page.tk-docks-away .social-dock{ opacity: 0; translate: 0 12px; pointer-events: none; }

/* dragging */
.tk-ticker.is-dragging{ cursor: grabbing; }
.tk-ticker.is-dragging .ticker-card{ pointer-events: none; }

@media (max-width: 620px){
  .tk-arrow{ opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce){
  .tk-ticker{ overflow-x: auto; touch-action: auto; }
  .tk-ticker .project-ticker-track{ transform: none !important; }
  .tk-ticker .ticker-card, .tk-ticker .ticker-card *{ transition: none !important; }
}

/* Keep the section divider only above the legal footer row. */
.home-page .contact,
.home-page .site-footer-v2{ border-top: 0; }

/* Give the invitation half the section, including on tablet. */
.home-page .contact-intro{ grid-column: 1 / 7; min-width: 0; }
.home-page .contact h2{ font-size: clamp(2rem,4.3vw,5rem); }
@media (min-width: 621px) and (max-width: 900px){
  .home-page .contact-intro{ grid-column: 1 / 5; }
  .home-page .contact-path{ grid-column: 5 / 9; padding: 28px; }
}
@media (max-width: 620px){
  .home-page .contact h2{ font-size: clamp(2rem,8.8vw,3.4rem); }
}

/* ------------------------------------------------------------------ « Quelques questions simples » : living background */
.home-page .contact-path.has-living-bg::before{ display: none; } /* the lemon disc now lives in .cp-bg */
.home-page .contact-path .cp-bg{ position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.home-page .contact-path .cp-blob{ position: absolute; border-radius: 50%; will-change: transform; }
.home-page .contact-path .cp-blob--lemon{
  top: -76px; right: -58px; width: clamp(150px, 20vw, 250px); aspect-ratio: 1;
  background: var(--interaction, #D7FF3F); opacity: .24;
}
.home-page .contact-path .cp-blob--blue{
  left: -14%; bottom: -46%; width: clamp(260px, 34vw, 460px); aspect-ratio: 1;
  background: radial-gradient(circle, rgb(2 18 238 / 16%), rgb(2 18 238 / 0%) 68%);
}
/* the studio's dot grid, revealed around the pointer */
.home-page .contact-path .cp-dots{
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgb(2 18 238 / 30%) 1.1px, transparent 1.5px) 0 0 / 18px 18px;
  -webkit-mask: radial-gradient(210px circle at var(--cp-x, 75%) var(--cp-y, 30%), #000, transparent 72%);
          mask: radial-gradient(210px circle at var(--cp-x, 75%) var(--cp-y, 30%), #000, transparent 72%);
  opacity: 0; transition: opacity 500ms ease;
}
.home-page .contact-path:hover .cp-dots{ opacity: 1; }
@media (prefers-reduced-motion: no-preference){
  .home-page .contact-path .cp-blob--lemon{ animation: cp-drift-lemon 22s ease-in-out infinite alternate paused; }
  .home-page .contact-path .cp-blob--blue{ animation: cp-drift-blue 28s ease-in-out infinite alternate paused; }
  .home-page .contact-path.is-live .cp-blob{ animation-play-state: running; }
}
@keyframes cp-drift-lemon{
  0%{ transform: translate3d(0, 0, 0) scale(1); }
  35%{ transform: translate3d(-46px, 30px, 0) scale(1.08); }
  70%{ transform: translate3d(-18px, 62px, 0) scale(.94); }
  100%{ transform: translate3d(-64px, 14px, 0) scale(1.04); }
}
@keyframes cp-drift-blue{
  0%{ transform: translate3d(0, 0, 0) scale(1); }
  50%{ transform: translate3d(60px, -50px, 0) scale(1.12); }
  100%{ transform: translate3d(140px, -20px, 0) scale(.96); }
}

/* Keep the dot's idle halo out of the short, nine-tap logo surprise. */
.home-page .hero-dot-balloon.is-secret-running::before{ animation: none !important; opacity: 0; }