/* =========================================================
   Bloom Beauty School
   Premium Brand Version 11
   Floating Gallery Hero Edition
   ========================================================= */

.hero-v11{
    position:relative;
    min-height:clamp(720px,92vh,940px);
    overflow:hidden;
    display:flex;
    align-items:center;
    background:
        linear-gradient(115deg,#ffffff 0%,#fbfdff 35%,#f8fbff 64%,#fffafc 100%);
    isolation:isolate;
}
.hero-v11-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-2;
}
.hero-aura{
    position:absolute;
    display:block;
    border-radius:50%;
    filter:blur(6px);
}
.hero-aura-blue{
    width:760px;height:760px;
    right:-130px;top:-170px;
    background:radial-gradient(circle,rgba(198,226,246,.72) 0%,rgba(217,235,249,.42) 38%,transparent 70%);
}
.hero-aura-pink{
    width:620px;height:620px;
    left:35%;bottom:-310px;
    background:radial-gradient(circle,rgba(249,218,229,.58) 0%,rgba(252,234,240,.32) 42%,transparent 72%);
}
.hero-aura-gold{
    width:420px;height:420px;
    left:-120px;top:-110px;
    background:radial-gradient(circle,rgba(244,221,160,.32) 0%,rgba(248,233,195,.12) 42%,transparent 72%);
}
.hero-gold-line{
    position:absolute;
    display:block;
    height:1px;
    width:430px;
    background:linear-gradient(90deg,transparent,rgba(199,158,61,.55),transparent);
    transform-origin:center;
    opacity:.72;
}
.hero-gold-line-1{right:5%;top:23%;transform:rotate(-21deg)}
.hero-gold-line-2{right:19%;bottom:18%;transform:rotate(14deg);width:300px;opacity:.38}

.hero-v11-inner{
    width:min(1240px,calc(100% - 64px));
    margin:0 auto;
    padding:132px 0 86px;
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:38px;
    align-items:center;
}
.hero-v11-copy{
    position:relative;
    z-index:8;
    max-width:570px;
}
.hero-v11 .eyebrow{
    margin:0 0 24px;
    color:#b88c2e;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.30em;
}
.hero-v11-title{
    margin:0 0 28px;
    color:#273e88;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:clamp(3rem,5.6vw,5.8rem);
    font-weight:500;
    line-height:1.22;
    letter-spacing:.055em;
}
.hero-v11-title span{display:block}
.hero-v11-title span:last-child{
    position:relative;
    white-space:nowrap;
}
.hero-v11-title span:last-child::after{
    content:"";
    display:block;
    width:118px;
    height:2px;
    margin-top:20px;
    background:linear-gradient(90deg,#d4ad4e,rgba(212,173,78,0));
}
.hero-v11-lead{
    margin:0 0 34px;
    color:#5d6577;
    font-size:1rem;
    line-height:2;
}
.hero-v11 .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
}
.hero-v11-note{
    margin:28px 0 0;
    color:#9a8b78;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.67rem;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* Floating photo gallery */
.floating-gallery{
    position:relative;
    min-height:620px;
    z-index:3;
}
.float-card{
    position:absolute;
    margin:0;
    padding:9px 9px 28px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.9);
    border-radius:18px;
    box-shadow:
        0 28px 70px rgba(55,79,127,.15),
        0 7px 20px rgba(55,79,127,.08);
    overflow:hidden;
    transform-origin:center;
    backdrop-filter:blur(6px);
}
.float-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:12px;
}
.float-card figcaption{
    position:absolute;
    left:17px;
    bottom:7px;
    color:#8d7d67;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.55rem;
    letter-spacing:.22em;
}
.float-card-1{
    width:42%;
    height:410px;
    left:26%;
    top:82px;
    z-index:4;
    transform:rotate(-2.5deg);
    animation:floatOne 8s ease-in-out infinite;
}
.float-card-2{
    width:34%;
    height:305px;
    right:0;
    top:10px;
    z-index:3;
    transform:rotate(5deg);
    animation:floatTwo 9.4s ease-in-out infinite;
}
.float-card-3{
    width:31%;
    height:280px;
    left:1%;
    top:18px;
    z-index:2;
    transform:rotate(-7deg);
    animation:floatThree 10.2s ease-in-out infinite;
}
.float-card-4{
    width:34%;
    height:285px;
    right:4%;
    bottom:2px;
    z-index:5;
    transform:rotate(4deg);
    animation:floatFour 8.8s ease-in-out infinite;
}
.floating-mark{
    position:absolute;
    left:3%;
    bottom:35px;
    width:145px;
    height:145px;
    border:1px solid rgba(190,151,56,.48);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#2d458e;
    background:rgba(255,255,255,.44);
    backdrop-filter:blur(7px);
    z-index:1;
}
.floating-mark span{
    position:absolute;
    top:17px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:4rem;
    color:rgba(43,67,139,.17);
}
.floating-mark small{
    position:relative;
    text-align:center;
    color:#8c7650;
    font-family:Georgia,"Times New Roman",serif;
    font-size:.62rem;
    line-height:1.55;
    letter-spacing:.06em;
}

@keyframes floatOne{
    0%,100%{transform:translate3d(0,0,0) rotate(-2.5deg)}
    50%{transform:translate3d(12px,-18px,0) rotate(-1deg)}
}
@keyframes floatTwo{
    0%,100%{transform:translate3d(0,0,0) rotate(5deg)}
    50%{transform:translate3d(-16px,16px,0) rotate(3.5deg)}
}
@keyframes floatThree{
    0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}
    50%{transform:translate3d(14px,18px,0) rotate(-5deg)}
}
@keyframes floatFour{
    0%,100%{transform:translate3d(0,0,0) rotate(4deg)}
    50%{transform:translate3d(-13px,-15px,0) rotate(2deg)}
}

