/* Elementor Fluid Spacing Framework */

/* Self-hosted fonts */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}

:root {

  /* Padding */
  --pad-xxs: clamp(0.25rem, 0.10197rem + 0.65789vw, 0.5rem);
  --pad-xs:  clamp(0.5rem, 0.20395rem + 1.31579vw, 1rem);
  --pad-s:   clamp(1rem, 0.70395rem + 1.31579vw, 1.5rem);
  --pad-m:   clamp(1.5rem, 1.20395rem + 1.31579vw, 2rem);
  --pad-l:   clamp(2rem, 1.40789rem + 2.63158vw, 3rem);
  --pad-xl:  clamp(3rem, 2.40789rem + 2.63158vw, 4rem);

  /* Sections */
  --sec-inline:   clamp(1.25rem, 0.95395rem + 1.31579vw, 2.5rem);

  --sec-block-xs: clamp(1.25rem, 0.95395rem + 1.31579vw, 2.5rem);
  --sec-block-s:  clamp(1.875rem, 1.43092rem + 1.97368vw, 3.75rem);
  --sec-block-m:  clamp(2.5rem, 1.90789rem + 2.63158vw, 5rem);
  --sec-block-l:  clamp(3.125rem, 2.38487rem + 3.28947vw, 6.25rem);
  --sec-block-xl: clamp(3.75rem, 2.86184rem + 3.94737vw, 7.5rem);
}

/* Padding */

.pad-xxs { padding: var(--pad-xxs); }
.pad-xs  { padding: var(--pad-xs); }
.pad-s   { padding: var(--pad-s); }
.pad-m   { padding: var(--pad-m); }
.pad-l   { padding: var(--pad-l); }
.pad-xl  { padding: var(--pad-xl); }

/* Sections */

.sec-xs {
  padding-block: var(--sec-block-xs);
  padding-inline: var(--sec-inline);
}

.sec-s {
  padding-block: var(--sec-block-s);
  padding-inline: var(--sec-inline);
}

.sec-m {
  padding-block: var(--sec-block-m);
  padding-inline: var(--sec-inline);
}

.sec-l {
  padding-block: var(--sec-block-l);
  padding-inline: var(--sec-inline);
}

.sec-xl {
  padding-block: var(--sec-block-xl);
  padding-inline: var(--sec-inline);
}

/* Layout */

.sec-narrow {
  max-width: 62.5rem;
  margin-inline: auto;
}

.sec-narrow-xs {
  max-width: 45rem;
  margin-inline: auto;
}

/* Border radius */

:root {
  --rad-xs:   0.25rem;
  --rad-s:    0.5rem;
  --rad-m:    0.75rem;
  --rad-l:    1rem;
  --rad-xl:   1.5rem;
  --rad-2xl:  2rem;
  --rad-3xl:  3rem;
  --rad-full: 9999px;
}

.rad-xs   { border-radius: var(--rad-xs); }
.rad-s    { border-radius: var(--rad-s); }
.rad-m    { border-radius: var(--rad-m); }
.rad-l    { border-radius: var(--rad-l); }
.rad-xl   { border-radius: var(--rad-xl); }
.rad-2xl  { border-radius: var(--rad-2xl); }
.rad-3xl  { border-radius: var(--rad-3xl); }
.rad-full { border-radius: var(--rad-full); }

/* Text helpers */

/* Dual-heading highlight: wrap part of a heading in <span class="hl">…</span>.
   Inherits the heading's size/colour; only swaps to Instrument Serif italic. */
.hl {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

/* Border beam — add class "beam" (always on) or "beam-hover" (only on hover)
   to any element (pairs with card / rad-*). Colour follows the Primary global;
   override with --beam-color, --beam-size (thickness) or --beam-speed. */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.beam {
  position: relative;
}

.beam-hover {
  position: relative;
}

.beam::before,
.beam-hover::before,
.card-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--beam-size, 1.5px);
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    var(--beam-color, var(--e-global-color-primary, #f5f5f8)) 60deg,
    transparent 130deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beam-spin var(--beam-speed, 4s) linear infinite;
  pointer-events: none;
}

/* hover-only variants: hidden + paused until hover */
.beam-hover::before,
.card-grad::before {
  opacity: 0;
  transition: opacity 0.3s ease;
  animation-play-state: paused;
}

.beam-hover:hover::before,
.card-grad:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .beam::before,
  .beam-hover::before,
  .card-grad::before { animation: none; }
}

