/* ============================================================
   LOADING SCREEN - Yutama Prince Animation
   Phases:
     Phase 1  (t≈0.5)  : egg-01-shock rises from onsen center
     Phase 2  (t≈2.0)  : eggs 02–07 appear, bubble 1→2
     Phase 3  (t≈4.2)  : eggs 08–13 appear, bubble 2→3
     Phase 4  (t≈6.5)  : large character rises, bubble 3→4
     Phase 5  (t≈8.0)  : crown drops, bubble 4→5
     Phase 6  (t≈8.85) : crown lands → chara-crown, bubble 5→6
     Phase 7  (t≈10.2) : character + towel rises (clip-path), rays spin, bubble 6→7
     Phase 8  (t≈13.2) : towel-spread pose, fade to final scene
     Phase 9  (t≈15.0) : final reveal (rays, chara-final, text, duck)
============================================================ */

/* ─── Overlay ─── */
#loading {
    position: fixed;
    inset: 0;
    /* dvh accounts for Safari iOS browser chrome (address bar / toolbar) */
    height: 100dvh;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ─── Skip button ─── */
a.btn.btn-main.btn-skip-loading {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    white-space: nowrap;
}
a.btn.btn-main.btn-skip-loading span:after{
    width: 7px;
    height: 12px;
    background-image: url(../images/loading/arrow-btn-loading.svg);
    background-size: 100% 100%;
}
a.btn.btn-main.btn-skip-loading:hover span:after{
    background-image: url(../images/loading/arrow-btn-loading-white.svg);   
}
a.btn.btn-main.btn-skip-loading span{
    border-radius: 27px;
    min-width: 175px;
    height: 54px;
    min-height: 54px;
}
a.btn.btn-main.btn-skip-loading::after{
    border-radius: 27px;
    width: 175px;
    height: 54px;
    min-height: 54px;

}
/* ─── Scene containers ─── */
#scene-onsen,
#scene-final {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scene-final {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   ONSEN SCENE  (frames ①–⑨)
============================================================ */

/* Main scene wrapper — matches design canvas 1160×576px */
.l-scene-wrap {
    position: relative;
    width: 1160px;
    height: 576px;
    flex-shrink: 0;
    overflow: visible; /* clip eggs rising from below water surface */
}

/* Scale handled by JS (_scaleScene) for accurate mobile fit */

/* Onsen scene wrapper – scale via CSS var set by JS */
.l-scene-wrap {
    transform-origin: center center;
    transform: scale(var(--ls-onsen-scale, 1));
}

/* Onsen background image
   Onsen image ratio 2321:1154 = 2.01:1
   At 700px wide → image height = 348px
   Image sits in bottom portion of scene, leaving top 130px for crown/deco
*/
.l-onsen-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

/* ── Decorative elements ── */
.l-flower-left {
    position: absolute;
    left: -55px;
    top: 0px;
    width: 120px;
    z-index: -1;
    pointer-events: none;
    width: 297px;
    height: 218px;
}
.l-pattern-right {
    position: absolute;
    right: -60px;
    top: -70px;
    width: 355px;
    z-index: -1;
    pointer-events: none;
}

/* ── Steam clouds ── */
.l-steam {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.l-steam img { width: 1210px; display: block; }
/* Positions: outside the onsen stones at bottom */
.l-steam.s1  { left:  -60px; bottom: 0; }

/* ── Rays (rotating light – visible phase 7 onward)
   Center matches character center in onsen water area
   Character center: left≈39%+92px/2=52%, top≈37%+140px/2=50%
── */
#l-rays {
    position: absolute;
    width: 1111px;
    height: 1111px;
    left: 25px;
    top: -268px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}
#l-rays-pink {
    position: absolute;
    width: 1111px;
    height: 1111px;
    left: 25px;
    top: -268px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   EGGS  (13 mini + egg-01 shock variant)
============================================================ */

.l-egg {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    width: 96px;
    height: 85px;
    opacity: 0;         /* container shown by GSAP before shadow fades in */
}
/* egg-01 is larger (115×131px) */
#l-egg-01 {
    width: 115px;
    height: 131px;
}
/* .egg-body: overflow:hidden clip box — egg img rises up inside it */
.l-egg .egg-body {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
/* Egg body images — y-translated by GSAP for water-rise effect */
.l-egg .egg-body img,
.l-egg .e-shock,
.l-egg .e-normal {
    display: block;
    width: 100%;
}
/* Shadow ellipse — absolutely positioned at bottom of egg, z below body */
.l-egg .e-shadow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 177px;   /* actual image size: 177×56px */
    height: 56px;
    max-width: none; /* override global img { max-width: 100% } */
    opacity: 0;   /* faded in by GSAP */
    z-index: 0;
    display: block;
}
/* egg-01 has two layered images: shock and normal stacked inside .egg-body */
.l-egg .e-shock  { position: relative; z-index: 1; }
.l-egg .e-normal { position: absolute; top: 0; left: 0; opacity: 0; z-index: 2; }

