/* =========================================================
   NOVA Animations — Frontend Styles
   Entrance & Text animations are handled by animate.css 4.1.1.
   This file covers: Scroll effects, Hover effects,
   Page Transitions, and Custom Cursor.
   ========================================================= */

/* ── Scroll elements ────────────────────────────────────── */
[data-nova-scroll] {
  will-change: transform;
}
[data-nova-scroll='fade'],
[data-nova-scroll='scale'],
[data-nova-scroll='rotate'] {
  transition: transform 0.12s linear, opacity 0.12s linear;
}

/* ── Hover animations ───────────────────────────────────── */
.nova-hover-shadow:hover     { box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.nova-hover-glow:hover       { box-shadow: 0 0 24px 6px currentColor; }

.nova-hover-tilt {
  transform-style: preserve-3d;
  perspective: 600px;
}

.nova-hover-pulse:hover {
  animation: nova-pulse var(--nova-hover-dur, 300ms) var(--nova-hover-easing, ease-out) infinite alternate;
}

.nova-hover-wobble:hover {
  animation: nova-wobble calc(var(--nova-hover-dur, 300ms) * 2) linear;
}

.nova-hover-buzz:hover {
  animation: nova-buzz calc(var(--nova-hover-dur, 300ms) / 3) linear infinite;
}

.nova-hover-underline {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--nova-hover-dur, 300ms) var(--nova-hover-easing, ease-out);
}
.nova-hover-underline:hover {
  text-decoration-color: currentColor;
}

.nova-hover-shadow,
.nova-hover-glow {
  transition: box-shadow var(--nova-hover-dur, 300ms) var(--nova-hover-easing, ease-out);
}

/* ── Hover keyframes ────────────────────────────────────── */
@keyframes nova-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@keyframes nova-wobble {
  0%,100% { transform: none; }
  15%     { transform: translateX(-8px) rotate(-4deg); }
  30%     { transform: translateX(7px)  rotate(3deg); }
  45%     { transform: translateX(-6px) rotate(-3deg); }
  60%     { transform: translateX(5px)  rotate(2deg); }
  75%     { transform: translateX(-3px) rotate(-1deg); }
}

@keyframes nova-buzz {
  0%,100% { transform: none; }
  25%     { transform: translateX(3px); }
  75%     { transform: translateX(-3px); }
}

/* =========================================================
   Page Transitions — identical to Fancy Animations
   Anti-flash rules (html:not(.fb-transition-end)…)
   injected as inline <style> by PHP only when enabled.
   CSS vars (--fba-bg, --fba-time, …) output by PHP.
   ========================================================= */

.fba-transition {
  display:    flex;
  left:       0;
  overflow:   hidden;
  position:   fixed;
  top:        0;
  visibility: hidden;
  z-index:    999999999999999;
}

.fba-transition.fba-active { visibility: visible }

.fba-transition:before {
  align-items:     center;
  animation:       fba-load .8s linear infinite;
  color:           var(--fba-color);
  content:         var(--fba-content);
  display:         flex;
  font-size:       var(--fba-font-size);
  inset:           0;
  justify-content: center;
  line-height:     1.5em;
  opacity:         0;
  position:        absolute;
  text-align:      center;
  transition:      all .1s 0s;
  visibility:      hidden;
  z-index:         9;
}

.fba-active.fba-transition:before {
  opacity:    1;
  transition: all .1s calc(var(--fba-time) / 2);
  visibility: visible;
}

@keyframes fba-load {
  0%  { opacity: .2 }
  50% { opacity: .5 }
  to  { opacity: .2 }
}

/* ── Circle Elastic ─────────────────────────────────────── */

.fba-circle-elastic {
  align-items: flex-start;
  height:      100%;
  width:       100%;
}

.fba-circle-elastic.fba-active { align-items: flex-end }

