/* ==========================================================================
   HaberTech section effects
   Add the class "ht-fx" to ANY Divi section (works best on dark backgrounds
   or background photos). ht-fx.js injects the layers; this file styles them.

   Layers, bottom to top:
     kegel  drifting gold light cones (CSS animation, mouse parallax)
     trace  animated circuit traces          -> opt-in:  ht-fx--trace
     dots   floating particles (canvas)
     shade  dark gradient for text legibility -> opt-in:  ht-fx--shade
     spot   gold spotlight following the cursor

   Modifiers (combine freely):
     ht-fx--trace      add circuit traces
     ht-fx--trace-soft dim the traces further (use together with ht-fx--trace)
     ht-fx--trace-full traces also behind the content (default: faded out behind the row)
     ht-fx--shade      add the dark top/bottom gradient
     ht-fx--no-kegel   remove light cones
     ht-fx--no-dots    remove particles
     ht-fx--no-spot    remove cursor spotlight
     ht-fx--no-parallax  light cones stay put, spotlight still follows the cursor
   Example: "ht-fx ht-fx--trace ht-fx--no-dots"

   Button shine (independent of ht-fx): add "ht-shine" to a Divi button module
   or to any link/button element. "ht-shine--gold" for outlined dark buttons.
   ========================================================================== */

.ht-fx {
    position: relative;
    isolation: isolate;               /* keep blend modes inside the section */
}
.ht-fx .et_pb_row,
.ht-fx > .et-pb-parallax-content {
    position: relative;
    z-index: 2;                       /* content above the effect layers */
}

.ht-fx__layers {
    position: absolute;
    inset: 0;
    z-index: 1;                       /* above Divi's parallax wrapper (z auto) and video (z -1), below the rows */
    overflow: hidden;                 /* clip the oversized cone layers here, not on the section */
    pointer-events: none;
}

/* --- light cones ------------------------------------------------------ */
.ht-fx__kegel {
    position: absolute;
    inset: 0;
    will-change: transform;           /* receives the subtle mouse parallax */
}
.ht-fx__kegel > i {
    position: absolute;
    inset: -25%;
    display: block;
    mix-blend-mode: screen;
    will-change: transform;
}
.ht-fx__kegel > i:nth-child(1) {
    background: radial-gradient(38% 44% at 22% 26%, rgba(245, 217, 160, .20), rgba(12, 12, 13, 0) 68%);
    animation: ht-kegel-a 34s ease-in-out infinite;
}
.ht-fx__kegel > i:nth-child(2) {
    background: radial-gradient(42% 38% at 76% 62%, rgba(232, 185, 106, .16), rgba(12, 12, 13, 0) 66%);
    animation: ht-kegel-b 27s ease-in-out infinite;
}
.ht-fx__kegel > i:nth-child(3) {
    inset: -30%;
    background: radial-gradient(30% 30% at 52% 8%, rgba(242, 239, 234, .10), rgba(12, 12, 13, 0) 70%);
    animation: ht-kegel-c 41s ease-in-out infinite;
}
.ht-fx--no-kegel .ht-fx__kegel { display: none; }

/* --- circuit traces (SVG file with built-in animation) ---------------- */
.ht-fx__trace {
    position: absolute;
    inset: 0;
    display: none;
    background: url("assets/ht-trace.svg") center / cover no-repeat;
}
.ht-fx--trace .ht-fx__trace { display: block; opacity: .7; }
.ht-fx--trace-soft .ht-fx__trace { opacity: .4; }   /* even quieter, e.g. behind large headlines */

/* --- particles (canvas, drawn by JS) ---------------------------------- */
.ht-fx__dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .55;
}
.ht-fx--no-dots .ht-fx__dots { display: none; }

/* --- dark shade for text legibility ----------------------------------- */
.ht-fx__shade {
    position: absolute;
    inset: 0;
    display: none;
    background: linear-gradient(180deg, rgba(12, 12, 13, .55) 0%, rgba(12, 12, 13, .12) 42%, rgba(12, 12, 13, .85) 100%);
}
.ht-fx--shade .ht-fx__shade { display: block; }

/* --- cursor spotlight (position set by JS) ---------------------------- */
.ht-fx__spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;        /* center the circle on the cursor */
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 217, 160, .16) 0%, rgba(232, 185, 106, .07) 38%, rgba(12, 12, 13, 0) 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .5s ease;
    will-change: transform;
}
.ht-fx--no-spot .ht-fx__spot { display: none; }

@keyframes ht-kegel-a {
    0%   { transform: translate3d(-7%, -5%, 0) scale(1); }
    50%  { transform: translate3d(9%, 7%, 0) scale(1.18); }
    100% { transform: translate3d(-7%, -5%, 0) scale(1); }
}
@keyframes ht-kegel-b {
    0%   { transform: translate3d(8%, 6%, 0) scale(1.12); }
    50%  { transform: translate3d(-9%, -4%, 0) scale(.94); }
    100% { transform: translate3d(8%, 6%, 0) scale(1.12); }
}
@keyframes ht-kegel-c {
    0%   { transform: translate3d(0, 4%, 0) scale(1.05) rotate(0deg); }
    50%  { transform: translate3d(-5%, -6%, 0) scale(1.25) rotate(6deg); }
    100% { transform: translate3d(0, 4%, 0) scale(1.05) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ht-fx__kegel > i { animation: none; }
    .ht-fx__dots,
    .ht-fx__spot { display: none; }
    .ht-fx__trace { background-image: url("assets/ht-trace-static.svg"); }
}

/* ==========================================================================
   Button shine: a soft highlight sweeps across every few seconds.
   Works on the Divi button module (class lands on the <a> or its wrapper)
   and on any other element with class "ht-shine".
   ========================================================================== */
.ht-shine:not(.et_pb_button_module_wrapper),
.ht-shine .et_pb_button {
    position: relative;
    overflow: hidden;
    isolation: isolate;               /* keeps the z-index:-1 sheen inside the button */
}
.ht-shine:not(.et_pb_button_module_wrapper)::before,
.ht-shine .et_pb_button::before {
    content: "";
    display: block;                   /* Divi hides .et_pb_button::before (reserved for the left icon) */
    opacity: 1;
    font-size: 0;
    line-height: 0;
    transition: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    margin: 0;
    width: 34%;
    height: auto;
    z-index: -1;                      /* above the button background, below its text */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: translateX(-140%);
    animation: ht-shine 4.2s linear infinite;
    pointer-events: none;
}
.ht-shine .et_pb_button::before { z-index: auto; }      /* nested case: sheen sits above the anchor text, same as the mockup */
.ht-shine--gold:not(.et_pb_button_module_wrapper)::before,
.ht-shine--gold .et_pb_button::before {
    background: linear-gradient(90deg, rgba(245, 217, 160, 0), rgba(245, 217, 160, .28), rgba(245, 217, 160, 0));
    animation-duration: 5s;
}
@keyframes ht-shine {
    0%   { transform: translateX(-140%); }
    100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
    .ht-shine:not(.et_pb_button_module_wrapper)::before,
    .ht-shine .et_pb_button::before { display: none; }
}