/* ============================================================================
   bengal.css — The Bengal design language: arches, chapters, weave, alpona
   ----------------------------------------------------------------------------
   This file is what stops the site being "a dark page with cards on it". It
   carries the four moves that make the design specific to Bengal and specific
   to this house:

     .arch      the cusped arch as a MASK — turns any box into an arched niche
     .chapter   editorial chapter numbering ("01 — ORIGIN") + asymmetric heads
     .alpona    rice-paste line-art dividers that DRAW themselves in on scroll
     .marquee   an endless hairline ticker of the markets

   Loaded AFTER components.css so it can refine the shared primitives.
   ========================================================================== */

/* The shared ornament definitions render nothing themselves — but a bare <svg>
   still takes part in layout and would push a blank line into the flow. */
.sgv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== The arch =======================================================
   A Bengali/Mughal cusped arch, applied as a mask so the *content* takes the
   shape — an image, a scene, a photo. Rectangles are what every other site
   does; the arch is the signature. The mask SVG is preserveAspectRatio="none",
   so it stretches to whatever box you put it on. */
.arch {
  position: relative;
  -webkit-mask: url("../img/ornaments/arch-mask.svg") center / 100% 100% no-repeat;
          mask: url("../img/ornaments/arch-mask.svg") center / 100% 100% no-repeat;
}
/* A hairline gold frame that lines up exactly with the mask (same geometry,
   non-scaling stroke, so it stays a hairline however the box is stretched). */
.arch-frame {
  position: absolute; inset: 0;
  color: var(--gold-500);
  opacity: .75;
  pointer-events: none;
  -webkit-mask: none; mask: none;
}
.arch-frame svg { width: 100%; height: 100%; display: block; }

/* ---- লতা পাতা — the vine grows ---------------------------------------
   The arch is not simply there when you arrive, and it is not a plain outline
   either. It is CARVED: the mason's line runs up the pier and over the cusps,
   then lota-pata — vine, leaf, bud, flower — climbs it from the ground, and a
   lotus-bud finial clasps it shut at the apex. Exactly like the alpona, it
   paints itself in as you reach it.

   The three parts are separate <use>s (see sections/defs.html) purely so this
   stagger is possible — CSS cannot reach inside a <use> shadow tree. The order
   is the order a craftsman would work: structure, then growth, then the clasp.

   stroke-dasharray/-dashoffset are INHERITED SVG properties, which is the whole
   trick: set them on the <use> and they cascade into the referenced art, where
   every path's pathLength="100" makes a leaf and a long stem draw at the same
   rate. Without that normalisation the stems would finish while the leaves were
   still crawling. */
.arch-orn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--gold-500);
  pointer-events: none;
  overflow: visible;
}
.arch-orn .lo {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 2.4s var(--ease), opacity .5s var(--ease);
}
/* Structure first, then the vine climbs, then the finial closes it. */
.arch-orn .lo-frame { transition-delay: 0s; }
.arch-orn .lo-vines { transition-delay: .45s, .45s; }
.arch-orn .lo-crest { transition-delay: 1.55s, 1.55s; }

/* Draw when the piece it frames arrives. */
[data-reveal].is-visible .arch-orn .lo,
.is-visible .arch-orn .lo,
.arch-orn.is-drawn .lo { stroke-dashoffset: 0; opacity: 1; }

/* On ivory the same gold is too bright — drop to the engraved tone. */
.section--ivory .arch-orn { color: var(--gold-700); }

@media (prefers-reduced-motion: reduce) {
  .arch-orn .lo { stroke-dashoffset: 0; opacity: 1; transition: none; }
}

/* The legacy plain frame (hero portal markup) — kept drawing for the same
   reason, in case an arch is ever framed without the ornament. */
.arch-frame path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.6s var(--ease);
}
.arch-frame path:last-child { transition-delay: .35s; }
[data-reveal].is-visible .arch-frame path,
.is-visible > .arch-frame path,
.arch-frame.is-drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .arch-frame path { stroke-dashoffset: 0; transition: none; }
}

/* ---- লতা পাতা corner frame -------------------------------------------
   The client loves the golden vine on blue and wants it OUTSIDE the arched
   photo too, so the ornament reads even when a real image fills the niche. This
   frames a whole card: one corner flourish (sgv-lota-corner in defs.html)
   mirrored into all four corners. It inherits `color`, so a dark card sets gold
   and an ivory card sets indigo — same vine, palette-aware. It draws itself in
   with the card via the shared .lo-line contract.

   pointer-events:none and a low z so it never blocks the card's buttons; it
   sits over the card body but under the arched photo and the text. */
