/* ======================================================
   MELLENA Official Website
   style.css
   Version 3
====================================================== */

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Outfit","Noto Sans JP",sans-serif;

    color:#111;

    background:#fff;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

ul{

    list-style:none;

}

/* ======================================================
VARIABLE
====================================================== */

:root{

    --white:#ffffff;

    --black:#101010;

    --text:#444;

    --border:#ececec;

    --primary:#5B7FFF;

    --secondary:#8D53FF;

    --gradient:
    linear-gradient(
        135deg,
        #5B7FFF,
        #8D53FF);

    --shadow:
    0 20px 60px rgba(0,0,0,.08);

    --radius:24px;

    --transition:.35s;

}

/* ======================================================
COMMON
====================================================== */

.container{

    width:min(1200px,92%);

    margin:auto;

}

section{

    position:relative;

    padding:140px 0;

}

.section-tag{

    display:inline-block;

    color:var(--primary);

    font-size:13px;

    letter-spacing:.35em;

    font-weight:700;

    margin-bottom:18px;

}

.section-title{

    font-size:clamp(42px,5vw,72px);

    line-height:1.15;

    letter-spacing:-.03em;

    margin-bottom:28px;

}

.btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    padding:18px 36px;

    border-radius:999px;

    transition:.35s;

}

.btn-primary{

    background:var(--gradient);

    color:#fff;

    box-shadow:
        0 15px 35px rgba(91,127,255,.25);

}

.btn-primary:hover{

    transform:translateY(-5px);

}

.btn-outline{

    border:1px solid rgba(255,255,255,.35);

    color:#fff;

    backdrop-filter:blur(20px);

}

.btn-outline:hover{

    background:#fff;

    color:#111;

}

/* ======================================================
LOADING
====================================================== */

#loading{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loading{

    width:340px;

    text-align:center;

}

.loading__logo{

    width:180px;

    margin:auto;

}

.loading__bar{

    width:100%;

    height:6px;

    background:#efefef;

    border-radius:999px;

    overflow:hidden;

    margin:35px 0 18px;

}

#loadingProgress{

    display:block;

    width:0%;

    height:100%;

    background:var(--gradient);

}

#loadingText{

    color:#777;

    font-size:14px;

}

/* ======================================================
CURSOR
====================================================== */

.cursor{

    position:fixed;

    width:34px;

    height:34px;

    border:2px solid var(--primary);

    border-radius:50%;

    pointer-events:none;

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

    z-index:9999;

    transition:.18s;

}

.cursor-dot{

    position:fixed;

    width:7px;

    height:7px;

    background:var(--primary);

    border-radius:50%;

    pointer-events:none;

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

    z-index:10000;

}

.cursor-label{

    position:fixed;

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

    color:#fff;

    font-size:11px;

    font-weight:600;

    opacity:0;

    pointer-events:none;

    z-index:10001;

}

/* ======================================================
BACKGROUND
====================================================== */

.background-gradient{

    position:fixed;

    inset:0;

    z-index:-2;

    background:

    radial-gradient(

    circle at top left,

    rgba(91,127,255,.15),

    transparent 35%),

    radial-gradient(

    circle at bottom right,

    rgba(141,83,255,.15),

    transparent 40%),

    #fff;

}

#particles{

    position:fixed;

    inset:0;

    z-index:-1;

}

