/* ==========================================================
   HOME — a "capa" do site no estilo JoJo (versão elegante):
   dourado metálico, letreiro serifado, ゴゴゴ, brilhos e cartas
   holográficas. Estrutura em views/content/home.html; o que é
   dinâmico (leque de cartas, novidades, decks, salas) vem de
   assets/js/pages/home.js.
========================================================== */

/* ===== topo ===== */

.home-hero{

    position:relative;

    /* o leque de cartas e o título se ajustam à LARGURA do topo
       (não da janela: a barra lateral come espaço) — ver @container */
    container-type:inline-size;

    min-height:440px;

    display:flex;

    align-items:center;

    margin-bottom:26px;

    border-radius:18px;

    overflow:hidden;

    border:1px solid rgba(201,168,79,.32);

    background:
        radial-gradient(ellipse 45% 70% at 76% 48%, rgba(122,77,255,.40), transparent 70%),
        radial-gradient(ellipse 40% 50% at 8% 100%, rgba(201,168,79,.16), transparent 70%),
        linear-gradient(115deg, #110E1C 0%, #1A1330 50%, #0C0B11 100%);

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

}

/* linhas de velocidade saindo de trás das cartas */
.home-hero-speed{

    position:absolute;

    inset:0;

    background:repeating-conic-gradient(from 0deg at 76% 50%, rgba(255,255,255,.055) 0deg 1.1deg, transparent 1.1deg 5deg);

    -webkit-mask-image:radial-gradient(circle at 76% 50%, transparent 0 12%, #000 30%, transparent 72%);

    mask-image:radial-gradient(circle at 76% 50%, transparent 0 12%, #000 30%, transparent 72%);

    pointer-events:none;

}

/* faixa de luz dourada na diagonal */
.home-hero-beam{

    position:absolute;

    top:-50%;

    left:47%;

    width:90px;

    height:200%;

    transform:rotate(24deg);

    background:linear-gradient(90deg, transparent, rgba(235,209,137,.13), transparent);

    pointer-events:none;

}

/* retícula de mangá nos cantos */
.home-hero-dots{

    position:absolute;

    background-image:radial-gradient(circle, rgba(201,168,79,.42) 1.2px, transparent 1.7px);

    background-size:10px 10px;

    pointer-events:none;

}

.home-hero-dots-a{

    left:0;

    bottom:0;

    width:360px;

    height:180px;

    -webkit-mask-image:linear-gradient(45deg, #000, transparent 70%);

    mask-image:linear-gradient(45deg, #000, transparent 70%);

}

.home-hero-dots-b{

    right:0;

    top:0;

    width:260px;

    height:140px;

    -webkit-mask-image:linear-gradient(225deg, #000, transparent 70%);

    mask-image:linear-gradient(225deg, #000, transparent 70%);

}

.home-hero-copy{

    position:relative;

    z-index:3;

    width:min(560px, 100%);

    padding:48px 0 48px 52px;

}

.home-hero-eyebrow{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--gold);

}

.home-hero-eyebrow strong{

    color:var(--gold-light);

    letter-spacing:.1em;

}

.home-hero-eyebrow .badge{

    letter-spacing:0;

    text-transform:none;

}

.home-hero-eyebrow svg{

    width:12px;

    height:12px;

    fill:currentColor;

    flex-shrink:0;

}

.home-hero-title{

    margin:14px 0 0;

    font-family:var(--font-display);

    font-weight:900;

    font-size:58px;

    line-height:.98;

    letter-spacing:-.005em;

    text-transform:uppercase;

    text-shadow:0 4px 0 rgba(0,0,0,.35);

}

.home-hero-title > span,
.home-hero-title > em{

    display:block;

}

.home-hero-title em{

    width:fit-content;

    padding-right:.1em;

    font-style:italic;

    text-shadow:none;

    filter:drop-shadow(0 4px 0 rgba(0,0,0,.4));

}

.home-hero-sub{

    margin:18px 0 0;

    max-width:470px;

    font-size:1rem;

    line-height:1.65;

    color:#C9C9D2;

}

/* ===== botões grandes: Duelo e Guerra ===== */

.home-hero-ctas{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:30px;

}

.home-cta-wrap{

    position:relative;

    border-radius:2px;

}

/* o corte diagonal (clip-path) cortaria o contorno de foco — ele fica no embrulho */
.home-cta-wrap:focus-within{

    outline:2px solid var(--gold-light);

    outline-offset:4px;

}

.home-cta{

    display:flex;

    align-items:center;

    gap:14px;

    padding:15px 36px 15px 22px;

    border:0;

    font:inherit;

    text-align:left;

    cursor:pointer;

    clip-path:polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);

    transition:transform .2s ease, filter .2s ease;

}

.home-cta:focus-visible{

    outline:none;

}

.home-cta:hover{

    transform:translateY(-3px);

    filter:brightness(1.1);

}

.home-cta svg{

    width:26px;

    height:26px;

    flex-shrink:0;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.home-cta-text{

    display:flex;

    flex-direction:column;

    line-height:1.12;

}

.home-cta-text b{

    font-family:var(--font-display);

    font-weight:900;

    font-size:1.3rem;

    letter-spacing:.06em;

    text-transform:uppercase;

}

.home-cta-text small{

    font-size:.75rem;

    font-weight:500;

    opacity:.85;

}

.home-cta-duel{

    background:linear-gradient(135deg, #F2DC92 0%, #C9A84F 55%, #A5843A 100%);

    color:#16110A;

}

.home-cta-war{

    background:linear-gradient(135deg, #2E2356, #1A1433);

    color:#FFFFFF;

    box-shadow:inset 0 0 0 2px rgba(167,123,255,.75);

}

/* selo estourado "NOVO" em cima do botão da Guerra */
.home-burst{

    position:absolute;

    top:-22px;

    right:-28px;

    z-index:4;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#E4007F;

    color:#FFFFFF;

    font-family:var(--font-sfx);

    font-size:11px;

    letter-spacing:.03em;

    clip-path:polygon(50% 0, 61% 18%, 82% 9%, 80% 32%, 100% 40%, 85% 56%, 96% 77%, 73% 77%, 68% 100%, 50% 86%, 32% 100%, 27% 77%, 4% 77%, 15% 56%, 0 40%, 20% 32%, 18% 9%, 39% 18%);

    animation:jjBurst 1.8s ease-in-out infinite;

    pointer-events:none;

}

@keyframes jjBurst{

    0%, 100%{ transform:rotate(12deg) scale(1); }

    50%{ transform:rotate(12deg) scale(1.13); }

}

/* ===== leque de cartas ===== */

.home-hero-fan{

    position:absolute;

    right:28px;

    top:50%;

    width:540px;

    height:440px;

    margin-top:-220px;

    z-index:2;

    transform:scale(.92);

    transform-origin:right center;

    pointer-events:none;

}

.home-hero-cards{

    position:absolute;

    inset:0;

}

.home-fan-card{

    position:absolute;

    width:168px;

    aspect-ratio:63 / 88;

    border-radius:10px;

    overflow:hidden;

    border:3px solid #09090B;

    background:#111114;

    box-shadow:0 18px 38px rgba(0,0,0,.65);

}

.home-fan-card img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.home-fan-card img:not([src]){ display:none; }

.home-fan-card-0{ left:-8px; top:136px; transform:rotate(-24deg); }
.home-fan-card-1{ left:382px; top:134px; transform:rotate(23deg); }
.home-fan-card-2{ left:70px; top:98px; transform:rotate(-12deg); }
.home-fan-card-3{ left:302px; top:96px; transform:rotate(11deg); }

/* a da frente: maior, contorno dourado e um reflexo que passa de tempos em tempos */
.home-fan-card-4{

    left:163px;

    top:70px;

    width:214px;

    transform:rotate(-2deg);

    box-shadow:0 0 0 2px var(--accent), 0 0 46px rgba(201,168,79,.5), 0 26px 50px rgba(0,0,0,.7);

}

.home-fan-card-4::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.42) 47%, rgba(255,221,140,.28) 52%, transparent 63%);

    background-size:260% 100%;

    background-repeat:no-repeat;

    mix-blend-mode:screen;

    animation:jjSheen 4.8s ease-in-out infinite;

}

@keyframes jjSheen{

    0%{ background-position:130% 0; }

    55%, 100%{ background-position:-70% 0; }

}

/* ===== ゴゴゴ e brilhos (reaproveitáveis em outras páginas) ===== */

.jj-menace{

    position:absolute;

    z-index:3;

    font-family:var(--font-sfx);

    font-size:54px;

    line-height:1;

    color:#A77BFF;

    -webkit-text-stroke:2px #0A0A0D;

    paint-order:stroke fill;

    text-shadow:0 0 22px rgba(122,77,255,.65);

    animation:jjMenace 2.2s ease-in-out infinite;

    pointer-events:none;

    user-select:none;

}

@keyframes jjMenace{

    0%, 100%{ transform:translateY(0) rotate(var(--r, -10deg)) scale(1); }

    50%{ transform:translateY(-8px) rotate(var(--r, -10deg)) scale(1.08); }

}

.jj-spark{

    position:absolute;

    z-index:4;

    width:22px;

    height:22px;

    color:#FFF3C4;

    filter:drop-shadow(0 0 6px rgba(255,236,170,.95));

    animation:jjTwinkle 2.6s ease-in-out infinite;

    pointer-events:none;

}

.jj-spark svg{

    display:block;

    width:100%;

    height:100%;

    fill:currentColor;

}

@keyframes jjTwinkle{

    0%, 100%{ transform:scale(.15) rotate(0deg); opacity:0; }

    45%{ transform:scale(1) rotate(45deg); opacity:1; }

    70%{ transform:scale(.55) rotate(70deg); opacity:.6; }

}

/* topo mais estreito (janela menor ou barra lateral ocupando espaço).
   Conta usada: o texto termina em ~52px + a largura do subtítulo (ou
   do título, se for maior — cada 1px de fonte dá ~7,7px de "COMEÇA
   AQUI"); o leque ocupa 540px × escala e fica a 28px da borda. Cada
   faixa abaixo usa a menor largura dela, pra nunca encostar no texto. */

@container (max-width:1060px){

    .home-hero-fan{ transform:scale(.8); }

    .home-hero-title{ font-size:54px; }

}

@container (max-width:1000px){

    .home-hero-fan{ transform:scale(.72); }

    .home-hero-copy{ width:min(440px, 100%); }

    .home-hero-title{ font-size:48px; }

    .home-hero-sub{ max-width:400px; }

}

@container (max-width:900px){

    .home-hero-fan{ transform:scale(.58); }

    .home-hero-title{ font-size:44px; }

    .home-hero-sub{ max-width:380px; }

}

/* daqui pra baixo não cabe lado a lado: o leque vira fundo, atrás do texto */
@container (max-width:800px){

    .home-hero-fan{ transform:scale(.66); opacity:.3; right:-40px; }

    .home-hero-copy{ width:100%; padding:40px 32px; }

}

@container (max-width:620px){

    .home-hero-fan{ display:none; }

    .home-hero-copy{ padding:32px 24px; }

    .home-hero-title{ font-size:40px; }

    .home-cta{ padding:12px 30px 12px 18px; }

}

@media (max-width:700px){

    .home-hero{ min-height:0; }

}

/* ==========================================================
   NÚMEROS
========================================================== */

.stat-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));

    gap:18px;

    margin-bottom:26px;

}

.stat-card{

    position:relative;

    overflow:hidden;

    padding:22px 24px 20px;

    border-radius:12px;

    background:linear-gradient(155deg, #1A1A20, #131317);

    border:1px solid #2A2A31;

    box-shadow:var(--shadow);

}

/* retícula no cantinho */
.stat-card::after{

    content:"";

    position:absolute;

    right:-26px;

    bottom:-26px;

    width:104px;

    height:104px;

    border-radius:50%;

    background-image:radial-gradient(circle, rgba(201,168,79,.55) 1.2px, transparent 1.7px);

    background-size:9px 9px;

    opacity:.55;

    pointer-events:none;

}

.stat-label{

    display:block;

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:#A9A9B3;

}

.stat-value{

    display:block;

    width:fit-content;

    max-width:100%;

    margin-top:10px;

    font-family:var(--font-display);

    font-weight:900;

    font-size:2.6rem;

    line-height:1;

    background:var(--gold-gradient);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    overflow-wrap:break-word;

}

.stat-card .progress-bar{

    height:5px;

    margin-top:14px;

}

/* ==========================================================
   PAINÉIS
========================================================== */

.home-grid{

    display:grid;

    grid-template-columns:1.25fr 1fr;

    gap:22px;

    align-items:start;

}

@media (max-width:900px){

    .home-grid{ grid-template-columns:1fr; }

}

.home-column{

    display:flex;

    flex-direction:column;

    gap:22px;

    min-width:0;

}

.home-panel{

    position:relative;

    border-radius:12px;

    background:linear-gradient(180deg, #17171C, #121216);

    border-color:#2A2A31;

}

/* cantinho dourado dobrado no topo direito */
.home-panel::before{

    content:"";

    position:absolute;

    top:-1px;

    right:-1px;

    width:30px;

    height:30px;

    border-top-right-radius:12px;

    background:linear-gradient(45deg, transparent 50%, var(--accent) 50%);

    pointer-events:none;

}

/* título de seção: letreiro + filete dourado até a borda */
.home-panel h2{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    font-family:var(--font-display);

    font-weight:800;

    font-size:1.15rem;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:var(--gold);

}

.home-panel h2::after{

    content:"";

    flex:1;

    min-width:20px;

    height:1px;

    background:linear-gradient(90deg, rgba(201,168,79,.55), transparent);

}

.home-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

    flex-wrap:wrap;

}

/* o título não quebra em duas linhas: se faltar espaço, o botão desce */
.home-panel-header h2{

    flex:1;

    margin-bottom:0;

    white-space:nowrap;

}

.home-panel-header h2::after{

    min-width:0;

}

.home-panel-header .button{

    margin-top:0;

}

.home-panel .empty-state{

    padding:18px 10px;

}

.home-rules-text{

    color:#C4C4CC;

    font-size:.9rem;

    line-height:1.6;

    margin-bottom:16px;

}

.home-panel .button{

    width:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}

/* ===== decks: capinha com a arte de uma carta do deck ===== */

.home-deck-cover{

    flex-shrink:0;

    width:42px;

    aspect-ratio:63 / 88;

    border-radius:5px;

    overflow:hidden;

    border:2px solid #09090B;

    background:linear-gradient(150deg, #2B1F58, #151024);

    transform:rotate(-4deg);

    box-shadow:3px 4px 0 rgba(201,168,79,.6);

}

.home-deck-cover img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.home-deck-cover img:not([src]){ display:none; }

/* ===== salas: vazio com ゴゴゴ de fundo ===== */

.home-empty-rooms{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:120px;

    padding:18px;

    border-radius:10px;

    border:1px dashed #36363E;

    text-align:center;

}

.jj-ghost-sfx{

    position:absolute;

    font-family:var(--font-sfx);

    font-size:62px;

    letter-spacing:.08em;

    color:rgba(157,107,255,.11);

    transform:rotate(-8deg);

    white-space:nowrap;

    pointer-events:none;

    user-select:none;

}

.home-empty-rooms p{

    position:relative;

    margin:0;

    max-width:260px;

    font-size:.9rem;

    line-height:1.55;

    color:#C4C4CC;

}

/* ==========================================================
   CARTA HOLOGRÁFICA — inclina em 3D e ganha um reflexo arco-íris
   ao passar o mouse (novidades e destaques da coleção)
========================================================== */

.holo-trigger{

    display:flex;

    flex-direction:column;

    gap:6px;

    min-width:0;

    padding:0;

    border:0;

    background:none;

    color:inherit;

    font:inherit;

    cursor:pointer;

}

.holo-card{

    position:relative;

    display:block;

    width:100%;

    aspect-ratio:63 / 88;

    border-radius:8px;

    overflow:hidden;

    border:2px solid #09090B;

    background:#111114;

    box-shadow:0 10px 22px rgba(0,0,0,.55);

    transition:transform .45s cubic-bezier(.2,1.25,.4,1), box-shadow .3s ease;

}

.holo-card img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.holo-card img:not([src]){ display:none; }

.holo-card::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:0;

    pointer-events:none;

    transition:opacity .3s ease;

    background:
        linear-gradient(125deg, rgba(255,0,140,.24), rgba(0,190,255,.24) 40%, rgba(255,235,0,.24) 70%, rgba(255,0,140,.24)),
        linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 60%);

    background-size:100% 100%, 250% 100%;

    background-repeat:no-repeat;

    mix-blend-mode:color-dodge;

}

.holo-trigger:hover .holo-card,
.holo-trigger:focus-visible .holo-card{

    transform:perspective(700px) rotateX(9deg) rotateY(-14deg) translateY(-6px) scale(1.05);

    box-shadow:0 0 0 2px var(--accent), 0 22px 34px rgba(0,0,0,.6);

}

.holo-trigger:hover .holo-card::after,
.holo-trigger:focus-visible .holo-card::after{

    opacity:1;

    animation:jjHolo 1.4s ease-out forwards;

}

.holo-trigger:focus-visible{

    outline:none;

}

@keyframes jjHolo{

    from{ background-position:0 0, 130% 0; }

    to{ background-position:0 0, -60% 0; }

}

.holo-name{

    font-size:.72rem;

    color:#DCDCE3;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ===== novidades ===== */

.home-news-label{

    display:block;

    margin-bottom:10px;

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:#A9A9B3;

}

/* folga em volta: a carta inclinada no hover não pode ser cortada pela rolagem */
.home-news-strip{

    display:flex;

    gap:14px;

    overflow-x:auto;

    padding:12px 8px 14px;

    margin:-12px -8px 8px;

}

.home-news-strip .holo-trigger{

    flex-shrink:0;

    width:96px;

}

.home-news-updates{

    display:flex;

    flex-direction:column;

    gap:12px;

    font-size:.84rem;

    color:#C4C4CC;

    line-height:1.55;

}

.home-news-updates li{

    display:flex;

    gap:12px;

    align-items:baseline;

}

/* a novidade mais recente ganha destaque enquanto for nova */
.home-news-updates li.is-new{

    padding:14px 16px;

    border-radius:10px;

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

    background:
        linear-gradient(120deg, rgba(122,77,255,.20), rgba(201,168,79,.08) 60%, transparent),
        #18161F;

    color:#E4E4EA;

}

.home-news-date{

    flex-shrink:0;

    font-family:var(--font-display);

    font-weight:800;

    font-size:.82rem;

    color:var(--gold);

    white-space:nowrap;

}

.home-news-new{

    display:inline-block;

    margin-right:8px;

    padding:2px 9px;

    border-radius:3px;

    background:#E4007F;

    color:#FFFFFF;

    font-family:var(--font-sfx);

    font-size:.62rem;

    letter-spacing:.06em;

    transform:skew(-10deg);

    vertical-align:1px;

}

/* ===== coleção: cinco cartas sorteadas a cada visita ===== */

.home-collection-cards{

    display:grid;

    grid-template-columns:repeat(5, minmax(0, 1fr));

    gap:12px;

    margin:6px 0 20px;

}

/* ===== Discord da comunidade ===== */

.home-discord{

    display:block;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

    border-color:rgba(88,101,242,.55);

    background:
        radial-gradient(circle at 12% 0%, rgba(88,101,242,.22), transparent 60%),
        linear-gradient(180deg, #17171C, #121216);

    transition:var(--transition);

}

.home-discord::before{

    background:linear-gradient(45deg, transparent 50%, #5865F2 50%);

}

.home-discord:hover{

    transform:translateY(-2px);

    border-color:#5865F2;

    box-shadow:0 10px 28px rgba(88,101,242,.25);

}

.discord-icon{

    width:22px;

    height:22px;

    color:#5865F2;

    filter:drop-shadow(0 0 7px rgba(88,101,242,.55));

    flex-shrink:0;

}

/* o "botão" é decorativo — o painel inteiro é o link */
.home-discord-btn{

    display:inline-block;

    pointer-events:none;

    background:#5865F2;

    border-color:#5865F2;

    color:#FFFFFF;

}

.home-discord:hover .home-discord-btn{

    background:#6D78F4;

}

/* ===== apoie o criador ===== */

.gem-icon{

    width:20px;

    height:20px;

    flex-shrink:0;

    color:var(--gold);

    filter:drop-shadow(0 0 6px rgba(201,168,79,.5));

}

.home-pix{

    display:flex;

    gap:8px;

    align-items:stretch;

}

.home-pix code{

    flex:1;

    min-width:0;

    background:#101014;

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

    border-radius:9px;

    padding:10px 12px;

    font-size:.72rem;

    color:var(--text);

    overflow-wrap:anywhere;

    user-select:all;

}

.home-pix .button{

    margin-top:0;

    flex-shrink:0;

}

.home-pix-label{

    display:block;

    margin-top:8px;

    font-size:.7rem;

    color:var(--text-secondary);

}

/* ==========================================================
   RODAPÉ: aviso de fã + seta "To Be Continued" (volta ao topo)
========================================================== */

.home-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:24px;

    margin-top:30px;

    padding-top:22px;

    border-top:1px solid #24242A;

}

.home-disclaimer{

    margin:0;

    max-width:600px;

    font-size:.78rem;

    line-height:1.6;

    color:#8A8A94;

}

/* contorno preto em volta da seta (o clip-path cortaria uma borda comum) */
.tbc-wrap{

    filter:
        drop-shadow(2px 0 0 #07070A) drop-shadow(-2px 0 0 #07070A)
        drop-shadow(0 2px 0 #07070A) drop-shadow(0 -2px 0 #07070A)
        drop-shadow(0 10px 18px rgba(0,0,0,.55));

}

.tbc-wrap:focus-within{

    outline:2px solid var(--gold-light);

    outline-offset:6px;

}

.tbc{

    display:flex;

    align-items:center;

    padding:11px 28px 11px 48px;

    border:0;

    cursor:pointer;

    background:linear-gradient(180deg, #F1E3B2 0%, #D8BE78 60%, #C4A45E 100%);

    color:#2E220A;

    font-family:var(--font-display);

    font-style:italic;

    font-weight:800;

    font-size:1.15rem;

    letter-spacing:.01em;

    white-space:nowrap;

    clip-path:polygon(0 50%, 36px 0, 100% 0, 100% 100%, 36px 100%);

    transition:transform .2s ease;

}

.tbc:hover{

    transform:translateX(-4px);

}

.tbc:focus-visible{

    outline:none;

}

/* ===== menos movimento pra quem pediu isso no sistema ===== */

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

    .home-hero *,
    .home-hero *::before,
    .home-hero *::after,
    .holo-card,
    .holo-card::after,
    .tbc{

        animation:none !important;

        transition:none !important;

    }

}