/* ==========================================================================
   ARADHNAA — home.css
   Homepage-only: hero carousel + category grid.
   ========================================================================== */

/* ==========================================================================
   HERO
   Mobile: single centred column (matches the reference).
   Desktop (>=1000px): split — copy left, carousel stage right.
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding-block:var(--space-5) var(--space-6);
}
.hero__backdrop{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 52% at 50% 34%, var(--glow-soft), transparent 70%),
    radial-gradient(ellipse 120% 84% at 50% 100%, var(--deep) 0%, var(--void) 100%);
}
@media (min-width:1000px){
  .hero__backdrop{
    background:
      radial-gradient(ellipse 42% 56% at 74% 46%, var(--glow-soft), transparent 68%),
      radial-gradient(ellipse 120% 84% at 50% 100%, var(--deep) 0%, var(--void) 100%);
  }
}

.hero__inner{
  position:relative; z-index:2;
  display:grid; gap:var(--space-5);
  grid-template-columns:1fr;
  justify-items:center; text-align:center;
}
.hero__copy{ display:flex; flex-direction:column; align-items:center; }
.hero__title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--step-4); line-height:1.14;
  color:var(--text); max-width:16ch; text-wrap:balance;
}
.hero__title em{ font-style:normal; color:var(--ember); }
.hero__sub{
  font-family:var(--font-accent); font-style:italic;
  font-size:var(--step-1); color:var(--text-muted);
  max-width:46ch; margin-top:var(--space-4); text-wrap:pretty;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-3);
  margin-top:var(--space-6); justify-content:center;
}
.hero__note{
  margin-top:var(--space-4); font-size:13px; color:var(--text-subtle);
  display:flex; align-items:center; gap:8px; justify-content:center;
}
.hero__note svg{ width:15px; height:15px; stroke:var(--brass); fill:none; flex:none; }

/* The eyebrow, headline and sub are swapped by the carousel, so each mark
   doubles as a marketing slide. The buttons and the dispatch note stay put
   — they are the constant call to action, not slide content. */
#heroEyebrow,
.hero__title,
.hero__sub{
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.hero__copy.is-swapping #heroEyebrow,
.hero__copy.is-swapping .hero__title,
.hero__copy.is-swapping .hero__sub{
  opacity:0; transform:translateY(6px);
}

/* Reserve the tallest wrap of each swapping element (3 lines of headline,
   3 lines of sub) so the buttons underneath never jump as copy changes. */
.hero__title{ min-height:3.42em; }   /* 3 x line-height 1.14 */
.hero__sub{ min-height:4.8em; }      /* 3 x line-height 1.6  */

@media (min-width:1000px){
  .hero{ padding-block:var(--space-6) var(--space-7); }
  .hero__inner{
    grid-template-columns:1fr 1fr;
    align-items:center; gap:var(--space-8);
    justify-items:stretch; text-align:left;
  }
  .hero__copy{ align-items:flex-start; }
  .hero__actions,.hero__note{ justify-content:flex-start; }
  .hero__carousel{ order:2; }
}

/* ---------- Carousel ---------- */
.hero__carousel{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}

/* ---------- Price seal ----------
   A stamped gold medallion in the bottom-right corner of the carousel:
   sawtooth rim, a dark ring carrying the curved wording, a brushed-gold
   field and a dark centre band. Tilted a few degrees so it reads as
   something pressed onto the page rather than another button.

   Everything is drawn in the SVG, including the type, so the whole mark
   scales as one piece and the metallic gradient runs through the letters
   the same way it runs through the rim. It is not a link - there is nothing
   to click through to, it is a statement.

   The claim itself is the shop's to make and to be able to stand behind. */
.price-seal{
  position:absolute; z-index:4;
  right:0; bottom:-10px;
  width:96px; height:96px;
  transform:rotate(-8deg);
  filter:drop-shadow(0 7px 16px rgba(21,11,7,.6));
  pointer-events:none;
}
.price-seal__disc{ width:100%; height:100%; display:block; }

/* Set in the display face so the mark carries the same voice as the
   headlines. Tracking is wide because a seal's wording is spaced, not set. */
.price-seal__arc{
  font-family:var(--font-body);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:2.4px;
}
/* Sized to the band, not by eye: at 25px the wording measured 154 units
   across a field 134 wide and ran out over the ring. */
.price-seal__main{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  letter-spacing:.4px;
}

@media (min-width:1000px){
  .price-seal{ width:124px; height:124px; right:4px; bottom:-4px; }
}

@media (prefers-reduced-motion: reduce){
  .price-seal{ transform:none; }
}

/* Stage holds the medallion plus the two flanking arrows. The inline
   padding reserves the gutters the arrows sit in, so they never overlap
   the artwork at any width. */
.carousel__stage{
  --medallion:min(170px, 42vw);
  position:relative; width:100%;
  display:flex; justify-content:center;
  padding-inline:52px;
}

.carousel__viewport{
  position:relative;
  width:var(--medallion); aspect-ratio:1;
  display:grid; place-items:center;
}
@media (min-width:600px){
  .carousel__stage{ --medallion:min(280px, 40vw); }
  .carousel__slide{ inset:23%; }
}
@media (min-width:1000px){
  .carousel__stage{ --medallion:min(330px, 26vw); padding-inline:60px; }
}

/* Warm pool of light behind the mark. The ring itself now comes from the
   yantra's own circles rather than a hard border. */
.carousel__viewport::before{
  content:""; position:absolute; inset:10%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(240,169,62,.16), transparent 64%);
}

