/* ============================================================
   THE CASE: a lacquered box seen from above, shared by the kit and The Vault.
   js/main.js fills every [data-lux] with these parts. No hardware: the material does
   the work. The corners take the hero frame's quarter-circle notch, so every layer
   below is cut on a circle centred on the box's own corner (--e is how far in the
   layer sits): the lit edge, the lacquer rim, one faint line of brass, the walls
   going down, the suede bed.
   ============================================================ */
:root {
  --lux-rim: clamp(12px, 1.05vw, 17px);
  --lux-wall: clamp(6px, 0.7vw, 11px);
  --lux-notch: clamp(18px, 1.7vw, 30px);
}
@media (max-width: 900px) { :root { --lux-rim: 9px; --lux-wall: 5px; --lux-notch: 15px; } }

.lux {
  --in: calc(var(--lux-rim) + var(--lux-wall));
  --d: calc(var(--lux-notch) + var(--in) + 4px);   /* far enough in that a face reaches past the notch */
  position: absolute;
  inset: calc(-1 * var(--lux-out, 0px));
  pointer-events: none;
}
.lux i { position: absolute; display: block; }

.lux::before,
.lux__cut {
  --n: calc(var(--lux-notch) + var(--e));
  --o: calc(-1 * var(--e));
  -webkit-mask:
    radial-gradient(circle at var(--o) var(--o), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--o)) var(--o), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--o) calc(100% - var(--o)), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--o)) calc(100% - var(--o)), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 100% 100% / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--o) var(--o), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--o)) var(--o), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at var(--o) calc(100% - var(--o)), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--o)) calc(100% - var(--o)), #0000 calc(var(--n) - 0.5px), #000 calc(var(--n) + 0.5px)) 100% 100% / 51% 51% no-repeat;
}
.lux__cut { inset: var(--e); }

/* The front of the box, the same outline a little lower */
.lux::before {
  --e: 0px;
  content: '';
  position: absolute;
  --drop: clamp(8px, 0.8vw, 13px);
  inset: var(--drop) 0 calc(-1 * var(--drop));
  background: linear-gradient(90deg, #0a0807, #2b241f 12%, #120e0c 34%, #1f1915 62%, #0a0807);
}
/* The shadow it throws on the table. Kept inside the outline, so the mask above can't cut it */
.lux__shadow {
  inset: calc(var(--lux-notch) * 0.7);
  box-shadow:
    0 26px 30px 2px rgba(0, 0, 0, 0.85),
    0 70px 110px 0 rgba(0, 0, 0, 0.95),
    0 0 180px 10px rgba(190, 130, 60, 0.14);
}

/* The edge of the lacquer, lit from the top left, showing as a line all the way round the outline */
.lux__edge { --e: 0px; background: linear-gradient(135deg, #5f544a, #2a231e 30%, #15110f 62%, #322a24); }

/* The rim: four faces meeting in mitres, each turned to the light differently */
.lux__rims { --e: 1px; }
.lux__rim { inset: 0; }
.lux__rim--t { background: #110e0c; clip-path: polygon(0 0, 100% 0, calc(100% - var(--d)) var(--d), var(--d) var(--d)); }
.lux__rim--l { background: #0d0a09; clip-path: polygon(0 0, var(--d) var(--d), var(--d) calc(100% - var(--d)), 0 100%); }
.lux__rim--r { background: #070605; clip-path: polygon(100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), calc(100% - var(--d)) var(--d)); }
.lux__rim--b { background: #0a0807; clip-path: polygon(0 100%, var(--d) calc(100% - var(--d)), calc(100% - var(--d)) calc(100% - var(--d)), 100% 100%); }
/* The room's light lying soft along the lacquer */
.lux__sheen { inset: 0; overflow: hidden; }
.lux__sheen::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(112deg, transparent 18%, rgba(255, 238, 210, 0.08) 34%, transparent 50%, transparent 60%, rgba(255, 238, 210, 0.045) 72%, transparent 86%);
  transform: translateX(var(--gl, 0px));
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The one line of brass, where the rim drops into the box */
.lux__inlay { --e: calc(var(--lux-rim) - var(--hair, 1px)); background: rgba(201, 164, 106, 0.42); }

/* The walls going down to the bed, lined in the same suede */
.lux__walls {
  --e: var(--lux-rim);
  background: var(--velvet), linear-gradient(to bottom right, #050302 0, #0a0705 40%, #2a1e14 100%);
  background-size: 220px, 100% 100%;
  background-blend-mode: soft-light, normal;
}

/* The bed: brushed suede under the light, in the shade of the top and left walls */
.lux__bed {
  --e: var(--in);
  background-color: #150e09;
  background-image: var(--velvet), var(--mottle), radial-gradient(100% 90% at 40% 26%, #3a291c, #21160e 50%, #0c0705);
  background-size: 220px, 800px, 100% 100%;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    inset 0 30px 34px -18px rgba(0, 0, 0, 0.92),
    inset 22px 0 28px -20px rgba(0, 0, 0, 0.75);
}