/* ==========================================
   FEATURE: SECRETS / CRAFTING / EVENTS
========================================== */

[data-secret-effect]{
    cursor:pointer;
}

[data-secret-effect]:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:5px;
}

.secret-screen-effect{
    position:absolute;
    inset:0;
    overflow:hidden;
}

/* Hidden map cards */

.mystery-map-card{
    position:absolute;
    left:var(--card-x);
    top:var(--card-y);
    width:clamp(105px, 14vw, 165px);
    aspect-ratio:3 / 4;
    overflow:hidden;
    border:3px solid #d7b96c;
    border-radius:16px;
    background:
        linear-gradient(35deg, transparent 46%, rgba(90,62,28,.35) 47% 51%, transparent 52%),
        linear-gradient(145deg, #e8d397, #9c7a3f);
    box-shadow:0 24px 45px rgba(0,0,0,.62), inset 0 0 25px rgba(62,39,12,.35);
    opacity:0;
    animation:mysteryCardReveal 2.2s var(--delay) cubic-bezier(.16,.8,.28,1) forwards;
}

.mystery-map-card span{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#2b1c0d;
    font-size:clamp(4rem, 8vw, 6rem);
    font-weight:1000;
    text-shadow:0 3px 0 rgba(255,255,255,.2);
}

.mystery-map-card i,
.mystery-map-card b{
    position:absolute;
    width:35px;
    height:35px;
    border:4px dashed rgba(77,47,18,.65);
    border-radius:50%;
}

.mystery-map-card i{ left:10px; top:16px; }
.mystery-map-card b{ right:10px; bottom:16px; }

@keyframes mysteryCardReveal{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-60deg); }
    32%, 76%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(var(--rotation)); }
    100%{ opacity:0; transform:translate(-50%,-70%) scale(.86) rotate(var(--reverse-rotation)); }
}

/* Crafting */

.crafting-scene{
    display:grid;
    place-items:center;
    background:radial-gradient(circle, rgba(255,106,0,.2), transparent 42%);
}

.crafting-workbench{
    position:relative;
    width:min(340px, 70vw);
    padding:34px 28px 42px;
    border:8px solid #27170d;
    border-radius:22px;
    background:linear-gradient(165deg, #9a5527, #3e1e0b);
    box-shadow:0 35px 55px rgba(0,0,0,.7), inset 0 0 30px rgba(0,0,0,.45);
    text-align:center;
    animation:workbenchBuild 2.3s ease forwards;
}

.crafting-workbench strong{
    display:block;
    font-size:5rem;
}

.crafting-workbench span{
    color:#ffd1a3;
    font-weight:1000;
    letter-spacing:.16em;
}

.crafting-workbench i{
    position:absolute;
    left:12%;
    right:12%;
    bottom:-38px;
    height:45px;
    border-left:22px solid #321a0c;
    border-right:22px solid #321a0c;
}

.crafting-scene > b{
    position:absolute;
    left:50%;
    top:50%;
    font-size:3.2rem;
    opacity:0;
    animation:materialCraft 1.65s var(--delay) ease-in forwards;
}

@keyframes workbenchBuild{
    0%{ opacity:0; transform:translateY(120px) scale(.5); }
    30%, 78%{ opacity:1; transform:translateY(0) scale(1); }
    100%{ opacity:0; transform:translateY(-25px) scale(.94); }
}

@keyframes materialCraft{
    0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(40vw, 380px)) scale(1); }
    18%, 66%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(30px) rotate(420deg) scale(.25); }
}

/* Event stage */

.event-show{
    display:grid;
    place-items:center;
    background:
        linear-gradient(70deg, transparent 35%, rgba(255,106,0,.15) 36% 42%, transparent 43%),
        linear-gradient(-70deg, transparent 35%, rgba(108,124,255,.15) 36% 42%, transparent 43%);
}

.event-stage{
    position:relative;
    width:min(480px, 78vw);
    padding:48px 25px;
    border:5px solid rgba(255,255,255,.16);
    border-radius:30px;
    background:linear-gradient(145deg, #24150d, #080808);
    box-shadow:0 35px 70px rgba(0,0,0,.72), 0 0 60px rgba(255,106,0,.3);
    text-align:center;
    animation:eventStageShow 2.35s ease forwards;
}

.event-stage span{
    display:block;
    color:var(--color-primary);
    font-size:clamp(2.2rem, 8vw, 5rem);
    font-weight:1000;
    letter-spacing:.12em;
    text-shadow:0 0 28px rgba(255,106,0,.6);
}

.event-stage strong{
    display:block;
    margin-top:12px;
    font-size:4.5rem;
}

.event-stage i,
.event-stage b{
    position:absolute;
    top:-35px;
    width:28px;
    height:150%;
    background:linear-gradient(rgba(255,255,255,.55), transparent);
    filter:blur(6px);
    transform-origin:top;
}

.event-stage i{ left:12%; transform:rotate(-24deg); }
.event-stage b{ right:12%; transform:rotate(24deg); }

.event-show > em{
    position:absolute;
    left:var(--x);
    top:-30px;
    width:13px;
    height:25px;
    border-radius:3px;
    background:var(--color);
    opacity:0;
    animation:eventConfetti 2s var(--delay) ease-in forwards;
}

@keyframes eventStageShow{
    0%{ opacity:0; transform:scale(.35) translateY(100px); }
    30%, 78%{ opacity:1; transform:scale(1) translateY(0); }
    100%{ opacity:0; transform:scale(.94) translateY(-25px); }
}

@keyframes eventConfetti{
    0%{ opacity:0; transform:translateY(-20px) rotate(0); }
    15%, 78%{ opacity:1; }
    100%{ opacity:0; transform:translateY(calc(100vh + 70px)) rotate(var(--spin)); }
}

@media (prefers-reduced-motion: reduce){
    .mystery-map-card,
    .crafting-workbench,
    .crafting-scene > b,
    .event-stage,
    .event-show > em{
        animation-duration:.01ms;
        animation-iteration-count:1;
    }
}