/* Optional animated identity layer; baseline is saved as hosted version 6. */
body{
  background-color:#100b08;
  background-image:
    radial-gradient(ellipse 75% 850px at 50% 180px,rgba(210,162,76,.16),transparent 76%),
    radial-gradient(ellipse 55% 1000px at 0% 720px,rgba(103,32,28,.16),transparent 75%),
    radial-gradient(ellipse 55% 1000px at 100% 1250px,rgba(168,124,47,.13),transparent 75%);
}
.hero{position:relative;isolation:isolate;background:linear-gradient(180deg,transparent 38%,rgba(39,21,12,.3) 66%,transparent)}
.hero .banner-wrap{z-index:1;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%)}
.cinematic-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene-light{position:absolute;left:13%;top:18%;width:74%;height:85%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(210,162,76,.17),rgba(168,124,47,.05) 43%,transparent 69%);
  animation:scene-breathe 12s ease-in-out infinite alternate;will-change:transform,opacity}
.scene-light-secondary{left:-18%;top:32%;width:75%;height:78%;
  background:radial-gradient(ellipse,rgba(117,42,24,.15),transparent 66%);animation-delay:-7s;animation-duration:19s}
.scene-jaali{position:absolute;top:clamp(240px,24vw,390px);width:clamp(220px,23vw,360px);height:680px;
  background:url('../images/jaali-arch.svg') center top/contain no-repeat;opacity:.56}
.scene-jaali-left{left:max(18px,calc(50% - 690px))}
.scene-jaali-right{right:max(18px,calc(50% - 690px));transform:scaleX(-1)}
.scene-mote{position:absolute;bottom:10%;left:var(--x);height:var(--size,2px);width:var(--size,2px);border-radius:50%;
  background:#e8bf70;box-shadow:0 0 7px rgba(230,172,69,.5);opacity:0;
  animation:scene-rise var(--duration,15s) var(--delay,0s) linear infinite}
.hero-inner{z-index:2}
.logo-sculpture{width:min(330px,66vw);margin-bottom:29px}
.logo-sculpture::before{inset:-25% -40% -22%;background:radial-gradient(ellipse,rgba(210,162,76,.3),rgba(168,124,47,.09) 45%,transparent 70%)}
.logo-art{display:block;position:relative;transform:rotateX(5deg) rotateY(-6deg) rotateZ(-1deg);transform-origin:center 55%;transition:transform .65s ease}
.hero .logo-sculpture .logo{transform:none!important;transition:none}
.logo-effects{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen}
.flame{transform-box:fill-box;transform-origin:50% 100%;opacity:.7;
  animation:flame-dance 1.8s ease-in-out infinite alternate;filter:drop-shadow(0 0 2px rgba(255,128,29,.6))}
.flame-l1{animation-delay:-.8s;animation-duration:1.6s}
.flame-l2{animation-delay:-1.4s;animation-duration:2.1s}
.flame-l3{animation-delay:-.4s;animation-duration:1.7s}
.flame-r1{animation-delay:-1.2s;animation-duration:1.9s}
.flame-r2{animation-delay:-.5s;animation-duration:2.3s}
.flame-r3{animation-delay:-1.8s;animation-duration:1.5s}
.flame-core-l,.flame-core-r{opacity:.7;animation-duration:1.65s}
.flame-core-r{animation-delay:-.9s}
.fire-halos{animation:fire-warmth 3.8s ease-in-out infinite alternate}
.headlight{transform-box:fill-box;transform-origin:center;animation:lamp-breathe 4.6s ease-in-out infinite alternate}
.headlight-right{animation-delay:-1.2s;animation-duration:5.2s}
.headlight-beams{opacity:.6;animation:beam-breathe 5.2s ease-in-out infinite alternate}
.logo-spark{opacity:0;animation:logo-spark-rise 3.5s linear infinite}
.spark-b{animation-delay:-1.4s;animation-duration:4.1s}.spark-c{animation-delay:-2.2s}.spark-d{animation-delay:-.8s;animation-duration:4.4s}
.motion-control{
  display:inline-flex;align-items:center;gap:7px;margin:20px auto 0;padding:7px 12px;
  border:1px solid rgba(210,162,76,.25);border-radius:999px;background:rgba(18,13,8,.6);
  color:var(--muted);font:600 .67rem/1.3 Mulish,sans-serif;letter-spacing:.025em;cursor:pointer;
}
.motion-control:hover{color:var(--cream);border-color:rgba(210,162,76,.6)}
.motion-control svg{width:11px;height:11px;fill:currentColor;flex:none}
.motion-control .motion-play{display:none}
.effects-paused .motion-control .motion-pause{display:none}
.effects-paused .motion-control .motion-play{display:block}
.effects-paused *,.effects-paused *::before,.effects-paused *::after{animation-play-state:paused!important}
.hero.effects-offscreen .cinematic-scene *,.hero.effects-offscreen .logo-effects *{animation-play-state:paused!important}
.effects-paused .logo-art{transition:none}
@keyframes flame-dance{
  0%{transform:scale(.94,.88) skewX(-3deg);opacity:.52}
  42%{transform:scale(1.03,1.04) skewX(2deg);opacity:.8}
  75%{transform:scale(.98,.96) skewX(-1deg);opacity:.64}
  100%{transform:scale(1.05,1.08) skewX(3deg);opacity:.88}
}
@keyframes lamp-breathe{0%,15%{opacity:.48;transform:scale(.94)}65%,100%{opacity:.96;transform:scale(1.08)}}
@keyframes beam-breathe{from{opacity:.28}to{opacity:.7}}
@keyframes fire-warmth{from{opacity:.55}to{opacity:.95}}
@keyframes logo-spark-rise{0%{opacity:0;transform:translate(0,7px)}18%{opacity:.7}75%{opacity:.2}100%{opacity:0;transform:translate(5px,-30px)}}
@keyframes scene-breathe{from{opacity:.6;transform:translate(-3%,0) scale(.96)}to{opacity:1;transform:translate(3%,-2%) scale(1.05)}}
@keyframes scene-rise{0%{opacity:0;transform:translate(0,30px)}15%{opacity:.45}75%{opacity:.2}100%{opacity:0;transform:translate(30px,-520px)}}
@media(hover:hover) and (pointer:fine){.logo-sculpture:hover .logo-art{transform:rotateX(0) rotateY(0) rotateZ(0) translateY(-3px)}}
@media(max-width:1100px){.scene-jaali{opacity:.34;width:250px}.scene-jaali-left{left:-95px}.scene-jaali-right{right:-95px}}
@media(max-width:820px){
  .logo-sculpture{width:min(265px,65vw);margin-bottom:25px}
  .logo-art{transform:rotateX(3deg) rotateY(-4deg) rotateZ(-.7deg)}
  .scene-jaali{opacity:.27;width:230px;top:170px}.scene-jaali-left{left:-125px}.scene-jaali-right{right:-125px}
  .scene-light{left:-5%;width:110%}.scene-mote:nth-of-type(n+11){display:none}
}
@media(max-width:430px){.logo-sculpture{width:240px;max-width:65vw}.motion-control{font-size:.64rem;margin-top:17px}}
@media(prefers-reduced-motion:reduce){
  .logo-art,.logo-sculpture:hover .logo-art{transform:none;transition:none}
  .scene-mote,.logo-sparks{display:none}.scene-light{opacity:.8}.flame{opacity:.65}.headlight{opacity:.75}
  .motion-control{display:none}
}
@media(forced-colors:active){.cinematic-scene,.logo-effects,.motion-control{display:none}.logo-art{transform:none}}