/* ==========================================================
   "WHERE THE STORY HAPPENS" — hellfire arenas (The King look)
   chains · smoke · embers · flicker · rusty gold frames · cage-door reveal
   ========================================================== */
.hell{position:relative;overflow:hidden;padding-bottom:clamp(90px,11vw,150px);margin-top:clamp(70px,9vw,120px);padding-top:clamp(110px,12vw,170px);
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(190,30,10,.35),transparent 70%),radial-gradient(ellipse 60% 40% at 50% 0,rgba(120,10,0,.25),transparent 70%),#070302;
  clip-path:polygon(0 3%,6% 0,13% 2.4%,21% .6%,30% 2.8%,38% .4%,47% 2.2%,55% .2%,64% 2.6%,72% .8%,81% 2.4%,89% .3%,95% 2%,100% .6%,100% 97.5%,94% 100%,86% 97.8%,77% 99.6%,68% 97.4%,59% 99.8%,50% 97.6%,41% 99.5%,32% 97.3%,23% 99.7%,14% 97.6%,6% 99.4%,0 97.2%)}
.hell.sec{padding-top:clamp(110px,12vw,170px)}
.hell__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hell__glow{position:absolute;left:50%;bottom:-30%;width:120%;height:80%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,80,20,.35),rgba(160,20,0,.15) 40%,transparent 70%);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(1.05)}}
.hell__smoke{position:absolute;left:0;top:10%;width:200%;height:90%;background:url(../assets/img/fx/smoke.png) repeat-x 0 0/50% 100%;opacity:.55;animation:drift 50s linear infinite}
.hell__smoke--2{top:30%;opacity:.35;animation-duration:80s;animation-direction:reverse;filter:hue-rotate(-10deg)}
@keyframes drift{to{transform:translateX(-50%)}}
.hell__embers{position:absolute;left:0;top:0;width:100%;height:200%;background:url(../assets/img/fx/embers.png) repeat 0 0/600px 600px;opacity:.75;animation:rise 26s linear infinite;mix-blend-mode:screen}
@keyframes rise{to{transform:translateY(-50%)}}

/* hanging chains */
.chains{position:absolute;inset:0 0 auto;height:0;z-index:3;pointer-events:none}
.chains i{position:absolute;top:-10px;width:22px;height:var(--h,220px);transform-origin:50% 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='40' viewBox='0 0 22 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236b4a12'/%3E%3Cstop offset='.45' stop-color='%23ffe08a'/%3E%3Cstop offset='1' stop-color='%23704a10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='5' y='1' width='12' height='22' rx='6' fill='none' stroke='url(%23g)' stroke-width='3.2'/%3E%3Crect x='9.4' y='19' width='3.2' height='20' rx='1.6' fill='url(%23g)'/%3E%3C/svg%3E") repeat-y 0 0/22px 40px;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.8)) drop-shadow(0 0 6px rgba(255,170,60,.25));
  transform:translateY(-110%);transition:transform 1.4s cubic-bezier(.3,1.4,.4,1)}
