/* ==========================================================================
   CYBERZ — The world has already fallen
   HTML : index.html → "THE COLLAPSE" bölümü
   CSS  : css/home/02-world.css
   ========================================================================== */

.world{ position:relative; overflow:hidden; isolation:isolate; }
.world__bg{ position:absolute; inset:-12% 0 0; z-index:-2; }
.world__bg img{
    width:100%; height:100%; object-fit:cover;
    opacity:.24; filter:grayscale(.5) contrast(1.1);
}
.world::after{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(to bottom,var(--bg-0),rgba(4,6,10,.55) 40%,var(--bg-0));
}
.world__inner{ position:relative; }

.beats{
    list-style:none;
    display:flex; flex-direction:column;
    gap:clamp(24px,3.4vw,44px);
    max-width:74ch;
    margin-bottom:clamp(56px,7vw,104px);
}
.beat{
    display:grid; grid-template-columns:auto 1fr; gap:20px;
    align-items:start;
    padding-left:2px;
}
.beat__no{
    color:var(--energy);
    padding-top:.45em;
    letter-spacing:.1em;
}
.beat p{
    font-size:clamp(1.125rem,2vw,1.5rem);
    line-height:1.5; color:var(--fg-2);
    max-width:none;
}
.beat b{ color:var(--fg); font-weight:600; }

/* --- the weaponized dead --- */
.threat{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:clamp(28px,5vw,72px);
    align-items:center;
}
.threat__art{
    position:relative;
    border:1px solid var(--line);
    overflow:hidden;
    clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.threat__art img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.threat__art::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top,rgba(4,6,10,.75),transparent 45%);
    pointer-events:none;
}
.threat__copy{ display:flex; flex-direction:column; gap:16px; }
.threat__copy h3{ font-size:clamp(1.4rem,2.6vw,2rem); }
.threat__copy p{ color:var(--fg-2); }
.pull{
    font-family:var(--font-display);
    font-size:clamp(1.15rem,2.2vw,1.6rem);
    font-weight:700; line-height:1.25;
    color:var(--danger);
    padding-left:16px; border-left:2px solid var(--danger-hard);
}
@media (max-width:860px){
    .threat{ grid-template-columns:1fr; }
    .threat__art{ max-width:420px; }
}