/* Flavour carousel (homepage and product page). Markup is built by js/components/carousel.js.
   Layout: one screen tall. The stage holds the name, the khakhra and the claims ring; the dock underneath holds
   ← [name · ₹250 · Add to cart] → and the colour dots. --vh, --hdr and --dockh are measured in JS. */

.car { --bg: #da5521; position: relative; display: flex; flex-direction: column; overflow: hidden;
  height: calc(var(--vh, 100svh) - var(--hdr, 96px)); max-height: 980px;
  background: var(--bg); color: var(--cream); transition: background-color .7s ease; }
.stage { position: absolute; inset: 0 0 var(--dockh, 120px) 0; touch-action: pan-y; container-type: size; }

/* ---------- background: ingredient line drawings and spice flecks (run under the dock too) ---------- */
.doodles, #spice { position: absolute; inset: 0 0 calc(-1 * var(--dockh, 130px)) 0; pointer-events: none; }
.doodles { z-index: 0; }
#spice { width: 100%; height: auto; z-index: 1; }
.doodles .layer { position: absolute; inset: 0; transition: transform .35s ease-out; }
.doodles .d { position: absolute; width: var(--s); height: var(--s); color: var(--cream); opacity: var(--o); }
.doodles .d svg { width: 100%; height: 100%; display: block; transform: rotate(var(--r0)); }

/* ---------- flavour name, split in two across the khakhra ----------
   fitName() picks beside (wide screens) or above/below (tall screens) and sets --x1/--y1/--x2/--y2 in px.
   .stk stacks a two-word second half ("Garlic / Bread"). */
.name { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.name .w { position: absolute; inset: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; line-height: .9; white-space: nowrap; }
.name .back, .name .face { position: absolute; inset: 0; }
.name .back { translate: .045em .05em; }
.name .back span { color: var(--shadow); opacity: .7; }
.name .face span { background: linear-gradient(178deg, var(--lilac) 18%, var(--cream) 78%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.name .w span { position: absolute; display: block; rotate: -4deg; }
.name .w span:first-child { left: var(--x1, 4%); top: var(--y1, 2%); text-align: right; }
.name .w span:last-child { left: var(--x2, 40%); top: var(--y2, 70%); text-align: left; }
.name.tb .w span:first-child { text-align: left; }
.name.stk .w span:last-child { white-space: normal; width: min-content; }

/* ---------- the khakhra ---------- */
.hero { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; pointer-events: none;
  width: min(66vw, 82cqh, 660px); height: min(66vw, 82cqh, 660px); }
.hero .par, .hero .slide, .hero .float { position: absolute; inset: 0; }
.hero .par { transition: transform .25s ease-out; }  /* mouse parallax */
.hero img { position: absolute; }
.hero .scatter { inset: -18%; width: 136%; height: 136%; object-fit: contain; }
/* The photo has its shadow baked in (tools/bake_shadows.py), so it is 124% of the hero. Centred with a transform:
   negative insets made iOS Safari draw it off to the left. --nx/--ny nudge the khakhra itself onto the ring's centre. */
.hero img.sh { left: 50%; top: 50%; width: 124%; height: 124%; object-fit: contain;
  transform: translate(-50%, -50%) translate(var(--nx, 0%), var(--ny, 0%)); }

/* ---------- box view (product page): the khakhra and the turning box (js/components/box-spin.js) swap in place ----------
   Uses opacity and scale, not transform, so it doesn't fight the flavour-change animation. */
.hero .slide, .hero .bxv { transition: opacity .3s ease, scale .35s cubic-bezier(.3,.7,.4,1); }
.car:not([data-view="box"]) .hero .bxv { opacity: 0; scale: .6; }
.car[data-view="box"] .hero .slide { opacity: 0; scale: .7; }
.hero .bxv { position: absolute; inset: 0; }
.hero .bxv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* js/components/box-spin.js */
/* The lid is 66% of the hero (the frame's own 66%; owner asked for bigger than 58%). box-gl.js frames its camera to
   match, so the swap from frames to WebGL doesn't jump. */
.hero .bxv canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; cursor: grab; }
.hero .bxv canvas:active { cursor: grabbing; }
.hero .bxv.gl canvas { opacity: 1; }
.hero .bxv.gl img { visibility: hidden; }
.car[data-view="box"] .hero .bxv.gl canvas { pointer-events: auto; }   /* the hero ignores the pointer otherwise */

/* ---------- claims ring ---------- */
.orbit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; pointer-events: none;
  width: min(86vw, 100cqh, 820px); height: min(86vw, 100cqh, 820px); }
.orbit text { font-family: var(--display); font-size: 30px; letter-spacing: 3px; fill: var(--cream); text-transform: uppercase; }

/* ---------- dock: arrows, pill, dots ---------- */
.dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; justify-items: center; gap: 12px;
  padding-block: 0 max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px)); }
.ctrl { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 14px; }
.side { flex: none; width: 48px; height: 48px; border-radius: 999px; border: 2px solid var(--cream); background: transparent; color: var(--cream);
  font: 800 1.3rem var(--body); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.side:hover { background: var(--cream); color: var(--bg); }
.pill { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 16px; padding: 6px 6px 6px 22px; border-radius: 999px;
  background: rgba(20,13,8,.22); border: 2px solid rgba(246,231,193,.35); backdrop-filter: blur(6px); }
.pill .ttl { font-size: clamp(1.15rem, 2.2vw, 1.6rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pill .price { font-family: var(--display); font-size: 1.3rem; letter-spacing: .5px; white-space: nowrap; }
.pill .price small { font-family: var(--body); font-size: .72rem; font-weight: 600; opacity: .85; }
.pill .btn { padding: 11px 20px; font-size: .9rem; white-space: nowrap; }
.dots { display: flex; align-items: center; justify-content: center; gap: 14px; }
.tabs { display: flex; justify-content: center; gap: 10px; }
.tabs button { flex: none; width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.tabs button i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--cream); }
.tabs button[aria-selected="true"] { border-color: var(--cream); }
.view { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(20,13,8,.22); }
.view button { border: 0; background: none; color: var(--cream); padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font: 800 .72rem var(--body); letter-spacing: .08em; text-transform: uppercase; }
.view button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

@media (max-width: 640px) {
  .hero { width: min(78vw, 56cqh); height: min(78vw, 56cqh); }
  .orbit { width: min(94vw, 68cqh); height: min(94vw, 68cqh); }
  .ctrl { gap: 6px; }
  .side { width: 40px; height: 40px; }
  .pill { gap: 8px; padding-left: 12px; }
  .pill .ttl { font-size: .98rem; }
  .pill .price small { display: none; }
  .pill .btn { padding: 10px 12px; font-size: .82rem; }
}
/* narrow phones: the big name is right above, so the pill keeps only price and button (the name stays for screen readers) */
@media (max-width: 440px) {
  .pill { padding-left: 16px; }
  .pill .ttl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .float, .hero .bxv > * { animation: cbob 5.5s ease-in-out infinite; }
  .orbit svg { animation: cspin 60s linear infinite; }
  .doodles .d svg { animation: drift var(--t) ease-in-out var(--dl) infinite alternate; }
  @keyframes cbob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
  @keyframes cspin { to { transform: rotate(360deg); } }
  @keyframes drift { from { transform: translate(0, 0) rotate(var(--r0)); } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r1)); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero .slide, .hero .bxv { transition: none; }
}