/* Halesnax look c, "Unwrap the gift": a corporate gift box that opens, and the gold foil that catches the light. This look's own styles, loaded only
   when it is the shown look (the page's e2Styles). The shared base is e2-halesnax.css. Markup: src/_includes/e2/halesnax/hero-c.njk and sig-c.njk;
   behaviour: e2-halesnax-c.js; her measurements (where the foil plate sits on the lid, the crop of the lid file): src/_data/halesnaxLookCD.json.
   Everything is scoped under .hsc-* so it cannot touch the other looks. */

.hsc-hero, .hsc-sig {
  --hsc-ease: cubic-bezier(.2, .8, .2, 1);
  --hsc-spring: cubic-bezier(.34, 1.32, .5, 1);
  --hsc-maroon: var(--bx-maroon, #6f2114);
  --hsc-cream: var(--bx-cream, #eee7da);
  --hsc-gold: var(--bx-yellow, #f8ad00);
  /* a paper grain: fractal noise drawn once by the browser, laid over her maroon like board stock */
  --hsc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .24 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Shared: the lid art, and the gold foil on it ---------- */
/* Her lid file has white slivers down its sides and rounded corners, so the art is shown through a crop of it (the img is placed by percentages from
   halesnaxLookCD.json) and the corners are rounded off by the frame. Nothing of the art is cut: the crop is the white margin only. */
.hsc-art { position: relative; overflow: hidden; border-radius: 2.4% / 3.7%; background: var(--hsc-maroon); aspect-ratio: 1190 / 783; }
.hsc-art > img { position: absolute; display: block; max-width: none; }
/* a soft pool of warm light on the print, riding with the foil's hot spot, so the whole lid seems lit from where the pointer is */
.hsc-art:not(.hsc-art--bare)::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(32% 50% at var(--lx, 50%) var(--ly, 38%), rgba(255, 226, 150, .26), rgba(255, 226, 150, 0)); }

/* The foil: her plate (a transparent PNG of the foil's lines) is the mask, a gold metal gradient is what shows through it. The hot spot and the
   metal both slide with the pointer (--hx/--hy, --mx/--my are set by the script), which is what makes it glint. The plate is two pieces in her file,
   the scalloped frame and the ingredient border; each is placed on its own (they sit a few pixels apart from the print's own frame), and a clip
   keeps each to its own piece. */
.hsc-foil { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 .7px rgba(255, 233, 160, .85)); }
.hsc-foil__p {
  position: absolute; display: block;
  -webkit-mask-image: url("/assets/img/case/halesnax/drive/foil.webp"); mask-image: url("/assets/img/case/halesnax/drive/foil.webp");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-image:
    radial-gradient(closest-side, rgba(255, 255, 240, 1), rgba(255, 242, 178, .7) 38%, rgba(255, 238, 168, 0)),
    linear-gradient(112deg, #5c3705 0%, #b57a0c 9%, #fff0a0 17%, #8a5707 25%, #e5ac1e 33%, #fff6c0 40%, #6e4506 49%, #d29512 58%, #ffe88a 65%, #7a4c06 74%, #f2bd2c 83%, #fff3b0 90%, #5c3705 100%);
  background-size: 24% 38%, 170% 170%; background-repeat: no-repeat;
  background-position: var(--hx, 50%) var(--hy, 40%), var(--mx, 30%) var(--my, 30%);
}
.hsc-foil__p--border { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 16.41% 25.75%, 16.41% 75.34%, 84.46% 75.34%, 84.46% 25.75%, 16.41% 25.75%); }
.hsc-foil__p--frame { clip-path: inset(25.75% 15.54% 24.66% 16.41%); }

/* Outline buttons (this look's only buttons besides the page's one filled CTA) */
.hsc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 14px/1 var(--bx-font); letter-spacing: .01em; color: var(--hsc-cream); background: rgba(40, 12, 6, .38); border: 1.5px solid rgba(238, 231, 218, .75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s var(--hsc-ease);
}
.hsc-btn:hover { background: rgba(40, 12, 6, .6); border-color: var(--hsc-cream); }
.hsc-btn:active { transform: scale(.97); }
.hsc-seg button:focus-visible, .hsc-sig a:focus-visible { outline: 3px solid var(--hsc-gold); outline-offset: 3px; }
/* on the mustard table a gold ring would vanish, so the hero's button wears a white ring over a maroon one */
.hsc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px var(--hsc-maroon); }

/* ========================================================================== */
/* HERO: the box on the festive table                                         */
/* ========================================================================== */
.bx-hero--c.hsc-hero {
  padding: 0; min-height: 0; height: clamp(540px, 56vw, 760px); overflow: hidden; isolation: isolate; display: block;
  background: #d9a03a; color: var(--hsc-cream);
}
.hsc-hero__world, .hsc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
.hsc-hero__video { opacity: 0; transition: opacity .8s ease; }
.hsc-hero__video.is-on { opacity: 1; }
/* the loop's still is the poster: a little shade low and at the edges so the box and the caption sit on it, never over the middle of the table */
.hsc-hero__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 58%, rgba(60, 20, 0, 0) 45%, rgba(60, 20, 0, .28) 100%), linear-gradient(180deg, rgba(60, 20, 0, 0) 60%, rgba(60, 20, 0, .3)); }