/* Larger, soft petals */
.hero-v11-petals{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}
.hero-v11-petals i{
    position:absolute;
    top:-80px;
    width:31px;
    height:42px;
    border-radius:74% 26% 68% 32%;
    background:
        radial-gradient(circle at 32% 26%,rgba(255,255,255,.96),rgba(247,190,211,.74) 44%,rgba(232,147,181,.56) 100%);
    filter:drop-shadow(0 4px 5px rgba(202,126,157,.08));
    opacity:.55;
    animation:v11PetalFall linear infinite;
}
.hero-v11-petals i:nth-child(1){left:12%;animation-duration:17s;animation-delay:-7s}
.hero-v11-petals i:nth-child(2){left:46%;width:23px;height:32px;animation-duration:20s;animation-delay:-13s}
.hero-v11-petals i:nth-child(3){left:77%;width:36px;height:47px;animation-duration:18s;animation-delay:-3s}
.hero-v11-petals i:nth-child(4){left:92%;width:25px;height:34px;animation-duration:22s;animation-delay:-16s}
@keyframes v11PetalFall{
    0%{transform:translate3d(0,-60px,0) rotate(0deg);opacity:0}
    12%{opacity:.55}
    55%{transform:translate3d(55px,52vh,0) rotate(180deg)}
    100%{transform:translate3d(-30px,110vh,0) rotate(365deg);opacity:0}
}
.hero-script-v11{
    color:rgba(48,69,135,.12)!important;
    right:3%!important;
    bottom:1%!important;
    font-size:clamp(3rem,7vw,7rem)!important;
}

/* Tablet */
@media(max-width:1020px){
    .hero-v11{min-height:auto}
    .hero-v11-inner{
        width:min(100% - 40px,900px);
        padding:120px 0 80px;
        grid-template-columns:1fr;
        gap:20px;
    }
    .hero-v11-copy{
        max-width:690px;
        text-align:center;
        margin:0 auto;
    }
    .hero-v11-title span:last-child::after{margin:20px auto 0}
    .hero-v11 .hero-actions{justify-content:center}
    .floating-gallery{
        width:min(760px,100%);
        min-height:590px;
        margin:0 auto;
    }
}

/* Mobile: fewer cards, readable copy */
@media(max-width:680px){
    .hero-v11-inner{
        width:calc(100% - 28px);
        padding:104px 0 52px;
    }
    .hero-v11 .eyebrow{font-size:.66rem;letter-spacing:.23em}
    .hero-v11-title{
        font-size:clamp(2.55rem,12vw,4.2rem);
        line-height:1.3;
        letter-spacing:.025em;
    }
    .hero-v11-title span:last-child{white-space:normal}
    .hero-v11-lead{font-size:.92rem;line-height:1.85}
    .hero-v11 .hero-actions{display:grid}
    .hero-v11 .hero-actions .button{width:100%}
    .hero-v11-note{font-size:.56rem}

    .floating-gallery{
        min-height:470px;
        margin-top:8px;
    }
    .float-card{padding:6px 6px 22px;border-radius:14px}
    .float-card img{border-radius:9px}
    .float-card-1{
        width:58%;
        height:320px;
        left:5%;
        top:88px;
    }
    .float-card-2{
        width:44%;
        height:225px;
        right:1%;
        top:4px;
    }
    .float-card-3{display:none}
    .float-card-4{
        width:43%;
        height:220px;
        right:2%;
        bottom:0;
    }
    .floating-mark{
        width:92px;height:92px;
        left:0;bottom:5px;
    }
    .floating-mark span{font-size:2.5rem;top:7px}
    .floating-mark small{font-size:.48rem}
    .hero-aura-blue{width:500px;height:500px;right:-250px}
    .hero-aura-pink{width:430px;height:430px;left:0;bottom:-230px}
    .hero-script-v11{display:none!important}
    .hero-v11-petals i{width:22px;height:31px}
}

@media(prefers-reduced-motion:reduce){
    .float-card,
    .hero-v11-petals i{animation:none!important}
}


/* =========================================================
   Version 11.1 - Hero Title Balance Fix
   PC: exactly 2 lines / Mobile: natural wrapping
   ========================================================= */
.hero-v11-copy{
    max-width:660px;
}
.hero-v11-title{
    font-size:clamp(3rem,4.25vw,4.95rem);
    letter-spacing:.035em;
}
.hero-v11-title .hero-title-line{
    display:block;
    white-space:nowrap;
}
.hero-v11-title .hero-title-line:last-child::after{
    content:"";
    display:block;
    width:118px;
    height:2px;
    margin-top:20px;
    background:linear-gradient(90deg,#d4ad4e,rgba(212,173,78,0));
}

@media(max-width:1180px) and (min-width:1021px){
    .hero-v11-inner{
        grid-template-columns:.96fr 1.04fr;
    }
    .hero-v11-copy{
        max-width:620px;
    }
    .hero-v11-title{
        font-size:clamp(2.85rem,4.05vw,4.25rem);
    }
}

@media(max-width:1020px){
    .hero-v11-copy{
        max-width:760px;
    }
    .hero-v11-title{
        font-size:clamp(3rem,7.5vw,4.9rem);
    }
}

@media(max-width:680px){
    .hero-v11-title{
        font-size:clamp(2.45rem,11vw,3.7rem);
        letter-spacing:.015em;
    }
    .hero-v11-title .hero-title-line{
        white-space:normal;
    }
}