/* =========================================================
   BASIC RESET
   ========================================================= */

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #1a0e1a;

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

    min-height: 100vh;
}


/* =========================================================
   MAIN 1366 × 768 STAGE
   ========================================================= */

.stage {
    position: relative;

    width: 100%;
    max-width: 1366px;

    aspect-ratio: 1366 / 768;

    margin: 0 auto;

    overflow: hidden;
}


/* =========================================================
   PAGE 1 BACKGROUND
   ========================================================= */

.background {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
}

.background img {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: opacity 0.4s ease;
}

.bg-normal {
    opacity: 1;
}

.bg-hover {
    opacity: 0;
}

.stage:has(.face-container:hover) .bg-hover {
    opacity: 1;
}

.stage:has(.face-container:hover) .bg-normal {
    opacity: 0;
}

/* =========================================================
   RAINBOW
   ========================================================= */

.el {
    position: absolute;

    pointer-events: none;
}

.el img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}

.rainbow {
    left: 29.58%;
    top: 5.5%;

    width: 52.34%;
    height: 80.08%;

    z-index: 4;
}


/* =========================================================
   FACE
   ========================================================= */

.face-container {
    position: absolute;

    left: 0%;
    top: 5%;

    width: 44%;
    height: 72%;

    z-index: 20;

    cursor: pointer;

    outline: none;
}


/*
   IMPORTANT:
   The old design rotated this image 90 degrees.

   Your new Canva face is already oriented correctly,
   so there is NO rotation here.
*/

.face {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    display: block;

    transform: rotate(90deg);

    transition:
        opacity 0.3s ease,
        filter 0.3s ease;
}


/* Normal face */

.face-normal {
    opacity: 1;
}


/* Hover face starts invisible */

.face-hover {
    opacity: 0;
}

.face-container:hover .face-hover {
    opacity: 1;
}

.face-container:hover .face-normal {
    opacity: 0;
}

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.8))
        drop-shadow(0 0 22px rgba(255,0,220,0.65));
}


/* =========================================================
   MOUTH GLITTER
   ========================================================= */
.mouth-glitter {
    position: absolute;

    left: 52%;
    top: 58%;

    width: 16%;
    height: 16%;

    z-index: 30;

    opacity: 0;

    pointer-events: none;

    transform: translate(-50%, -50%) scale(0.8);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.mouth-glitter img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: contain;
}

.face-container:hover .mouth-glitter,
.face-container:focus .mouth-glitter {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   PRISM BUTTON
   ========================================================= */

.prism-pill {
    left: 1.06%;
    top: 55%;

    width: 50%;
    height: 30%;

    z-index: 3;
}

.prism-pill img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* =========================================================
   PRISM TEXT
   ========================================================= */

.prism-text {
    position: absolute;

    left: -10.06%;
    top: 65%;

    width: 48.17%;
    height: 16.82%;

    display: flex;

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

    pointer-events: none;

    z-index: 12;
}

.prism-text span {
    font-family:
        Georgia,
        'Times New Roman',
        serif;

    font-style: italic;
    font-weight: 400;

    font-size: clamp(1.1rem, 4.8vw, 2.6rem);

    color: #1a0a13;

    letter-spacing: 1px;
}


/* =========================================================
   PRISM ICON
   ========================================================= */

.prism-icon {
    left: 85.65%;
    top: 0%;

    width: 14.35%;
    height: 35.16%;

    z-index: 15;
}

.prism-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* =========================================================
   PAGE 2 BLOBS
   ========================================================= */


/*
   Every blob is now a container.

   The GIF is INSIDE the container.

   The transparent PNG is NOT displayed as a second
   visible image.

   Instead, it becomes a MASK.
*/

.blob {
    position: absolute;

    z-index: 40;

    overflow: hidden;

    /*
       This is important because the GIF itself has
       a rectangular canvas.
    */
}


/* ---------------------------------------------------------
   THE ANIMATED GIF
   --------------------------------------------------------- */

.blob-gif {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
       THE IMPORTANT PART:

       The transparent PNG defines what portion of
       the GIF remains visible.
    */

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* ---------------------------------------------------------
   MASK IMAGE

   The PNG is now INVISIBLE.

   It is used only as the shape that clips the GIF.
   --------------------------------------------------------- */

.blob-frame {
    display: none;
}


/* =========================================================
   EYE BLOB
   ========================================================= */

.blob-eye {
    left: 52%;
    top: 28%;

    width: 19%;
    height: 17%;
}

/* =========================================================
   DANCER BLOB
   ========================================================= */

.blob-dancer {
    left: 40%;
    top: 56%;

    width: 15%;
    height: 25%;
}


/* =========================================================
   SKULL BLOB
   ========================================================= */

.blob-skull {
    left: 59%;
    top: 63%;

    width: 15%;
    height: 18%;
}

/* =========================================================
   HIDDEN STATE
   ========================================================= */

.hidden {
    opacity: 0;

    pointer-events: none;

    transform: scale(0.85);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}


/* =========================================================
   REVEALED STATE
   ========================================================= */

.blob.show {
    opacity: 1;

    pointer-events: auto;

    transform: scale(1);
}


/* =========================================================
   OPTIONAL BLOB HOVER
   ========================================================= */

.blob.show {
    cursor: pointer;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        filter 0.25s ease;
}

.blob.show:hover {
    transform: scale(1.04);

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.7))
        drop-shadow(0 0 15px rgba(255,0,220,0.5));
}
/* Once clicked, keep the transformed state permanently */

body.activated .face-hover {
    opacity: 1;
}

body.activated .face-normal {
    opacity: 0;
}

body.activated .bg-hover {
    opacity: 1;
}

body.activated .bg-normal {
    opacity: 0;
}

body.activated .mouth-glitter {
    opacity: 1;
    transform:
        translate(-50%, -50%)
        scale(1);
}