/* Mouse spotlight — add class "spotlight" to a container; a soft glow (Primary)
   follows the cursor on hover. Requires framework.js. Tweak per element with
   --spot-color, --spot-size (radius) or --spot-opacity. */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    var(--spot-size, 450px) circle at var(--spot-x, 50%) var(--spot-y, 50%),
    var(--spot-color, var(--e-global-color-primary, #f5f5f8)),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.spotlight:hover::after {
  opacity: var(--spot-opacity, 0.16);
}

.spotlight > * {
  position: relative;
  z-index: 1;
}

/* Starfield — add class "starfield" to a container; framework.js injects the
   canvas. Config via data-attrs: data-density, data-meteors, data-meteor-dir
   (ltr|rtl), data-speed. Content inside renders above the stars. */
.starfield {
  position: relative;
  overflow: hidden;
}

.starfield > canvas.uy-sf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

.starfield > *:not(canvas) {
  position: relative;
  z-index: 1;
}

/* Card gradient — glow from the Primary global at the top, fading to the page
   background at the bottom (uses your Elementor globals). Override per element
   with --card-grad-color (default: Primary) and --card-grad-strength (default 16%).
   Pair with rad-* for corners and beam-hover for a hover beam. */
.card-grad {
  position: relative;
  transition: background 0.4s ease, border-color 0.3s ease;
  border: var(--card-border-w, 1px) solid var(--card-border-color, var(--e-global-color-e299564, #262626));
  background: #0a0a0a; /* fallback for no color-mix support */
  background: linear-gradient(
    180deg,
    color-mix(
      in srgb,
      var(--card-grad-color, var(--e-global-color-primary, #f5f5f8)) var(--card-grad-strength, 16%),
      var(--e-global-color-257ad81, #0a0a0a)
    ) 0%,
    var(--e-global-color-257ad81, #0a0a0a) 72%
  );
}

/* Hover: gradient drops to the flat card colour AND the resting border goes
   transparent so only the border beam shows (no double edge). */
.card-grad:hover {
  background: var(--e-global-color-4501926, #0d0d0d);
  border-color: transparent;
}

/* Edge fade — fades content out at the edges (logo carousels / marquees /
   scrollers). Works on any element.
   --fade-offset : solid fully-hidden band from the edge BEFORE the gradient starts (default 10%)
   --fade-size   : length of the gradient transition (default 20%)
   Both accept % or px. */
.fade-x {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent var(--fade-offset, 10%),
    #000 calc(var(--fade-offset, 10%) + var(--fade-size, 20%)),
    #000 calc(100% - var(--fade-offset, 10%) - var(--fade-size, 20%)),
    transparent calc(100% - var(--fade-offset, 10%))
  );
          mask-image: linear-gradient(
    to right,
    transparent var(--fade-offset, 10%),
    #000 calc(var(--fade-offset, 10%) + var(--fade-size, 20%)),
    #000 calc(100% - var(--fade-offset, 10%) - var(--fade-size, 20%)),
    transparent calc(100% - var(--fade-offset, 10%))
  );
}

/* Scroll reveal — muted text that highlights word-by-word as it scrolls
   through the viewport. Add class "text-reveal" to any text/heading element.
   Requires GSAP + framework.js. Tune the muted start with --text-reveal-from
   or the per-element data-reveal-from attribute. */
.text-reveal {
  --text-reveal-from: 0.18;
}

/* Pre-dim the whole block ONLY when JS is present (html.js is set in the
   <head>), so there's no flash of full-opacity text before GSAP splits it.
   No-JS visitors never get html.js, so their text stays fully readable. */
html.js .text-reveal:not(.text-reveal-ready) {
  opacity: var(--text-reveal-from);
}

/* Once split, opacity lives on each unit; GSAP animates it to full. */
.text-reveal.text-reveal-ready {
  opacity: 1;
}

.text-reveal .reveal-unit {
  opacity: var(--text-reveal-from);
  will-change: opacity;
}

/* Reduced motion: no scrubbed reveal — show everything at full opacity. */
@media (prefers-reduced-motion: reduce) {
  html.js .text-reveal:not(.text-reveal-ready),
  .text-reveal .reveal-unit {
    opacity: 1;
  }
}

/* Global fixes & overrides */

/* Prevent horizontal scrolling. Uses overflow-x:clip (not hidden) so it does
   NOT create a scroll container and therefore does not break position:sticky. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Removes extra space below the very last paragraph in a text widget */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0px;
}

/* Removes the default extra space below the icon */
.elementor-icon-wrapper {
  line-height: 0;
}