.lota-frame {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  color: var(--gold-500);           /* default: gold (dark cards) */
  transform: none;                  /* frames carry data-reveal for the draw-in;
                                       cancel its 24px rise so the corners don't shift */
}
.lota-frame .lc {
  position: absolute;
  width: clamp(46px, 26%, 78px);
  height: clamp(46px, 26%, 78px);
  overflow: visible;
  opacity: .85;
}
.lota-frame .lc-tl { top: 3px;  left: 3px;  }
.lota-frame .lc-tr { top: 3px;  right: 3px;  transform: scaleX(-1); }
.lota-frame .lc-bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.lota-frame .lc-br { bottom: 3px; right: 3px; transform: scale(-1); }
/* The flourish paths live in the <use> shadow tree, unreachable by `.lo-line`
   selectors — so, exactly like .arch-orn, the draw-in is driven on the <use>
   ELEMENT: stroke-dasharray/-dashoffset are INHERITED SVG properties, so setting
   them on the <use> cascades into every cloned path (each carries pathLength=100
   so they draw at one rate). The corners stagger so the vine grows top-down. */
.lota-frame .lc use {
  stroke: currentColor; stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.lota-frame .lc-tr use { transition-delay: .12s; }
.lota-frame .lc-bl use { transition-delay: .24s; }
.lota-frame .lc-br use { transition-delay: .36s; }
[data-reveal].is-visible .lota-frame .lc use,
.is-visible .lota-frame .lc use,
.lota-frame.is-visible .lc use,          /* frame itself carries data-reveal (section frame) */
.lota-frame.is-drawn .lc use { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .lota-frame .lc use { stroke-dashoffset: 0; transition: none; }
}

/* ---- The unveiling ---------------------------------------------------
   An arched portrait is not faded in — it is UNVEILED, the image rising into
   its niche from below while a curtain of indigo lifts off it. A fade says "an
   image loaded"; a reveal says "something is being shown to you".

   clip-path on the image + a sliding scrim, both transform/clip only. The
   0.06s of daylight between them is what sells it as cloth. */
.unveil { position: absolute; inset: 0; overflow: hidden; }
.unveil img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.12);
  transition: clip-path 1.5s var(--ease), transform 2s var(--ease);
}
[data-reveal].is-visible .unveil img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* The curtain itself. */
.unveil::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--indigo-800), var(--indigo-950));
  transform: translateY(0);
  transition: transform 1.5s var(--ease) .06s;
}
[data-reveal].is-visible .unveil::after { transform: translateY(-101%); }

@media (prefers-reduced-motion: reduce) {
  .unveil img { clip-path: none; transform: none; transition: none; }
  .unveil::after { display: none; }
}

/* ---- The niche catches the light ------------------------------------
   A single slow sheen crosses an arched niche on hover — light moving over
   glazed tile. One pass, no loop: a loop would be decoration, one pass is a
   response. */
.arch-sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.arch-sheen::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(255,247,220,.16) 45%, rgba(255,247,220,.26) 50%, transparent);
  transform: translateX(-260%) rotate(8deg);
  transition: transform 1.15s var(--ease);
}
.product-card:hover .arch-sheen::after,
.about-portrait:hover .arch-sheen::after { transform: translateX(560%) rotate(8deg); }
@media (prefers-reduced-motion: reduce) { .arch-sheen { display: none; } }

/* ===== Chapters =======================================================
   The narrative is numbered. A trade house tells its story in order; the
   number is set in the wordmark face, oversized and gold, and the label is
   micro-caps. This replaces the identical eyebrow/H2/rule/lead stack that
   every section otherwise repeats. */
.chapter-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.25rem);
  align-items: start;
  margin-bottom: clamp(1.3rem, 3.2vw, 2.3rem);   /* compacted */
}
.chapter-num {
  font-family: var(--font-wordmark);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-500);
  opacity: .85;
  letter-spacing: 0;
}
.chapter-label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: .75rem;
}
.chapter-head h2 { margin: 0; max-width: 20ch; }
.chapter-head .lead { margin-top: var(--space-4); max-width: 54ch; }
/* On the ivory chapters the stroked numeral needs the warmer gold to read. */
.section--ivory .chapter-num { -webkit-text-stroke-color: var(--gold-700); }
.section--ivory .chapter-label { color: var(--gold-700); }

@media (max-width: 640px) {
  .chapter-head { grid-template-columns: 1fr; gap: .5rem; }
  .chapter-num { font-size: 2.2rem; }
}