/* ======================================================
HEADER
====================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:.35s;

}

.header.scrolled{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    width:180px;

}

.nav ul{

    display:flex;

    gap:45px;

}

.nav a{

    position:relative;

    font-size:14px;

    letter-spacing:.15em;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.nav a:hover::after{

    width:100%;

}

.menu-button{

    display:none;

    flex-direction:column;

    gap:6px;

}

.menu-button span{

    width:28px;

    height:2px;

    background:#111;

}

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

.hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.hero__video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.55),

        rgba(255,255,255,.82));

}

.hero__grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(

    rgba(255,255,255,.15) 1px,

    transparent 1px),

    linear-gradient(

    90deg,

    rgba(255,255,255,.15) 1px,

    transparent 1px);

    background-size:60px 60px;

    opacity:.45;

}

.hero__content{

    position:relative;

    z-index:5;

    text-align:center;

}

.hero__eyebrow{

    display:inline-block;

    letter-spacing:.4em;

    color:var(--primary);

    margin-bottom:24px;

    font-size:14px;

    font-weight:700;

}

.hero__title{

    font-size:clamp(70px,12vw,170px);

    line-height:.9;

    letter-spacing:-.05em;

    font-weight:800;

}

.hero__subtitle{

    font-size:clamp(28px,4vw,58px);

    margin-top:24px;

    line-height:1.2;

    font-weight:500;

}

.hero__text{

    max-width:720px;

    margin:35px auto;

    color:#555;

    font-size:18px;

    line-height:2;

}

.hero__buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:50px;

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:5;

}

.scroll-indicator span{

    font-size:11px;

    letter-spacing:.3em;

}

.scroll-line{

    width:2px;

    height:80px;

    background:#111;

    animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

    0%{

        transform-origin:top;

        transform:scaleY(0);

    }

    50%{

        transform-origin:top;

        transform:scaleY(1);

    }

    51%{

        transform-origin:bottom;

    }

    100%{

        transform-origin:bottom;

        transform:scaleY(0);

    }

}

/* ======================================================
STATEMENT
====================================================== */

.statement{

    padding:180px 0;

    text-align:center;

    background:#fff;

}

.statement__label{

    display:inline-block;

    color:var(--primary);

    letter-spacing:.35em;

    font-size:13px;

    font-weight:700;

    margin-bottom:28px;

}

.statement__title{

    font-size:clamp(52px,7vw,110px);

    line-height:1.05;

    letter-spacing:-.05em;

    max-width:1100px;

    margin:0 auto 40px;

}

.statement__text{

    max-width:760px;

    margin:auto;

    color:#666;

    line-height:2.1;

    font-size:18px;

}

/* ======================================================
ABOUT
====================================================== */

.about{

    background:#fafafa;

}

.about__container{

    display:grid;

    grid-template-columns:1.05fr 1fr;

    gap:80px;

    align-items:center;

}

.about__image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    box-shadow:var(--shadow);

}

.about__image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.about__image:hover img{

    transform:scale(1.08);

}

.about__content h2{

    font-size:clamp(42px,5vw,72px);

    line-height:1.15;

    margin-bottom:28px;

}

.about__content p{

    color:#666;

    line-height:2;

    margin-bottom:24px;

    font-size:17px;

}

/* ======================================================
SERVICES
====================================================== */

.services{

    background:#fff;

}

.services__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

    margin-top:70px;

}

.service{

    position:relative;

    padding:42px;

    border-radius:28px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border:1px solid rgba(0,0,0,.06);

    transition:var(--transition);

    overflow:hidden;

}

.service::before{

    content:"";

    position:absolute;

    inset:0;

    background:var(--gradient);

    opacity:0;

    transition:.35s;

}

.service:hover::before{

    opacity:1;

}

.service>*{

    position:relative;

    z-index:2;

}

.service span{

    display:inline-flex;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(91,127,255,.12);

    color:var(--primary);

    font-weight:700;

    margin-bottom:28px;

}

.service h3{

    font-size:28px;

    margin-bottom:18px;

}

.service p{

    color:#666;

    line-height:1.9;

}

.service:hover{

    transform:translateY(-14px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.service:hover h3,

.service:hover p,

.service:hover span{

    color:#fff;

}

.service:hover span{

    background:rgba(255,255,255,.18);

}

/* ======================================================
WORKS
====================================================== */

.works{

    background:#111;

    color:#fff;

}

.works .section-tag{

    color:#7fa6ff;

}

.works__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:70px;

}

.work{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    cursor:pointer;

    min-height:360px;

    background:#222;

}

.work--large{

    grid-row:span 2;

    min-height:760px;

}

.work img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.work::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15));

}

.work:hover img{

    transform:scale(1.08);

}

.work__content{

    position:absolute;

    left:35px;

    bottom:35px;

    z-index:5;

}

.work__content span{

    display:inline-block;

    font-size:12px;

    letter-spacing:.25em;

    color:#8ab2ff;

    margin-bottom:12px;

}

.work__content h3{

    font-size:32px;

    line-height:1.2;

}

.work:hover .work__content{

    transform:translateY(-8px);

    transition:.35s;

}

/* VIEWバッジ */

