/* app/assets/stylesheets/application.css */
#loading-screen { /* hidden by default */
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #eaf3ff;
  z-index: 9999;
  overflow: hidden; /* ensure background video is clipped to bounds */
}

#loading-screen.is-visible {
  display: flex;
  transition: opacity .15s linear;
}

/* Video background styled to cover like a background-image */
#loading-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* same effect as background-size: cover */
  z-index: -1; /* keep it behind content */
}

/* Loading container for vertical stacking */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* Space between loader and text */
  position: relative; /* establish stacking context above video */
  z-index: 1;
}

/* circular loader: base ring + rotating gradient arc */
/* size + thickness are easy to tweak */
.loader{
    --size: 88px;
    --thickness: 6px;
  
    position: relative;
    width: var(--size);
    aspect-ratio: 1 / 1;
  }
  
  /* base light ring */
  .loader::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    /* outer light ring gradient */
    background: radial-gradient(59.59% 68.33% at 50% 50.38%, #FFFFFF 0%, #C5DEFA 100%);
    /* cut to a ring */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
  }
  
  /* rotating blue→cyan arc */
  .loader::after{
    
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
/* arc (blue → cyan) + rest transparent */
background: conic-gradient(
  from -90deg,
  #0088FF 0deg,
  #34FFF5 120deg,
  transparent 120deg 360deg
);

    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
    animation: spin 1.1s linear infinite;
  }
  
  @keyframes spin { to { transform: rotate(1turn); } }