/* body, html {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: black;
      height: 100vh;
      width: 100vw;
    }

    #startOverlay {
        position: fixed;
        inset: 0;
        background-image: url('./images/First\ screen.png');
        background-repeat: none;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
    }

    #startARButton{
        padding:18px 45px;
        font-size:22px;
        font-weight:bold;
        border:none;
        border-radius:14px;
        color:white;
        background:#1d7c3b;
        cursor:pointer;
    }

    .container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    .video-container{
      position: absolute;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #camera {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #overlay {
      /* position: absolute; *
      align-self: center;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
    }
    #play-btn {
      position: absolute;
      z-index: 10;
      top: 90%;
      left: 2%;
      padding: 12px 24px;
      background: #00bcd4;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

    .thrill-btn {
      position: absolute;
      z-index: 10;
      top: 52%;
      left: 36%;
      width: 12%;
      height: 9%;
      border: none;
      background: transparent;
      cursor: pointer;
      display: none;
    }
    .tech-btn {
      position: absolute;
      z-index: 10;
      top: 52%;
      right: 36%;
      width: 12%;
      height: 9%;
      background: transparent;
      border: none;
      cursor: pointer;
      display: none;
    }
    .show-btn {
      display: block;
    }

    @media (max-width: 768px) {
      .thrill-btn {
        top: 52%;
        left: 8%;
        width: 32%;
        height: 9%;
      }
      .tech-btn {
        top: 52%;
        right: 8%;
        width: 32%;
        height: 9%;
      }
      #overlay {
        height: auto;
      }
    } */



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{

    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:Arial;
}

/* iPad Portrait */
body{

    /* max-width:820px;
    max-height:1180px; */
    margin:auto;
}

/* ========================================== */
/* Splash / Preloader Screen Styles           */
/* ========================================== */
#splash-loader {
    position: fixed;
    inset: 0;
    background-color: #000000; /* Adjust to match your theme */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#splash-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.loader-spinner {
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================== */
/* Start Screen Styles                        */
/* ========================================== */
#startScreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 14, 38, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9990;
}

/* .start-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.start-btn {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.start-btn img {
    width: 220px; /* Adjust as needed for your screen size */
    height: auto;
    display: block;
}

.start-btn:active {
    transform: scale(0.92);
}

/* ========================= */
/* Initial Intro Video Screen */
/* ========================= */
/* #initialScreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

#initialScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 100;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#playOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3); /* Subtle dim background */
    cursor: pointer;
    z-index: 101;
}

#playBtnImg {
    width: 80px; /* Adjust size as per your design requirements */
    height: auto;
    transition: transform 0.2s ease;
}

#playBtnImg:active {
    transform: scale(0.9);
}

/* ========================= */
#launchScreen{
    position:fixed;
    inset:0;
    z-index:999;
    display:none;
    justify-content:center;
    align-items:flex-end;
    background:#000;
    touch-action: none; /* Prevents default mobile scrolling behavior during swipe */
}

.launch-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* #launchBtn{
    position:relative;
    margin-bottom:70px;
    width:280px;
    height:70px;
    border:none;
    border-radius:18px;
    background:#1a9447;
    color:white;
    font-size:28px;
    font-weight:bold;
    cursor:pointer;
    z-index:2;
} */

#launchInteractiveContainer {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8vh;
}

#sequenceAnim {
    width: 90px; /* Adjust width as needed for your UI scaling */
    height: auto;
    margin-bottom: 12px;
    pointer-events: none; /* Allows touch events to pass through to the container */
}

#launchBtn {
    width: 280px;
    height: 70px;
    border: none;
    border-radius: 18px;
    background: transparent; /* #1a9447;*/
    color:transparent; /* white;*/
    /* font-size: 26px;
    font-weight: bold; */
    cursor: pointer;
}

/* ========================= */
#experience{
    width:100%;
    height:100%;
    display:none;
    position:relative;
    overflow:hidden;
    background:#000;
}

/* ========================= */
/* #mainVideo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
} */

#videoContainer{
    position:absolute;
    inset:0;
}

.experienceVideo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 0.2s linear;

    will-change:opacity;
    backface-visibility:hidden;
    transform:translateZ(0);
    pointer-events:none;

    z-index:1;
}