.chains i::after{content:"";position:absolute;left:50%;bottom:-18px;width:26px;height:26px;transform:translateX(-50%);border:3px solid #c9932e;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,230,150,.5),0 4px 8px rgba(0,0,0,.7)}
.chains i:nth-child(1){left:4%;--h:260px}.chains i:nth-child(2){left:16%;--h:150px;transition-delay:.15s}
.chains i:nth-child(3){right:16%;--h:190px;transition-delay:.3s}.chains i:nth-child(4){right:5%;--h:280px;transition-delay:.08s}
.hell.is-live .chains i{transform:none;animation:swing 6s ease-in-out infinite 1.4s}
.hell.is-live .chains i:nth-child(2){animation-duration:4.6s}.hell.is-live .chains i:nth-child(3){animation-duration:5.4s;animation-delay:1.8s}
@keyframes swing{0%,100%{transform:rotate(2.2deg)}50%{transform:rotate(-2.2deg)}}

/* heading */
.hell__head{position:relative;z-index:2}
.hell__head .kicker{color:#ffcf7a}
.hell__title{font-size:clamp(46px,8vw,118px)!important;line-height:.9;
  -webkit-mask:url(../assets/img/fx/grunge.png) center/600px auto;mask:url(../assets/img/fx/grunge.png) center/600px auto}
.hell__title em{display:block}
.hell__sub{max-width:560px;margin:18px auto 0;color:#d9c7a8;font-size:clamp(15px,1.3vw,18px)}
.hell__head.is-in .hell__title{animation:slam .9s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{0%{opacity:0;transform:scale(1.7);filter:blur(10px)}60%{opacity:1;filter:blur(0)}75%{transform:scale(.97) translateX(-3px)}85%{transform:scale(1.01) translateX(3px)}100%{transform:none}}

/* arena "pits" */
.hell__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);margin-top:clamp(40px,5vw,70px);perspective:1400px}
.pit{position:relative;display:block;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.pit__frame{position:relative;padding:12px;aspect-ratio:4/5;
  background:
    radial-gradient(circle at 18% 22%,rgba(90,40,5,.75) 0 6%,transparent 14%),
    radial-gradient(circle at 78% 64%,rgba(80,30,0,.7) 0 5%,transparent 13%),
    radial-gradient(circle at 40% 88%,rgba(110,50,10,.6) 0 4%,transparent 11%),
    radial-gradient(circle at 92% 12%,rgba(70,25,0,.65) 0 4%,transparent 10%),
    linear-gradient(135deg,#7a520f 0%,#f0c35a 22%,#9b6a16 40%,#ffe39a 52%,#a3701a 66%,#e2ad44 82%,#6b450c 100%);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.pit__frame::before{content:"";position:absolute;inset:0;background:url(../assets/img/fx/grunge.png) center/420px auto;mix-blend-mode:multiply;opacity:.55;pointer-events:none;z-index:1}
.pit__inner{position:relative;height:100%;overflow:hidden;background:#000;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);box-shadow:inset 0 0 0 2px rgba(0,0,0,.8)}
.pit__media{position:absolute;inset:-6%;}
.pit__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease),filter .8s;animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.12) translate(-1.5%,-1%)}}
.pit:hover .pit__media img{filter:brightness(1.18) saturate(1.15)}
.pit__flicker{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 50% 0,var(--acc),transparent 65%);mix-blend-mode:screen;opacity:.25;animation:flicker 4.5s steps(1) infinite}
.pit:hover .pit__flicker{animation-duration:1.2s;opacity:.45}
@keyframes flicker{0%,100%{opacity:.25}8%{opacity:.05}9%{opacity:.4}11%{opacity:.1}12%{opacity:.35}40%{opacity:.28}62%{opacity:.08}63%{opacity:.32}}
.pit__smoke{position:absolute;left:0;bottom:-10%;width:200%;height:70%;z-index:3;background:url(../assets/img/fx/smoke.png) repeat-x 0 0/50% 100%;opacity:.6;animation:drift 30s linear infinite;pointer-events:none}
.pit__embers{position:absolute;left:0;top:0;width:100%;height:200%;z-index:3;background:url(../assets/img/fx/embers.png) repeat 0 0/420px 420px;opacity:.9;mix-blend-mode:screen;animation:rise 14s linear infinite;pointer-events:none}
.pit__shade{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 45%,rgba(5,2,1,.92) 85%)}
/* cage doors that open when the card enters the screen */
.pit__doors{position:absolute;inset:0;z-index:6;pointer-events:none;display:flex}
.pit__doors::before,.pit__doors::after{content:"";flex:1;background:
   repeating-linear-gradient(90deg,transparent 0 22px,#1b1206 22px 24px,#e8b955 24px 27px,#6b450c 27px 30px,transparent 30px 52px),
   linear-gradient(180deg,#0b0603,#160c05);
  transition:transform 1.5s cubic-bezier(.77,0,.18,1);box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.pit__doors::before{border-right:3px solid #e8b955}
.pit__doors::after{border-left:3px solid #e8b955}
.pit.is-open .pit__doors::before{transform:translateX(-101%)}
.pit.is-open .pit__doors::after{transform:translateX(101%)}
.pit:nth-child(2) .pit__doors::before,.pit:nth-child(2) .pit__doors::after{transition-delay:.25s}
.pit__num{position:absolute;top:18px;right:20px;z-index:5;font:400 clamp(70px,9vw,130px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,214,120,.55);text-shadow:0 0 30px rgba(255,120,40,.35)}
.pit__body{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:clamp(20px,3vw,36px)}
.pit__body .kicker{color:var(--acc);text-shadow:0 0 14px var(--acc)}
.pit__body .kicker::before{background:var(--acc)}
.pit__body h3{font:400 clamp(44px,5.6vw,84px)/.9 var(--display);text-transform:uppercase;margin:6px 0 10px;background:var(--g-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(255,140,40,.35));
  -webkit-mask:url(../assets/img/fx/grunge.png) center/380px auto;mask:url(../assets/img/fx/grunge.png) center/380px auto}
.pit__body p{margin:0 0 14px;color:#e6d6bc;font-size:15.5px;max-width:420px}
.pit__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pit__tags span{padding:6px 10px;font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#f3dca4;background:rgba(10,5,2,.7);border:1px solid rgba(226,176,74,.45);clip-path:var(--chamfer);--cut:5px}
.pit .btn{transform:translateY(6px);opacity:.92;transition:transform .5s var(--ease),opacity .5s}
.pit:hover .btn{transform:none;opacity:1}
/* rivets */
.rv{position:absolute;z-index:7;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#c08a2a 45%,#4a2e06 80%);box-shadow:0 1px 2px rgba(0,0,0,.8)}
.rv:nth-of-type(1){top:22px;left:22px}.rv:nth-of-type(2){top:22px;right:22px}.rv:nth-of-type(3){bottom:22px;left:22px}.rv:nth-of-type(4){bottom:22px;right:22px}
.pit:hover .pit__frame{filter:drop-shadow(0 0 28px rgba(255,150,40,.35))}

/* lite (phones): keep the look, drop the heavy motion */
html.lite .hell{clip-path:none}
html.lite .hell__smoke,html.lite .pit__smoke{animation:none;width:100%;background-size:100% 100%}
html.lite .hell__embers,html.lite .pit__embers{animation:none;mix-blend-mode:normal;height:100%;opacity:.6}
html.lite .pit__media img{animation:none}
html.lite .hell__glow{animation:none}
html.lite .chains i{filter:none}
html.lite .pit__body h3,html.lite .pit__frame,html.lite .pit:hover .pit__frame{filter:none}
html.lite .pit__frame::before{display:none}

@media (max-width:760px){
  .hell__grid{grid-template-columns:1fr}
  .pit__frame{aspect-ratio:4/4.6}
  .chains i:nth-child(2),.chains i:nth-child(3){display:none}
  .chains i:nth-child(1){--h:130px}.chains i:nth-child(4){--h:170px}
  .pit .btn{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.pit__doors{display:none}}
/* rust texture only on the gold frame, never over photo/text */
.pit__frame::before{z-index:0}
.pit__inner{z-index:1}
.pit__body h3{-webkit-mask-size:520px auto;mask-size:520px auto}