/* =========================================================
   BACH Utility + Layout Styles
   Cleaned + grouped + consistent formatting
   ========================================================= */


/* =========================================================
   1) COLOR UTILITIES (Backgrounds + Text)
   ========================================================= */

/* Solid background helpers */
.bg_blue { background-color: var(--blue); }
.bg_silver { background-color: var(--silver); }
.bg_white { background-color: var(--white); }
.bg_white-darkedned { background-color: var(--white_darkened); } /* (typo preserved) */

/* Text color helpers */
.col_silver { color: var(--silver); }
.col_blue { color: var(--blue); }
.col_white { color: var(--white); }


/* =========================================================
   2) GRADIENT BACKGROUNDS (with blend overlays)
   NOTE: These pseudo-element overlays require the element
   to be positioned (e.g. position: relative;) for best results.
   ========================================================= */

   .bg_grad_silver {
    background: linear-gradient(to bottom, #4B5563 0%, #FFFFFF00 100%);
  }

  .bg_grad_silver::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.3); /* multiply “layer” */
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .bg_gradblue {
    background: linear-gradient(to right, #0D1F3Cbb 0%, #FFFFFF00 100%);
  }

  .bg_gradblue::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #00000088 0%, #FFFFFF00 50%);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .bg_gradblue_vert {
    /* vertical gradient: dark center, transparent edges */
    background: linear-gradient(
      to bottom,
      rgba(13, 31, 60, 0) 0%,
      #0D1F3C 50%,
      rgba(13, 31, 60, 0) 100%
    );
  }

  .bg_gradblue_vert::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #00000088 0%, #FFFFFF00 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .rounded
  {
   border-radius: var(--globalBorderRadius) !important;
   transition: border-radius 1s ease;
 }

 .rounded:hover
 {
   border-radius: 999px  !important;
 }

/* =========================================================
   3) GENERIC UTILITIES (Spacing / Visibility / Transform)
========================================================= */

.mrg-top { margin-top: 30px; }

.nodisplay { display: none; }

.Uppercase { text-transform: uppercase; }

.border_show { border: 1px solid black; }


  /* =========================================================
     4) OVERLAYS (Absolute fill helpers)
     Use on media elements (img/video) to cover parent.
     Parent should usually be position: relative;
     ========================================================= */

     .overlay,
     .overlay_back {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 100%;
      object-fit: cover; /* cover without distortion */
      transform: translate(-50%, -50%);
    }

    .overlay { z-index: 1; }
    .overlay_back { z-index: -1; }

    /* Soft-light gradient wash over the background overlay */
    .overlay_back::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        #9B9B9B 0%,
        #FFFFFF 49%,
        #9B9B9B 100%
      );
      mix-blend-mode: soft-light;
      pointer-events: none;
      opacity: 1;
      z-index: 1;
    }
/* =========================================================
   5) TEXT / BLEND EFFECTS
========================================================= */
.multiply_text {
  mix-blend-mode: multiply;
  opacity: 1;
  color: var(--silver);
  font-size: 180px;
}
/* =========================================================
   6) GLASS EFFECT (Backdrop blur card)
   ========================================================= */

   .glass {
    background: rgba(13, 31, 60, 0.45);
    backdrop-filter: blur(12px) saturate(100%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  /* Base: consistent behavior across elements */
  .bach-shadow{
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--shadow-ease), transform var(--shadow-ease);
    will-change: box-shadow, transform;
  }

  /* Optional sizes */
  .bach-shadow--sm{ box-shadow: var(--shadow-sm); }
  .bach-shadow--md{ box-shadow: var(--shadow-md); }
  .bach-shadow--lg{ box-shadow: var(--shadow-lg); }

  /* Optional: “lift” hover (kept subtle) */
  .bach-shadow--hover:hover{
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  /* Optional: add edge highlight for light surfaces */
  .bach-shadow--edge{
    box-shadow: var(--shadow-md), var(--shadow-edge);
  }
/* =========================================================
   7) BUTTONS
   ========================================================= */
   .toTop
   {
    width: 44px;
    height: 44px;
    right: 20px;
    bottom: 40px;
    z-index: 5;
    position: fixed;
    background-color: var(--blue) !important;
    display: flex;
   }


   .lrg_btn {
    position: relative;
    padding: 12px 22px;
    color: var(--white); /* fixed stray backslash */
    font-size: var(--button_size);
    background: rgba(75, 85, 99, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--globalBorderRadius);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: all 0.8s ease;
    overflow: hidden;
    text-transform: uppercase;
  }

  /* Soft liquid glow */
  .lrg_btn::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.10) 35%,
      rgba(255, 255, 255, 0.03) 60%,
      rgba(255, 255, 255, 0) 85%
    );
    opacity: 0.6;
    transform: translate(0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease;
  }

  .lrg_btn:hover::before {
    transform: translate(10px, 10px);
    opacity: 0.75;
  }

  .lrg_btn:hover {
    background: rgba(75, 85, 99, 0.8);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
    border: 0.5px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(80px);
    -webkit-backdrop-filter: blur(80px);
    border-radius: 999px;
  }

  .sml_btn {
    padding: 10px 18px;
    border-radius: var(--globalBorderRadius);
    transition: box-shadow 0.8s ease, transform 0.8s ease;
    text-transform: uppercase;
    font-size: var(--sml_button_size);
    letter-spacing: 0.12em;
    color: var(--white);
    border: 1px solid var(--silver-50);
    min-width: 100px;
  }

  .sml_btn:hover {
    box-shadow: 0px 0px 15px rgba(258, 258, 258, 0.1);
    transform:scale(1.05);
  }