.activeVideo{
    opacity:1;

    /* New video fades in faster */
    transition:opacity 150ms ease;

    z-index:2;
}

.experienceVideo:not(.activeVideo){
    z-index:1;
}

/* ========================= */
/*#protection_Card{
    position:absolute;
    left:5%;
    top:35%;
    width:22vw;
    display:none;
    z-index:5;
}

#lessthan300mg_Card{
    position:absolute;
    right:5%;
    top:35%;
    width:22vw;
    display:none;
    z-index:5;
}
#optimal300mg_Card{
    position:absolute;
    right:5%;
    top:35%;
    width:22vw;
    display:none;
    z-index:5;
}
#greaterthan300mg_Card{
    position:absolute;
    right:5%;
    top:35%;
    width:22vw;
    display:none;
    z-index:5;
}

#precision_Card{
    position:absolute;
    left:5%;
    top:35%;
    width:22vw;
    display:none;
    z-index:5;
}*/

/* Card Base Styling with Animated Transitions */
#protection_Card,
#lessthan300mg_Card,
#optimal300mg_Card,
#greaterthan300mg_Card,
#precision_Card {
    position: absolute;
    top: 35%;
    width: 22vw;
    z-index: 5;

    /* Hidden State (Default) */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.75); /* Slightly shrunken */
    pointer-events: none;

    /* Smooth Transition Setup */
    transition: opacity 1.5s ease, transform 1.5s ease, visibility 1.5s ease;
}

/* Left-positioned cards */
#protection_Card,
#precision_Card {
    left: 5%;
}

/* Right-positioned cards */
#lessthan300mg_Card,
#optimal300mg_Card,
#greaterthan300mg_Card {
    right: 5%;
}

/* Visible Class to Trigger Animation */
.card-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important; /* Scale to normal size */
    pointer-events: auto !important;
}

/* ========================= */
/* #choiceContainer{
    position:absolute;
    inset:0;
    display:none;
    justify-content:center;
    align-items:flex-end;
    gap:40px;
    padding-bottom:80px;
    z-index:10;
}

#choiceContainer button{
    width:220px;
    height:65px;
    font-size:22px;
    font-weight: 300;
    border: 1px solid;
    border-radius:20px;
    background: transparent;
    color:white;
} */

#choiceContainer {
    position: relative;
    display:none;
    width: 100%;
    /*max-width: 600px; /* Adjust based on your background image container width */
    height: 100%;    /* Adjust based on your background image container height */
    box-sizing: border-box;
    /* If you set the stomach background image here:
    background: url('path/to/stomach-bg.jpg') no-repeat center/contain; 
    */
    pointer-events: none; /* Prevents interaction when container is hidden */
}

/* Base button reset & image styling */
.image-btn {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    /* transition: transform 0.2s ease, opacity 0.2s ease; */
    z-index: 10;
    pointer-events: auto;

    /* Hidden/Exit State: Shifted left, transparent, scaled down slightly */
    /*opacity: 0;
    visibility: hidden;
    transform: translateX(-100px) scale(0.9);
    
    /* Smooth Transition Setup *
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 1.5s linear; /*step-end;*
                /*
    will-change: transform, opacity; /* Optimizes performance */
}

.image-btn img {
    display: block;
    width: 100%;
    height: auto;
}

/* .image-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
} */

/* 1. "GASTRIC JUICES" Button (Top Right) */
.gastric-btn {
    top: 17%;
    right: 5%;
    width: 32%;
}

/* 2. "PEPSIN ENZYMES" Button (Bottom Right) */
.pepsin-btn {
    bottom: 28%;
    right: 13%;
    width: 28%;
}

.environment-btn {
    width: 88%;
    /* bottom: 4%;
    left: 50%; */
    bottom: 3%;
    left: 5%;
    right: 5%;
    margin: 0 auto;
    
    /*transform: translateX(-50%); /* Keeps block horizontally centered */
    /*transform: translateX(calc(-50% - 40px)) scale(0.92);   /* Default Hidden Offset starting centered then pushed left */
}

/* ---------------------------------------------------- */
/* Animations: Gastric & Pepsin (Left to Right / Exit)  */
/* ---------------------------------------------------- */

