:root {
  --griploc-black: #151515;
  --griploc-red: #961f1f;
  --griploc-white: #f2efe9;
}

/* Prevent scrolling while the intro is active */
body.intro-active {
  overflow: hidden;
}

/* Keep the Backstage visible underneath the overlay */
.backstage-page {
  opacity: 1;
}

/* Full-screen credential overlay */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  min-height: 100dvh;
  padding: 24px;

  overflow: hidden;
  background: var(--griploc-black);
  color: var(--griploc-white);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 900ms ease,
    visibility 900ms ease;
}

/* Remove the intro after verification */
#intro-screen.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   FIXED-SOURCE SPOTLIGHT
   ========================================================= */

.light-sweep {
    position: absolute;
    z-index: 2;

    /*
      The spotlight source stays anchored above the centre
      of the screen while the beam pivots left to right.
    */
    top: -95%;
    left: 50%;

    width: 95%;
    height: 240%;

    pointer-events: none;
    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 244, 220, 0.03) 16%,
            rgba(255, 238, 205, 0.12) 32%,
            rgba(255, 230, 185, 0.28) 46%,
            rgba(255, 224, 170, 0.38) 50%,
            rgba(255, 230, 185, 0.28) 54%,
            rgba(255, 238, 205, 0.12) 68%,
            rgba(255, 244, 220, 0.03) 84%,
            rgba(255, 255, 255, 0) 100%
        );

    filter: blur(36px);
    mix-blend-mode: screen;

    transform:
        translateX(-50%)
        rotate(18deg)
        scaleX(0.85);

    transform-origin: 50% 0%;

    will-change: opacity, transform;
}

#intro-screen.is-verifying .light-sweep {
    animation:
        credential-sweep
        5.8s
        cubic-bezier(0.42, 0, 0.2, 1)
        forwards;
}

@keyframes credential-sweep {
    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            rotate(18deg)
            scaleX(0.85);
    }

    10% {
        opacity: 0.42;
    }

    30% {
        opacity: 0.78;

        transform:
            translateX(-50%)
            rotate(9deg)
            scaleX(0.92);
    }

    55% {
        opacity: 1;

        transform:
            translateX(-50%)
            rotate(0deg)
            scaleX(1);
    }

    78% {
        opacity: 0.72;

        transform:
            translateX(-50%)
            rotate(-9deg)
            scaleX(1.08);
    }

    100% {
        opacity: 0;

        transform:
            translateX(-50%)
            rotate(-18deg)
            scaleX(1.16);
    }
}


/* =========================================================
   SEAL — ALWAYS VISIBLE
   ========================================================= */

.intro-seal {
    position: relative;
    z-index: 3;

    width: clamp(190px, 28vw, 330px);
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    transform: translateY(-15vh);
}

#intro-screen .intro-seal img {
    display: block;

    width: 60vmin;
    max-width: 340px;
    height: auto;
    object-fit: contain;

    /*
      Fixed opacity prevents the seal from fading
      while the spotlight moves across it.
    */
    opacity: 0.34;

    filter:
        contrast(1.15)
        brightness(1.3)
        saturate(0.9);

    transform: scale(0.97);

    transition:
        filter 700ms ease,
        transform 700ms ease;
}


/* =========================================================
   SEAL ILLUMINATED BY THE SLOW SWEEP
   ========================================================= */

#intro-screen.is-verifying .intro-seal img {
    animation: seal-light-pass 5.8s ease-in-out forwards;
}

@keyframes seal-light-pass {

    0% {
        filter:
            contrast(1.15)
            brightness(1.3)
            saturate(0.9);

        transform: scale(0.97);
    }

    20% {
        filter:
            contrast(1.18)
            brightness(1.45)
            saturate(0.93);
    }

    45% {
        filter:
            contrast(1.22)
            brightness(1.7)
            saturate(0.97);
    }

    62% {
        filter:
            contrast(1.25)
            brightness(1.9)
            saturate(1);

        transform: scale(1);
    }

    80% {
        filter:
            contrast(1.2)
            brightness(1.6)
            saturate(0.96);
    }

    100% {
        filter:
            contrast(1.18)
            brightness(1.48)
            saturate(0.94);

        transform: scale(1);
    }
}


