:root{
    --blue:#1f5fa8;
    --deep-blue:#143a72;
    --red:#cf011c;
    --orange:#f28c28;
    --pink:#ffd6df;
    --white:rgba(255,255,255,.86);
    --glass:rgba(255,255,255,.24);
}

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

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

body{
    font-family:"Segoe UI", Arial, sans-serif;
    background:#0c1b3a;
    overflow:hidden;
}

/* =========================
   HERO
========================= */

.hero{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,210,220,.8), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(140,200,255,.7), transparent 25%),
        linear-gradient(135deg, #fff5f7 0%, #d9ecff 40%, #ffe5ec 100%);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("background.png");
    background-size:cover;
    background-position:center;
    opacity:1;
    z-index:1;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    /*background:
        linear-gradient(to bottom, rgba(255,255,255,.32), rgba(255,255,255,.05)),
        radial-gradient(circle at center, transparent 20%, rgba(12,27,58,.18) 100%);*/
    backdrop-filter:blur(3px);
}

/* =========================
   PARALLAX SAKURA BACKGROUND
========================= */

.sakura-bg{
    position:absolute;
    inset:-5%;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 24%, rgba(255,185,210,.45), transparent 18%),
        radial-gradient(circle at 82% 30%, rgba(255,220,235,.42), transparent 20%),
        radial-gradient(circle at 30% 82%, rgba(255,200,220,.36), transparent 17%),
        radial-gradient(circle at 72% 76%, rgba(255,180,210,.32), transparent 18%);
    filter:blur(18px);
    transform:translate3d(0,0,0) scale(1.08);
    transition:transform .18s ease-out;
}

/* =========================
   SAKURA PARTICLES
========================= */

.sakura-field{
    position:absolute;
    inset:0;
    z-index:6;
    overflow:hidden;
    pointer-events:none;
}

.sakura-particle{
    position:absolute;
    top:-80px;
    left:0;
    pointer-events:none;
    user-select:none;
    will-change:transform, opacity;
    opacity:0;
}

.sakura-particle.layer-back{
    z-index:4;
    filter:blur(2.5px);
}

.sakura-particle.layer-mid{
    z-index:7;
    filter:blur(.8px);
}

.sakura-particle.layer-front{
    z-index:28;
    filter:none;
}

/* =========================
   TITLE
========================= */

.title-area{
    position:absolute;
    top:38px;
    left:50%;
    transform:translateX(-50%);
    width:92%;
    text-align:center;
    z-index:30;
}

.badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.58);
    border:1px solid rgba(255,255,255,.9);
    color:var(--blue);
    font-size:14px;
    font-weight:800;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.title-area h1{
    margin-top:14px;
    font-size:clamp(38px, 5.4vw, 72px);
    color:var(--deep-blue);
    line-height:1.05;
    text-shadow:0 4px 18px rgba(255,255,255,.85);
}

.title-area p{
    margin-top:12px;
    font-size:clamp(15px, 2vw, 22px);
    color:#222;
    font-weight:700;
}

/* =========================
   CHARACTER
========================= */

.character{
    position:absolute;
    left:50%;
    top: 65%;
    width:min(540px, 65vw);
    height:min(680px, 77vw);
    transform:translate(-50%, -50%);
    z-index:14;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    animation:characterSoftMove 6s ease-in-out infinite;
}

.character-card{
    position:relative;
    width:100%;
    height:100%;
   /* border-radius:42% 42% 48% 48%;
    background:
        linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.22)),
        radial-gradient(circle at 50% 15%, #fff, transparent 35%),
        linear-gradient(135deg, #f35b6b, #2368b7);
    border:4px solid rgba(255,255,255,.9);
    box-shadow:
        0 36px 80px rgba(20,58,114,.35),
        inset 0 0 35px rgba(255,255,255,.45);
    backdrop-filter:blur(12px);*/
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    animation:characterFloating 5.5s ease-in-out infinite;
}

.character-card::before{
    content:"日本";
    position:absolute;
    top:48px;
    font-size:82px;
    font-weight:900;
    color:rgba(255,255,255,.35);
    letter-spacing:8px;
}

.character-card::after{
    content:"JepangKu";
    position:absolute;
    bottom:55px;
    font-size:36px;
    font-weight:900;
    color:white;
    text-shadow:0 5px 18px rgba(0,0,0,.35);
}

/* Kalau nanti punya gambar karakter, aktifkan kode di bawah ini:*/
.character-card{
    background:url("character.png") center center /    contain    no-repeat;

}
.character-card::before,
.character-card::after{
    display:none;
}

