/* ============================================================
   DICRAFT — DARK AMBIENT BACKGROUND
   ============================================================ */

:root {
  --dc-bg: #05070A;
}


/* ============================================================
   DESKTOP / DEFAULT
   ============================================================ */

html,
body,
#allrecords {
  margin: 0;
  min-height: 100%;
  background-color: var(--dc-bg) !important;

  background-image:

    /* Main large blue ambient light — top/right */
radial-gradient(
  ellipse 1350px 1050px at 88% 10%,
  rgba(61, 84, 134, 0.50) 0%,
  rgba(40, 62, 103, 0.35) 27%,
  rgba(25, 42, 73, 0.20) 49%,
  rgba(14, 25, 45, 0.08) 67%,
  transparent 82%
),

    /* Secondary blue depth — right side */
    radial-gradient(
      ellipse 1050px 1350px at 110% 50%,
      rgba(31, 48, 82, 0.22) 0%,
      rgba(18, 31, 55, 0.13) 42%,
      transparent 75%
    ),

    /* Subtle central illumination */
    radial-gradient(
      ellipse 1100px 750px at 60% 38%,
      rgba(20, 27, 41, 0.13) 0%,
      rgba(12, 17, 27, 0.055) 47%,
      transparent 76%
    ),

    /* Very subtle lower-right depth */
    radial-gradient(
      ellipse 900px 700px at 92% 100%,
      rgba(20, 29, 48, 0.10) 0%,
      rgba(12, 19, 32, 0.04) 48%,
      transparent 76%
    ),

    /* Base graphite gradient */
    linear-gradient(
      115deg,
      #040609 0%,
      #070A0F 40%,
      #090C13 68%,
      #05070B 100%
    ) !important;

  background-repeat: no-repeat !important;

  background-attachment:
    fixed,
    fixed,
    fixed,
    fixed,
    fixed !important;

  position: relative;
}


/* ============================================================
   VIGNETTE / DEPTH
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 10000;

  background-image:

    /* Darker left edge */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.13) 18%,
      transparent 43%
    ),

    /* Subtle vertical vignette */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.13) 0%,
      transparent 18%,
      transparent 76%,
      rgba(0, 0, 0, 0.24) 100%
    );

  opacity: 1;
}


/* ============================================================
   MICRO GRAIN
   ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 10001;

  opacity: 0.022;
  mix-blend-mode: soft-light;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}


/* ============================================================
   TILDA TRANSPARENCY
   Makes the background continuous across the whole website
   ============================================================ */

.t-body,
.t-records,
.t-rec,
.t396,
.t396__artboard,
.t396__carrier {
  background-color: transparent !important;
  background-image: none !important;
}


/* ============================================================
   TILDA RENDERING STABILITY
   ============================================================ */

.t396__elem[data-elem-type="shape"] {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* ============================================================
   TABLET / MOBILE ≤ 768px
   ============================================================ */

@media (max-width: 768px) {

  html,
  body,
  #allrecords {

    background-image:

      /* Main mobile blue light */
      radial-gradient(
        ellipse 760px 680px at 108% 7%,
        rgba(55, 76, 122, 0.36) 0%,
        rgba(37, 56, 94, 0.24) 30%,
        rgba(23, 38, 66, 0.13) 52%,
        transparent 79%
      ),

      /* Right-side depth */
      radial-gradient(
        ellipse 650px 900px at 118% 52%,
        rgba(31, 48, 82, 0.17) 0%,
        rgba(18, 31, 55, 0.08) 44%,
        transparent 74%
      ),

      /* Central subtle lift */
      radial-gradient(
        ellipse 650px 650px at 58% 37%,
        rgba(19, 26, 40, 0.09) 0%,
        transparent 72%
      ),

      /* Base */
      linear-gradient(
        145deg,
        #040609 0%,
        #080B11 50%,
        #05070A 100%
      ) !important;

    /*
      Fixed backgrounds can behave poorly on mobile Safari,
      so mobile uses scroll.
    */
    background-attachment:
      scroll,
      scroll,
      scroll,
      scroll !important;
  }


  body::before {
    background-image:

      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.08) 22%,
        transparent 52%
      ),

      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.11) 0%,
        transparent 20%,
        transparent 78%,
        rgba(0, 0, 0, 0.21) 100%
      );
  }


  body::after {
    position: absolute;
    opacity: 0.018;
  }
}


/* ============================================================
   SMALL MOBILE ≤ 420px
   ============================================================ */

@media (max-width: 420px) {

  html,
  body,
  #allrecords {

    background-image:

      /* Main light */
      radial-gradient(
        ellipse 600px 560px at 116% 5%,
        rgba(55, 76, 122, 0.32) 0%,
        rgba(36, 55, 92, 0.20) 32%,
        rgba(22, 36, 62, 0.10) 53%,
        transparent 78%
      ),

      /* Secondary depth */
      radial-gradient(
        ellipse 520px 780px at 125% 55%,
        rgba(29, 46, 78, 0.14) 0%,
        rgba(17, 29, 51, 0.06) 45%,
        transparent 73%
      ),

      /* Base */
      linear-gradient(
        150deg,
        #040609 0%,
        #080A10 52%,
        #05070A 100%
      ) !important;

    background-attachment:
      scroll,
      scroll,
      scroll !important;
  }


  body::before {
    background-image:

      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.21) 0%,
        transparent 55%
      ),

      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.09) 0%,
        transparent 22%,
        transparent 80%,
        rgba(0, 0, 0, 0.18) 100%
      );
  }


  body::after {
    opacity: 0.014;
  }
}


/* ============================================================
   EXISTING SITE RULES
   ============================================================ */

.t-form-success-popup {
  display: none !important;
}


/* Base fade state */
.fade-element {
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;

  transform: translateY(10px);
}


/* Active fade state */
.fade-element.active {
  opacity: 1;
  transform: translateY(0);
}