/* ============================================================
   Navkar Navratri Utsav — Hero
   Cinematic full-bleed photograph, layered scrims, festive
   decor, and a staggered entrance once the image has loaded.
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  /* Sit the copy under the nav logo — not pinned to the bottom with a void */
  padding-top:calc(var(--nav-h) + clamp(20px,3.5vh,36px));
  padding-bottom:clamp(28px,4.5vw,48px);
  overflow:hidden;
  background:var(--ink-900);
  isolation:isolate;
}

/* ------------------------------------------------------------
   Media layer — Ken Burns drift + scroll parallax
   ------------------------------------------------------------ */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-img{
  position:absolute;
  top:-8%;left:0;
  width:100%;height:116%;
  object-fit:cover;
  /* pulls the faces up clear of the headline; the box is taller than the
     image's aspect once cover kicks in, so only the vertical value bites */
  object-position:62% 56%;
  /* --py is written by the parallax loop in js/main.js */
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
  transform-origin:62% 45%;
  /* image reveal: wipes up from the bottom on load */
  clip-path:inset(28% 0 0 0);
  opacity:0;
  transition:clip-path 1.5s var(--e-out),opacity 1.1s var(--e-out);
  will-change:transform,clip-path;
}
.hero.is-ready .hero-img{clip-path:inset(0 0 0 0);opacity:1}
.hero.is-ready .hero-img{animation:kenburns 26s var(--e-soft) 1.4s infinite alternate}
@keyframes kenburns{
  from{transform:translate3d(0,var(--py,0px),0) scale(1.06)}
  to  {transform:translate3d(0,var(--py,0px),0) scale(1.15)}
}

/* Legibility scrims: vertical wash + a left-side ramp for the copy */
.hero-scrim{position:absolute;inset:0;z-index:-1;background:var(--scrim-v)}
.hero-scrim::after{
  content:"";position:absolute;inset:0;
  background:var(--scrim-r);
  opacity:.9;
}

/* A warm colour cast so the photo sits inside the brand palette */
.hero-cast{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(156,0,67,.42),transparent 46%,rgba(227,11,84,.24));
  mix-blend-mode:screen;
  opacity:.55;
  pointer-events:none;
}

/* ------------------------------------------------------------
   Decorative layer
   ------------------------------------------------------------ */
.hero .glow-1{width:46vw;height:46vw;top:-12%;right:-10%;background:radial-gradient(circle,var(--magenta),transparent 68%);opacity:.34}
.hero .glow-2{width:38vw;height:38vw;bottom:-14%;left:-8%;background:radial-gradient(circle,var(--purple),transparent 68%);opacity:.40}

.hero .motif-tr{color:var(--yellow);opacity:.13}
.hero .motif-bl{color:var(--magenta);opacity:.15}
.hero .dandiya-1{top:18%;right:12%;color:var(--yellow);opacity:.26}
.hero .dandiya-2{bottom:26%;left:6%;color:var(--marigold);opacity:.20;animation-delay:-4s}

/* ------------------------------------------------------------
   Content
   ------------------------------------------------------------ */
.hero-in{
  position:relative;z-index:2;
  width:100%;
  max-width:var(--wrap-wide);
  margin:0 auto;
  padding:0 var(--gut);
}
.hero-content{
  max-width:840px;
  --hero-gap:clamp(28px,3.2vw,40px);
}

/* Staggered entrance */
.hero-content > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--e-out),transform .85s var(--e-out);
}
.hero.is-ready .hero-content > *{opacity:1;transform:none}
.hero.is-ready .hero-content > :nth-child(1){transition-delay:.18s}  /* brand */
.hero.is-ready .hero-content > :nth-child(2){transition-delay:.30s}  /* h1 */
.hero.is-ready .hero-content > :nth-child(3){transition-delay:.42s}  /* sub */
.hero.is-ready .hero-content > :nth-child(4){transition-delay:.54s}  /* facts */
.hero.is-ready .hero-content > :nth-child(5){transition-delay:.64s}  /* CTAs */
.hero.is-ready .hero-content > :nth-child(6){transition-delay:.74s}  /* billing */

/* ------------------------------------------------------------
   Brand lockup — event logo + 9th Season seal, one aligned row
   ------------------------------------------------------------ */
.hero-brand{
  display:flex;
  align-items:center;
  margin:0 0 var(--hero-gap);
}
.season{
  flex:none;
  display:inline-flex;
  flex-direction:row;
  align-items:baseline;
  gap:.35em;
  overflow:visible;
}
.season-n{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-size:clamp(28px,3.2vw,40px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
  /* Solid fill — background-clip:text crops Outfit’s heavy 9 */
  color:var(--yellow);
  -webkit-text-fill-color:var(--yellow);
  background:none;
  padding:0;
  overflow:visible;
}
.season-l{
  display:inline;
  margin-top:0;
  font-family:'Outfit',sans-serif;
  font-size:clamp(14px,1.5vw,18px);font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--marigold);
}

