/* ==========================================================================
   Metrohm Records · couche d'effets

   Quatre technologies récentes, toutes en dégradation douce : un navigateur
   qui ne les connaît pas affiche simplement le site tel qu'avant.

   1. View Transitions API  · fondu entre les pages, sans framework
   2. Scroll-driven animations · révélation au défilement, en CSS pur
   3. Spotlight au curseur  · variables CSS pilotées par le pointeur
   4. Bordures animées      · @property + conic-gradient

   Tout est désactivé si l'utilisateur préfère moins d'animations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRANSITIONS ENTRE PAGES
   Le navigateur photographie l'ancienne page, la nouvelle, et interpole.
   Deux déclarations suffisent, aucun JavaScript.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in .38s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes vt-out { to { opacity: 0; filter: blur(6px); transform: scale(.985); } }
@keyframes vt-in  { from { opacity: 0; filter: blur(10px); transform: scale(1.012); } }

/* la barre de navigation et le logo restent fixes pendant la transition */
.nav { view-transition-name: metrohm-nav; }
.brand { view-transition-name: metrohm-brand; }

/* --------------------------------------------------------------------------
   2. RÉVÉLATION AU DÉFILEMENT, SANS JAVASCRIPT
   animation-timeline: view() lie l'animation à la position de l'élément dans
   la fenêtre. Le navigateur la joue sur le thread de composition : zéro coût.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .fx-rise {
    animation: fx-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
  @keyframes fx-rise {
    from { opacity: 0; transform: translateY(34px); filter: blur(3px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* les titres de section se dessinent de gauche à droite */
  h2.sec {
    animation: fx-wipe linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes fx-wipe {
    from { clip-path: inset(0 100% 0 0); opacity: .4; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
  }

  /* la barre de progression de lecture en haut de page */
  .fx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, #fff, #8f8f8f);
    animation: fx-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes fx-progress { to { transform: scaleX(1); } }
}

/* --------------------------------------------------------------------------
   3. SPOTLIGHT AU CURSEUR
   js/fx.js écrit --mx et --my sur la carte survolée. Le halo suit le pointeur.
   -------------------------------------------------------------------------- */
.r-card, .core-grid a, blockquote.q, .faq-item, .card, .bc-facade {
  position: relative;
  isolation: isolate;
}
.r-card::before, .core-grid a::before, blockquote.q::before, .faq-item::before, .card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .09), transparent 62%);
  pointer-events: none;
}
.r-card:hover::before, .core-grid a:hover::before, blockquote.q:hover::before,
.faq-item:hover::before, .card:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   4. BORDURE ANIMÉE
   @property rend un angle interpolable, ce qui permet d'animer un dégradé
   conique. Réservé au bandeau de la dernière sortie et à la sortie en vedette.
   -------------------------------------------------------------------------- */
@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.fx-edge { position: relative; }
.fx-edge::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--fx-angle),
              transparent 0deg, rgba(255,255,255,.55) 40deg, transparent 110deg,
              transparent 180deg, rgba(255,255,255,.28) 220deg, transparent 300deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: fx-spin 7s linear infinite;
  opacity: .75;
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }

/* --------------------------------------------------------------------------
   TITRE DU HERO · aberration chromatique légère, comme un signal mal aligné
   -------------------------------------------------------------------------- */
.fx-rgb { position: relative; }
.fx-rgb::before, .fx-rgb::after {
  content: attr(data-txt);
  position: absolute; inset: 0; pointer-events: none;
  opacity: .38; mix-blend-mode: screen;
}
.fx-rgb::before { color: #00e5ff; transform: translate(-1.5px, 0); }
.fx-rgb::after  { color: #ff0040; transform: translate(1.5px, 0); }
.fx-rgb:hover::before { animation: fx-shift 1.4s steps(2) infinite; }
.fx-rgb:hover::after  { animation: fx-shift 1.1s steps(2) infinite reverse; }
@keyframes fx-shift {
  0%, 100% { transform: translate(-1.5px, 0); }
  50%      { transform: translate(2.5px, -1px); }
}

/* --------------------------------------------------------------------------
   BOUTONS MAGNÉTIQUES · le bouton se déplace légèrement vers le curseur
   -------------------------------------------------------------------------- */
.btn { will-change: transform; transition: transform .18s cubic-bezier(.2,.8,.3,1),
        background .25s, color .25s, border-color .25s; }

/* --------------------------------------------------------------------------
   RESPECT DES PRÉFÉRENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .fx-rise, h2.sec, .fx-progress { animation: none; opacity: 1; transform: none;
    clip-path: none; filter: none; }
  .fx-edge::after { animation: none; opacity: .3; }
  .fx-rgb::before, .fx-rgb::after { display: none; }
  .btn { transition: background .25s, color .25s, border-color .25s; }
}