/* ---------- Slide 1: the aarti thali photograph ----------
   Fills the whole hero, not just the medallion. Two things make a photograph
   work as a backdrop for text that has to stay readable:

     - a scrim. The base gradient darkens the whole frame; on wide screens a
       second gradient darkens the left harder, because that is where the
       copy sits while the thali sits under the carousel on the right.
     - a matched palette. The photograph is already lit in brass, sindoor and
       ember against near-black, so it needs turning down rather than
       recolouring - an Ember wash ties it to the glow the other two slides
       get from the gradient behind them.

   It sits above .hero__backdrop and below .hero__inner (z-index 2), so the
   copy, the carousel and the marks all draw over it.
   -------------------------------------------------------- */
.hero__photos{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__photo{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 900ms var(--ease-out);
}
.hero__photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04) brightness(.78);
  /* Feathers the bottom edge into the section below instead of ending on a
     hard horizontal line. */
  -webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
/* Each frame has its subject in a different place, so each gets its own
   crop anchor rather than all three defaulting to the centre. */
.hero__photo[data-for="0"] img{ object-position:62% 50%; }   /* brass plate, right of centre */
.hero__photo[data-for="1"] img{ object-position:52% 58%; }   /* kalash, centred and low     */
.hero__photo[data-for="2"] img{ object-position:47% 62%; }   /* thali, left of centre       */
.hero__photo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 50% at 72% 52%, rgba(240,169,62,.20), transparent 66%),
    linear-gradient(180deg, rgba(21,11,7,.87) 0%, rgba(21,11,7,.75) 42%, rgba(21,11,7,.90) 100%);
}
/* 1000px, not 768px: that is where .hero__inner becomes two columns and the
   copy moves to the left. Below it the copy is centred, so a left-heavy
   scrim would darken the wrong half and leave the text on the brighter one. */
@media (min-width:1000px){
  .hero__photo::after{
    background:
      radial-gradient(ellipse 46% 56% at 76% 50%, rgba(240,169,62,.22), transparent 64%),
      linear-gradient(90deg, rgba(21,11,7,.95) 0%, rgba(21,11,7,.88) 38%, rgba(21,11,7,.56) 72%, rgba(21,11,7,.66) 100%),
      linear-gradient(180deg, rgba(21,11,7,.36), rgba(21,11,7,.58));
  }
}

/* Each photograph shows only on its own slide. The attribute is set by
   carousel.js; matching it to data-for keeps the slide order out of CSS. */
.hero[data-active="0"] .hero__photo[data-for="0"],
.hero[data-active="1"] .hero__photo[data-for="1"],
.hero[data-active="2"] .hero__photo[data-for="2"]{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .hero__photo{ transition:opacity 200ms linear; }
}

