/* ==============================
   Entrance Page — entrance.css
   1920 × 3000 vertical scroll
   ============================== */

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

body {
    background-color: #000;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: url('../Cursor.webp') 0 0, default;
}

/* ---------- Canvas Container ---------- */
.entrance-scene {
    position: relative;
    width: 1920px;
    height: auto; /* Let the base image define the height */
}

/* ---------- Each layer is just an <img> inside the scene ---------- */
.entrance-layer {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none; /* Disable all background clicks */
}

/* Base layer: flows normally, sets the scene height */
.layer-base {
    position: relative;
    z-index: 1;
}

/* Twinkle and Btn layers: overlay on top of base */
.layer-twinkle,
.layer-btn {
    position: absolute;
    top: 0;
    left: 0;
}

.layer-twinkle {
    z-index: 2;
    animation: breathe 3s ease-in-out infinite;
}

.layer-btn {
    z-index: 3;
    transition: transform 0.3s ease, filter 0.3s ease;
    /* Center of the star as percentage of 1920x3000 canvas */
    transform-origin: 50% 74.5%;
}

/* ---------- Star Click Area ---------- */
/* Position as % of 1920x3000: center (960, 2235), box 400x400
   left: (960-200)/1920 = 39.58%
   top:  (2235-200)/3000 = 67.83%
   width: 400/1920 = 20.83%
   height: 400/3000 = 13.33% */
.star-link {
    position: absolute;
    z-index: 10;
    left: 39.58%;
    top: 67.83%;
    width: 20.83%;
    height: 13.33%;
    cursor: url('../Cursor_touch.webp') 0 0, pointer;
    text-decoration: none;
    pointer-events: auto;
    display: block;
}

/* Hover effects applied to the btn image via JS or sibling selector */
.star-link:hover ~ .layer-btn {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* ---------- Touch Cursor ---------- */
body.touch-cursor {
    cursor: url('../Cursor_touch.webp') 0 0, pointer;
}

/* ---------- Breathing Animation ---------- */
@keyframes breathe {
    0%   { opacity: 0.2; }
    50%  { opacity: 1.0; }
    100% { opacity: 0.2; }
}

/* ---------- Fade-to-White Overlay ---------- */
.fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out;
}

.fade-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ---------- Responsive Scaling ---------- */
@media (max-width: 1920px) {
    .entrance-scene {
        width: 100vw;
        height: auto;
    }
}