/* The scene: one perspective, and the box turned to a three-quarter view from above */
.hsc-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; perspective-origin: 50% 28%; pointer-events: none; }
.hsc-box {
  --w: clamp(280px, 31vw, 480px); --d: calc(var(--w) / 1.5198); --hb: calc(var(--w) * .17); --hl: calc(var(--w) * .06);
  --s: -17deg; --t: 50deg;
  position: relative; width: var(--w); height: var(--d); transform-style: preserve-3d; transform: translateY(30%) rotateX(var(--t)) rotateZ(var(--s));
}
.hsc-base, .hsc-lid, .hsc-gifts { position: absolute; inset: 0; transform-style: preserve-3d; }

/* The table shadow: a soft patch on the table plane, a touch below it so it never fights the floor of the tray */
.hsc-shadow { position: absolute; inset: -4% -3% -9% -2%; transform: translateZ(-2px); border-radius: 6%; background: rgba(48, 14, 0, .55); filter: blur(calc(var(--w) * .035)); }

/* Her maroon with a grain, shaded by which way each face looks: the front wall catches the light, the sides fall off */
.hsc-wall, .hsc-lid__side, .hsc-lid__in, .hsc-floor { position: absolute; backface-visibility: visible; }
.hsc-wall, .hsc-lid__side {
  background-color: var(--hsc-maroon);
  background-image: var(--hsc-grain), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, rgba(0, 0, 0, .035) 1px 3px), linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .22));
  background-blend-mode: soft-light, normal, normal; background-size: 180px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .22);
}
.hsc-wall--l, .hsc-lid__side--l { filter: brightness(.62); }
.hsc-wall--r, .hsc-lid__side--r { filter: brightness(.8); }
.hsc-wall--b, .hsc-lid__side--b { filter: brightness(.7); }

