/* 109 — Signature « or vivant » des CTA stratégiques (V1.17.1 RC3).
   Composant OPT-IN : rien ne s'applique sans la classe cg-gold-cta.
   Chargé uniquement par l'accueil et la page off-market (link direct,
   volontairement hors du manifeste main.css pour cette release).
   CSS pur : toutes les animations autonomes vivent sur les pseudo-éléments —
   jamais sur le lien lui-même (l'animation d'entrée `up` des héros utilise
   la propriété animation du lien et ne doit pas être écrasée).
   Hiérarchie : --beacon (reflet autonome lent, 1 seul par page),
   --reveal (un seul passage à l'apparition via .reveal.in, puis hover/focus),
   tout le reste du site reste calme. */

/* ---------- Socle métallique statique ---------- */
.cg-gold-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#0a0a0d;
  /* RC3c : la MATIÈRE (liquid glass or translucide) est entièrement portée
     par le module 110 — la signature n'ajoute ici que le reflet et le
     contour vivant, pour un rendu identique à toutes les pilules du site. */
}

/* Contour vivant : anneau intérieur porté par ::before, sous le texte. */
.cg-gold-cta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  box-shadow:inset 0 0 0 1px rgba(255,224,140,.4);
  opacity:.3;
}

/* Reflet : bande diagonale étroite déplacée par transform, sous le texte
   (z-index négatif dans le contexte isolé : au-dessus du fond, sous les lettres). */
.cg-gold-cta::after{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:0;
  width:36%;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,250,235,0) 22%,
    rgba(255,250,235,.5) 46%,
    rgba(255,255,250,.72) 52%,
    rgba(255,250,235,.5) 58%,
    transparent 80%);
  transform:translateX(-170%) skewX(-18deg);
}

/* ---------- Niveau A · beacon : reflet bref, longue période calme ----------
   Cycle 8.6 s : départ différé après les animations d'entrée du héros,
   traversée ≈ 1.05 s (12 % du cycle), repos ≈ 7.5 s. */
@keyframes cgGoldSheenCycle{
  0%{transform:translateX(-170%) skewX(-18deg)}
  12%{transform:translateX(440%) skewX(-18deg)}
  100%{transform:translateX(440%) skewX(-18deg)}
}
@keyframes cgGoldRingBreath{
  0%,100%{opacity:.35}
  50%{opacity:.6}
}
.cg-gold-cta--beacon::after{
  animation:cgGoldSheenCycle 8.6s linear 2.7s infinite;
}
.cg-gold-cta--beacon::before{
  animation:cgGoldRingBreath 8.6s ease-in-out 2.7s infinite;
}

/* ---------- Niveau B · reveal : un seul passage à l'apparition ----------
   Déclenché par le mécanisme .reveal.in existant (aucun JavaScript nouveau). */
@keyframes cgGoldSheenOnce{
  from{transform:translateX(-170%) skewX(-18deg)}
  to{transform:translateX(440%) skewX(-18deg)}
}
.reveal.in .cg-gold-cta--reveal::after,
.cg-gold-cta--reveal.reveal.in::after{
  animation:cgGoldSheenOnce 1.1s cubic-bezier(.4,0,.2,1) .45s 1 both;
}

/* ---------- Interactions : rejouables au hover et au focus clavier ---------- */
@media(hover:hover) and (pointer:fine){
  /* RC3c : l'ombre du survol est celle du matériau glass (module 110) —
     la signature n'ajoute au survol que le reflet rejoué. */
  .cg-gold-cta:hover::after{
    animation:cgGoldSheenOnce .8s cubic-bezier(.4,0,.2,1) 0s 1 both;
  }
}
.cg-gold-cta:focus-visible{
  outline:2px solid #ffedb4;
  outline-offset:3px;
}
.cg-gold-cta:focus-visible::after{
  animation:cgGoldSheenOnce .9s cubic-bezier(.4,0,.2,1) 0s 1 both;
}
/* Toucher : enfoncement physique aligné sur le matériau liquid glass
   (module 110) — la pilule descend, l'ombre se comprime, la lumière bascule. */
.cg-gold-cta:active{
  transform:translateY(2px) scale(.97)!important;
  transition:transform .09s ease,box-shadow .09s ease;
  box-shadow:
    0 3px 10px rgba(0,0,0,.3),
    0 0 0 1px rgba(176,128,32,.5),
    inset 0 3px 8px rgba(96,66,12,.42),
    inset 0 1px 0 rgba(150,105,25,.5),
    inset 0 -1px 0 rgba(255,246,215,.28);
}

/* ---------- Mouvements réduits : métal statique, fonction intacte ---------- */
@media (prefers-reduced-motion:reduce){
  .cg-gold-cta::before,
  .cg-gold-cta::after,
  .reveal.in .cg-gold-cta--reveal::after,
  .cg-gold-cta--beacon::after,
  .cg-gold-cta--beacon::before,
  .cg-gold-cta:hover::after,
  .cg-gold-cta:focus-visible::after{
    animation:none!important;
  }
  .cg-gold-cta::after{transform:translateX(-170%) skewX(-18deg)}
  .cg-gold-cta:active{transform:none!important}
}

/* ---------- Contraste forcé : couleurs système, aucune dépendance au dégradé ---------- */
@media (forced-colors:active){
  .cg-gold-cta{
    background:ButtonFace;
    color:ButtonText;
    border:1px solid ButtonText;
    box-shadow:none;
  }
  .cg-gold-cta::before,
  .cg-gold-cta::after{display:none}
}