/* cRAED / GOTHIC CINEMA V5
   The original creator-approved rooftop art replaces the former flat bat SVG.
   Image is optimized WebP (1600 x 901) and served by Cloudflare as a static asset.
   Preserves typography, buttons, live data and card interactions.
*/
.hero{
  isolation:isolate;
  background:#070408!important;
  min-height:clamp(850px,100svh,1050px);
  padding-top:clamp(155px,13.5vw,185px);
  padding-bottom:95px;
}
.hero-cinema{
  position:absolute;
  inset:-12px;
  pointer-events:none;
  z-index:0;
  background:#08040b url("assets/hero-gothic-craed.webp") center 47% / cover no-repeat;
  transform:translate3d(var(--cinema-x,0px),var(--cinema-y,0px),0) scale(1.045);
  transition:transform 700ms cubic-bezier(.15,.65,.26,1);
  opacity:1;
}
.hero-cinema:before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,#07040894 0%,#0b060b41 22%,#08040b88 52%,#090409c9 83%,#070507 100%),
    radial-gradient(ellipse 56% 42% at 50% 46%,#06040880,transparent 92%),
    linear-gradient(90deg,#07030815,transparent 20% 75%,#0d020720);
}
.hero-cinema:after{
  content:"";
  position:absolute;
  left:-4%;right:-4%;bottom:0;height:34%;
  background:linear-gradient(0deg,#070507 0%,#0a04098a 45%,transparent 100%);
}
.hero-cinema-mist{
  position:absolute;z-index:1;pointer-events:none;
  left:-8%;right:-8%;bottom:-5%;height:40%;
  opacity:.21;
  background:radial-gradient(ellipse 48% 35% at 26% 75%,#ed687d3d,transparent 95%),radial-gradient(ellipse 40% 33% at 67% 81%,#ffffff21,transparent 90%);
  transform:translate3d(0,0,0);
  animation:cinema-fog-drift 29s ease-in-out infinite alternate;
}
@keyframes cinema-fog-drift{to{transform:translate3d(3.2%,0,0)}}
.hero .scene3d,
.hero .hero-sculpture,
.hero .hero-grid,
.hero .hero-glow,
.hero .bat-backdrop,
.hero .hero-lightning,
.hero .red-sparks,
.hero .hero-mark,
.hero .nightfall-stamp,
.hero .motion-test{display:none!important;}
.hero::before{display:none!important;}
.hero::after{
  z-index:2!important;
  height:150px!important;
  background:linear-gradient(transparent,#070507 95%)!important;
}
.hero .hero-content{
  position:relative;
  z-index:5;
  max-width:930px;
  padding-top:0;
}
.hero .hero-chip{
  margin-bottom:27px;
  border:1px solid #f2a0ac4e;
  background:#130912a8;
  box-shadow:0 8px 24px #0008;
  font-size:11px;
  backdrop-filter:none;
  letter-spacing:3px;
}
.hero .hero-mini{
  margin:8px auto 11px;
  width:max-content;
  max-width:100%;
  color:#ffe6e7;
  font-size:14px;
  text-shadow:0 3px 16px #000e;
}
.hero .hero-english{
  display:inline-block;
  font-size:clamp(95px,10.3vw,157px);
  letter-spacing:-5px;
  line-height:.94;
  text-shadow:0 7px 0 #0d070c,0 12px 28px #000f;
  filter:none!important;
}
.hero .hero-english span{
  background:linear-gradient(175deg,#ffdbdf 0%,#ff596f 24%,#e31e45 72%,#910a2c 100%);
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:0;
  filter:none!important;
}
.hero .hero-arabic{
  margin-top:20px;
  color:#fff0ef;
  font-size:clamp(35px,4.6vw,62px);
  text-shadow:0 5px 3px #000b,0 12px 25px #000e;
}
.hero .hero-arabic strong{color:#ff4f70;}
.hero .hero-description{
  margin:14px auto;
  max-width:610px;
  color:#ffe4e7;
  font-size:clamp(12px,1vw,15px);
  text-shadow:0 2px 10px #000,0 3px 15px #000;
}
.hero .hero-tags{margin:23px auto 25px;}
.hero .hero-tags span{background:#0a080bbd;border-color:#ee84975a;}
.hero .hero-buttons .button{box-shadow:0 13px 26px #000b;min-height:49px;}
.hero .hero-strip{
  margin-top:36px;
  background:linear-gradient(115deg,#1c0c17dd,#0a090ed9 55%,#1e0a15d9);
  box-shadow:0 15px 39px #000a;
  border-color:#ff8e9e3d;
  backdrop-filter:none;
}
.hero .hero-end{color:#ffcbd391;text-shadow:0 2px 6px #000;}
/* Original compact brand mark: cRAED monogram instead of a flat bat silhouette. */
.site-header .brand-bat{
  border:1px solid #ff8d9860;
  border-radius:14px;
  background:linear-gradient(145deg,#4a1028,#160712);
  box-shadow:0 0 16px #f2294233,inset 0 1px #ffc8d02e;
}
.site-header .brand-bat .site-crest{
  font:900 18px/.9 Rajdhani,Arial,sans-serif;
  letter-spacing:-1px;
  color:#fff1f3;
  text-shadow:0 0 10px #ff446a99;
}
/* On large screens the city remains visible at both edges, framing cRAED. */
@media(min-width:1250px){
  .hero-cinema{background-position:center 44%}
}
/* Keep the vigilante and cape visible on mobile rather than cropping the whole left side. */
@media(max-width:900px){
  .hero{min-height:850px;padding-top:166px;}
  .hero-cinema{background-position:36% 45%;}
  .hero-cinema:before{
    background:linear-gradient(180deg,#0704088c,#08040b6f 33%,#08040bce 73%,#070507 100%),radial-gradient(ellipse at 50% 50%,#08040b80,transparent 100%);
  }
  .hero .hero-english{font-size:clamp(77px,13.5vw,112px);}
  .hero .hero-arabic{font-size:clamp(33px,7.3vw,46px);}
}
@media(max-width:600px){
  .hero{min-height:800px;padding:143px 0 68px;}
  .hero-cinema{background-position:26% 44%;transform:none!important;}
  .hero-cinema-mist{display:none;}
  .hero .hero-chip{font-size:9px;letter-spacing:1.7px;max-width:96%;}
  .hero .hero-mini{font-size:11px;}
  .hero .hero-english{font-size:clamp(69px,17vw,94px);letter-spacing:-3px;}
  .hero .hero-arabic{font-size:clamp(30px,7.8vw,42px);}
  .hero .hero-description{font-size:12px;line-height:1.85;}
  .hero .hero-strip{margin-top:27px;background:#100a11dd;}
}
@media(max-width:390px){
  .hero{min-height:810px;padding-top:136px;}
  .hero .hero-english{font-size:66px;}
  .hero .hero-chip{font-size:8px;}
  .hero .hero-arabic{font-size:29px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-cinema{transition:none!important;}
  .hero-cinema-mist{animation:none!important;}
}