.gastric-btn,
.pepsin-btn {
    /* Hidden State: Shifted left */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px) scale(0.9);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 1.8s linear;
}

.gastric-btn.btn-visible,
.pepsin-btn.btn-visible {
    /* Entrance State */
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear;
}

.gastric-btn.btn-exiting,
.pepsin-btn.btn-exiting {
    /* Exit State: Slide back left */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px) scale(0.9);
    transition: opacity 1.6s cubic-bezier(0.7, 0, 0.84, 0),
                transform 1.6s cubic-bezier(0.7, 0, 0.84, 0),
                visibility 1.6s step-end;
}

/* ---------------------------------------------------- */
/* Animations: Environment Banner (Bottom to Top / Down)*/
/* ---------------------------------------------------- */

.environment-btn {
    /* Hidden State: Shifted down 80px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px) scale(0.95);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 1.8s linear;
}

.environment-btn.btn-visible {
    /* Entrance State: Rises up to resting position */
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.8s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear;
}

.environment-btn.btn-exiting {
    /* Exit State: Slides back down */
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.7, 0, 0.84, 0),
                transform 0.6s cubic-bezier(0.7, 0, 0.84, 0),
                visibility 0.6s step-end;
}

/* ---------------------------------------------------- */
/* Hover Effects                                        */
/* ---------------------------------------------------- */
.gastric-btn.btn-visible:hover,
.pepsin-btn.btn-visible:hover {
    transform: translateX(0) scale(1.03);
    opacity: 0.95;
}

.environment-btn.btn-visible:hover {
    transform: translateY(0) scale(1.02);
    opacity: 0.95;
}

/* ---------------------------------------- */
/* Active / Visible State (Left to Right)   */
/* ---------------------------------------- */
/* .image-btn.btn-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.5s cubic-bezier(0.6, 1, 0.3, 1),
                visibility 0s linear;
}

/* ---------------------------------------- *
/* Exit State (Disappear Right to Left)      *
/* ---------------------------------------- *
.image-btn.btn-exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100px) scale(0.9);
    transition: opacity 1.4s cubic-bezier(0.7, 0, 0.84, 0),
                transform 1.4s cubic-bezier(0.7, 0, 0.84, 0),
                visibility 1.4s step-end;
} */

/* Hover Zoom Effect */
/* .image-btn.btn-visible:hover {
    transform: translateX(0) scale(1.03);
    opacity: 0.95;
} */

/* .environment-btn:hover {
    /* Retains horizontal centering during zoom on hover *
    transform: translateX(-50%) scale(1.02);
} */



/* ========================= */
/* #dialContainer{
    position:absolute;
    bottom:30px;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:center;
    z-index:20;
}

.dial{
    width:350px;
}

#knob{

    width:180px;
    height:180px;

    border-radius:50%;

    position:absolute;

    left:50%;
    bottom:70px;

    transform:translateX(-50%) rotate(-90deg);

    touch-action:none;
} */

#dialContainer{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    display:none;
    justify-content:center;
    align-items:flex-end;
    z-index:1000;
}

#dialBG{
    width:100%;
    pointer-events:none;
}

#dialArea{
    position:absolute;
    /* bottom:20px; */
    top: 20px;
    width:420px;
    height:420px;
    display:flex;
    justify-content:center;
    align-items:center;
}

#knob{
    width:260px;
    height:260px;
    user-select:none;
    pointer-events:none;
}

/* Positioned directly in the center of #dialArea over the knob */
#doseText {
    position: absolute;
    width: 10vw; 
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 2;
}

#arrow{
    position:absolute;
    width:26px;
    left:50%;
    top:0;
    transform:translateX(-50%);
    touch-action:none;
    cursor:pointer;
    /*transition: transform 0.3s ease; /* Makes the rotation smooth */
    transform-origin: center center;  /* Adjust if your arrow rotates from the base */
    /* Instant tracking during drag */
    transition: none; 
    cursor: grab;
    z-index: 3;
    /*touch-action: none; /* Crucial: stops touch screens from hijacking the swipe event */
}

#arrow:active {
    cursor: grabbing;
}

/* =========================================
   OVERLAY & INSTRUCTION TEXT STYLING
   ========================================= */

   /* Animation Keyframes for Glow / Pulse Effect */
