* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { background: #ffffff; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

.stage {
  min-height: 100vh;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.stage-inner{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;

}
.figure {
  position: relative;
  width: min(100vw, 1600px);
  aspect-ratio: 1920 / 1080;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 45%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 100%);
}
.body-base, .body-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@property --level {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%;
}

.body-fill{
    --level:100%;
    will-change:clip-path;

    clip-path: polygon(
        0% var(--level),
        5%  calc(var(--level) - .25%),
        10% calc(var(--level) + .20%),
        15% calc(var(--level) - .30%),
        20% calc(var(--level) + .25%),
        25% calc(var(--level) - .20%),
        30% calc(var(--level) + .30%),
        35% calc(var(--level) - .20%),
        40% calc(var(--level) + .25%),
        45% calc(var(--level) - .30%),
        50% calc(var(--level) + .20%),
        55% calc(var(--level) - .25%),
        60% calc(var(--level) + .20%),
        65% calc(var(--level) - .20%),
        70% calc(var(--level) + .30%),
        75% calc(var(--level) - .20%),
        80% calc(var(--level) + .20%),
        85% calc(var(--level) - .25%),
        90% calc(var(--level) + .20%),
        95% calc(var(--level) - .20%),
        100% var(--level),
        100% 100%,
        0% 100%
    );


animation:
    rise 2.8s linear forwards,
    ripple 2s ease-in-out 2.8s infinite;
    

}

@keyframes rise{
    from{
        --level:100%;
    }
    to{
        --level:54%;
    }
}

@keyframes ripple{
    0%,100%{
        --level:54%;
    }
    50%{
        --level:53.6%;
    }
}
.glow {
  position: absolute;
  left: 30%; right: 30%;
  height: 40%; top: 60%;
  background: radial-gradient(ellipse at 50% 50%, rgba(120,200,255,0.45) 0%, rgba(255,255,255,0) 65%);
  filter: blur(20px);
  opacity: 0;
  animation: glowRise 10s ease-out 0.8s forwards, heartPulse 2.4s ease-in-out 10s infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes glowRise {
  0% { opacity: 0; top: 90%; }
  40% { opacity: 0.7; }
  100% { opacity: 0.55; top: 38%; }
}
@keyframes heartPulse {
  0%,100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}

.bubbles {
  position: absolute;
  left: 42%; right: 40%;
  top: 54%; bottom: 8%;
  overflow: hidden;
  pointer-events: none;
}
.bubble {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95), rgba(190,225,255,0.4) 60%, rgba(255,255,255,0) 72%);
  border: 1px solid rgba(255,255,255,0.7);
  opacity: 0;
  animation: rise-bubble linear infinite;
}
@keyframes rise-bubble {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translateY(-360px) scale(1.1); opacity: 0; }
}

.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(180,225,255,0.45) 50%, rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: shimmer 4.5s ease-in-out 10.5s infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0% { transform: translateX(-60%); opacity: 0; }
  30%,70% { opacity: 0.8; }
  100% { transform: translateX(60%); opacity: 0; }
}

.glass-label {
  margin-top: 18px;
  text-align: center;
  color: #1769b8;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  line-height: 1.2;
}

.glass-label .loading {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, 1.4vw, 20px);
  font-weight: 500;
  color: #1f7fc8;
  opacity: 0.85;
}
.glass-label .dot { display: inline-block; animation: dotPulse 1.4s infinite; }
.glass-label .dot:nth-child(2) { animation-delay: 0.2s; }
.glass-label .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
  0%,60%,100% { opacity: 0.25; }
  30% { opacity: 1; }
}
/* ===========================================
   INTRO PROGRESS SCREEN
=========================================== */

.progress-stage{
    position:fixed;
    inset:0;
    background:#fff;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    z-index:9998;
}

.progress-logo{
    font-size:clamp(32px,4vw,60px);
    font-weight:700;
    color:#0d4f8a;
    letter-spacing:6px;
}

.progress-company{
    margin-top:10px;
    font-size:clamp(16px,2vw,24px);
    color:#666;
}

.progress-title{
    margin-top:50px;
    font-size:24px;
    color:#1f7fc8;
    font-weight:600;
}

.progress-box{
    width:min(600px,85vw);
    height:18px;
    margin-top:25px;
    border-radius:20px;
    overflow:hidden;
    background:#e7eef5;
    box-shadow:0 0 15px rgba(0,150,255,.15);
}

.progress-bar{
    width:0%;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#19b5ff,#0b67c0);
    transition:width .15s linear;
}

.progress-percent{
    margin-top:18px;
    font-size:22px;
    color:#0b67c0;
    font-weight:bold;
}

/* ===========================================
   VIDEO
=========================================== */