.work::before{

    content:"VIEW";

    position:absolute;

    top:30px;

    right:30px;

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(18px);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:13px;

    letter-spacing:.2em;

    opacity:0;

    transform:scale(.7);

    transition:.35s;

    z-index:10;

}

.work:hover::before{

    opacity:1;

    transform:scale(1);

}

/* ======================================================
SHOWREEL
====================================================== */

.showreel{

    background:#f7f8fc;

}

.showreel__video{

    margin-top:70px;

    overflow:hidden;

    border-radius:32px;

    box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.showreel__video video{

    width:100%;

    display:block;

}

/* ======================================================
NUMBERS
====================================================== */

.numbers{

    background:#111;

    color:#fff;

}

.numbers .container{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

}

.number{

    text-align:center;

}

.number h2{

    font-size:clamp(60px,8vw,110px);

    font-weight:800;

    line-height:1;

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    margin-bottom:18px;

}

.number p{

    color:#bbb;

    letter-spacing:.25em;

    text-transform:uppercase;

    font-size:13px;

}

/* ======================================================
NEWS
====================================================== */

.news{

    background:#fff;

}

.news__list{

    margin-top:70px;

    display:flex;

    flex-direction:column;

}

.news__item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:34px 0;

    border-bottom:1px solid var(--border);

    transition:.35s;

}

.news__item span{

    color:var(--primary);

    min-width:140px;

    font-weight:600;

}

.news__item h3{

    flex:1;

    font-size:28px;

    font-weight:500;

}

.news__item:hover{

    padding-left:18px;

}

/* ======================================================
CONTACT
====================================================== */

.contact{
    padding:140px 0;
}

.contact-container{
    display:grid;
    grid-template-columns:1fr 480px;
    gap:80px;
    align-items:center;
}

.contact-description{
    margin:30px 0;
    max-width:520px;
    line-height:2;
    opacity:.8;
}

.contact-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:24px;

    padding:40px;
}

.contact-item{

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.contact-item:last-child{

    border:none;
}

.contact-item span{

    display:block;

    font-size:.8rem;

    opacity:.6;

    margin-bottom:8px;

    letter-spacing:.15em;

    text-transform:uppercase;
}

.contact-item h3{

    font-size:1.15rem;

    font-weight:600;
}

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

gap:50px;

}

}

/* ======================================================
FOOTER
====================================================== */

.footer{

    background:#0b0b0b;

    color:#fff;

    padding:120px 0 40px;

    position:relative;

    overflow:hidden;

}

.footer::before{

    content:"MELLENA";

    position:absolute;

    top:40px;

    left:50%;

    transform:translateX(-50%);

    font-size:clamp(80px,16vw,240px);

    font-weight:800;

    color:rgba(255,255,255,.03);

    white-space:nowrap;

    pointer-events:none;

}

.footer__top{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    gap:80px;

    align-items:flex-start;

    margin-bottom:80px;

}

.footer__logo{

    font-size:56px;

    line-height:1;

    margin-bottom:16px;

}

.footer__top p{

    color:#888;

}

.footer__menu{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer__menu a{

    transition:.3s;

    letter-spacing:.08em;

}

.footer__menu a:hover{

    color:var(--primary);

}

.footer__bottom{

    position:relative;

    z-index:2;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:30px;

    color:#777;

    font-size:14px;

}

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

.mobile-nav{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(22px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:32px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.mobile-nav.active{

    opacity:1;

    visibility:visible;

}

.mobile-nav a{

    font-size:30px;

    font-weight:700;

    letter-spacing:.08em;

}

/* ======================================================
BACK TO TOP
====================================================== */

.back-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--gradient);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(91,127,255,.3);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    transform:translateY(-6px);

}

/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width:1200px){

    .hero__title{

        font-size:120px;

    }

    .statement__title{

        font-size:72px;

    }

}

@media (max-width:992px){

    section{

        padding:100px 0;

    }

    .nav{

        display:none;

    }

    .menu-button{

        display:flex;

    }

    .about__container{

        grid-template-columns:1fr;

    }

    .services__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .works__grid{

        grid-template-columns:repeat(2,1fr);

    }

    .numbers .container{

        grid-template-columns:repeat(2,1fr);

    }

    .footer__top{

        flex-direction:column;

    }

}