@keyframes glowBlink {
    0% {
        opacity: 0.4;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(0, 212, 255, 0.9), 0 0 20px rgba(0, 212, 255, 0.6);
        transform: scale(1.02);
    }
    100% {
        opacity: 0.4;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
        transform: scale(0.98);
    }
}

/* Absolute Overlay covering the container without intercepting touch/clicks */
.dial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows pointer clicks/drags to pass through seamlessly to the arrow below */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2000; /* Higher z-index to stay cleanly on top */
}

.dial-instruction {
    color: #ffffff;         /* Light blue tone matching your theme */
    font-size: 2vw;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 16px;    /* Adjust this distance from the very bottom as needed */
    user-select: none;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Class applied dynamically via JS when video ends */
.dial-instruction.blink-glow {
    animation: glowBlink 1.2s infinite ease-in-out;
}

/* Add this class to make the final snap smooth */
.snap-smooth {
    /* transition: transform 0.2s ease-out; */
    /* transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); */
    transition: left 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                top 0.25s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* #tickBtn {
    display: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    align-items: center;
    text-align: center;
    justify-self: anchor-center;
} */
/* #tickBtn {
    position: relative; 
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer;

    display: none;
    /* width: 50px;
    height: 50px; *
    border-radius: 50%;
    justify-self: anchor-center;
    top:20px;
    /* background: radial-gradient(50% 50% at 50% 50%, #AAE800 0%, #1DC400 100%);
    border: 2px solid #ffffff; *
} */

/* #tickBtn img{
    width: 10vw;
} */

/* Container positioned at top center */
#top_container {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999 !important;
    pointer-events: auto !important;
    
    display: none; /* Switch to 'flex' via JS when active */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
}

/* Styling for the text */
#top_container .continue-text {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    animation: glowBlink 1.2s infinite ease-in-out;
}

/* Button Reset & Styling */
#tickBtn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

#tickBtn img {
    width: 12vw;
    max-width: 60px;
    min-width: 40px;
    height: auto;
    display: block;
}

/* .top-container.blink-glow {
    animation: glowBlink 1.2s infinite ease-in-out;
} */


/* Animation State Controllers */
.fade-element {
    display: none;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-element.visible {
    display: flex !important;
    opacity: 1;
}

/* Results Screen Layout */
#resultsScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(5, 10, 25, 0.95); /* Deep dark background */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px 25px 20px;
    box-sizing: border-box;
    color: #ffffff;
    z-index: 10000;
    overflow: hidden;
}

/* Header Text */
/* .results-header { text-align: center; }
.results-header .subtitle { font-size: 11px; letter-spacing: 1.5px; color: #a0a5b5; margin: 0; }
.results-header .brand-title { font-size: 42px; font-weight: 900; margin: 5px 0 0 0; letter-spacing: 2px; }
.results-header .brand-sub { font-size: 18px; font-style: italic; margin: 0; color: #d0d5e5; } */

/* 3 Columns Flex wrapper */
/* .results-columns {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 20px 0;
} */

/* Component Cards */
/* .card {
    flex: 1;
    border-radius: 16px;
    padding: 24px 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
} */

/* Neon Borders according to reference image */
/* .card-blue { border: 2px solid #0055ff; box-shadow: 0 0 20px rgba(0, 85, 255, 0.2), inset 0 0 15px rgba(0, 85, 255, 0.1); }
.card-orange { border: 2px solid #ff8c00; box-shadow: 0 0 20px rgba(255, 140, 0, 0.2), inset 0 0 15px rgba(255, 140, 0, 0.1); }
.card-cyan { border: 2px solid #00e5ff; box-shadow: 0 0 20px rgba(0, 229, 255, 0.2), inset 0 0 15px rgba(0, 229, 255, 0.1); } */

/* Typography styling inside cards */
/* .card-label { font-size: 12px; font-weight: bold; margin: 15px 0 10px 0; min-height: 32px; line-height: 1.3; color: #d0d5e5; }
.card-limit { font-size: 11px; color: #ff8c00; margin: 0; }
.card-stat { font-size: 48px; font-weight: bold; margin: 5px 0; letter-spacing: -1px; }
.card-blue .card-stat { color: #3388ff; }
.card-orange .card-stat { color: #ffaa33; }
.card-cyan .card-stat { color: #33f0ff; }
.card-footnote { font-size: 10px; color: #707585; margin: 0; } */

