:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff9e9;
  background: #951913;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  background: #951913;
}
.scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 620px;
  height: 100svh;

  overflow: hidden;
  background: #f1b391;
}
.composition {
  position: absolute;
  inset: 0;
  max-width: max(1102px, 177.69svh);
  margin-inline: auto;
}
.wall { position: absolute; inset: 0 0 27.8%; overflow: hidden; }
.wall-colors { width: 100%; height: 100%; display: block; }
.wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #32100894 0%, #32100852 18%, #32100824 34%, transparent 60%);
  pointer-events: none;
}
.window-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 49%;
  height: 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tabletop {
  position: absolute;
  inset: 72.2% 0 0;
  background: #f1b391 url('assets/tabletop.png') center bottom / 100% 420% no-repeat;
  pointer-events: none;
}
.tabletop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fff8e6a3 0%, #fff0d166 12%, #ffe9bc2e 32%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.headline {
  position: absolute;
  top: 8.3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 50px);
  width: max-content;
  max-width: 92%;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(16px, 1.67vw, 36px);
  font-weight: 500;
  letter-spacing: .42em;
  line-height: 1.28;
}
.headline span { padding-left: .42em; }
.headline::before, .headline::after { content: ''; width: clamp(36px, 5.7vw, 120px); height: 2px; background: currentColor; }
.brand { position: absolute; top: 27.9%; width: 28.5%; text-align: center; }
.brand-jooz { left: 4.4%; }
.brand-grabzi { right: 3.1%; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-description {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(16px, 1.62vw, 34px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .4em;
  padding-left: .4em;
}
.brand-grabzi .brand-description { margin-top: 1%; }
.product { position: absolute; margin: 0; pointer-events: none; user-select: none; }
.product-image { position: relative; display: block; width: 100%; height: auto; transform: translateY(6.2155%); }
.product-grabzi .product-image {
  transform: translateY(4.7652%);
  clip-path: inset(0 0 4.7652% 0);
}
.product-shadow {
  position: absolute;
  inset: 0;
  /* Clip all shadow pixels at the contact line, including the blur. */
  clip-path: inset(-100% -200% 0 -100%);
  pointer-events: none;
}
.product-shadow::before {
  content: '';
  position: absolute;
  left: 19%;
  width: 140%;
  height: 10%;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 27% 65%, #65321d94 0%, #65321d70 35%, #65321d30 66%, #65321d00 85%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%);
  transform: skewX(-65deg);
  transform-origin: left bottom;
  filter: blur(4px);
}
.product-image { z-index: 1; }
.product-jooz { width: 22.1%; left: 29.8%; bottom: 20%; }
.product-grabzi { width: 23.1%; left: 47.1%; bottom: 20%; }
.product-jooz .product-shadow::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%), linear-gradient(to right, #000 0%, #000 70%, transparent 100%), radial-gradient(ellipse 110% 70% at 100% 70%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%), linear-gradient(to right, #000 0%, #000 70%, transparent 100%), radial-gradient(ellipse 110% 70% at 100% 70%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.product-grabzi .product-shadow::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%), radial-gradient(ellipse 110% 70% at 100% 70%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0%, #000 12%, #000 86%, transparent 100%), radial-gradient(ellipse 110% 70% at 100% 70%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  left: 20%;
  width: 155%;
  background: radial-gradient(ellipse at 27% 65%, #65321d94 0%, #65321d70 35%, #65321d24 65%, #65321d00 92%);
  filter: blur(5px);
}
.order {
  position: absolute;
  top: 55%;
  width: 21%;
  min-height: 72px;
  height: 12.4%;
  border: 1px solid #fff5dfad;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.9%;
  color: #fff9e9;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 16px 28px -12px #60201166, inset 0 1px 1px #ffffffba, inset 0 -1px 1px #ffffff38;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out;
}
.order-jooz { left: 7.5%; background: linear-gradient(135deg, #ffc29478, #ff965c70 55%, #ffac7266); }
.order-grabzi { right: 7.4%; background: linear-gradient(135deg, #d7553e85, #820e0aba 55%, #9d231ba3); }
.order::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(165deg, #fff9 0%, #fff2 16%, transparent 40%, transparent 70%, #fff2 100%);
  opacity: .5;
  pointer-events: none;
}
.order::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(110deg, transparent 35%, #ffffff30 49%, transparent 63%);
  transform: translateX(-35%);
  opacity: 0;
  transition: transform 280ms ease-out, opacity 180ms ease-out;
  pointer-events: none;
}
.order-label, .order-arrow { position: relative; z-index: 1; }
.order-logo { z-index: 1; }
.order-logo { display: none; }
.order-label { font-size: clamp(17px, 1.62vw, 34px); line-height: 1.28; white-space: nowrap; }
.order-arrow { width: 15%; flex-shrink: 0; margin-left: 12px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms ease-out; }
.order:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

@media (max-width: 1023px) and (min-height: 600px), (max-width: 767px), (orientation: portrait) {
  .scene { height: 100svh; min-height: 640px; }
  .composition { max-width: min(100%, max(358.4px, 56svh)); container-type: inline-size; }
  .wall { bottom: 40.8%; }
  .window-shadow { width: 55%; height: 83%; }
  .tabletop { inset: 59.2% 0 0; background-size: 170% 420%; }
  .headline { top: 8.4%; gap: 4.5cqw; font-size: clamp(12px, 3.25cqw, 23px); letter-spacing: .38em; }
  .headline::before, .headline::after { width: 10cqw; height: 1px; }
  .brand { top: 18.1%; width: 47%; }
  .brand-jooz { left: 1%; }
  .brand-grabzi { right: .5%; }
  .brand-description { margin-top: 2%; font-size: clamp(10px, 2.6cqw, 19px); letter-spacing: .34em; line-height: 1.45; }
  .brand-grabzi .brand-description { margin-top: 4%; }
  .product-jooz { top: auto; bottom: 31%; width: 49.5%; left: 1.5%; }
  .product-grabzi { top: auto; bottom: 31%; width: 53.5%; left: 47%; }
  .order { top: auto; bottom: 13.8%; width: 45.7%; height: 14%; min-height: 100px; border-width: 1.5px; border-radius: clamp(32px, 10cqw, 80px); padding: 0; display: block; }
  .order-jooz { left: 3%; }
  .order-grabzi { right: 3%; }
  .order-logo { display: block; position: absolute; top: 5%; left: 7%; width: 86%; height: 43%; object-fit: contain; }
  .order-grabzi .order-logo { left: 5%; width: 90%; }
  .order-label { position: absolute; left: 14%; bottom: 19%; font-size: clamp(12px, 3.15cqw, 23px); line-height: 1.25; }
  .order-grabzi .order-label { left: 12%; }
  .order-arrow { position: absolute; right: 11%; bottom: 29%; width: 12%; margin: 0; }
}
@media (min-width: 768px) and (max-height: 500px) and (orientation: landscape) {
  .scene { min-height: 500px; }
  .order { padding-inline: 14px; }
  .order-label { font-size: 12px; }
  .order-arrow { width: 20px; margin-left: 8px; }
}

@media (hover: hover) and (pointer: fine) {
  .order:hover { transform: translateY(-3px); box-shadow: 0 24px 32px -12px #60201180, inset 0 1px 1px #ffffffd9, inset 0 -1px 1px #ffffff40; }
  .order:hover::after { opacity: 1; transform: translateX(15%); }
  .order:hover .order-arrow { transform: translateX(4px); }
}
.order:active { transform: translateY(1px) scale(.985); box-shadow: 0 8px 16px -8px #60201166, inset 0 1px 2px #ffffff80, inset 0 -1px 1px #ffffff38; transition-duration: 100ms; }
.order:active .order-arrow { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .order, .order-arrow, .order::after { transition: none; }
  .order:hover, .order:active, .order:hover .order-arrow, .order:active .order-arrow { transform: none; }
  .order:hover::after { transform: translateX(-35%); }
}