/* OPDEL motion — homepage + product pages only (inc/motion.php).
   Everything here is decoration layered on top of finished content:
   no JS → content as before; reduced motion → the still, final state. */

/* ---------- Motion tokens (shared with the graphics layer) ---------- */
:root{
  --op-ease:cubic-bezier(.2,.7,.2,1);        /* the one curve: reveals, hovers, opens */
  --op-dur-reveal-s:600ms;                    /* reveal range 600–900ms */
  --op-dur-reveal:800ms;
  --op-dur-reveal-l:900ms;
  --op-stagger:80ms;                          /* sibling offset */
  --op-rise:22px;                             /* reveal travel */
  --op-dur-hover:380ms;
  --op-dur-open:460ms;                        /* accordion open/close */
  /* molten palette, hottest → coolest */
  --op-melt-1:#fff3d6;--op-melt-2:#f2b84b;--op-melt-3:#e07a1f;--op-melt-4:#8a2a0b;
}

/* ---------- 1. Living hero (post-migration markup only) ---------- */
.op-home .elementor-element-7527e23a .elementor-element-a0d1e01,
.op-home .elementor-element-7527e23a .elementor-element-a0d1e02,
.op-home .elementor-element-7527e23a .elementor-element-a0d1e03{animation:op-hero-in var(--op-dur-reveal-l) var(--op-ease) 120ms both}
.op-home .elementor-element-7527e23a .elementor-element-a0d1e02{animation-delay:calc(120ms + var(--op-stagger))}
.op-home .elementor-element-7527e23a .elementor-element-a0d1e03{animation-delay:calc(120ms + 2 * var(--op-stagger))}
@keyframes op-hero-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* the molten line replaces the "mountains" divider; :has() keeps it hidden from first paint */
.op-home .elementor-element-7527e23a:has(.elementor-element-a0d1e01)>.elementor-shape-bottom,
.op-hero-live>.elementor-shape-bottom{display:none}
.op-hero-live{--op-seam:72px;overflow:hidden;overflow:clip}
@media (max-width:767px){.op-hero-live{--op-seam:52px}}

/* photo drift: a canvas copy of the background, drifted inside the canvas by motion.js (canvas never counts as LCP) */
.op-kb{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.2s var(--op-ease)}
.op-kb.op-on{opacity:1}

/* glow layer: static CSS melt line first, WebGL + sparks fade in over it */
.op-fx{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none}
@media (max-width:767px){.op-fx{height:40%}}
.op-fx::before,.op-fx::after{content:"";position:absolute;transition:opacity 1.6s var(--op-ease)}
.op-fx::before{inset:0;background:
  radial-gradient(64% 4px at 50% calc(100% - var(--op-seam)),rgba(255,246,226,.95),rgba(242,184,75,.75) 60%,rgba(242,184,75,0)),
  radial-gradient(78% 46px at 50% calc(100% - var(--op-seam)),rgba(242,184,75,.38),rgba(224,122,31,.12) 60%,rgba(224,122,31,0)),
  linear-gradient(to top,rgba(5,13,28,.62),rgba(5,13,28,.5) var(--op-seam),rgba(5,13,28,0))}
/* the pool below the line: hottest in the middle, cooling toward the edges and the bottom */
.op-fx::after{left:0;right:0;bottom:0;height:var(--op-seam);background:linear-gradient(to top,rgba(70,22,8,.25),rgba(214,116,34,.8));
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 32%,#000 68%,rgba(0,0,0,.3));mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 32%,#000 68%,rgba(0,0,0,.3))}
.op-fx.op-gl::before,.op-fx.op-gl::after{opacity:0}
.op-fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s var(--op-ease)}
.op-fx canvas.op-on{opacity:1}

/* hero CTA: the white pill the migration specifies, with a gold glint */
.op-home .elementor-element-a0d1e03 .elementor-button,
.op-home .elementor-element-a0d1e03 .elementor-button:hover,
.op-home .elementor-element-a0d1e03 .elementor-button:focus-visible{background:#fff!important;color:var(--op-navy)!important}
.op-home .elementor-element-a0d1e03 .elementor-button{box-shadow:0 10px 28px -10px rgba(0,0,0,.55);
  transition:transform var(--op-dur-hover) var(--op-ease),box-shadow var(--op-dur-hover) var(--op-ease)}
.op-home .elementor-element-a0d1e03 .elementor-button:hover,
.op-home .elementor-element-a0d1e03 .elementor-button:focus-visible{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(242,184,75,.7),0 16px 36px -12px rgba(242,184,75,.6)}
.op-home .elementor-element-a0d1e03 .elementor-button-content-wrapper{position:relative;z-index:1}
.op-home .elementor-element-a0d1e03 .elementor-button::after{z-index:0;transition:none;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(242,184,75,0) 18%,rgba(242,184,75,.5) 40%,rgba(255,236,190,.95) 50%,rgba(242,184,75,.5) 60%,rgba(242,184,75,0) 82%)}
.op-home .elementor-element-a0d1e03 .elementor-button:hover::after,
.op-home .elementor-element-a0d1e03 .elementor-button:focus-visible::after{animation:op-glint 1s var(--op-ease) both}
@keyframes op-glint{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(130%) skewX(-18deg)}}