@keyframes characterSoftMove{
    0%,100%{
        filter:drop-shadow(0 26px 38px rgba(31,95,168,.28));
    }
    50%{
        filter:drop-shadow(0 36px 48px rgba(233,75,95,.32));
    }
}

@keyframes characterFloating{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-18px) scale(1.015);
    }
}

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

.bubble-layer{
    position:absolute;
    inset:0;
    z-index:20;
}

.bubble{
    position:absolute;
    width:165px;
    height:165px;
    border-radius:50%;
    background:
        linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.13));
    border:2px solid rgba(255,255,255,.88);
    box-shadow:
        0 18px 45px rgba(31,95,168,.25),
        inset 0 0 28px rgba(255,255,255,.38);
    backdrop-filter:blur(16px);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--deep-blue);
    font-weight:800;
    user-select:none;
    overflow:visible;
    transition:
        box-shadow .35s ease,
        background .35s ease,
        scale .35s ease;
    animation:floatBubble 6s ease-in-out infinite;
    transform:translate(var(--mouse-x, 0px), var(--mouse-y, 0px));
}

.bubble::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,182,203,.75), transparent 65%);
    opacity:0;
    transform:scale(.85);
    transition:.35s ease;
    z-index:-1;
}

.bubble::after{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,0) 45%);
    pointer-events:none;
}

.bubble:hover{
    scale:1.1;
    background:linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.25));
}

.bubble:hover::before{
    opacity:1;
    transform:scale(1.16);
}

.bubble .icon{
    font-size:34px;
    margin-bottom:0px;
    z-index:2;
}

.bubble .label{
    font-size:18px;
    z-index:2;
    margin-top: -10px;
}

.bubble .short{
    margin-top:5px;
    font-size:12px;
    color:#333;
    opacity:.9;
    z-index:2;
}

.tooltip{
    position:absolute;
    bottom:-82px;
    left:50%;
    transform:translate(-50%, 12px);
    width:220px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.95);
    color:var(--deep-blue);
    border-radius:18px;
    padding:12px 14px;
    font-size:12px;
    line-height:1.5;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
    backdrop-filter:blur(12px);
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:40;
}

.bubble:hover .tooltip{
    opacity:1;
    transform:translate(-50%, 0);
}

@keyframes floatBubble{
    0%,100%{
        translate:0 0;
    }
    50%{
        translate:0 -18px;
    }
}

.study{ left:28%; top:18%; animation-delay:0s; }
.work{ right:28%; top:18%; animation-delay:.6s; }

.business{ left:17%; top:41%; animation-delay:1.2s; }
.creator{ right:17%; top:41%; animation-delay:1.8s; }
.travel{ left:25%; bottom:15%; animation-delay:2.4s; }
.culture{ right:25%; bottom:15%; animation-delay:3s; }

.future{
    left:50%;
    bottom:15%;
    width:205px;
    height:205px;
    animation-delay:3.6s;
    transform:translateX(-50%) translate(var(--mouse-x, 0px), var(--mouse-y, 0px));
}

/* =========================
   RIPPLE
========================= */

.ripple-effect{
    position:absolute;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(1);
    pointer-events:none;
    animation:rippleClick .7s ease-out forwards;
    z-index:5;
}

@keyframes rippleClick{
    0%{
        transform:translate(-50%, -50%) scale(1);
        opacity:.9;
    }
    100%{
        transform:translate(-50%, -50%) scale(9);
        opacity:0;
    }
}

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

.sub-bubbles{
    position:absolute;
    inset:0;
    z-index:26;
    pointer-events:none;
}

.sub-bubble{
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(255,255,255,.78);
    border:2px solid rgba(255,255,255,.95);
    box-shadow:0 16px 40px rgba(31,95,168,.25);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:15px;
    font-weight:800;
    color:var(--deep-blue);
    opacity:0;
    transform:scale(.2);
    transition:.45s ease;
    cursor:pointer;
    pointer-events:none;
    overflow:hidden;
}

.sub-bubbles.active .sub-bubble{
    opacity:1;
    transform:scale(1);
    pointer-events:auto;
}

.sub-bubble:hover{
    transform:scale(1.1);
    background:white;
    box-shadow:
        0 22px 55px rgba(233,75,95,.35),
        inset 0 0 26px rgba(255,255,255,.75);
}

