/* Classic Reimagined — Premium Homepage Effects V22
 * Stronger, clearly visible visual treatment while preserving the existing layout.
 * Pure CSS/DOM effects. No external assets and no WebGL dependency.
 */

.cr-home.cr-effects .cr-hero-art{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#eaf8ff;
}
.cr-home.cr-effects .cr-hero-stage{
    position:relative;
    z-index:1;
    display:block;
}
.cr-home.cr-effects .cr-hero-stage img{
    position:relative;
    z-index:1;
    filter:saturate(1.045) contrast(1.015) brightness(1.015);
}

/* Cinematic ambient lighting, intentionally more visible than V21. */
.cr-home.cr-effects .cr-hero-art::before{
    content:"";
    position:absolute;
    z-index:2;
    inset:-12% -8% -14%;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 77%,rgba(255,226,120,.38) 0 8%,rgba(255,210,83,.20) 17%,rgba(73,183,235,.16) 31%,transparent 55%),
        radial-gradient(ellipse at 18% 30%,rgba(104,211,255,.18),transparent 30%),
        radial-gradient(ellipse at 82% 24%,rgba(255,223,139,.17),transparent 28%);
    mix-blend-mode:screen;
    opacity:.88;
    animation:cr-v22-ambient 5.6s ease-in-out infinite;
}
.cr-home.cr-effects .cr-hero-art::after{
    content:"";
    position:absolute;
    z-index:5;
    top:-35%;
    bottom:-35%;
    left:-32%;
    width:24%;
    pointer-events:none;
    background:linear-gradient(100deg,transparent 5%,rgba(255,255,255,.03) 22%,rgba(255,251,220,.34) 50%,rgba(122,220,255,.12) 72%,transparent 94%);
    filter:blur(7px);
    transform:skewX(-18deg);
    mix-blend-mode:screen;
    opacity:0;
    animation:cr-v22-cinematic-sweep 8.2s ease-in-out 1.1s infinite;
}

.cr-home .cr-v22-fx{
    position:absolute;
    z-index:4;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    transform:translate3d(var(--cr-v22-x,0px),var(--cr-v22-y,0px),0);
    transition:transform 850ms cubic-bezier(.2,.7,.25,1);
}