/* Arrows pointing down at bases */
/* .card-arrow-down {
    width: 0; height: 0; 
    border-left: 10px solid transparent; border-right: 10px solid transparent;
    margin-top: auto; padding-top: 15px;
} */
/* .card-blue .card-arrow-down { border-top: 12px solid #0055ff; }
.card-orange .card-arrow-down { border-top: 12px solid #ff8c00; }
.card-cyan .card-arrow-down { border-top: 12px solid #00e5ff; } */

/* Bottom Typography Wrapper */
/* .results-footer { text-align: center; }
.results-footer h3 { font-family: Inter-Regular; font-size: 18px; color: #33f0ff; letter-spacing: 0.5px; margin: 0 0 5px 0; }
.results-footer p { font-size: 12px; color: #707585; margin: 0; letter-spacing: 1px; } */

/* Simple SVG Mockups for Icons */
/* .card-icon { width: 40px; height: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.icon-meter { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" viewBox="0 0 24 24" fill="none" stroke="%233388ff" stroke-width="2"><rect x="5" y="3" width="14" height="18" rx="2"/><line x1="9" y1="7" x2="15" y2="7"/></svg>'); }
.icon-scale { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" viewBox="0 0 24 24" fill="none" stroke="%23ffaa33" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="12" cy="11" r="4"/></svg>'); }
.icon-shield { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://w3.org" viewBox="0 0 24 24" fill="none" stroke="%2333f0ff" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 11 11 13 15 9"/></svg>'); } */

/* Responsive adjustments for phones */
/* @media(max-width: 600px) {
    .results-columns { flex-direction: column; gap: 10px; width: 100%; }
    .card { padding: 12px; }
    .card-stat { font-size: 32px; }
} */


/* Background Image styling */
.results-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Ensure foreground contents sit above background */
.results-header,
.results-sequence-container,
.results-footer {
    position: relative;
    z-index: 2;
}

/* --- Top Section: Centered Logo Image --- */
.results-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 35px;
    margin-bottom: 40px;
}

.results-logo {
    width: 45vw;
    max-width: 320px;
    min-width: 200px;
    height: auto;
    object-fit: contain;
}

/* --- Middle Section: PNG Sequence Container --- */
.results-sequence-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* max-width: 900px; */
    padding: 20px 0;
    position: relative;
    overflow: hidden; /* Keeps frame sequence contained if needed */
}

/* --- Independent Inner Sequence Wrapper --- */
/* Customize width, height, aspect-ratio, or transforms freely here */
.sequence-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Example parameters you can safely tweak independently: */
    /* max-width: 600px; */
    /* transform: scale(1.0); */
    /* margin: 0 auto; */
}

/* Shared image styles for sequence layers */
.sequence-anim-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

#resultsSequenceAnim {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* --- Bottom Section: Footer Typography --- */
.results-footer {
    text-align: center;
    margin-bottom: 5px;
}

.results-footer .footer-title {
    font-family: 'Inter-Bold', 'Inter', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    color: #33f0ff; /* Bright Cyan color matching reference */
    letter-spacing: 1px;
    margin: 20px 0 20px 0;
    text-transform: uppercase;
}

.results-footer .footer-subtitle {
    font-family: 'Inter-Regular', 'Inter', sans-serif;
    font-size: 11px;
    color: #a0a5b5;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Responsive adjustments */
@media (max-height: 700px) {
    .results-logo { max-width: 250px; }
    .results-footer .footer-title { font-size: 16px; }
}




@font-face {
	font-family: Inter-Bold;
	src: url("./Fonts/Inter_24pt-Bold.ttf");
}

@font-face {
	font-family: Inter-Medium;
	src: url("./Fonts/Inter_24pt-Medium.ttf");
}

@font-face {
	font-family: Inter-Regular;
	src: url("./Fonts/Inter_24pt-Regular.ttf");
}


/*Display blocking for mobile and desktop related code block below*/
#displayBlock{
    display: none;
    z-index: 1000;
}