/* ── Egg positions — px on 1160×576px canvas
   bg-onsen fills exactly 1160×576px (bottom:0)
   Stone inner top edge ≈ y:95px, water bottom ≈ y:490px
── */
/* SVG source: <use transform="translate(tx, ty)"> = shadow ring top-left (182×61px)
   egg CSS left  ≈ tx  (shadow ring & egg share same center-x)
   egg CSS top   = ty − 72  (egg seat at 70% body height aligns to shadow center ty+30.5) */
#l-egg-01  { left: 405px; top: 276px; }  /* shadow ring translate(356.84, 373.03) */
#l-egg-02  { left: 697px; top:  69px; }  /* nudged inward from (646.84, 118.03) */
#l-egg-03  { left: 204px; top: 306px; }  /* nudged inward from (157.84, 345.03) */
#l-egg-04  { left: 840px; top: 125px; }  /* nudged inward from (785.84, 166.03) */
#l-egg-05  { left: 431px; top:  51px; }  /* nudged down from (388.84, 86.03) */
#l-egg-06  { left: 227px; top:  96px; }  /* nudged inward from (188.84, 138.03) */
#l-egg-07  { left: 756px; top: 189px; }  /* shadow ring translate(574.84, 393.03) */
#l-egg-08  { left: 850px; top: 250px; }  /* nudged inward from (804.84, 297.03) */
#l-egg-09  { left: 149px; top: 187px; }  /* nudged inward from (108.84, 218.03) */
#l-egg-10  { left: 789px; top: 342px; }  /* nudged inward from (749.84, 384.03) */
#l-egg-11  { left: 347px; top:  109px; }  /* nudged down from (311.84, 143.03) */
#l-egg-12  { left: 278px; top: 206px; }  /* shadow ring translate(229.84, 249.03) */
#l-egg-13  { left: 643px; top: 355px; }  /* estimated — front-center (near character) */

/* ============================================================
   MAIN CHARACTER SLOT  (center of onsen water area)
   Scene: 700x560px
   Water center-x ≈ 350px = 50%, water top-edge ≈ 168px = 30%
   chara-no-crown 780x568 → display width 185px, height≈135px
   chara-crown 631x648 → display width 185px, height≈190px
   load-chara-towel 328x114 @2x → display 164x57px
   Slot placed so character bottom sits at ≈70% (392px)
============================================================ */

.l-chara-slot {
    position: absolute;
    /* chara 454×400px; slot top=0, height=mặt nước (~340px)
       overflow:hidden clip tại đường mặt nước, nhân vật trồi dần lên từ dưới */
    left: 353px;
    top: 0;
    width: 454px;
    height: 310px;
    overflow: hidden;
    z-index: 6;
}

/* Inner wrapper — position:relative (giống egg-body) để overflow:hidden clip đúng */
#l-chara-inner {
    position: relative;
    width: 100%;
    height: 400px;
}

/* Both chara images stack inside #l-chara-inner */
#l-chara-inner img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

/* ─── Towel (standalone, flies in from left at phase 9) ───
   328×114px (design size)
   Final position: center below chara at water level
─── */
#l-chara-towel {
    position: absolute;
    left: 328px;         /* 580 - 328/2 = 416 (centered under chara) */
    top: 274px;          /* water surface level ≈ scene bottom − towel height */
    width: 328px;
    height: 114px;
    z-index: 7;
    opacity: 0;
    pointer-events: none;
}

/* ─── Crown drop ───
   crown image: 259x162 → display at 65px wide, height≈41px
   Needs to land on character head at ~top:27% = 151px
   Start position: top: 20px (just above onsen, visible)
   GSAP animates y: ~130px to reach head
─── */
/* ─── Shock lines – flash over chara head at phase 6 ───
   67×56px (design size)
   Center on chara head: center-x=570, head top ≈ slot.top = 176px
─── */
#l-shock-lines {
    position: absolute;
    left: 631px;         /* 570 - 67/2 = 537 */
    top: -50px;          /* 176 - 18 (slightly above slot top) */
    width: 67px;
    height: 56px;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
}

/* ─── Egg-03 arm – overlay on egg-03 (phases 7–8) ───
   148×66px (design size)
   egg-03: left:170px top:278px size:96×85px
   arm stretches right from egg-03
─── */
#l-egg-03-arm {
    position: absolute;
    left: 280px;         /* align left edge with egg-03 */
    top: 293px;          /* vertically centered on egg-03 (278 + 85/2 - 66/2) */
    width: 148px;
    height: 66px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

#l-egg-03-arm-no-towel {
    position: absolute;
    left: 280px;
    top: 293px;
    width: 148px;
    height: 66px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* ─── Chara shadows – hiện tại phase 4, nằm tại mặt nước ───
   shadow-deep  390×125px: bóng da nền, to hơn
   shadow-surface 267×84px: bóng xám mặt nước, nhỏ hơn
   center-x ≈ 580px; mặt nước ≈ top:3#l-egg-03-arm30px