/* A rotating magical sigil/glow centered on the embedded logo area. */
.cr-home .cr-v22-sigil{
    position:absolute;
    left:50%;
    top:73%;
    width:min(37vw,610px);
    min-width:390px;
    aspect-ratio:2.48/1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    opacity:.78;
    mix-blend-mode:screen;
    filter:drop-shadow(0 0 13px rgba(255,207,82,.42)) drop-shadow(0 0 26px rgba(64,180,245,.28));
}
.cr-home .cr-v22-sigil::before,
.cr-home .cr-v22-sigil::after{
    content:"";
    position:absolute;
    inset:9%;
    border-radius:50%;
}
.cr-home .cr-v22-sigil::before{
    border:1px solid rgba(255,231,151,.54);
    box-shadow:
        0 0 14px rgba(255,213,95,.25),
        inset 0 0 16px rgba(79,196,255,.18),
        0 0 0 6px rgba(255,238,178,.035),
        0 0 0 12px rgba(82,193,255,.025);
    animation:cr-v22-ring-pulse 3.6s ease-in-out infinite;
}
.cr-home .cr-v22-sigil::after{
    inset:0;
    background:
        conic-gradient(from 0deg,transparent 0 7%,rgba(255,222,122,.40) 8% 9%,transparent 10% 20%,rgba(90,204,255,.34) 21% 22%,transparent 23% 34%,rgba(255,235,173,.36) 35% 36%,transparent 37% 47%,rgba(73,177,239,.32) 48% 49%,transparent 50% 62%,rgba(255,218,106,.36) 63% 64%,transparent 65% 76%,rgba(92,212,255,.34) 77% 78%,transparent 79% 90%,rgba(255,232,156,.34) 91% 92%,transparent 93% 100%);
    -webkit-mask:radial-gradient(ellipse at center,transparent 0 74%,#000 75% 77%,transparent 78%);
    mask:radial-gradient(ellipse at center,transparent 0 74%,#000 75% 77%,transparent 78%);
    animation:cr-v22-ring-spin 18s linear infinite;
}
.cr-home .cr-v22-logo-aura{
    position:absolute;
    left:50%;
    top:75%;
    width:min(38vw,640px);
    height:54%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(ellipse at center,rgba(255,249,215,.28) 0 16%,rgba(255,214,99,.18) 25%,rgba(82,197,255,.13) 42%,transparent 69%);
    filter:blur(6px);
    mix-blend-mode:screen;
    opacity:.9;
    animation:cr-v22-logo-bloom 4.4s ease-in-out infinite;
}

/* Cross-shaped starbursts. */
.cr-home .cr-v22-star{
    --size:7px;
    --alpha:.86;
    --delay:0s;
    --dur:3.8s;
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:#fffbe2;
    box-shadow:0 0 7px #fff7c8,0 0 14px rgba(255,203,82,.72),0 0 24px rgba(68,185,249,.38);
    opacity:0;
    animation:cr-v22-star-twinkle var(--dur) ease-in-out var(--delay) infinite;
}
.cr-home .cr-v22-star::before,
.cr-home .cr-v22-star::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    background:linear-gradient(90deg,transparent,#fffbe8 35%,#fff 50%,#fffbe8 65%,transparent);
    opacity:var(--alpha);
}
.cr-home .cr-v22-star::before{width:520%;height:1px}
.cr-home .cr-v22-star::after{width:1px;height:520%;background:linear-gradient(180deg,transparent,#fffbe8 35%,#fff 50%,#fffbe8 65%,transparent)}

/* Floating light motes. */
.cr-home .cr-v22-mote{
    --size:5px;
    --dur:7s;
    --delay:0s;
    --dx:20px;
    --dy:-24px;
    --alpha:.72;
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:radial-gradient(circle,#fff 0 10%,#fff7cf 20%,#ffd976 38%,#70d6ff 60%,transparent 72%);
    box-shadow:0 0 7px rgba(255,220,112,.72),0 0 14px rgba(77,190,243,.32);
    opacity:0;
    animation:cr-v22-mote var(--dur) ease-in-out var(--delay) infinite;
}

/* Falling petals, visible but still sparse. */
.cr-home .cr-v22-petal{
    --dur:11s;
    --delay:0s;
    --dx:90px;
    --rot:20deg;
    position:absolute;
    left:var(--x);
    top:-8%;
    width:9px;
    height:5px;
    border-radius:80% 20% 75% 25%;
    background:linear-gradient(135deg,#fff 0%,#ffd8e5 37%,#f8a9c4 70%,#fff7c5 100%);
    box-shadow:0 0 6px rgba(255,255,255,.75);
    opacity:0;
    transform:rotate(var(--rot));
    animation:cr-v22-petal var(--dur) linear var(--delay) infinite;
}

/* Thin magical arc above the logo to make the center feel alive. */
.cr-home .cr-v22-arc{
    position:absolute;
    left:50%;
    top:55%;
    width:min(32vw,520px);
    height:28%;
    transform:translateX(-50%);
    border-radius:50% 50% 0 0;
    border-top:1px solid rgba(255,232,152,.52);
    box-shadow:0 -2px 9px rgba(255,222,119,.25),inset 0 5px 18px rgba(78,187,244,.08);
    opacity:.75;
    animation:cr-v22-arc-breathe 3.9s ease-in-out infinite;
}

/* Login panel receives a visible premium breathing glow without changing dimensions. */
.cr-home.cr-effects .cr-login-panel{
    animation:cr-v22-login-glow 4.8s ease-in-out infinite;
}
.cr-home.cr-effects .cr-login-filigree{
    animation:cr-v22-filigree-glow 4.8s ease-in-out infinite;
}
.cr-home.cr-effects .cr-login-button{
    isolation:isolate;
}
.cr-home.cr-effects .cr-login-button::before{
    animation:cr-v22-button-shine 4.6s ease-in-out 1.2s infinite!important;
}

/* Navigation glint and gold floor-line. */
.cr-home.cr-effects .cr-nav-link{
    position:relative;
    overflow:hidden;
    transition:transform .25s ease,filter .25s ease,box-shadow .25s ease,color .25s ease;
}
.cr-home.cr-effects .cr-nav-link:hover{
    transform:translateY(-2px);
    filter:brightness(1.07);
}
.cr-home.cr-effects .cr-nav-item.active>.cr-nav-link::after{
    content:"";
    position:absolute;
    left:-45%; top:-30%;
    width:28%; height:160%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,247,211,.48),transparent);
    transform:skewX(-22deg);
    animation:cr-v22-nav-glint 5.3s ease-in-out infinite;
}

/* Soft animated ambience below the hero. */
.cr-home.cr-effects .cr-main-wrap::before{
    content:"";
    position:absolute;
    z-index:0;
    left:-5%; right:-5%; top:-26px;
    height:360px;
    pointer-events:none;
    background:
        radial-gradient(circle at 16% 16%,rgba(86,194,238,.095),transparent 25%),
        radial-gradient(circle at 84% 12%,rgba(224,176,74,.095),transparent 24%),
        linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    opacity:.92;
    animation:cr-v22-main-ambient 7s ease-in-out infinite;
}
.cr-home.cr-effects .cr-main-wrap>*{position:relative;z-index:1}

/* Premium hover treatment for panels/cards. */
.cr-home.cr-effects .cr-explore,
.cr-home.cr-effects .cr-guide,
.cr-home.cr-effects .cr-feature,
.cr-home.cr-effects .cr-board{
    position:relative;
    overflow:hidden;
    transition:transform .34s cubic-bezier(.2,.75,.25,1),box-shadow .34s ease,border-color .34s ease,filter .34s ease;
}
.cr-home.cr-effects .cr-explore::after,
.cr-home.cr-effects .cr-guide::after,
.cr-home.cr-effects .cr-feature::after,
.cr-home.cr-effects .cr-board::after{
    content:"";
    position:absolute;
    z-index:3;
    top:-35%; bottom:-35%; left:-60%;
    width:24%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.60),rgba(255,236,177,.42),transparent);
    filter:blur(3px);
    transform:skewX(-18deg);
    opacity:0;
}
.cr-home.cr-effects .cr-explore:hover,
.cr-home.cr-effects .cr-guide:hover,
.cr-home.cr-effects .cr-feature:hover,
.cr-home.cr-effects .cr-board:hover{
    transform:translateY(-5px);
    border-color:#d6aa58;
    box-shadow:0 13px 30px rgba(25,78,110,.16),0 0 0 1px rgba(255,229,159,.75) inset,0 0 20px rgba(219,168,62,.09);
}
.cr-home.cr-effects .cr-explore:hover::after,
.cr-home.cr-effects .cr-guide:hover::after,
.cr-home.cr-effects .cr-feature:hover::after,
.cr-home.cr-effects .cr-board:hover::after{
    opacity:1;
    animation:cr-v22-card-sweep .78s ease-out both;
}
.cr-home.cr-effects .cr-feature:hover>img{
    filter:saturate(1.08) brightness(1.04);
    transform:scale(1.012);
    transition:filter .34s ease,transform .34s ease;
}

/* Hall title gets a subtle fantasy underline pulse. */
.cr-home.cr-effects .cr-section-title{position:relative}
.cr-home.cr-effects .cr-section-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:34%;
    height:2px;
    background:linear-gradient(90deg,transparent,#c99a47 18%,#70c9e8 52%,#e1bb69 82%,transparent);
    box-shadow:0 0 10px rgba(81,180,222,.26);
    transform-origin:left center;
    animation:cr-v22-title-line 5.2s ease-in-out infinite;
}

/* Scroll reveal: more noticeable than V21, still quick. */
.cr-home.cr-v22-ready .cr-v22-reveal{
    opacity:0;
    transform:translateY(28px) scale(.985);
    filter:blur(4px);
}
.cr-home.cr-v22-ready .cr-v22-reveal.cr-v22-visible{
    opacity:1;
    transform:none;
    filter:none;
    transition:opacity .58s ease,transform .72s cubic-bezier(.17,.8,.25,1),filter .55s ease;
}
.cr-home.cr-v22-ready .cr-feature.cr-v22-reveal:nth-child(2){transition-delay:60ms}
.cr-home.cr-v22-ready .cr-feature.cr-v22-reveal:nth-child(3){transition-delay:120ms}
.cr-home.cr-v22-ready .cr-feature.cr-v22-reveal:nth-child(4){transition-delay:180ms}
.cr-home.cr-v22-ready .cr-feature.cr-v22-reveal:nth-child(5){transition-delay:240ms}
.cr-home.cr-v22-ready .cr-feature.cr-v22-reveal:nth-child(6){transition-delay:300ms}

/* Pause animations when tab is hidden. */
.cr-home.cr-v22-paused *,
.cr-home.cr-v22-paused *::before,
.cr-home.cr-v22-paused *::after{animation-play-state:paused!important}

@keyframes cr-v22-ambient{
    0%,100%{opacity:.72;transform:scale(.985)}
    50%{opacity:1;transform:scale(1.025)}
}
@keyframes cr-v22-cinematic-sweep{
    0%,55%{left:-32%;opacity:0}
    62%{opacity:.65}
    82%{left:112%;opacity:.52}
    90%,100%{left:132%;opacity:0}
}
@keyframes cr-v22-ring-pulse{
    0%,100%{opacity:.45;transform:scale(.96)}
    50%{opacity:.95;transform:scale(1.035)}
}
@keyframes cr-v22-ring-spin{to{transform:rotate(360deg)}}
@keyframes cr-v22-logo-bloom{
    0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.94)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
}
@keyframes cr-v22-star-twinkle{
    0%,100%{opacity:0;transform:scale(.35) rotate(0deg)}
    14%{opacity:var(--alpha)}
    30%{opacity:.28;transform:scale(1.55) rotate(28deg)}
    48%{opacity:.88;transform:scale(.82) rotate(54deg)}
    70%{opacity:.18;transform:scale(1.2) rotate(78deg)}
}
@keyframes cr-v22-mote{
    0%{opacity:0;transform:translate3d(0,10px,0) scale(.45)}
    18%{opacity:var(--alpha)}
    52%{opacity:calc(var(--alpha) * .72);transform:translate3d(calc(var(--dx) * .55),calc(var(--dy) * .55),0) scale(1.2)}
    82%{opacity:var(--alpha)}
    100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.62)}
}
@keyframes cr-v22-petal{
    0%{opacity:0;transform:translate3d(0,-8px,0) rotate(var(--rot))}
    8%{opacity:.82}
    48%{transform:translate3d(calc(var(--dx) * .48),54vh,0) rotate(calc(var(--rot) + 170deg))}
    88%{opacity:.64}
    100%{opacity:0;transform:translate3d(var(--dx),112vh,0) rotate(calc(var(--rot) + 390deg))}
}
@keyframes cr-v22-arc-breathe{
    0%,100%{opacity:.36;filter:blur(.2px);transform:translateX(-50%) scaleX(.95)}
    50%{opacity:.9;filter:blur(0);transform:translateX(-50%) scaleX(1.04)}
}
@keyframes cr-v22-login-glow{
    0%,100%{filter:drop-shadow(0 0 0 rgba(255,214,112,0))}
    50%{filter:drop-shadow(0 0 9px rgba(255,211,99,.42)) drop-shadow(0 0 13px rgba(78,186,232,.20))}
}
@keyframes cr-v22-filigree-glow{
    0%,100%{filter:drop-shadow(0 2px 1px #785b3529)}
    50%{filter:drop-shadow(0 0 6px rgba(255,220,142,.72)) drop-shadow(0 0 10px rgba(73,177,222,.20))}
}
@keyframes cr-v22-button-shine{
    0%,58%{opacity:0;transform:translateX(-250%) skewX(-22deg)}
    64%{opacity:.94}
    84%,100%{opacity:0;transform:translateX(520%) skewX(-22deg)}
}
@keyframes cr-v22-nav-glint{
    0%,62%{left:-45%;opacity:0}
    70%{opacity:.72}
    90%,100%{left:125%;opacity:0}
}
@keyframes cr-v22-main-ambient{
    0%,100%{opacity:.60;transform:translateY(0)}
    50%{opacity:1;transform:translateY(5px)}
}
@keyframes cr-v22-card-sweep{
    from{left:-60%}
    to{left:132%}
}
@keyframes cr-v22-title-line{
    0%,100%{opacity:.48;transform:scaleX(.72)}
    50%{opacity:1;transform:scaleX(1.08)}
}

@media (max-width:1023px){
    .cr-home .cr-v22-sigil{width:52vw;min-width:330px;top:73%}
    .cr-home .cr-v22-logo-aura{width:56vw;top:74%}
    .cr-home .cr-v22-arc{width:46vw}
}
@media (max-width:767px){
    .cr-home.cr-effects .cr-hero-art::before{opacity:.70}
    .cr-home.cr-effects .cr-hero-art::after{opacity:.72}
    .cr-home .cr-v22-sigil{width:78vw;min-width:260px;top:73%;opacity:.60}
    .cr-home .cr-v22-logo-aura{width:84vw;height:42%;top:75%;opacity:.72}
    .cr-home .cr-v22-arc{width:70vw;top:58%;opacity:.55}
    .cr-home .cr-v22-petal:nth-of-type(n+7){display:none}
    .cr-home .cr-v22-mote:nth-of-type(n+17){display:none}
    .cr-home.cr-effects .cr-explore:hover,
    .cr-home.cr-effects .cr-guide:hover,
    .cr-home.cr-effects .cr-feature:hover,
    .cr-home.cr-effects .cr-board:hover{transform:none}
}
@media (hover:none),(pointer:coarse){
    .cr-home .cr-v22-fx{transform:none!important;transition:none}
}
@media (prefers-reduced-motion:reduce){
    .cr-home .cr-v22-mote,
    .cr-home .cr-v22-petal,
    .cr-home .cr-v22-star{display:none!important}
    .cr-home.cr-effects .cr-hero-art::after{display:none}
    .cr-home .cr-v22-sigil::after,
    .cr-home .cr-v22-sigil::before,
    .cr-home .cr-v22-logo-aura,
    .cr-home .cr-v22-arc,
    .cr-home.cr-effects .cr-login-panel,
    .cr-home.cr-effects .cr-login-filigree,
    .cr-home.cr-effects .cr-login-button::before,
    .cr-home.cr-effects .cr-nav-item.active>.cr-nav-link::after,
    .cr-home.cr-effects .cr-main-wrap::before,
    .cr-home.cr-effects .cr-section-title{position:relative}
.cr-home.cr-effects .cr-section-title::after{animation:none!important}
    .cr-home.cr-v22-ready .cr-v22-reveal,
    .cr-home.cr-v22-ready .cr-v22-reveal.cr-v22-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}