/**
 * Broholmerselskabet – 3D layer (paired with fx3d.js)
 * Everything here is progressive enhancement: the classes are only added by
 * fx3d.js, and all motion is skipped for prefers-reduced-motion.
 */

/* ── Hero: particle canvas + layered depth ── */
.fx3d-canvas{position:absolute!important;inset:0;width:100%;height:100%;z-index:1!important;pointer-events:none;display:block;}
.fx3d-scene{transform-style:preserve-3d;will-change:transform;
  transform:perspective(1100px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) translate3d(0,var(--fx-sy,0px),0);}
.fx3d-scene>*{transform-style:preserve-3d;}
.fx3d-d1{transform:translateZ(18px);}
.fx3d-d2{transform:translateZ(36px);}
.fx3d-d3{transform:translateZ(54px);}
.fx3d-bg{will-change:transform;transform:scale(1.06) translate3d(var(--fx-bx,0px),var(--fx-by,0px),0);}

/* ── Tilt cards with light glare ── */
.fx3d-tilt{transform-style:preserve-3d;will-change:transform;position:relative;}
.fx3d-tilt.fx3d-tilting{transition:transform .08s linear,box-shadow .25s!important;}
.fx3d-tilt.fx3d-resting{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .4s!important;}
.fx3d-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;}
.fx3d-tilting .fx3d-glare{opacity:1;}
.gphoto.fx3d-tilt{overflow:hidden;}

/* ── Logo flips like a coin ── */
.brand,.logo{perspective:600px;}
.brand img,.logo-paw,.topbar-logo img{transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;}
.brand:hover img,.logo:hover .logo-paw,.topbar-logo:hover img{transform:rotateY(360deg);}

@media (prefers-reduced-motion:no-preference){
  /* ── 3D scroll rise ── */
  .fx3d-rise{opacity:0;transform:perspective(900px) rotateX(12deg) translate3d(0,34px,-40px);transform-origin:50% 100%;
    transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);}
  .fx3d-rise.in{opacity:1;transform:none;}
  /* sub pages: upgrade the existing fade-in to a 3D rise */
  .brs-reveal{transform:perspective(900px) rotateX(10deg) translate3d(0,26px,-30px);transform-origin:50% 100%;
    transition:opacity .75s ease,transform .85s cubic-bezier(.2,.8,.2,1);}
  .brs-reveal.in{transform:none;}

  /* ── Gallery unfolds in 3D while scrolling into view ── */
  .gal-grid.fx3d-fold{transform:perspective(1400px) rotateX(var(--fold,0deg)) scale(var(--fold-s,1));transform-origin:50% 0;will-change:transform;}
}

/* force-on switch for testing (?fx3d=1) – same rules regardless of reduced motion */
html.fx3d-force .fx3d-rise{opacity:0;transform:perspective(900px) rotateX(12deg) translate3d(0,34px,-40px);transform-origin:50% 100%;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);}
html.fx3d-force .fx3d-rise.in{opacity:1;transform:none;}
html.fx3d-force .gal-grid.fx3d-fold{transform:perspective(1400px) rotateX(var(--fold,0deg)) scale(var(--fold-s,1));transform-origin:50% 0;}

@media print{
  .fx3d-canvas,.fx3d-glare{display:none!important;}
  .fx3d-rise,.brs-reveal{opacity:1!important;transform:none!important;}
}