.hsc-wall--f, .hsc-wall--b { left: 0; width: var(--w); height: var(--hb); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.hsc-wall--f { top: calc(var(--d) - var(--hb)); }
.hsc-wall--b { top: calc(var(--hb) * -1); }
.hsc-wall--l, .hsc-wall--r { width: var(--d); height: var(--hb); top: calc(var(--d) - var(--hb)); transform-origin: 0 100%; transform: rotateZ(-90deg) rotateX(-90deg); }
.hsc-wall--l { left: 0; }
.hsc-wall--r { left: var(--w); }

/* The tray's floor is tissue paper in her cream, so the packs stand out of it */
.hsc-floor { inset: 0; background: radial-gradient(90% 90% at 50% 40%, #ecdfc6, #cdb994); box-shadow: inset 0 0 calc(var(--w) * .06) rgba(60, 20, 8, .45); }

/* The front wall carries her roundel, recoloured to gold through a mask, and the ribbon tab it hangs from (as on her mockup) */
.hsc-seal {
  position: absolute; left: 50%; top: 50%; height: 78%; aspect-ratio: 357 / 438; transform: translate(-50%, -48%); background: var(--hsc-gold);
  -webkit-mask: url("/assets/img/case/halesnax/keyed/roundel.webp") center / contain no-repeat; mask: url("/assets/img/case/halesnax/keyed/roundel.webp") center / contain no-repeat;
}
.hsc-tab { position: absolute; left: 50%; top: 0; width: 6.5%; height: 30%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .1)); border-radius: 0 0 2px 2px; }

/* A soft patch on the tray floor under each gift, there once the gifts are up */
.hsc-gshadow { position: absolute; left: calc(var(--gx) * 100%); top: calc(var(--gy) * 100%); width: calc(var(--w) * var(--gw) * .8); height: calc(var(--w) * var(--gw) * .24); transform: translate(-50%, -50%) translateZ(1px); border-radius: 50%; background: radial-gradient(closest-side, rgba(50, 20, 4, .5), rgba(50, 20, 4, 0)); opacity: 0; transition: opacity .6s ease .9s; }
.hsc-box.is-open .hsc-gshadow { opacity: 1; }

/* The gifts: each stands up to face the viewer (it undoes the box's own turn) and rises out of the tray when the lid is up */
.hsc-gift { position: absolute; left: calc(var(--gx) * 100%); top: calc(var(--gy) * 100%); width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--w) * -.08)); transition: transform 1s var(--hsc-spring); transition-delay: calc(.55s + var(--gi) * .09s); }
.hsc-gift__in {
  position: absolute; left: calc(var(--w) * var(--gw) * -.5); bottom: 0; width: calc(var(--w) * var(--gw)); transform-origin: 50% 100%;
  transform: rotateZ(calc(var(--s) * -1)) rotateX(calc(var(--t) * -1)) rotateZ(var(--gr)); opacity: 0; transition: opacity .35s ease; transition-delay: calc(.6s + var(--gi) * .09s);
}
.hsc-gift__in img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(var(--w) * .012) calc(var(--w) * .014) rgba(40, 10, 0, .4)); }
.hsc-box.is-open .hsc-gift { transform: translateZ(calc(var(--w) * var(--gz))); }
.hsc-box.is-open .hsc-gift__in { opacity: 1; }