.sub1{ left:50%; top:28%; margin-left:-60px; }
.sub2{ left:40%; top:42%; margin-left:-60px; }
.sub3{ left:60%; top:42%; margin-left:-60px; }
.sub4{ left:43%; top:60%; margin-left:-60px; }
.sub5{ left:57%; top:60%; margin-left:-60px; }

/* =========================
   DETAIL PANEL
========================= */

.detail-panel{
    position:absolute;
    right:32px;
    bottom:32px;
    width:min(390px, calc(100% - 64px));
    min-height:220px;
    z-index:45;
    background:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.95);
    border-radius:28px;
    padding:24px;
    box-shadow:0 24px 70px rgba(0,0,0,.23);
    backdrop-filter:blur(18px);
    transform:translateY(130%);
    opacity:0;
    transition:.45s ease;
}

.detail-panel.active{
    transform:translateY(0);
    opacity:1;
}

.detail-panel h3{
    color:var(--deep-blue);
    font-size:26px;
    margin-bottom:10px;
}

.detail-panel p{
    color:#4a5368;
    line-height:1.7;
    font-size:15px;
}

.detail-panel ul{
    margin:14px 0 18px 18px;
    color:var(--deep-blue);
    line-height:1.7;
    font-weight:600;
}

.panel-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.btn{
    border:none;
    border-radius:999px;
    padding:11px 18px;
    font-weight:800;
    cursor:pointer;
    transition:.25s;
}

.btn-primary{
    background:linear-gradient(135deg, var(--red), var(--orange));
    color:white;
    box-shadow:0 10px 25px rgba(233,75,95,.35);
}

.btn-secondary{
    background:rgba(31,95,168,.1);
    color:var(--deep-blue);
}

.btn:hover{
    transform:translateY(-2px);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){
    body{ overflow:auto; }

    .hero{
        min-height:100vh;
        height:auto;
        padding-bottom:180px;
    }

    .title-area{ top:24px; }

    .character{
        top:45%;
        width:100%;
        height:700px;
    }

    .character-card::before{
        font-size:54px;
        top:34px;
    }

    .character-card::after{
        font-size:25px;
        bottom:42px;
    }

    .bubble-layer{
        position:relative;
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:16px;
        padding:230px 20px 40px;
        z-index:22;
    }

    .bubble{
        position:relative;
        inset:auto;
        width:90%;
        height:10em;
        transform:none !important;
        animation:floatBubble 5s ease-in-out infinite;
    }

    .future{
        width:90%;
        height:10em;
        left:auto;
        bottom:auto;
        transform:none !important;
    }

    .tooltip{ display:none; }

    .detail-panel{
        position:fixed;
        left:16px;
        right:16px;
        bottom:16px;
        width:auto;
    }

    .sub-bubble{
        width:95px;
        height:95px;
        font-size:13px;
    }

    .sub1{ left:50%; top:30%; }
    .sub2{ left:25%; top:43%; }
    .sub3{ left:75%; top:43%; }
    .sub4{ left:32%; top:58%; }
    .sub5{ left:68%; top:58%; }

    .sakura-particle.layer-front{ filter:blur(.5px); }
    .sakura-bg{ transform:scale(1.05) !important; }
}

/* =========================
   SVG RISING SUN BACKGROUND
   No image file used. Pure inline SVG + CSS animation.
========================= */
.sakura-bg,
.sakura-field{
    display:none !important;
}

.sunrise-bg{
    position:absolute;
    inset:-18vmax;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
    opacity:.95;
    transform:translate3d(0,0,0) scale(1.02);
    transition:transform .22s ease-out;
}

.sunrise-svg{
    position:absolute;
    left:50%;
    top:50%;
    width:150vmax;
    height:150vmax;
    transform:translate(-50%, -50%);
    overflow:visible;
}

.sunrise-rays-group{
    fill:#FFCE1B;
    opacity:0.7;
    transform-box:view-box;
    transform-origin:500px 660px;
    animation:sunriseRaysRotate 180s linear infinite;
}

.sunrise-core{
    fill:url(#sunGradient);
    opacity:0.95;
    filter:drop-shadow(10px 50px 1px rgba(239, 30, 37, 1));
}

@keyframes sunriseRaysRotate{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

@media(max-width:900px){
    .sunrise-bg{
        inset:-34vmax;
        opacity:.5;
    }
    .sunrise-svg{
        top:42%;
        width:190vmax;
        height:190vmax;
    }
}

@media(max-width:520px){
    .sunrise-bg{
        inset:-46vmax;
        opacity:.50;
    }
    .sunrise-svg{
        top:38%;
        width:225vmax;
        height:225vmax;
    }
}