/* ---------- Sacred geometry backdrop ---------- */
.carousel__yantra{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--brass);          /* strokes inherit via currentColor */
  pointer-events:none; z-index:0;
}
.yantra__spin{
  transform-origin:200px 200px;
  animation:yantra-spin 180s linear infinite;
}
@keyframes yantra-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.yantra__spark{ animation:yantra-twinkle 5s ease-in-out infinite; }
@keyframes yantra-twinkle{
  0%,100%{ opacity:.25; } 50%{ opacity:.75; }
}
@media (prefers-reduced-motion: reduce){
  .yantra__spin,.yantra__spark{ animation:none; }
}

.carousel__slide{
  position:absolute; inset:19%; z-index:2;
  display:grid; place-items:center;
  opacity:0; transform:scale(.94);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
.carousel__slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
/* Over the photograph the mark is brass on brass, so it gets a shadow to
   lift it off. Harmless on the two slides that have no photo behind. */
.hero[data-active] .carousel__slide.is-active svg{
  filter:drop-shadow(0 6px 18px rgba(21,11,7,.72))
         drop-shadow(0 1px 2px rgba(21,11,7,.55));
}
.carousel__slide svg{ width:100%; height:100%; }

/* Ember particles rising from the flame */
.ember{
  position:absolute; bottom:24%; width:4px; height:4px; border-radius:50%;
  background:var(--ember); opacity:0; filter:blur(.3px); z-index:3;
  animation:ember-rise 4.6s ease-in infinite;
}
@keyframes ember-rise{
  0%  { opacity:0; transform:translate(-50%,0) scale(1); }
  12% { opacity:.9; }
  80% { opacity:.25; }
  100%{ opacity:0; transform:translate(calc(-50% + var(--drift,20px)), -170px) scale(.3); }
}
@media (prefers-reduced-motion: reduce){ .ember{ display:none; } }

/* ---------- Arrows: flanking the medallion, left and right ---------- */
.carousel__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--brass);
  background:rgba(21,11,7,.35);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.carousel__arrow:hover{ color:var(--ember); border-color:var(--ember); background:var(--surface-hover); }
.carousel__arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
/* Arrows sit outside the artwork at every width, as on desktop.
   On phones they are anchored to the medallion rather than the column
   edge: pinned to the edge, "next" lands under the floating buttons and
   becomes untappable in the default landing view. Anchoring here (plus
   the 44px floating buttons) keeps a real gap between the two. */
.carousel__arrow--prev{ left:calc(50% - var(--medallion) / 2 - 48px); }
.carousel__arrow--next{ right:calc(50% - var(--medallion) / 2 - 48px); }

@media (min-width:600px){
  .carousel__arrow--prev{ left:0; }
  .carousel__arrow--next{ right:0; }
}

/* The mark name is no longer shown - the dots carry position and each dot's
   aria-label names its mark. The element stays in the DOM as the live region
   so a slide change is still announced. */