/* =========================================================
   8) NAV / FOOTER / LINK GROUPS
   ========================================================= */

   .navitem {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--navbarheight);
    width: fit-content;
    padding: 0 15px;
    transition: color 0.5s ease;
    z-index: 5;
  }

  .navitem:hover {
    color: var(--light_blue) !important;
  }

  .navbarcontainer {
    width: calc(100% - 120px);
    height: var(--navbarheight);
    margin: 60px 0;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-content: space-between;
    padding: 0 30px;
    border-radius: var(--globalBorderRadius);
    z-index: 10;
  }

  .footer-container {
    width: 100vw;
    height: var(--navbarheight);
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    justify-self: center;
    z-index: 5;
  }

  .navbox {
    display: flex;
    height: inherit;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .links {
    width: auto;
    height: auto;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  .linksmobile {
    display: flex;
    flex-direction: column;
    width: 100vw;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100vh); /* X + Y together */
    transition:
    transform 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96),
    height 0.8s cubic-bezier(0.46, 0.03, 0.52, 0.96);
    align-items: center;
    justify-content: center;
    gap: 30px;
    z-index: 3;
    padding: 150px 30px;
  }
/* =========================================================
   9) LAYOUT SECTIONS
   ========================================================= */



   .break
   {
    width: 100%;
    height: 20px;
   }
   .middlestretch {
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  .section-normal {
    width: 100vw;
    height: auto; /* removing duplicate/contradicting height */
    z-index: 0;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section-fullwidth {
    width: 100vw;
    height: auto;
    z-index: 0;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    overflow: hidden;
  }

  .section-hero {
    width: 100%;
    height: 100vh;
    z-index: 0;
    padding: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    transform: translateX(0);
    transition: transform 0.4s ease;
  }

  .double_section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .section_half {
    width: 50%;
    height: 600px;
    display: flex;
  }



  /*Blocks*/

  .block_small
  {
    height: auto;
    aspect-ratio:1/1;
    width: 8%;
  }



  /* Image clipping container */
  .image-clip 
  {
    position: relative;
    overflow: hidden;
    justify-content: flex-end;
    align-items: stretch;
  }

  /* Image */
  .image-clip img {
    width: 65%;
    height: 100%;
    object-fit: cover;
    object-position: right top;
    display: block;
    mask-image: radial-gradient(circle at center, black 65%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 65%, transparent 100%);
  }

  /* Background video wrapper */
  .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(100% - 60px);
    width: calc(100% - 60px);
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    border-radius: var(--globalBorderRadius);
  }

  /* Content on top of bg-video */
  .video-overlay-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
    width: fit-content;
    height: fit-content;
    padding: 60px;
  }

  .about_meParagraph
  {
    overflow: hidden;
  }
/* =========================================================
   10) ICON SIZES
========================================================= */
.icon-sml { width: auto; }
.icon-medium { width: 120px; }
.icon-lrg { width: 150px; }
.icon-hero { width: 25%; }
/* =========================================================
   11) BREAKPOINTS (<=1022px)
   ========================================================= */

   @media (max-width: 1022px) {

    /* Text effects */
    .multiply_text { font-size: 100px; }

    /* Nav */
    .navitem { height: fit-content; }

       .toTop
   {
    display: none !important;
  }

    /* Image clip (mobile behavior) */
    .image-clip {
      width: 65%;
      justify-content: center;
      align-items: stretch;
    }

    .image-clip img {
      width: 50%;
      height: 100%;
      object-fit: cover;
      display: block;
      mask-image: radial-gradient(circle at center, black 95%, transparent 100%);
      -webkit-mask-image: radial-gradient(circle at center, black 95%, transparent 100%);

    }
    .about_meParagraph
    {
      padding: 0px 5px;
      overflow-y: scroll;
      height: 200px;
      width: 100%;
    }
    /* Half section becomes centered stack */
    .section_half {
      width: 90%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Background video sizing */
    .bg-video {
      height: calc(100% - 30px);
      width: calc(100% - 30px);
      border-radius: var(--globalBorderRadius);
    }

    .video-overlay-content {
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      z-index: 1;
      width: 100%;
      height: 100%;
      margin: 0;
    }

    /* Sections */
    .section-fullwidth { padding: 5px; }

    .section-hero {
      justify-content: center;
      align-items: center;
    }

    .section-normal {
      width: 100%;
      padding: 15px 0;
      margin: 0;
    }

    /* Navbar */
    .navbarcontainer {
      width: calc(100% - 60px);
      margin: 30px 0;
      position: fixed;
      padding: 0 15px;
      border-radius: var(--globalBorderRadius);
    }

    /* Middle stretch stacks */
    .middlestretch {
      align-items: center;
      gap: 15px;
    }


  }