/* Headline — the words carry the entrance, so the block itself stays visible */
.hero h1{color:#fff;margin:0 0 var(--hero-gap);text-shadow:0 2px 34px rgba(42,6,20,.45)}
.hero .hero-content > h1{opacity:1;transform:none}
.hero.is-ready h1 .w > span{transform:translateY(0)}
.hero h1 .w > span{transition-delay:calc(.42s + var(--i,0) * 80ms)}
/* Solid fallback first — if background-clip:text is unavailable the words
   stay readable instead of rendering transparent. */
.hero h1 em{font-style:normal;color:var(--yellow)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{
    background:var(--gold);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

.hero .sub{
  font-size:clamp(15.5px,1.55vw,19px);
  color:var(--cream-70);
  max-width:48ch;
  line-height:1.6;
  margin:0 0 var(--hero-gap);
}

/* ------------------------------------------------------------
   Fact row
   Flat label/value pairs split by hairlines. No pill, no border,
   no blur — these are facts, and anything pill-shaped up here
   competes with the one thing that IS clickable.
   ------------------------------------------------------------ */
/* An explicit grid, not flex-wrap: a wrapped flex item would keep the
   `+ div` hairline and leave a stray rule floating mid-row. */
.hero-meta{
  display:grid;
  /* auto, not 1fr: equal columns force the longer values to wrap and leave
     the row ragged. Content-sized columns keep each value on one line. */
  grid-template-columns:repeat(4,auto);
  justify-content:start;
  margin:0 0 var(--hero-gap);
}
.hero-meta > div{padding:0 clamp(15px,1.8vw,26px)}
.hero-meta > div:first-child{padding-left:0}
.hero-meta > div:last-child{padding-right:0}
.hero-meta > div + div{border-left:1px solid var(--cream-45)}
.hero-meta dt{
  font-family:'Outfit',sans-serif;
  font-size:clamp(11px,.95vw,12.5px);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--marigold);
  margin-bottom:8px;
}
.hero-meta dd{
  font-family:'Outfit',sans-serif;
  /* these are the page's key facts, so they should not sit below the
     body copy in size; the shadow keeps them legible over any frame
     of the photograph behind them */
  font-size:clamp(17px,1.7vw,22px);
  font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.3;
  text-shadow:0 1px 12px rgba(27,3,9,.75);
}
.hero-meta dd.hi{color:var(--yellow)}

/* ------------------------------------------------------------
   CTAs — exactly one button, one text link
   ------------------------------------------------------------ */
.cta-row{
  display:flex;align-items:center;
  gap:clamp(18px,2.4vw,32px);
  flex-wrap:wrap;
  margin:0 0 var(--hero-gap);
}

/* The single primary action. Bigger than any .btn elsewhere on the page,
   with a warm halo so it separates from the photograph behind it. */
.btn-hero{
  font-size:clamp(18px,1.85vw,22px);
  padding:clamp(22px,2.3vw,28px) clamp(40px,4vw,58px);
  background:var(--yellow);
  color:var(--ink);
  box-shadow:
    0 7px 0 #D2AE00,
    0 18px 45px rgba(252,230,10,.34),
    0 0 0 0 rgba(252,230,10,.5);
  animation:ctaHalo 3.4s var(--e-soft) infinite;
}
.btn-hero:hover{
  background:#fff;
  transform:translateY(3px);
  box-shadow:0 4px 0 #D2AE00,0 12px 34px rgba(252,230,10,.4);
  animation:none;
}
.btn-hero:active{transform:translateY(7px);box-shadow:0 0 0 #D2AE00}
.cta-arrow{
  width:20px;height:20px;flex:none;
  stroke:currentColor;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast);
}
.btn-hero:hover .cta-arrow{transform:translateX(4px)}

/* Soft outward pulse — draws the eye without bouncing the button */
@keyframes ctaHalo{
  0%,100%{box-shadow:0 7px 0 #D2AE00,0 18px 45px rgba(252,230,10,.34),0 0 0 0 rgba(252,230,10,.45)}
  55%    {box-shadow:0 7px 0 #D2AE00,0 18px 45px rgba(252,230,10,.34),0 0 0 16px rgba(252,230,10,0)}
}

/* Secondary button: clearly clickable, but deliberately lighter than the
   primary so the festival passes still lead. */
.btn-hero-alt{
  font-size:clamp(16.5px,1.6vw,19px);
  padding:clamp(20px,2vw,26px) clamp(30px,3vw,42px);
}
.btn-hero-alt span{opacity:.72;font-weight:700}

/* Tertiary action is a link, not a button */
.cta-text{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;
  font-size:clamp(15.5px,1.55vw,18px);font-weight:700;letter-spacing:.02em;
  color:#fff;
  padding-bottom:3px;
  position:relative;
  transition:color var(--t-fast);
}
.cta-text svg{
  width:17px;height:17px;
  stroke:currentColor;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-fast);
}
.cta-text::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:currentColor;opacity:.45;
  transform-origin:right center;
  transition:transform .4s var(--e-out),opacity var(--t-fast);
}
.cta-text:hover{color:var(--yellow)}
.cta-text:hover::after{opacity:1;transform:scaleX(0);transform-origin:right center}
.cta-text:hover svg{transform:translateX(4px)}
.cta-text:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:4px}

/* ------------------------------------------------------------
   Supporting notes — quiet text, not cards
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Billing line — a gig-poster credit strip, not a list
   ------------------------------------------------------------ */
.hero-billing{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,1.6vw,20px) clamp(14px,1.8vw,24px);
  max-width:100%;
  padding-top:var(--hero-gap);
  border-top:1px solid var(--cream-18);
}
.bill{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  font-size:clamp(12.5px,1.2vw,14px);
  color:var(--cream-70);
  line-height:1.5;
  overflow-wrap:anywhere;
}
.bill b{color:#fff;font-weight:700}
/* small keyed label that sets each item apart without a pill */
.bill-k{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-size:9px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  background:var(--marigold);
  padding:2px 7px;
  border-radius:5px;
  margin-right:8px;
  vertical-align:.08em;
  white-space:nowrap;
}
/* crossed dandiya sticks as the divider — the key art uses the same mark */
.bill-sep{
  width:clamp(18px,1.8vw,22px);height:clamp(18px,1.8vw,22px);
  flex:none;
  color:var(--marigold);opacity:.6;
  fill:none;stroke:currentColor;
}

/* ------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------ */
@media (max-width:1040px){
  .hero-content{max-width:660px}
  .hero .dandiya-1{right:5%;top:14%}
  /* four columns get too narrow here and the values start breaking mid-word */
  .hero-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0;row-gap:18px}
  .hero-meta > div:nth-child(odd){padding-left:0}
  .hero-meta > div:nth-child(3){border-left:none}
}