.center6{
    position: fixed;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* object-fit: contain; */
    width: 100vw;
    height: 10vh;
    /* display: flex; */
}

/*/////////Mobile block with QR code start//////////*/
@media only screen and (max-width:760px){       /*(min-width:360px)*/
    #displayBlock{
        display: flex;
        height: 100vh;
        width: 100vw;
        background-color: white;
        color: black;
        font-size: 50px;
    }
    #blocktext{
        width: 80vw;
        position: fixed;
        bottom:5vh;
        font-size: 4vw;
        font-family: proximanova-black;
    }
    #blockqr{
        top:20vh;
        max-height: 70vh;
        max-width: 80vw;
        position: fixed;
    }
    /* #mainBlock{
        display: none;
    } */
}
/*/////////Mobile block with QR code end //////////*/

/*/////////Tablet block with QR code start//////////*/
/*@media only screen and (min-width:760px){
    #displayBlock{
        display: flex;
        height: 100vh;
        width: 100vw;
        background-color: white;
        color: black;
        font-size: 50px;
    }
    #blocktext{
        width: 80vw;
        position: fixed;
        bottom:5vh;
        font-size: 4vw;
        font-family: proximanova-black;
    }
    #blockqr{
        top:20vh;
        max-height: 70vh;
        max-width: 80vw;
        position: fixed;
    }
    #mainBlock{
        display: none;
    }
}*/
/*/////////Tablet block with QR code end //////////*/


/*/////////Desktop block with QR code start//////////*/
@media only screen and (min-width:1365px){  /*1081*/         /*(min-width:1025px)*/
    #displayBlock{
        display: flex;
        height: 100vh;
        width: 100vw;
        background-color: white;
        color: black;
        font-size: 50px;
    }
    #blocktext{
        width: 80vw;
        position: fixed;
        bottom:5vh;
        font-size: 3vw;
        font-family: proximanova-black;
    }
    #blockqr{
        top:5vh;
        height: 70vh;
        position: fixed;
    }
    /* #mainBlock{
        display: none;
    } */
}
/*/////////Desktop block with QR code end//////////*/




/* ========================================================== */
/* DEVICE ACCESS RESTRICTION SYSTEM                           */
/* ========================================================== */

/* Default state: Hide interactive app elements, show displayBlock screen */
#displayBlock2 {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0b132b;
    z-index: 99999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.block-card2 {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 400px;
}

#blockqr2 {
    width: 180px;
    height: 180px;
    margin-bottom: 20px;
    border-radius: 12px;
}

#blocktext2 {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

/* Hide interactive app elements when blocked */
#splash-loader
/* #startScreen,
#initialScreen,
#launchScreen,
#experience*/  {
    display: none !important;
}

/* ========================================================== */
/* TARGET DEVICE MEDIA QUERY (iPad 11" M4: 800–840w x 1020–1180h) */
/* ========================================================== */
@media screen and (min-width: 800px) and (max-width: 840px) and (min-height: 1020px) and (max-height: 1180px) {
    /* Hide the blocker on target iPad 11-inch device */
    #displayBlock {
        display: none !important;
    }

    /* Restore visibility controls to the main app components */
     #splash-loader {
        display: flex !important;
    }
    
    /*#startScreen {
        display: flex !important;
    }

    #initialScreen,
    #launchScreen,
    #experience {
        display: flex !important; 
    } */
}







/* #big-screen-page{
      display: none;
      background-color: white;
      font-family: Baloo2-Bold;
      font-weight: 800;
      font-size: 1.5vw;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: 100vh;
      z-index: 9999;
}

#display_block_logo{
    width: 35%;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.75);
}
#display_block_text{
    margin: 20px;
    font-family: Baloo2-SemiBold;
    color: white;
    font-size: 2vw;
}

@media only screen and (min-width: 481px) {
    #big-screen-page {
        display: flex;
        /* background-color: white; *
        /* background: linear-gradient(215deg, #EB2D8F, #EB2D8F, #471523, #2A1110); *
        background: linear-gradient(194.69deg, #EB2D8F -4.76%, #471523 71.98%, #2A1110 100%);

        font-size: 1.5vw;
        font-weight: 800;
        text-align: center;
        justify-content: center;
        align-items: center;
        height: 100vh;
        z-index: 9999;
    }
} */