/* The lid, hinged on its back edge; --open is how far it has swung (0 = shut) */
.hsc-lid { --open: 0deg; transform-origin: 50% 0; transform: translateZ(var(--hb)) rotateX(var(--open)); transition: transform 1.5s var(--hsc-spring); }
.hsc-box.is-open .hsc-lid { --open: 97deg; }
.hsc-lid__top { position: absolute; inset: 0; transform: translateZ(var(--hl)); backface-visibility: hidden; }
.hsc-lid__top .hsc-art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hsc-lid__in { inset: 0; transform: rotateY(180deg); backface-visibility: hidden; background: radial-gradient(90% 90% at 50% 30%, #8d3a28, #5a1a0e); }
.hsc-lid__side--f, .hsc-lid__side--b { left: 0; width: var(--w); height: var(--hl); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.hsc-lid__side--f { top: calc(var(--d) - var(--hl)); }
.hsc-lid__side--b { top: calc(var(--hl) * -1); }
.hsc-lid__side--l, .hsc-lid__side--r { width: var(--d); height: var(--hl); top: calc(var(--d) - var(--hl)); transform-origin: 0 100%; transform: rotateZ(-90deg) rotateX(-90deg); }
.hsc-lid__side--l { left: 0; }
.hsc-lid__side--r { left: var(--w); }

/* The caption and the one control, low on the left (the look switcher floats low in the middle) */
.hsc-hero__bar { position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--max); margin-inline: auto; pointer-events: none; }
.hsc-hero__cap { margin: 0; padding: 6px 14px; border-radius: 999px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hsc-cream); background: rgba(70, 22, 8, .72); }
.hsc-hero__bar .hsc-btn { pointer-events: auto; }

@media (max-width: 700px) {
  .bx-hero--c.hsc-hero { height: 520px; }
  .hsc-box { --w: min(270px, 74vw); }
  .hsc-hero__bar { bottom: 16px; justify-content: center; }
  .hsc-hero__cap { display: none; }
  .hsc-btn { white-space: nowrap; }
}

/* Reduced motion: the box is open and still, no loop, no tilt, no transitions */
@media (prefers-reduced-motion: reduce) {
  .hsc-box { --s: -17deg !important; --t: 50deg !important; }
  .hsc-lid { --open: 97deg; transition: none; }
  .hsc-gift { transform: translateZ(calc(var(--w) * var(--gz))); transition: none; }
  .hsc-gift__in { opacity: 1; transition: none; }
  .hsc-gshadow { opacity: 1; transition: none; }
  .hsc-hero__video { display: none; }
}

/* ========================================================================== */
/* SIGNATURE: the foil plate, laid on the print like a printer's proof        */
/* ========================================================================== */
.bx-sig--c.hsc-sig { background: color-mix(in srgb, var(--bx-maroon) 52%, #000); color: var(--hsc-cream); padding-block: clamp(72px, 9vw, 128px); }
.hsc-sig__in { gap: clamp(36px, 4.5vw, 64px); }
.hsc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 60ch; }
.hsc-eyebrow { margin: 0; padding: 6px 14px; border-radius: 999px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hsc-gold); border: 1px solid rgba(248, 173, 0, .55); }
.hsc-title { margin: 0; font: 700 clamp(36px, 5vw, 68px)/1 var(--bx-font); letter-spacing: -.035em; color: var(--hsc-cream); }
.hsc-lede { margin: 0; font: 400 clamp(16px, 1.5vw, 19px)/1.55 var(--bx-font); color: rgba(238, 231, 218, .84); }

.hsc-proof { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.hsc-proof__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.hsc-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1.5px solid rgba(238, 231, 218, .5); }
.hsc-seg button {
  min-width: 88px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: rgba(238, 231, 218, .86);
  font: 600 14px/1 var(--bx-font); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.hsc-seg button:hover { background: rgba(238, 231, 218, .1); }
.hsc-seg button[aria-pressed="true"] { background: rgba(248, 173, 0, .16); color: var(--hsc-gold); box-shadow: inset 0 0 0 1.5px var(--hsc-gold); }
.hsc-proof__hint, .hsc-proof__cap { margin: 0; font: 400 14px/1.45 var(--bx-font); color: rgba(238, 231, 218, .74); }
.hsc-proof__cap { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; min-height: 1.45em; }

/* The proof sheet: crop marks in the corners, the lid in the middle, and the two layers one above the other in 3D */
.hsc-stage { position: relative; width: 100%; max-width: 980px; margin-inline: auto; padding: 30px; perspective: 1500px; touch-action: pan-y; }
.hsc-stage:focus-visible { outline: 3px solid var(--hsc-gold); outline-offset: 2px; border-radius: 8px; }
.hsc-mark { position: absolute; width: 20px; height: 20px; pointer-events: none; opacity: .55; }
.hsc-mark::before, .hsc-mark::after { content: ""; position: absolute; background: var(--hsc-cream); }
.hsc-mark::before { width: 20px; height: 1px; } .hsc-mark::after { width: 1px; height: 20px; }
.hsc-mark--tl { left: 0; top: 0; } .hsc-mark--tr { right: 0; top: 0; transform: scaleX(-1); }
.hsc-mark--bl { left: 0; bottom: 0; transform: scaleY(-1); } .hsc-mark--br { right: 0; bottom: 0; transform: scale(-1); }
.hsc-plane { position: relative; width: 100%; aspect-ratio: 1190 / 783; transform-style: preserve-3d; transition: transform .9s var(--hsc-ease); }
.hsc-stage.is-moving .hsc-plane { transform: rotateX(14deg) rotateY(-15deg) scale(.93); }
.hsc-sheet { position: absolute; inset: 0; border-radius: 2.4% / 3.7%; background-color: var(--hsc-maroon); background-image: var(--hsc-grain); background-blend-mode: soft-light; background-size: 180px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 220, 190, .08); }
.hsc-layer { position: absolute; inset: 0; transition: transform .95s var(--hsc-ease), opacity .55s ease; }
.hsc-layer .hsc-art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hsc-art--bare { background: transparent; }
.hsc-sig[data-view="print"] .hsc-layer--foil { transform: translate3d(9%, -14%, 140px) rotateZ(3deg); opacity: 0; pointer-events: none; }
.hsc-sig[data-view="foil"] .hsc-layer--print { transform: translate3d(-9%, 14%, -140px) rotateZ(-3deg); opacity: 0; pointer-events: none; }
/* her gold lines are thin, so on their own (no print behind them) they glow a little more */
.hsc-sig[data-view="foil"] .hsc-foil { filter: drop-shadow(0 0 1.4px rgba(255, 223, 140, .95)) drop-shadow(0 0 6px rgba(255, 200, 80, .35)); }

/* The close: her border up close (revealing clockwise), her box photo, and the four ideas behind it */
.hsc-close { display: grid; grid-template-columns: minmax(0, 1.074fr) minmax(0, 1.85fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; width: 100%; }
.hsc-detail, .hsc-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hsc-detail figcaption, .hsc-photo figcaption { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(238, 231, 218, .68); }
.hsc-detail__frame { border-radius: 16px; overflow: hidden; background: var(--hsc-maroon); }
.hsc-detail__frame img, .hsc-photo img { display: block; width: 100%; height: auto; }
.hsc-photo img { border-radius: 16px; }
@property --hsc-ang { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.hsc-detail__frame img { --hsc-ang: 360deg; -webkit-mask-image: conic-gradient(from 0deg at 50% 50%, #000 var(--hsc-ang), transparent calc(var(--hsc-ang) + 5deg)); mask-image: conic-gradient(from 0deg at 50% 50%, #000 var(--hsc-ang), transparent calc(var(--hsc-ang) + 5deg)); }
/* the script arms the sweep (hidden until the figure scrolls into view), so with no script the art is simply there */
.hsc-sig[data-armed] .hsc-detail__frame img { --hsc-ang: 0deg; }
.hsc-sig[data-armed] .hsc-detail.is-in .hsc-detail__frame img { animation: hsc-sweep 2.2s var(--hsc-ease) forwards; }
@keyframes hsc-sweep { from { --hsc-ang: 0deg; } to { --hsc-ang: 360deg; } }

.hsc-points { list-style: none; margin: 0; padding: 24px 0 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 28px; border-top: 1px solid rgba(238, 231, 218, .22); }
.hsc-points li { display: flex; flex-direction: column; gap: 6px; }
.hsc-points b { font: 600 18px/1.25 var(--bx-font); color: var(--hsc-gold); letter-spacing: -.01em; }
.hsc-points span { font: 400 15px/1.5 var(--bx-font); color: rgba(238, 231, 218, .86); max-width: 30ch; }

@media (max-width: 900px) {
  .hsc-close { grid-template-columns: 1fr; }
  .hsc-detail { max-width: 420px; }
  .hsc-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hsc-stage { padding: 20px 14px; }
  .hsc-seg button { min-width: 76px; padding: 0 12px; }
  .hsc-points { grid-template-columns: 1fr; }
  .hsc-sig[data-view="print"] .hsc-layer--foil { transform: translate3d(6%, -12%, 100px) rotateZ(3deg); }
  .hsc-sig[data-view="foil"] .hsc-layer--print { transform: translate3d(-6%, 12%, -100px) rotateZ(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hsc-plane, .hsc-layer { transition: none; }
  .hsc-stage.is-moving .hsc-plane { transform: none; }
  .hsc-sig[data-armed] .hsc-detail__frame img { --hsc-ang: 360deg; animation: none !important; }
}