.video-stage{
    position:fixed;
    inset:0;
    background:#000;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.video-stage video{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ================================
   GLOW
================================ */

.glow{

    position:absolute;

    left:30%;
    right:30%;

    top:60%;

    height:40%;

    background:radial-gradient(
        ellipse at 50% 50%,
        rgba(120,200,255,.45) 0%,
        rgba(255,255,255,0) 65%
    );

    filter:blur(20px);

    opacity:0;

    mix-blend-mode:screen;

    pointer-events:none;

    animation:

    glowRise 7s ease-out .8s forwards,

    heartPulse 2.4s ease-in-out 7s infinite;

}

@keyframes glowRise{

0%{

opacity:0;

top:90%;

}

40%{

opacity:.7;

}

100%{

opacity:.55;

top:38%;

}

}

@keyframes heartPulse{

0%,100%{

opacity:.45;

}

50%{

opacity:.9;

}

}

/* ================================
   BUBBLES
================================ */

.bubbles{

position:absolute;

left:42%;
right:40%;

top:54%;
bottom:8%;

overflow:hidden;

pointer-events:none;

}

.bubble{

position:absolute;

bottom:-10px;

border-radius:50%;

background:

radial-gradient(

circle at 32% 30%,

rgba(255,255,255,.95),

rgba(190,225,255,.4) 60%,

rgba(255,255,255,0) 72%

);

border:1px solid rgba(255,255,255,.7);

opacity:0;

animation:rise-bubble linear infinite;

}

@keyframes rise-bubble{

0%{

transform:translateY(0) scale(.6);

opacity:0;

}

15%{

opacity:.9;

}

100%{

transform:translateY(-360px) scale(1.1);

opacity:0;

}

}

/* ================================
   SHIMMER
================================ */

.shimmer{

position:absolute;

inset:0;

background:

linear-gradient(

115deg,

rgba(255,255,255,0) 40%,

rgba(180,225,255,.45) 50%,

rgba(255,255,255,0) 60%

);

mix-blend-mode:screen;

opacity:0;

pointer-events:none;

animation:

shimmer 4.5s ease-in-out 7.5s infinite;

}

@keyframes shimmer{

0%{

transform:translateX(-60%);

opacity:0;

}

30%,70%{

opacity:.8;

}

100%{

transform:translateX(60%);

opacity:0;

}

}
/* ======================================
   LIFE DROP TEXT
====================================== */

.glass-label{

    margin-top:20px;

    text-align:center;

    pointer-events:none;

    line-height:1.3;

}

.glass-label .title{

    display:block;

    font-size:clamp(22px,2.5vw,42px);

    font-weight:700;

    letter-spacing:5px;

    background:linear-gradient(180deg,#29a8ff,#0d4f8a);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    text-transform:uppercase;

}



.glass-label .loading{

    display:block;

    margin-top:12px;

    font-size:clamp(14px,1.2vw,18px);

    font-weight:500;

    color:#1f7fc8;

    opacity:.9;

    letter-spacing:1px;

}

.glass-label .dot{

    display:inline-block;

    animation:dotPulse 1.4s infinite;

}

.glass-label .dot:nth-child(2){

    animation-delay:.2s;

}

.glass-label .dot:nth-child(3){

    animation-delay:.4s;

}

@keyframes dotPulse{

0%,60%,100%{

opacity:.25;

transform:translateY(0);

}

30%{

opacity:1;

transform:translateY(-2px);

}

}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width:1200px){

.figure{

width:95vw;

}

}

@media (max-width:768px){

.figure{

width:100vw;

}

.glass-label{

margin-top:10px;

}

.glass-label .title{

letter-spacing:3px;

}

.glass-label .subtitle{

font-size:15px;

}

.glass-label .loading{

font-size:14px;

}

}

@media (max-width:480px){

.figure{

width:100vw;

}

.glass-label .title{

font-size:24px;

letter-spacing:2px;

}

.glass-label .subtitle{

font-size:13px;

}

.glass-label .loading{

font-size:12px;

}

}


/* =========================== newmanikka
   LIFE DROP LOGO
=========================== */
/* ==========================
   LIFE DROP LOGO
========================== */

.life-logo{

    display:block;

    width:clamp(180px,22vw,420px);

    max-width:90vw;

    height:auto;

    margin:0 auto;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

    filter:
        drop-shadow(0 8px 18px rgba(0,120,255,.18));

    animation:logoFade .8s ease;
}

/* Fade In */

@keyframes logoFade{

    from{

        opacity:0;

        transform:translateY(12px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* 4K / TV */

@media (min-width:1800px){

    .life-logo{

        width:480px;

    }

}

/* Desktop */

@media (max-width:1200px){

    .life-logo{

        width:340px;

    }

}

/* Tablet */

@media (max-width:992px){

    .life-logo{

        width:280px;

    }

}

/* Mobile Landscape */

@media (max-width:768px) and (orientation:landscape){

    .life-logo{

        width:190px;

    }

}

/* Mobile Portrait */

@media (max-width:768px){

    .life-logo{

        width:220px;

    }

}

/* Small Phones */

@media (max-width:480px){

    .life-logo{

        width:170px;

    }

}
.glass-label{

    margin-top:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.life-logo{

    display:block;

    width:clamp(170px,24vw,420px);

    height:auto;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

    filter:
        drop-shadow(0 10px 18px rgba(0,120,255,.15));

}

/* Loading */

.glass-label .loading{

    margin-top:18px;

    font-size:clamp(14px,1.4vw,22px);

    color:#1f7fc8;

    font-weight:600;

    letter-spacing:1px;

}

@media (min-width:1800px){

.life-logo{

width:450px;

}

.figure{

width:1200px;

}

}

@media (max-width:992px){

.life-logo{

width:300px;

}

.figure{

width:90vw;

}

}

@media (max-width:768px){

.life-logo{

width:240px;

}

.figure{

width:95vw;

}

}

@media (max-width:480px){

.life-logo{

width:180px;

}

.figure{

width:98vw;

}

}

/* Mobile Portrait */
@media only screen and (max-width:768px) and (orientation:portrait){

    .stage{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .figure{
        position:relative;
        width:100vw;
        height:100vh;
        overflow:visible;
    }

    .body-base,
    .body-fill{
        position:absolute;
        top:50%;
        left:58%;
        width:auto;
        height:70vh;      /* Increase this to zoom */
        max-width:none;
        transform:translate(-50%,-50%);
        object-fit:contain;
    }

}