/* .uhx-bg et .uhx-pattern : règles supprimées avec le balisage (11/08/2026).
   Voir le commentaire dans app/views-public.js — ils figeaient le rendu. */
/* ============================================================
   HERO FX — accueil (triptyque) + univers (showcase animé)
   Photo impactante sur fond couleur d'univers, animation signature.
   ============================================================ */

/* ---------- helpers ---------- */
@keyframes hfxFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes hfxFloat2  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes hfxKen     { 0%{transform:scale(1.04) translate(0,0)} 100%{transform:scale(1.14) translate(-2%,-3%)} }
@keyframes hfxSweep   { 0%{transform:translateX(-130%) skewX(-18deg)} 100%{transform:translateX(230%) skewX(-18deg)} }
@keyframes hfxRing    { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.06);opacity:.85} }
@keyframes hfxReveal  { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes hfxGlow    { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,5%) scale(1.12)} }
@keyframes hfxRise    { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   UNIVERS — showcase
   ============================================================ */
.uni-hero.uhx{
  min-height:clamp(560px,90vh,920px);
  padding:clamp(118px,15vh,168px) 0 clamp(56px,8vh,96px);
  display:flex;align-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, color-mix(in srgb,var(--accent) 55%,#fff 0%) 0%, transparent 52%),
    linear-gradient(150deg, var(--ubg) 0%, var(--accent) 60%, color-mix(in srgb,var(--ubg) 70%, #000) 100%);
  color:#fff;
}
.uhx-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.04fr 0.96fr;align-items:center;gap:clamp(28px,5vw,72px);
}
.uhx-copy .chip{margin-bottom:6px;}
.uhx-copy h1{font-size:clamp(46px,7.4vw,92px);line-height:.98;letter-spacing:-.035em;margin:14px 0 0;color:#fff;}
.uhx-copy .uni-hero-blurb{color:rgba(255,255,255,.85);max-width:50ch;margin:20px 0 24px;}
.uhx-segs{display:flex;flex-wrap:wrap;gap:8px;}
.uhx-segs .chip{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}

/* stage / carte photo */
.uhx-stage{position:relative;display:grid;place-items:center;min-height:clamp(360px,52vh,560px);}
.uhx-ring{
  position:absolute;width:min(118%,560px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);
  box-shadow:inset 0 0 120px color-mix(in srgb,var(--usoft) 40%,transparent);
  z-index:0;
}
.uhx-card{
  position:relative;z-index:1;margin:0;overflow:hidden;
  width:min(86%,440px);aspect-ratio:4/5;border-radius:26px;
  box-shadow:0 50px 110px -36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.06);
}
.uhx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);}
.uhx-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 68%, color-mix(in srgb,var(--accent) 22%,transparent) 100%);}
.uhx-sweep{
  position:absolute;top:-20%;left:0;width:42%;height:140%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-130%) skewX(-18deg);
}
.uhx-badge{
  position:absolute;z-index:3;left:calc(7% - 22px);bottom:8%;
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--accent);box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
}
.uhx-badge .icon{width:30px;height:30px;}

/* ============================================================
   UNIVERS — variante HERO CLAIR : fond blanc, monogramme BC géant
   teinté à la couleur de l'univers, puis passage au monde coloré.
   ============================================================ */
