/* ===================================================================
   PFI Hero 3D — companion stylesheet for pfi-hero3d.js
   Progressive enhancement only: if WebGL/JS fails, .hero never gets
   .has-3d and the original flat SVG art (styled by pfi-motion.css)
   stays exactly as it was.
   =================================================================== */

.hero .hero3d{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}

.hero.has-3d .art{ opacity:0; pointer-events:none; transition:none; }
.hero.has-3d .gridbg, .hero.has-3d .bg{ opacity:0; }

/* radial scrim anchored to the text block so contrast holds regardless
   of which side the WebGL scene reads busiest */
.hero.has-3d .wrap > div:first-child{ position:relative; z-index:2; }
.hero.has-3d .wrap > div:first-child::before{
  content:"";
  position:absolute;
  inset:-48px -80px -48px -340px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(62% 92% at 28% 50%, rgba(6,42,26,.88), rgba(6,42,26,.58) 52%, rgba(6,42,26,0) 84%);
}
html[dir=rtl] .hero.has-3d .wrap > div:first-child::before{
  inset:-48px -340px -48px -80px;
  background:radial-gradient(62% 92% at 72% 50%, rgba(6,42,26,.88), rgba(6,42,26,.58) 52%, rgba(6,42,26,0) 84%);
}

/* floating HTML tooltip (replaces the baked-in SVG text for crisp type) */
.hero3d-tip{
  position:absolute; z-index:2;
  top:24%; inset-inline-end:9%;
  background:rgba(180,149,92,.14);
  border:1px solid rgba(217,197,155,.35);
  padding:18px 22px;
  min-width:180px;
  opacity:0; transform:translateY(14px);
  transition:opacity .9s var(--pm-ease-out, ease), transform .9s var(--pm-ease-out, ease);
  pointer-events:none;
}
.hero3d-tip.pm-in{ opacity:1; transform:none; }
.hero3d-tip .k{ display:block; font:600 10px/1.4 var(--sans),sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold3,#D9C59B); margin-bottom:8px; }
.hero3d-tip strong{ display:block; font:400 30px/1 var(--serif),serif; color:#fff; margin-bottom:6px; font-weight:400; }
.hero3d-tip .d{ display:block; font:400 11px/1.4 var(--sans),sans-serif; color:var(--od-muted,#B9C2D6); }
html[dir=rtl] .hero3d-tip .k, html[dir=rtl] .hero3d-tip .d{ font-family:var(--ar); letter-spacing:0; text-transform:none; }

@media(max-width:900px){ .hero3d-tip{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .hero .hero3d{ display:none !important; }
}