/* =====================================================
   Hero banner: text sits ABOVE the banner image,
   rotating wheel on the LEFT inside the banner.
   Load this file AFTER /css/style.css
   ===================================================== */

.hero.hero-banner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:clamp(420px, 46vw, 700px);
  padding:0;
  margin:0;
  overflow:hidden;
  background:#1a0f08;            /* fallback while the image loads */
  isolation:isolate;
}

/* banner image fills the whole hero */
.hero-banner .hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

/* dark gradient so the text stays readable on any image */
.hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.55) 100%);
  z-index:1;
  pointer-events:none;
}

/* decorative art container (wheel + temple) */
.hero-banner .heroart{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

/* ROTATING WHEEL - LEFT SIDE OF THE BANNER */
.hero-banner .heroart .wheel{
  position:absolute;
  left:clamp(12px, 5vw, 90px);
  top:50%;
  width:clamp(110px, 24vw, 340px);
  height:auto;
  margin-top:calc(clamp(110px, 24vw, 340px) / -2);
  color:#f3c66b;                 /* gold stroke */
  opacity:.85;
  transform-origin:50% 50%;
  animation:wheel-spin 40s linear infinite;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.55));
}

/* temple silhouette - bottom right, soft */
.hero-banner .heroart .temple{
  position:absolute;
  right:clamp(12px, 5vw, 90px);
  bottom:0;
  width:clamp(110px, 20vw, 280px);
  height:auto;
  color:#f3c66b;
  opacity:.28;
  animation:none;
}

@keyframes wheel-spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* TEXT ABOVE THE BANNER */
.hero-banner .herotxt{
  position:relative;
  z-index:3;
  width:100%;
  max-width:900px;
  padding:48px 20px;
}
.hero-banner .herotxt .odia-t,
.hero-banner .herotxt .odia,
.hero-banner .herotxt .en,
.hero-banner .herotxt .role{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero-banner .herotxt .odia-t{ margin:0 0 .5rem; font-size:clamp(1rem, 2vw, 1.35rem); color:#ffe2a3; }
.hero-banner .herotxt h1.odia{ margin:0; font-size:clamp(2.2rem, 6vw, 4.2rem); line-height:1.2; }
.hero-banner .herotxt .en{ margin:.3rem 0 0; font-size:clamp(1.1rem, 2.6vw, 1.8rem); }
.hero-banner .herotxt .role{ margin:.6rem 0 1.4rem; font-size:clamp(.9rem, 1.8vw, 1.15rem); }
.hero-banner .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* tablets / phones: wheel stays on the left, smaller and softer */
@media (max-width:700px){
  .hero-banner .heroart .wheel{
    width:clamp(90px, 30vw, 150px);
    margin-top:calc(clamp(90px, 30vw, 150px) / -2);
    left:-18px;
    opacity:.45;
  }
  .hero-banner .heroart .temple{ opacity:.18; }
}

/* respect users who turn off animations */
@media (prefers-reduced-motion:reduce){
  .hero-banner .heroart .wheel{ animation:none; }
}