/* ---------- 2. Ambient canvases (product title band, key home headings) ---------- */
.op-amb-host{position:relative;isolation:isolate}
.op-amb{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity 1.4s var(--op-ease);
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.5) 34%,#000 64%,rgba(0,0,0,.7) 96%,transparent);
          mask-image:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.5) 34%,#000 64%,rgba(0,0,0,.7) 96%,transparent)}
.op-amb.op-on{opacity:var(--op-amb-o,.35)}
.op-amb--quiet{inset:-56px -6% 0;width:112%;height:calc(100% + 56px);--op-amb-o:.3;
  -webkit-mask-image:radial-gradient(48% 78% at 50% 58%,#000 25%,transparent 78%);
          mask-image:radial-gradient(48% 78% at 50% 58%,#000 25%,transparent 78%)}
@media (max-width:767px){
  .op-amb{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%,rgba(0,0,0,.8));mask-image:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%,rgba(0,0,0,.8))}
  .op-amb--quiet{-webkit-mask-image:radial-gradient(60% 80% at 50% 58%,#000 25%,transparent 80%);mask-image:radial-gradient(60% 80% at 50% 58%,#000 25%,transparent 80%)}
}

/* ---------- 3. Scroll reveals: hidden only after motion.js marks <html>.op-mo ---------- */
.op-mo .op-rv{opacity:0;transform:translate3d(0,var(--op-rise),0)}
.op-mo .op-rv--card{transform:translate3d(0,calc(var(--op-rise) * 1.3),0) scale(.97)}
.op-mo .op-rv.op-in{opacity:1;transform:none;
  transition:opacity var(--op-dur-reveal) var(--op-ease) var(--op-d,0ms),transform var(--op-dur-reveal-l) var(--op-ease) var(--op-d,0ms)}

/* product cards (tagged .op-lift by motion.js): lift, shadow, photo zoom; keyboard focus gets the same.
   Repeated class = enough weight to win over refresh.css's :has() tile hover and Elementor's "grow". */
.op-lift.op-lift{border-radius:var(--op-radius);transition:transform var(--op-dur-hover) var(--op-ease),box-shadow var(--op-dur-hover) var(--op-ease)}
.op-lift.op-lift.op-lift:hover,.op-lift.op-lift.op-lift:focus-within{transform:translate3d(0,-6px,0);
  box-shadow:0 2px 6px rgba(13,42,85,.06),0 24px 48px -16px rgba(13,42,85,.3)}
.op-lift .elementor-widget-image .elementor-widget-container,.op-lift .elementor-image-box-img{overflow:hidden;border-radius:var(--op-radius-sm)}
.op-lift.op-lift img{transition:transform 900ms var(--op-ease)}
.op-lift.op-lift:hover img,.op-lift.op-lift:focus-within img{transform:scale(1.06)}

/* FAQ: chevron turns with the open (the jQuery slide itself is re-timed in motion.js) */
.op-product-page .eael-adv-accordion .eael-accordion-list .eael-accordion-header .fa-toggle{transition:transform var(--op-dur-open) var(--op-ease)}
.op-product-page .eael-adv-accordion .eael-accordion-list .eael-accordion-header.active .fa-toggle{transform:rotate(180deg)}

/* ---------- Reduced motion: the still, finished state ---------- */
@media (prefers-reduced-motion:reduce){
  .op-home .elementor-element-7527e23a .elementor-element-a0d1e01,
  .op-home .elementor-element-7527e23a .elementor-element-a0d1e02,
  .op-home .elementor-element-7527e23a .elementor-element-a0d1e03{animation:none}
  .op-kb,.op-fx canvas,.op-amb{display:none}
  .op-mo .op-rv{opacity:1!important;transform:none!important}
  .op-home .elementor-element-a0d1e03 .elementor-button::after{display:none}
}
@media print{.op-kb,.op-fx,.op-amb{display:none}.op-mo .op-rv{opacity:1!important;transform:none!important}}