.uni-hero.uhx.uhx-light{
  background:
    radial-gradient(86% 70% at 84% 16%, color-mix(in srgb,var(--usoft) 72%,#fff) 0%, transparent 58%),
    linear-gradient(180deg,#fff 0%,#fff 40%,
      color-mix(in srgb,var(--worldbg) 14%,#fff) 58%,
      color-mix(in srgb,var(--worldbg) 42%,#fff) 74%,
      color-mix(in srgb,var(--worldbg) 74%,#fff) 87%,
      var(--worldbg) 97%);
  color:var(--ink);
}
.uhx-light .uhx-copy h1{color:var(--ink);}
.uhx-light .uhx-copy .uni-hero-blurb{color:var(--ink-2);}
.uhx-light .uhx-segs .chip{
  background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent);backdrop-filter:none;
}
.uhx-light .uhx-ring{border-color:color-mix(in srgb,var(--accent) 15%,transparent);}
.uhx-mono{
  position:absolute;z-index:0;top:clamp(88px,12vh,142px);left:clamp(8px,2.2vw,44px);
  width:min(60%,680px);aspect-ratio:380/230;pointer-events:none;opacity:.55;
  /* reflets métalliques teintés à la couleur de l'univers */
  background:linear-gradient(118deg,
    color-mix(in srgb,var(--accent) 26%,#ffffff) 0%,
    color-mix(in srgb,var(--accent) 92%,#000000) 16%,
    color-mix(in srgb,var(--accent) 18%,#ffffff) 33%,
    var(--accent) 46%,
    color-mix(in srgb,var(--accent) 10%,#ffffff) 55%,
    color-mix(in srgb,var(--accent) 96%,#000000) 74%,
    color-mix(in srgb,var(--accent) 40%,#ffffff) 100%);
  background-size:230% 230%;background-position:0% 50%;
  -webkit-mask:url(../assets/logo-bc-glyph-dark.png) left center/contain no-repeat;
          mask:url(../assets/logo-bc-glyph-dark.png) left center/contain no-repeat;
}
/* automobile : chrome / acier brossé (gunmetal) */
.uhx-automobile .uhx-mono{
  width:min(66%,760px);opacity:.6;
  background:linear-gradient(118deg,#eef1f4 0%,#9aa1a9 15%,#cdd2d6 30%,#5c636b 46%,#f2f4f6 56%,#828a92 74%,#c2c7cc 100%);
  background-size:230% 230%;
}
/* location : cuivre / rouille métallisé */
.loc-hero{position:relative;overflow:hidden;}
.loc-world .uhx-mono,.loc-hero .uhx-mono{
  opacity:.55;
  background:linear-gradient(118deg,#e7c3a3 0%,#8a4a24 15%,#d69a6e 31%,#5e2f16 46%,#f0d2b6 56%,#7c3f1e 74%,#c98a5c 100%);
  background-size:230% 230%;
}
/* équestre : vert métallisé (laiton patiné vert) */
.uhx-equestre .uhx-mono{
  opacity:.58;
  background:linear-gradient(118deg,#cfe3d6 0%,#20402c 15%,#7fae90 31%,#153123 46%,#e4f0e8 56%,#2f5a41 74%,#6fa382 100%);
  background-size:230% 230%;
}
/* textile : bleu acier métallisé */
.uhx-textile .uhx-mono{
  opacity:.55;
  background:linear-gradient(118deg,#bcd7e6 0%,#0d3750 15%,#5a97b6 31%,#092a3c 46%,#d5e7f1 56%,#155273 74%,#4d90b0 100%);
  background-size:230% 230%;
}
/* ⚠️ ANIMATIONS RETIRÉES — c'est ce qui figeait Automobile, Équestre et
   Textile (isolé par dichotomie le 11/08/2026 ; Polissage, la seule page
   d'univers sans ce monogramme, était la seule à s'ouvrir).

   Cet élément est masqué par une image (`mask: url(...png)`). Un élément
   masqué ne peut pas être composé par le GPU : la moindre animation
   dessus oblige le navigateur à repeindre, à chaque image, un dégradé de
   760 px de large à sept arrêts, puis à lui réappliquer le masque. Il y
   en avait trois qui tournaient en même temps, sans fin — plus une
   quatrième sur ::after.

   Le monogramme reste identique à l'arrêt. Il ne flotte ni ne miroite
   plus : c'est un filigrane à 55 % d'opacité derrière le titre, personne
   ne verra la différence. */

/* reflet brillant sur le monogramme BC — comme la photo, mais en sens inverse (droite → gauche) */
.uhx-mono::after{
  content:"";position:absolute;top:-20%;left:0;width:46%;height:140%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(230%) skewX(-18deg);
}
/* Reflet retiré pour la même raison : il tournait à l'intérieur de
   l'élément masqué, et forçait donc le même repeint à chaque image. */
@keyframes hfxSweepRev{
  0%   {transform:translateX(230%) skewX(-18deg);}
  26%  {transform:translateX(-170%) skewX(-18deg);}
  100% {transform:translateX(-170%) skewX(-18deg);}
}

/* Animation à l'apparition — les boucles infinies ont été retirées.
   ⚠️ C'est ce qui figeait Automobile, Équestre et Textile (isolé par
   dichotomie le 11/08/2026 : la scène photo seule suffisait à bloquer).

   hfxKen agrandissait la photo en boucle (scale 1.04 → 1.14) À L'INTÉRIEUR
   d'un cadre en overflow:hidden avec border-radius. Le navigateur ne peut
   pas composer ça sur le GPU : il doit redécouper et rematricer l'image
   arrondie à chaque image, indéfiniment. hfxRing faisait la même chose sur
   un cercle de 560 px portant une ombre interne de 120 px, et hfxFloat
   déplaçait le tout par-dessus.

   Les animations d'apparition sont conservées : elles se jouent une fois
   puis s'arrêtent, donc elles ne coûtent rien en régime établi. Le héros
   apparaît exactement pareil ; il ne respire simplement plus ensuite. */
@media (prefers-reduced-motion: no-preference){
  .uhx-card{animation:hfxReveal 1.05s cubic-bezier(.7,0,.2,1) both;}
  .uhx-sweep{animation:hfxSweep 1.3s ease-in-out 1s 1 forwards;}
}

@media(max-width:880px){
  .uni-hero.uhx{min-height:auto;}
  .uhx-grid{grid-template-columns:1fr;gap:30px;}
  /* mobile : le titre passe AVANT la photo, sinon la photo recouvre le monogramme BC */
  .uhx-stage{order:0;min-height:auto;}
  .uhx-card{width:min(74%,340px);}
  .uhx-ring{width:min(96%,420px);}
  .uhx-mono{top:clamp(84px,12vh,132px);left:clamp(10px,4vw,26px);width:min(80%,290px)!important;opacity:.3!important;}
}