.carousel__caption{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Pagination: the three ritual marks, bottom centre ---------- */
.carousel__dots{
  display:flex; align-items:center; justify-content:center;
  gap:var(--space-1); margin-top:0;
}
/* Plain navigation dots. The mark icons lived here before, but at 18px they
   read as decoration rather than pagination. The aria-label on each button
   still names its mark, so nothing is lost to assistive tech. */
.carousel__dot{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  border:none; background:none;
}
.carousel__dot svg{ display:none; }
.carousel__dot::before{
  content:""; display:block;
  width:7px; height:7px; border-radius:50%;
  background:rgba(201,161,90,.42);
  transition:background-color var(--dur-fast) var(--ease-out),
             width var(--dur-base) var(--ease-out);
}
.carousel__dot:hover::before{ background:var(--brass); }
.carousel__dot[aria-selected="true"]::before{
  background:var(--ember); width:20px; border-radius:4px;
}



/* ==========================================================================
   PHONE HERO — compact, full-bleed
   Below 600px the hero runs edge to edge so copy and artwork get the full
   width, while type, buttons, medallion and the reserved line-heights all
   step down together to keep the whole block on one screen.
   ========================================================================== */
@media (max-width:599px){

  .hero{ padding:var(--space-3) 0 var(--space-4); }

  /* display:contents lets the copy's children take part in this flex order,
     so the buttons can sit below the carousel without moving them in the
     HTML (where their reading order beside the headline is correct). */
  .hero__inner{
    max-width:none;
    padding-inline:var(--gutter);
    display:flex; flex-direction:column; align-items:center;
    /* Every block sat 24px from its neighbour: this gap plus each element's
       own margin below. The margins are dropped in the type rules further
       down, so this is now the only spacing between them. */
    gap:var(--space-2);
  }
  .hero__copy{ display:contents; }
  .hero .eyebrow  { order:1; margin-bottom:0; }
  .hero__title    { order:2; }
  .hero__sub      { order:3; margin-top:0; }
  .hero__carousel { order:4; }
  .hero__actions  { order:5; margin-top:var(--space-1); width:100%; }
  .hero__note     { order:6; margin-top:0; }

  /* Type steps down so three lines of headline still read as a headline
     without eating the screen. */
  .hero .eyebrow{ font-size:14px; margin-bottom:0; }
  .hero__title{
    font-size:26px; max-width:none;
    min-height:2.28em;            /* 2 lines at this size */
  }
  .hero__sub{
    font-size:15px; line-height:1.55; margin-top:0;
    max-width:none;
    /* Full-bleed width means all three subs now wrap to two lines, so the
       reserve drops from three to two. Re-check this if the copy grows. */
    min-height:3.1em;
  }

  /* Both CTAs on one row — stacked they cost ~60px of height. */
  .hero__actions{ margin-top:var(--space-4); gap:var(--space-2); flex-wrap:nowrap; }
  .hero__actions .btn{
    flex:1 1 0; min-width:0; white-space:nowrap;
    padding:13px 8px; font-size:11px; letter-spacing:.04em;
  }
  .hero__note{ margin-top:var(--space-3); font-size:11.5px; }

  /* Carousel shrinks to sit inside the card */
  .carousel__stage{ --medallion:136px; padding-inline:0; }
  .carousel__arrow{ width:38px; height:38px; }
  .carousel__arrow svg{ width:16px; height:16px; }
  .carousel__arrow--prev{ left:calc(50% - var(--medallion) / 2 - 46px); }
  .carousel__arrow--next{ right:calc(50% - var(--medallion) / 2 - 46px); }

  /* Just the mark name on screen; the full phrase still reaches
     screen readers through the live region. */

  .carousel__dots{ margin-top:var(--space-1); }
  .carousel__dot{ width:30px; height:30px; }

}

/* ==========================================================================
   SECTION BAND
   Marks the seam between the dark hero and the Paper page below it.
   ========================================================================== */
.section-band{
  height:8px; width:100%;
  background:linear-gradient(90deg,
    var(--sindoor), var(--marigold), var(--ember), var(--marigold), var(--sindoor));
  box-shadow:0 -1px 0 rgba(0,0,0,.35);
}

/* ==========================================================================
   CATEGORY GRID
   No product photography yet — each card is led by its own brass line-mark
   sitting in a glowing medallion, so the grid reads as finished, not empty.
   Swap in photos later by filling .cat-card__media.
   ========================================================================== */
.categories{ position:relative; padding-block:var(--space-6) var(--space-8); }

.categories__head{
  display:flex; flex-direction:column; gap:var(--space-3);
  margin-bottom:var(--space-7); max-width:60ch;
}

.cat-grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:1fr;
}
@media (min-width:600px){ .cat-grid{ grid-template-columns:repeat(2,1fr); gap:var(--space-5); } }
@media (min-width:1000px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }

.cat-card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  min-height:280px; padding:var(--space-6);
  border:1px solid var(--paper-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg, var(--paper-surface), var(--paper-raised));
  box-shadow:0 1px 2px rgba(36,18,9,.05);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
