/* ==================================================
   CBA Reborn Project
   Opening Version 1.2 Beta-1
   Part 1
   Copyright © 1977-2026
   CBA by O.SHIMURA
================================================== */


/* ------------------------------
   Reset
------------------------------ */

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


/* ------------------------------
   Base
------------------------------ */

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    font-family:
        "Yu Gothic",
        "Yu Gothic UI",
        "Hiragino Kaku Gothic ProN",
        sans-serif;

    background:#ffffff;
    color:#1b2d42;

    line-height:1.8;
    letter-spacing:0.05em;

    overflow-x:hidden;
}


/* ------------------------------
   Root Color
------------------------------ */

:root{

    --cba-blue:#0f4c81;

    --cba-light-blue:#4f87bd;

    --cba-deep-blue:#08213d;

    --cba-silver:#d7dde5;

    --cba-white:#ffffff;

}


/* ------------------------------
   Opening Screen
------------------------------ */

#opening{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100vh;

    background:#ffffff;

    display:flex;

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

    flex-direction:column;

    z-index:9999;
}


/* ------------------------------
   Logo Area
------------------------------ */

.logo-wrap{

    text-align:center;

    opacity:0;

    transform:translateY(20px);

}
/* ------------------------------
   Main Logo Image
------------------------------ */

.logo-image{

    width:min(420px,80vw);

    height:auto;

    display:block;

    margin:0 auto;

    filter:drop-shadow(
        0 10px 25px rgba(15,76,129,0.15)
    );

}


/* ------------------------------
   Brand Name
------------------------------ */

.brand-name{

    margin-top:28px;

    font-size:clamp(
        2rem,
        5vw,
        3.8rem
    );

    font-weight:300;

    letter-spacing:0.35em;

    color:var(--cba-blue);

    text-transform:uppercase;

}


/* ------------------------------
   Sub Title
------------------------------ */

.brand-subtitle{

    margin-top:14px;

    font-size:0.95rem;

    letter-spacing:0.18em;

    color:var(--cba-light-blue);

}


/* ------------------------------
   Main Message
------------------------------ */

.main-message{

    margin-top:60px;

    text-align:center;

    max-width:800px;

    padding:0 20px;

}


/* English Catch Copy */

.main-message .en{

    font-size:clamp(
        1.1rem,
        2vw,
        1.6rem
    );

    font-weight:300;

    letter-spacing:0.08em;

    color:var(--cba-deep-blue);

}


/* Japanese Catch Copy */

.main-message .jp{

    margin-top:12px;

    font-size:clamp(
        1rem,
        1.8vw,
        1.3rem
    );

    color:#4a5a6a;

    letter-spacing:0.12em;

}
/* =================================
   CBA Opening Version 1.2
   Beta-1 Part 3
   Opening Animation
================================= */


/* ------------------------------
   Opening Fade In
------------------------------ */

.opening-screen{

    animation:
        openingFadeIn 1.8s ease-out
        forwards;

}


/* ------------------------------
   Logo Appearance
------------------------------ */

.logo-wrap{

    animation:
        logoReveal 1.8s ease-out
        0.3s forwards;

}


/* ------------------------------
   Logo Image
------------------------------ */

.logo-image{

    animation:
        logoScale 2.0s ease-out
        0.3s forwards;

}


/* ------------------------------
   Brand Name Appearance
------------------------------ */

.brand-name{

    opacity:0;

    transform:translateY(18px);

    animation:
        textReveal 1.2s ease-out
        1.4s forwards;

}


/* ------------------------------
   Brand Subtitle Appearance
------------------------------ */

.brand-subtitle{

    opacity:0;

    transform:translateY(12px);

    animation:
        textReveal 1.2s ease-out
        1.8s forwards;

}


/* ------------------------------
   Main Message Appearance
------------------------------ */

.main-message{

    opacity:0;

    transform:translateY(18px);

    animation:
        textReveal 1.4s ease-out
        2.3s forwards;

}


/* ------------------------------
   English Message
------------------------------ */

.main-message .en{

    opacity:0;

    animation:
        messageReveal 1.2s ease-out
        2.5s forwards;

}


/* ------------------------------
   Japanese Message
------------------------------ */

.main-message .jp{

    opacity:0;

    animation:
        messageReveal 1.2s ease-out
        2.9s forwards;

}


/* ------------------------------
   Enter Button
------------------------------ */

.enter-button{

    opacity:0;

    transform:translateY(15px);

    animation:
        textReveal 1.2s ease-out
        3.5s forwards;

}


/* ------------------------------
   Button Hover
------------------------------ */

.enter-button{

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;

}


.enter-button:hover{

    transform:
        translateY(-2px);

}


/* ------------------------------
   Opening Fade Animation
------------------------------ */

@keyframes openingFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ------------------------------
   Logo Reveal
------------------------------ */

@keyframes logoReveal{

    from{

        opacity:0;

        transform:
            translateY(28px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ------------------------------
   Logo Scale
------------------------------ */

@keyframes logoScale{

    from{

        transform:
            scale(0.94);

    }

    to{

        transform:
            scale(1);

    }

}


/* ------------------------------
   Text Reveal
------------------------------ */

@keyframes textReveal{

    from{

        opacity:0;

        transform:
            translateY(18px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ------------------------------
   Message Reveal
------------------------------ */

@keyframes messageReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ------------------------------
   Smooth Rendering
------------------------------ */

.logo-image,
.brand-name,
.brand-subtitle,
.main-message,
.enter-button{

    will-change:
        opacity,
        transform;

}


/* ------------------------------
   Reduced Motion
------------------------------ */

@media (
    prefers-reduced-motion: reduce
){

    .opening-screen,
    .logo-wrap,
    .logo-image,
    .brand-name,
    .brand-subtitle,
    .main-message,
    .main-message .en,
    .main-message .jp,
    .enter-button{

        animation:none;

        opacity:1;

        transform:none;

    }

}