/* ===== Ivory chapters =================================================
   The site alternates deep indigo and warm ivory. This is the single biggest
   reason it reads as editorial rather than as a template: the page breathes.
   Ivory carries a faint woven ground so it feels like muslin, not like a
   white div. */
.section--ivory {
  /* Warm ivory ground carrying a Bengal pattern — lotus, paisley and river
     waves — woven in at low alpha so it reads as printed cloth, not a white div. */
  background:
    url("../img/patterns/ivory-bengal.svg") center / 300px repeat,
    var(--ivory-100);
  color: var(--text-on-light);
  position: relative;
  isolation: isolate;
}
/* The ivory chapters stay QUIET paper — the client confirmed the golden art
   belongs on the navy, where it blooms; on ivory it smudges and the content
   cards bury it (the tiger watermark tried this and was retired). The woven
   ivory-bengal ground above is the texture; this layer adds only a warm
   candle-glow at the heart of the chapter. */
.section--ivory::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 42%, rgba(200,162,74,.10), transparent 75%);
}
.section--ivory .lead { color: var(--text-muted-on-light); }
.section--ivory h1, .section--ivory h2, .section--ivory h3 { color: var(--ink-900); }
.section--ivory h1 em, .section--ivory h2 em { color: var(--clay-600); }
.section--ivory .title-rule { background: linear-gradient(90deg, var(--gold-700), transparent); }
.section--ivory .chip {
  color: var(--text-muted-on-light);
  border-color: var(--line-ivory);
  background: rgba(255,255,255,.5);
}
/* Ivory chapters get a hairline seam top and bottom so the transition from
   indigo reads as a deliberate edge, not a gap. */
.section--ivory { border-block: 1px solid var(--ivory-300); }

/* ---- Featured: the single ivory island -------------------------------
   Client verdict: Featured stays ivory (the "second page"), but Origin/About
   went back to dark — so Featured is now a lone bright band between the dark
   hero and the dark numbers/story. Its top and bottom hairlines both stand.

   Where the dark hero meets the paper, the indigo BLEEDS in — indigo dye
   touching muslin — instead of a razor cut from a full-viewport dark hero
   straight to white. Shallow and quiet; above the jamdani weave (z-index -1),
   below the content (z-index 2). */
#featured.section--ivory {
  position: relative;
}
#featured.section--ivory::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(4rem, 9vw, 7.5rem);
  background: linear-gradient(180deg, rgba(5,8,28,.30), rgba(5,8,28,.10) 45%, transparent);
  pointer-events: none;
  z-index: 0;
}

/* ===== Alpona divider =================================================
   Bengali rice-paste floor art. Every stroke carries pathLength="100", so one
   rule draws them all in at a uniform rate regardless of true length. The
   line literally paints itself across the page as you arrive. */
.alpona {
  display: block;
  width: min(1100px, 92%);
  margin: clamp(1rem, 4vw, 2.5rem) auto;
  color: var(--gold-500);
  opacity: .9;
}
.alpona svg { width: 100%; height: auto; display: block; }
.alpona .alpona-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.alpona circle { opacity: 0; transition: opacity 1.2s var(--ease) .8s; }
.alpona.is-drawn .alpona-line { stroke-dashoffset: 0; }
.alpona.is-drawn circle { opacity: 1; }
/* Stagger the draw so it sweeps outward from the centre medallion. */
.alpona .alpona-line:nth-child(2n) { transition-delay: .12s; }
.alpona .alpona-line:nth-child(3n) { transition-delay: .24s; }
.section--ivory .alpona { color: var(--gold-700); opacity: .75; }

@media (prefers-reduced-motion: reduce) {
  .alpona .alpona-line { stroke-dashoffset: 0; transition: none; }
  .alpona circle { opacity: 1; transition: none; }
}

/* ===== The Journey frieze =============================================
   A single gold line carrying the goods from the paddy field to the ship. It
   draws itself SCENE BY SCENE, left to right — the drawing travels the way the
   cargo does, and at roughly the pace you read. Each scene is staggered off its
   data-scene, so the paddy is already drawn by the time the ship starts.

   Every stroke carries pathLength="100", so one duration draws them all evenly
   regardless of true length — without that, a long water line and a short grain
   ear would draw at wildly different speeds and the panel would look broken. */