─── */
#l-chara-shadow-deep {
    position: absolute;
    left: 385px;         /* 580 - 390/2 */
    top: 226px;          /* bắt đầu gần đầu nhân vật (frame 4–5); GSAP sẽ animate xuống */
    width: 390px;
    height: 125px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    max-width: none;
}
#l-chara-shadow-surface {
    position: absolute;
    left: 447px;         /* 580 - 267/2 */
    top: 280px;          /* luôn ở mặt nước */
    width: 267px;
    height: 84px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    max-width: none;
}

/* ─── Crown drop ───
   crown 129×81px (design size)
   Center at x=580: left = 580 - 129/2 = 515px
   Starts off-screen above; GSAP drops it to chara head level
─── */
#l-crown {
    position: absolute;
    left: 534px;
    top: -25px;          /* off-screen above, GSAP đưa xuống */
    width: 152px;
    height: 97px;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
}

/* ─── Duck ───
   Sits inside onsen water, right side
   Water right edge ≈ 88%, water vertical center ≈ 52%
─── */
#l-duck {
    position: absolute;
    /* Duck inside water, right area */
    left: 940px;
    top: 230px;
    width: 62px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

/* ─── Speech bubbles ───
   Upper-right of onsen, aligned with design
─── */
#l-bubble-wrap {
    position: absolute;
    right: -80px;
    width: 425px;
    height: 165px;
    z-index: 8;
    top: 57px;
    pointer-events: none;
}
.l-bubble {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;          /* GSAP controls */
}


/* ============================================================
   FINAL SCENE  (frames ⑩–⑬)
============================================================ */

.l-final-wrap {
    position: relative;
    width: 420px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Final scene scale handled by JS (_scaleScene) */

/* Final scene wrapper – scale via CSS var set by JS */
.l-final-wrap {
    transform-origin: center center;
    transform: scale(var(--ls-final-scale, 1));
}

/* Mobile: match final scene scale to onsen scene scale for visual consistency */
@media (max-width: 767px) {
    .l-final-wrap {
        transform: scale(var(--ls-onsen-scale, 1));
    }
}

/* iPad: nudge final scene upward to compensate for browser chrome offset */
@media (min-width: 768px) and (max-width: 1366px) {
    .l-final-wrap {
        margin-top: -60px;
    }
}

/* Rotating rays behind everything */
#l-rays-final {
    position: absolute;
    width: 1111px;
    height: 1111px;
    max-width: none;      /* override global img { max-width: 100% } */
    max-height: none;
    /* Center in .l-final-wrap (420px wide): (420-1111)/2 = -345.5px */
    left: -346px;
    top: 50%;
    margin-top: -555px;   /* half of 1111 – no CSS transform so GSAP rotation works */
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* Top title text */
#l-text-tamago,
#l-text-ouji {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 470px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* Character */
#l-chara-final {
    position: relative;
    z-index: 4;
    width: 456px;         /* 456px native / 2 */
    opacity: 0;
    display: block;
    margin: 70px auto 0;
    pointer-events: none;
}

/* 誕生 text */
#l-text-tanjou {
    position: absolute;
    bottom: -146px;
    left: 50%;
    transform: translateX(-50%);
    width: 294px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

/* Duck final scene – bottom-right, visible from start of final scene */
#l-duck-final {
    position: absolute;
    bottom: -104px;
    right: -258px;
    width: 66px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

/* Falling trail line – follows egg during descent */
#l-falling-line {
    position: absolute;
    bottom: 55px;
    left: 50%;
    margin-left: -33px;  /* center: 66/2 */
    width: 66px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    max-width: none;
    transform-origin: center bottom;
}

/* Egg final scene – phase 11-12
   fall-egg-big.png: 81×68px native
   Base position aligned near duck (bottom-right area)
*/
#l-egg-final {
    position: absolute;
    bottom: -104px;
    right: -266px;       /* slightly left of duck center */
    width: 81px;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    max-width: none;
    transform-origin: center bottom;
}

/* Duck final scene – bottom-right, visible from start of final scene */
/* (defined above – placeholder) */

/* Final speech bubbles */
#l-bubble-wrap-final {
    position: absolute;
    bottom: 0px;
    right: -458px;
    width: 425px;
    height: 165px;
    z-index: 6;
    pointer-events: none;
}
#l-bubble-wrap-final .l-bubble {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    opacity: 0;
}
@media(max-width:767px){
    
    a.btn.btn-main.btn-skip-loading{
        bottom: unset;
        top: calc(50% + 200px);
    }

    /* Final scene – mobile size adjustments
       Dùng scale() trên chính phần tử để phóng to thêm,
       vì parent .l-final-wrap đã bị scale thu nhỏ bởi --ls-onsen-scale */
    #l-text-tamago {
        transform: translateX(-50%) scale(2);
        transform-origin: center top;
        top: -50px;
    }

    #l-chara-final {
        transform: scale(1.25);
        transform-origin: center top;
    }
    #l-egg-final{
        bottom: -83px;
        right: -365px;
    }
}