/*
 * MEGASTAR Hero & Smoke Polish v1.0.0
 * Intentionally scoped to existing .megastar-* elements only.
 * No CCS/global layout selectors are changed.
 */

/* =========================================================
   1) HERO: duplicate logo out, message starts immediately
   ========================================================= */
.megastar-root .megastar-hero-logo{
    display:none!important;
}

@media (min-width:761px){
    .megastar-root .megastar-hero-inner{
        align-items:flex-start!important;
    }

    .megastar-root .megastar-hero-copy{
        padding-top:68px!important;
        padding-bottom:34px!important;
    }
}

/* Keep mobile structure exactly usable after removing the logo. */
@media (max-width:760px){
    .megastar-root .megastar-hero-copy{
        padding-top:46px!important;
    }
}

/* =========================================================
   2) INTERACTION LANGUAGE: black + red + subtle fog
   ========================================================= */

/* Primary buttons become dark/industrial at rest instead of a flat red block. */
.megastar-root .megastar-btn-red{
    position:relative;
    isolation:isolate;
    overflow:visible;
    border-color:#ef2427!important;
    background:linear-gradient(180deg,rgba(18,6,7,.94),rgba(5,5,5,.98))!important;
    color:#fff!important;
    transition:border-color .28s ease, background-color .28s ease, transform .28s ease, color .28s ease!important;
}

.megastar-root .megastar-btn-outline,
.megastar-root .megastar-card-link,
.megastar-root .megastar-back-ccs,
.ccsih-theme-megastar .ccsih-submit{
    position:relative;
    isolation:isolate;
    overflow:visible;
    transition:border-color .28s ease, color .28s ease, background-color .28s ease, transform .28s ease!important;
}

/* Two independent soft fog layers: irregular, transparent, never a box-shadow halo. */
.megastar-root .megastar-btn::before,
.megastar-root .megastar-card-link::before,
.ccsih-theme-megastar .ccsih-submit::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    left:-20%;
    right:-20%;
    top:-65%;
    bottom:-65%;
    opacity:0;
    transform:translate3d(-3%,7%,0) scale(.82);
    filter:blur(14px);
    background:
        radial-gradient(ellipse at 22% 56%,rgba(239,36,39,.28) 0 10%,rgba(146,10,14,.15) 24%,transparent 52%),
        radial-gradient(ellipse at 68% 38%,rgba(202,18,22,.20) 0 13%,rgba(86,4,7,.12) 32%,transparent 58%),
        radial-gradient(ellipse at 48% 78%,rgba(239,36,39,.13) 0 9%,transparent 48%);
    transition:opacity .34s ease,transform .8s cubic-bezier(.2,.7,.2,1);
}

.megastar-root .megastar-btn::after,
.megastar-root .megastar-card-link::after,
.ccsih-theme-megastar .ccsih-submit::after{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    width:72%;
    height:150%;
    left:15%;
    top:-25%;
    opacity:0;
    filter:blur(22px);
    transform:translate3d(13%,0,0) rotate(-5deg) scale(.72);
    background:radial-gradient(ellipse,rgba(239,36,39,.18) 0 18%,rgba(122,7,11,.11) 36%,transparent 68%);
    transition:opacity .34s ease,transform 1.05s cubic-bezier(.2,.7,.2,1);
}

/* Model cards: fog develops around the machine/card edge, not as neon glow. */
.megastar-root .megastar-model-card{
    position:relative;
    isolation:isolate;
    transition:border-color .32s ease,background-color .32s ease,transform .32s ease!important;
}

.megastar-root .megastar-model-card::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    inset:-12px -10px -16px;
    opacity:0;
    filter:blur(18px);
    transform:translate3d(-2%,5%,0) scale(.96);
    background:
        radial-gradient(ellipse at 20% 82%,rgba(171,10,14,.22),transparent 47%),
        radial-gradient(ellipse at 73% 67%,rgba(239,36,39,.16),transparent 43%),
        radial-gradient(ellipse at 56% 98%,rgba(101,4,7,.18),transparent 48%);
    transition:opacity .38s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);
}