.frieze-band { position: relative; overflow: hidden; }
.frieze-head { max-width: 46ch; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.frieze-head h2 { margin: .5rem 0 0; font-size: clamp(1.5rem, 3vw, 2.4rem); max-width: 22ch; }

.frieze {
  color: var(--gold-500);
  width: 100%;
  margin-block: clamp(.5rem, 2vw, 1.25rem);
  /* Feather both ends so the panel emerges from, and dissolves back into, the
     indigo — a frieze should have no hard start or stop. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.frieze svg { width: 100%; height: auto; display: block; overflow: visible; }

.frieze .frieze-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.frieze circle { opacity: 0; transition: opacity .9s var(--ease); }
.frieze.is-drawn .frieze-line { stroke-dashoffset: 0; }
.frieze.is-drawn circle { opacity: 1; }

/* The stagger: each scene begins after the one upstream of it. */
.frieze .frieze-scene { --d: 0s; }
.frieze .frieze-scene[data-scene="paddy"]    { --d: 0s; }
.frieze .frieze-scene[data-scene="river"]    { --d: .28s; }
.frieze .frieze-scene[data-scene="nouka"]    { --d: .56s; }
.frieze .frieze-scene[data-scene="bazar"]    { --d: .84s; }
.frieze .frieze-scene[data-scene="rickshaw"] { --d: 1.12s; }
.frieze .frieze-scene[data-scene="port"]     { --d: 1.4s; }
.frieze .frieze-scene[data-scene="ship"]     { --d: 1.68s; }
.frieze .frieze-scene .frieze-line { transition-delay: var(--d); }
.frieze .frieze-scene circle { transition-delay: calc(var(--d) + 1.2s); }

/* The legend: seven micro-cap words under the panel, gold-lozenge separated —
   naming the journey without captioning the drawing. */
.frieze-legend {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem 1rem;
  font-size: .64rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-500); opacity: .7;
}
.frieze-legend li { display: inline-flex; align-items: center; gap: .75rem; }
.frieze-legend li:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; background: currentColor;
  transform: rotate(45deg); opacity: .8;
}

/* The panel is 2400 wide. On a phone that would shrink to an unreadable thread,
   so let it keep a legible height and scroll sideways under the finger —
   deliberately, with the feather masking the cut. */
@media (max-width: 860px) {
  .frieze { overflow-x: auto; scrollbar-width: none; }
  .frieze::-webkit-scrollbar { display: none; }
  .frieze svg { width: 1500px; max-width: none; }
  .frieze-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .frieze .frieze-line { stroke-dashoffset: 0; transition: none; }
  .frieze circle { opacity: 1; transition: none; }
}

/* ===== Market marquee =================================================
   An endless hairline ticker of the markets. Modern luxury houses run these;
   it also solves a real problem — nine markets is too many for a chip row
   without wrapping into a block. */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: rgba(5,8,28,.4);
  padding-block: .9rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-run 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; flex: none; }
.marquee-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-inline: clamp(1.1rem, 3vw, 2.2rem);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-muted-on-dark);
  white-space: nowrap;
}
/* A gold lozenge between every market. */
.marquee-item::after {
  content: "";
  width: 4px; height: 4px;
  margin-left: clamp(1.1rem, 3vw, 2.2rem);
  background: var(--gold-500);
  transform: rotate(45deg);
  opacity: .7;
}
.marquee-item .flag { font-size: .95rem; letter-spacing: 0; }
/* Two identical groups sit side by side; translating by exactly -50% swaps in
   the copy seamlessly, so the loop has no visible seam or jump. */
@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-group:nth-child(2) { display: none; }
}

/* ===== Vertical side-rail ============================================
   A rotated hairline label pinned down the left edge of a chapter. Pure
   editorial furniture — the kind of detail that separates a maison from a
   template. Desktop only; it would only crowd a phone. */
.side-rail {
  position: absolute;
  left: clamp(.5rem, 2vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: .68rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-500);
  opacity: .5;
  pointer-events: none;
  user-select: none;
  display: flex; align-items: center; gap: 1rem;
}
.side-rail::after {
  content: "";
  width: 1px; height: clamp(40px, 8vw, 90px);
  background: linear-gradient(180deg, var(--gold-500), transparent);
}
@media (max-width: 1100px) { .side-rail { display: none; } }


/* ===== Returning guests (ART-VISION #17) ================================
   reveal.js marks the <html> once a session has already seen the page. The
   ornament draw-ins collapse to instant: the floor is already painted. */
html.is-returning .arch-orn .lo,
html.is-returning .arch-frame path,
html.is-returning .lota-frame .lc use,
html.is-returning .alpona circle,
html.is-returning .frieze * {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}