/* =========================================================
   ACCESS VERIFIED SEAL
   ========================================================= */

#intro-screen.is-verified .intro-seal img {
    opacity: 0.34;

    filter:
        contrast(1.18)
        brightness(1.48)
        saturate(0.94);

    transform: scale(1);
}

/* =========================================================
   CREDENTIAL STATUS TEXT
   ========================================================= */

.intro-text {
    position: absolute;
    z-index: 4;

    left: 50%;
    bottom: clamp(90px, 14vh, 150px);

    width: min(420px, calc(100% - 48px));

    text-align: center;
    transform: translateX(-50%);
}

#status-line {
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(0.72rem, 1.4vw, 0.9rem);
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    white-space: nowrap;

    color: var(--griploc-white);

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 450ms ease,
        transform 450ms ease,
        color 450ms ease,
        text-shadow 450ms ease;
}

.status-accent {
    color: #A51F1F;   /* Griploc red */
    font-weight: 600;
}

#intro-screen.is-verified #status-line {
    color: #789b72;
    font-weight: 600;
    text-shadow: none;
}

#intro-screen.is-verified #status-line .status-complete {
    color: #657f61 !important;
    -webkit-text-fill-color: #657f61;
    
}

#intro-screen.is-verifying #status-line,
#intro-screen.is-verified #status-line {
    opacity: 1;
    transform: translateY(0);
}

#intro-screen.is-verified #status-line {
    color: #789b72;

    text-shadow:
        0 0 7px rgba(120, 155, 114, 0.35),
        0 0 18px rgba(120, 155, 114, 0.12);
}

/* =========================================================
   RESTRICTED ROOM ACCESS
   ========================================================= */

#intro-screen.is-restricted #status-line {
    color: var(--griploc-red);
    font-weight: 600;
    text-shadow:
        0 0 7px rgba(150, 31, 31, 0.28),
        0 0 18px rgba(150, 31, 31, 0.1);

    opacity: 1;
    transform: translateY(0);
}


/*
  Keep the seal visible after the verification sweep
  when access is restricted.
*/

#intro-screen.is-restricted .intro-seal img {
    opacity: 0.34;

    filter:
        contrast(1.18)
        brightness(1.48)
        saturate(0.94);

    transform: scale(1);
}


/* Lounge-specific supporting message */

.access-message {
    margin-top: 20px;

    color: rgba(242, 239, 233, 0.72);

    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(0.58rem, 1vw, 0.72rem);
    font-weight: 500;
    line-height: 1.5;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(6px);

    transition:
        opacity 500ms ease,
        transform 500ms ease;
}

.access-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Quiet return notice */

.return-message {
    margin-top: 14px;

    color: rgba(242, 239, 233, 0.38);

    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(0.52rem, 0.8vw, 0.64rem);
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(4px);

    transition:
        opacity 400ms ease,
        transform 400ms ease;
}

.return-message.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/*
  The progress indicator is no longer needed once
  the restricted result has been revealed.
*/

#intro-screen.is-restricted .credential-progress {
    opacity: 0;

    transition: opacity 350ms ease;
}

@media (max-width: 600px) {
    #intro-screen .intro-seal img {
        width: min(230px, 66vw);
    }

    #status-line {
        font-size: 0.72rem;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .intro-seal {
        width: min(78vw, 260px);
        overflow: visible;
    }

    #intro-screen .intro-seal img {
        width: 100%;
        max-width: none;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
  .light-sweep {
    display: none;
  }

  #intro-screen,
  .intro-seal img,
  #status-line {
    transition-duration: 1ms;
  }
}