@media (max-width:860px){
  .hero{
    justify-content:flex-start;
    padding-top:calc(var(--nav-h) + clamp(18px,3vh,28px));
    min-height:100vh;min-height:100svh;
  }
  /* A narrow box crops hard HORIZONTALLY (the reverse of desktop), so this
     value picks which subject survives — here, the smiling dancer in white. */
  .hero-img{object-position:57% 44%}
  .hero-scrim::after{background:linear-gradient(to top,var(--ink-900) 8%,rgba(42,6,20,.72) 42%,rgba(42,6,20,.30) 100%)}
  .hero .dandiya{display:none}
}

@media (max-width:640px){
  .hero{padding-bottom:24px}
  .hero-content{
    max-width:100%;
    --hero-gap:24px;
  }
  .season-n{font-size:28px}
  .season-l{font-size:14px;letter-spacing:.16em}
  .hero h1{text-shadow:0 2px 26px rgba(42,6,20,.6)}
  .hero .sub{max-width:38ch}

  /* Fact row becomes a 2-up grid; the vertical hairlines would leave stray
     rules mid-row once items wrap, so they become horizontal ones instead. */
  .hero-meta{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
  }
  .hero-meta > div,
  .hero-meta > div + div{
    padding:0;border-left:none;
  }
  .hero-meta > div{padding-top:12px;border-top:1px solid var(--cream-18)}
  .hero-meta dd{font-size:15px;overflow-wrap:anywhere}

  .cta-row{gap:14px}
  .cta-row .btn-hero,
  .cta-row .btn-hero-alt{width:100%}
  .cta-text{width:100%;justify-content:center}

  /* stack, and swap the dandiya divider for a hairline */
  .hero-billing{flex-direction:column;align-items:stretch;gap:10px}
  .bill-sep{display:none}
  .bill{font-size:13px}
  .bill + .bill-sep + .bill{padding-top:10px;border-top:1px solid var(--cream-18);width:100%}
}

@media (max-width:420px){
  .hero-meta{gap:13px 16px}
  .hero-meta dt{font-size:10px;letter-spacing:.14em}
  .hero-meta dd{font-size:14.5px;line-height:1.3}
}
@media (max-width:339px){
  .hero-meta{grid-template-columns:1fr}
}

/* Keep the billing strip inside the first viewport on short screens */
@media (max-height:820px){
  .hero{padding-top:calc(var(--nav-h) + 16px);padding-bottom:22px}
  .hero-content{--hero-gap:22px}
  .season-n{font-size:clamp(26px,3vw,34px)}
  .season-l{font-size:clamp(13px,1.3vw,16px)}
  .hero .sub{line-height:1.5}
  .hero-billing{gap:10px 16px}
  .btn-hero{padding:18px 36px;font-size:17px}
  .btn-hero-alt{padding:17px 30px;font-size:16px}
}

@media (max-height:700px){
  .hero-content{--hero-gap:18px}
  .hero-meta dt{margin-bottom:5px}
}

/* Short landscape phones — let the hero shrink rather than crop the CTA */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 24px);padding-bottom:20px}
  .hero-meta{display:none}
  .hero-billing{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .hero.is-ready .hero-img{animation:none;transform:scale(1.04)}
  .hero-img{clip-path:none;opacity:1}
  .hero-content > *{opacity:1 !important;transform:none !important}
}