/* Application tiles: fog remains inside the image tile because it already clips content. */
.megastar-root .megastar-app-card::before{
    content:"";
    position:absolute;
    z-index:1;
    pointer-events:none;
    inset:-20%;
    opacity:0;
    filter:blur(12px);
    transform:translate3d(-9%,9%,0) scale(.85);
    background:
        radial-gradient(ellipse at 22% 74%,rgba(239,36,39,.26),transparent 36%),
        radial-gradient(ellipse at 72% 40%,rgba(151,8,12,.20),transparent 42%),
        radial-gradient(ellipse at 48% 90%,rgba(69,2,4,.28),transparent 50%);
    transition:opacity .34s ease,transform 1.15s cubic-bezier(.2,.7,.2,1);
}

/* Keep existing content/icons above the smoke texture. */
.megastar-root .megastar-app-content{
    z-index:3!important;
}

/* =========================================================
   Desktop hover only. Touch devices remain clear and static.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
    .megastar-root .megastar-btn:hover,
    .megastar-root .megastar-card-link:hover,
    .ccsih-theme-megastar .ccsih-submit:hover{
        filter:none!important;
        transform:translateY(-1px);
    }

    .megastar-root .megastar-btn-red:hover{
        background:linear-gradient(180deg,rgba(24,7,9,.98),rgba(6,6,6,.98))!important;
        border-color:#ff393c!important;
    }

    .megastar-root .megastar-btn-outline:hover,
    .megastar-root .megastar-card-link:hover,
    .ccsih-theme-megastar .ccsih-submit:hover{
        border-color:#ef2427!important;
        color:#fff!important;
        background-color:rgba(17,4,5,.54)!important;
    }

    .megastar-root .megastar-btn:hover::before,
    .megastar-root .megastar-card-link:hover::before,
    .ccsih-theme-megastar .ccsih-submit:hover::before{
        opacity:.9;
        transform:translate3d(4%,-2%,0) scale(1.04);
        animation:megastar-fog-drift-a 5.8s ease-in-out infinite alternate;
    }

    .megastar-root .megastar-btn:hover::after,
    .megastar-root .megastar-card-link:hover::after,
    .ccsih-theme-megastar .ccsih-submit:hover::after{
        opacity:.72;
        transform:translate3d(-5%,3%,0) rotate(4deg) scale(1.02);
        animation:megastar-fog-drift-b 7.2s ease-in-out infinite alternate;
    }

    .megastar-root .megastar-model-card:hover{
        border-color:#7d1719!important;
        background:#080405!important;
        transform:translateY(-1px);
    }

    .megastar-root .megastar-model-card:hover::before{
        opacity:.86;
        transform:translate3d(4%,-1%,0) scale(1.02);
        animation:megastar-fog-drift-card 8s ease-in-out infinite alternate;
    }

    .megastar-root .megastar-app-card:hover::before{
        opacity:.8;
        transform:translate3d(5%,-3%,0) scale(1.04);
        animation:megastar-fog-drift-card 7.5s ease-in-out infinite alternate;
    }
}

@keyframes megastar-fog-drift-a{
    0%{transform:translate3d(-1%,4%,0) scale(.96);opacity:.58}
    55%{transform:translate3d(5%,-4%,0) scale(1.06);opacity:.88}
    100%{transform:translate3d(-4%,-1%,0) scale(1.01);opacity:.7}
}
@keyframes megastar-fog-drift-b{
    0%{transform:translate3d(8%,2%,0) rotate(-4deg) scale(.92)}
    100%{transform:translate3d(-8%,-4%,0) rotate(5deg) scale(1.06)}
}
@keyframes megastar-fog-drift-card{
    0%{transform:translate3d(-4%,5%,0) scale(.96);opacity:.48}
    100%{transform:translate3d(5%,-4%,0) scale(1.05);opacity:.82}
}

/* Respect OS accessibility preferences: no drifting animation. */
@media (prefers-reduced-motion:reduce){
    .megastar-root .megastar-btn,
    .megastar-root .megastar-card-link,
    .megastar-root .megastar-model-card,
    .megastar-root .megastar-btn::before,
    .megastar-root .megastar-btn::after,
    .megastar-root .megastar-card-link::before,
    .megastar-root .megastar-card-link::after,
    .megastar-root .megastar-model-card::before,
    .megastar-root .megastar-app-card::before,
    .ccsih-theme-megastar .ccsih-submit,
    .ccsih-theme-megastar .ccsih-submit::before,
    .ccsih-theme-megastar .ccsih-submit::after{
        animation:none!important;
        transition-duration:.01ms!important;
    }
}