@media (max-width:768px){

    .hero{

        text-align:center;

        padding:0 24px;

    }

    .hero__title{

        font-size:72px;

    }

    .hero__subtitle{

        font-size:34px;

    }

    .hero__text{

        font-size:16px;

    }

    .hero__buttons{

        flex-direction:column;

        width:100%;

    }

    .hero__buttons .btn{

        width:100%;

    }

    .statement__title{

        font-size:52px;

    }

    .section-title{

        font-size:44px;

    }

    .services__grid{

        grid-template-columns:1fr;

    }

    .works__grid{

        grid-template-columns:1fr;

    }

    .work--large{

        grid-row:auto;

        min-height:420px;

    }

    .numbers .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .news__item{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .news__item h3{

        font-size:22px;

    }

    .contact-form{

        width:100%;

    }

    .footer__logo{

        font-size:40px;

    }

    .footer__menu{

        gap:12px;

    }

    .back-top{

        right:20px;

        bottom:20px;

    }

}

@media (max-width:480px){

    .container{

        width:92%;

    }

    .hero__title{

        font-size:58px;

    }

    .hero__subtitle{

        font-size:28px;

    }

    .statement__title{

        font-size:42px;

    }

    .section-title{

        font-size:36px;

    }

}

/* ======================================================
CURSOR EFFECT
====================================================== */

.cursor.active{

    width:80px;

    height:80px;

    background:rgba(91,127,255,.18);

    backdrop-filter:blur(10px);

}

.cursor-label.show{

    opacity:1;

}

/* ======================================================
FADE ANIMATION
====================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

}

.fade-left{

    opacity:0;

    transform:translateX(-40px);

}

.fade-right{

    opacity:0;

    transform:translateX(40px);

}

.scale-in{

    opacity:0;

    transform:scale(.92);

}

/* ======================================================
TEXT SELECTION
====================================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ======================================================
SCROLLBAR
====================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        var(--secondary));

    border-radius:999px;

}

/* ======================================================
UTILITY
====================================================== */

.text-center{

    text-align:center;

}

.hidden{

    display:none !important;

}

.mt-0{

    margin-top:0 !important;

}

.mb-0{

    margin-bottom:0 !important;

}

.glass{

    background:rgba(255,255,255,.6);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.35);

}

.gradient-text{

    background:var(--gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.shadow{

    box-shadow:var(--shadow);

}

.radius{

    border-radius:var(--radius);

}

/* ======================================================
SMOOTH TRANSITION
====================================================== */

a,
button,
input,
textarea,
.service,
.work,
.news__item,
.btn{

    transition:
        all .35s ease;

}

/* ======================================================
END
====================================================== */
body {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.7;
    color: #111;
}

h1, h2, h3 {
    letter-spacing: 0.04em;
    font-weight: 700;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

section {
    padding: 120px 0;
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

:root {
    --bg: #0b0f1a;
    --text: #111;
    --sub: rgba(255,255,255,0.7);
    --accent: #6c5ce7;
}

body {
    background: var(--bg);
    color: var(--text);
}

.section-tag {
    color: var(--accent);
}

.work img,
.service,
.about__image {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.work,
.service {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.work:hover,
.service:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* ===========================
   MESSAGE
=========================== */

.message{

    padding:140px 0;

}

.message-container{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

}

.message-image{

    overflow:hidden;

    border-radius:24px;

}

.message-image img{

    width:100%;

    display:block;

    transition:.6s;

}

.message-image:hover img{

    transform:scale(1.05);

}

.message-title{

    font-size:56px;

    line-height:1.05;

    margin:20px 0 40px;

}

.message-content p{

    margin-bottom:24px;

    opacity:.85;

    line-height:2;

}

.message-content h4{

    margin-top:40px;

    font-size:20px;

    letter-spacing:.1em;

}

@media(max-width:960px){

.message-container{

grid-template-columns:1fr;

gap:60px;

}

.message-title{

font-size:42px;

}

}

/* ===========================
   Footer Social
=========================== */

.footer__social h4{

    font-size:13px;

    letter-spacing:.2em;

    margin-bottom:18px;

    opacity:.7;

}

.social-links{

    display:flex;

    gap:18px;

}

.social-links a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.social-links a:hover{

    transform:translateY(-6px);

    background:#4d8cff;

    border-color:#4d8cff;

    box-shadow:0 10px 30px rgba(77,140,255,.35);

}