/* Glow wash that fades in on hover — cheap, composited, no layout cost */
.cat-card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240,169,62,.16), transparent 68%);
  transition:opacity var(--dur-base) var(--ease-out);
}
.cat-card:hover,
.cat-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(226,102,28,.42);
  box-shadow:0 18px 34px -20px rgba(36,18,9,.42);
}
.cat-card:hover::before,
.cat-card:focus-within::before{ opacity:1; }

/* The whole card is clickable via a stretched link on the title */
.cat-card__link::after{ content:""; position:absolute; inset:0; z-index:2; }
.cat-card__link:focus-visible{ outline:none; }
.cat-card:has(.cat-card__link:focus-visible){ outline:2px solid var(--focus); outline-offset:3px; }

.cat-card__media{
  display:grid; place-items:center;
  width:92px; height:92px; margin-bottom:var(--space-5);
  border-radius:50%;
  border:1px solid var(--paper-line-strong);
  background:radial-gradient(circle at 50% 40%, rgba(240,169,62,.2), transparent 68%);
  transition:border-color var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card__media{ border-color:var(--marigold); }
.cat-card__media svg{ width:46px; height:46px; }

.cat-card__name{
  font-family:var(--font-display); font-weight:600;
  font-size:20px; letter-spacing:.03em; color:var(--ink);
  margin-bottom:var(--space-2);
  transition:color var(--dur-fast) var(--ease-out);
}
.cat-card:hover .cat-card__name{ color:var(--marigold); }

.cat-card__desc{
  font-family:var(--font-accent); font-style:italic;
  font-size:16px; line-height:1.5; color:var(--ink-muted);
  margin-bottom:var(--space-5); text-wrap:pretty;
}

.cat-card__foot{
  margin-top:auto; display:flex; align-items:center;
  justify-content:space-between; gap:var(--space-3);
  padding-top:var(--space-4); border-top:1px dashed var(--paper-line);
}
.cat-card__count{
  font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--brass-deep);
  font-variant-numeric:tabular-nums;
}
.cat-card__go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted);
  transition:color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
}
.cat-card__go svg{ width:15px; height:15px; stroke:currentColor; fill:none; }
.cat-card:hover .cat-card__go{ color:var(--marigold); gap:11px; }

/* Featured card — spans two columns on desktop, sets the hierarchy */
@media (min-width:1000px){
  .cat-card--featured{ grid-column:span 2; }
  .cat-card--featured .cat-card__media{ width:112px; height:112px; }
  .cat-card--featured .cat-card__media svg{ width:56px; height:56px; }
  .cat-card--featured .cat-card__name{ font-size:26px; }
  .cat-card--featured .cat-card__desc{ font-size:18px; max-width:42ch; }
}

/* Wide card — the closing "All Products" band.
   Spans the full row and switches to a horizontal layout, so the grid
   ends on a deliberate full-width note instead of a lonely orphan card. */
@media (min-width:600px){
  .cat-card--wide{ grid-column:1 / -1; min-height:0; }
}
@media (min-width:900px){
  .cat-card--wide{
    display:grid; align-items:center;
    grid-template-columns:auto 1fr auto;
    column-gap:var(--space-6); row-gap:var(--space-2);
  }
  .cat-card--wide .cat-card__media{ grid-row:1 / span 2; margin-bottom:0; }
  .cat-card--wide .cat-card__name{ grid-column:2; align-self:end; margin-bottom:0; }
  .cat-card--wide .cat-card__desc{ grid-column:2; align-self:start; margin-bottom:0; max-width:56ch; }
  .cat-card--wide .cat-card__foot{
    grid-column:3; grid-row:1 / span 2;
    flex-direction:column; align-items:flex-end; gap:var(--space-2);
    padding-top:0; padding-left:var(--space-6);
    border-top:none; border-left:1px dashed var(--paper-line);
    align-self:stretch; justify-content:center;
  }
}

/* Ribbon for the featured card */
.cat-card__ribbon{
  position:absolute; top:var(--space-5); right:var(--space-5); z-index:3;
  padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--grad-cta); color:var(--sandalwood);
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}