.fba-circle-elastic .fba-transition__col {
  background:    var(--fba-bg);
  border-radius: 50% 50% 0 0;
  bottom:        auto;
  height:        0;
  left:          50%;
  min-width:     140%;
  position:      relative;
  top:           0;
  transform:     translate(-50%);
  transition:    all calc(var(--fba-time) / 1.4),
                 border-radius calc(var(--fba-time) / 1) calc(var(--fba-time) / 1.4);
  width:         140%;
}

@media (max-width: 780px) {
  .fba-circle-elastic .fba-transition__col {
    min-width: 200%;
    width:     200%;
  }
}

.fba-circle-elastic.fba-active .fba-transition__col {
  border-radius: 0 0 50% 50%;
  bottom:        -50%;
  height:        150%;
  top:           auto;
  transition:    all calc(var(--fba-time) / 1.5),
                 border-radius calc(var(--fba-time) / 2) calc(var(--fba-time) / 1.6);
}

/* ── Center Horizontal ──────────────────────────────────── */

.fba-tr-center-h {
  flex-direction:  row;
  height:          100%;
  justify-content: space-between;
  width:           100%;
}

.fba-tr-center-h .fba-transition__col {
  background: var(--fba-bg);
  height:     100%;
  transition: all calc(var(--fba-time) / 1.3);
  width:      0;
}

.fba-tr-center-h.fba-active .fba-transition__col { width: 50% }

/* ── Center Vertical ────────────────────────────────────── */

.fba-tr-center {
  flex-direction:  column;
  height:          100%;
  justify-content: space-between;
  width:           100%;
}

.fba-tr-center .fba-transition__col {
  background: var(--fba-bg);
  height:     0;
  transition: all calc(var(--fba-time) / 1);
  width:      100%;
}

.fba-tr-center.fba-active .fba-transition__col { height: 100% }

/* ── Cascade ────────────────────────────────────────────── */

.fba-tr-cascade {
  align-items: flex-end;
  height:      100%;
  width:       100%;
}

.fba-tr-cascade.fba-active { align-items: flex-start }

.fba-tr-cascade .fba-transition__col {
  background: var(--fba-bg);
  height:     0;
  transition: all calc(var(--fba-time) / 2);
  width:      25%;
}

.fba-tr-cascade.fba-active .fba-transition__col { height: 100% }

.fba-tr-cascade .fba-transition__col:nth-child(2) { transition-delay: calc(var(--fba-time) / 4) }
.fba-tr-cascade .fba-transition__col:nth-child(3) { transition-delay: calc(var(--fba-time) / 3) }
.fba-tr-cascade .fba-transition__col:nth-child(4) { transition-delay: calc(var(--fba-time) / 2.2) }

/* ── Slide ──────────────────────────────────────────────── */

.fba-tr-one {
  align-items:     center;
  background:      var(--fba-bg);
  height:          100%;
  justify-content: center;
  left:            50%;
  top:             50%;
  transform:       translate(-50%, -50%);
  transition:      .45s ease-out;
  width:           0;
}

.fba-tr-one.fba-active { width: 101% }

/* ── Circle Reveal ──────────────────────────────────────── */

.fba-tr-circle-reveal {
  align-items:     center;
  background:      var(--fba-bg);
  clip-path:       circle(0 at var(--click-x) var(--click-y));
  display:         flex;
  height:          100%;
  justify-content: center;
  transition:      all 0s;
  width:           100%;
}

.fba-tr-circle-reveal.fba-active {
  clip-path:  circle(150% at var(--click-x) var(--click-y));
  transition: all var(--fba-time);
}

/* ── Logo ───────────────────────────────────────────────── */

.fba-transition.has-logo:before { display: none }

.fba-transition__logo {
  animation:  fba-load .8s linear infinite;
  inset:      0;
  margin:     auto;
  max-height: 35vh;
  max-width:  35vw;
  object-fit: contain;
  opacity:    0;
  position:   absolute;
  transition: all .1s 0s;
  visibility: hidden;
  width:      100%;
  z-index:    10;
}

.fba-transition.fba-active .fba-transition__logo {
  opacity:    1;
  transition: all .1s calc(var(--fba-time) / 2);
  visibility: visible;
}