/* ==========================================================================
   V4.1 geometry primitives — derived from the user's Inkscape files
   (design-it/, copied 1:1 to public/deco/)

   1. Chamfer  — unghi-taiat.svg: rectangle 28.04517 × 26.15866 with ONE cut
      from (66.134718, 91.356795) to (74.537998, 83.031345):
      horizontal leg 8.40328, vertical leg 8.32545 → ratio 0.99074,
      angle atan(8.32545 / 8.40328) = 44.73° to the horizontal.
      The cut length is a component size (reference at 1440 px: ≈ 40 px on
      tiles and cards, ≈ 47 px on the large menu shell); the legs always keep
      the SVG ratio. Use .cut-tl / .cut-tr / .cut-br / .cut-bl, override --cut.
   2. Inside copper corner line (.cline) — follows the cut on the inside,
      gradient exactly #bb4d14 → #debba8 (dark at the end of the vertical arm,
      light at the end of the horizontal arm, as measured in Hero-design.png).
   3. Arrow (.sg-arrow) — sageata-style.svg path, unchanged; orientation via
      --rot (0 = ↗ as drawn, 45deg = →, 135deg = ↓, -45deg = ↑).
   4. Decoration: diagonal copper lines on white/black surfaces at the same
      44.73° angle; colt-sus.svg / colt-jos.svg corner motifs and tonal blue
      shapes on blue surfaces. All decoration is aria-hidden, behind content,
      pointer-events: none.
   ========================================================================== */

:root {
  --cut-ratio: 0.99074; /* 8.32545 / 8.40328 */
  --cut-deg: 44.73deg;
  --cut: clamp(24px, 2.78vw, 44px); /* horizontal leg; ≈ 40 px at 1440 */
  --cu-a: #bb4d14; /* copper line start (exact, user spec) */
  --cu-b: #debba8; /* copper line end (exact, user spec) */
  --sg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='691.468 522.469 19.043 19.225'%3E%3Cpath d='m691.63281 522.46875-.01 1.54102h16.27148l-16.42578 16.42578 1.08594 1.08593 16.42578-16.42578v16.59814h1.53125v-19.21532z'/%3E%3C/svg%3E");
}

/* --- 1. chamfers: one corner each, legs in the unghi-taiat ratio */
.cut-tl,
.cut-tr,
.cut-br,
.cut-bl {
  --cut-y: calc(var(--cut) * var(--cut-ratio));
}
.cut-tl {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-y));
}
.cut-tr {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut-y), 100% 100%, 0 100%);
}
.cut-br {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y)), calc(100% - var(--cut)) 100%, 0 100%);
}
.cut-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut-y)));
}

/* --- 2. inside copper corner line. Place it inside the element that carries
   the matching .cut-* (same --cut). Geometry of the line's own corner box:
   inset --ci from both edges, its diagonal parallel to the cut at distance
   --ci → inner leg = cut − (2 − √2)·ci. Drawn as one gradient through a
   three-part mask (vertical arm, diagonal, horizontal arm). */
.cline {
  --ci: 5px; /* inset from the edges (reference: 4.3–5.4 px) */
  --lw: 1.5px; /* line weight */
  --arm: clamp(56px, 5.4vw, 78px); /* total extent along each edge */
  --cc: calc(var(--cut) - 0.5858 * var(--ci));
  --ccy: calc(var(--cut) * var(--cut-ratio) - 0.5858 * var(--ci));
  position: absolute;
  z-index: 3;
  width: var(--arm);
  height: var(--arm);
  pointer-events: none;
  background: linear-gradient(to top right, var(--cu-a), var(--cu-b));
  -webkit-mask:
    linear-gradient(#000 0 0) 0 var(--ccy) / var(--lw) calc(100% - var(--ccy)) no-repeat,
    linear-gradient(#000 0 0) var(--cc) 0 / calc(100% - var(--cc)) var(--lw) no-repeat,
    linear-gradient(to bottom right, #0000 calc(50% - var(--lw) / 2), #000 0 calc(50% + var(--lw) / 2), #0000 0)
      calc(var(--lw) / 2) calc(var(--lw) / 2) / var(--cc) var(--ccy) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 var(--ccy) / var(--lw) calc(100% - var(--ccy)) no-repeat,
    linear-gradient(#000 0 0) var(--cc) 0 / calc(100% - var(--cc)) var(--lw) no-repeat,
    linear-gradient(to bottom right, #0000 calc(50% - var(--lw) / 2), #000 0 calc(50% + var(--lw) / 2), #0000 0)
      calc(var(--lw) / 2) calc(var(--lw) / 2) / var(--cc) var(--ccy) no-repeat;
}
.cline--lg {
  --arm: clamp(64px, 6.9vw, 100px);
}
.cline--tl {
  top: var(--ci);
  left: var(--ci);
}
.cline--tr {
  top: var(--ci);
  right: var(--ci);
  transform: scaleX(-1);
}
.cline--bl {
  bottom: var(--ci);
  left: var(--ci);
  transform: scaleY(-1);
}
.cline--br {
  bottom: var(--ci);
  right: var(--ci);
  transform: scale(-1, -1);
}

/* --- 3. the supplied arrow, as a currentColor mask */
.sg-arrow {
  --rot: 0deg;
  display: inline-block;
  flex: none;
  width: var(--sg-size, 18px);
  height: var(--sg-size, 18px);
  background: currentColor;
  -webkit-mask: var(--sg-arrow) center / contain no-repeat;
  mask: var(--sg-arrow) center / contain no-repeat;
  transform: rotate(var(--rot));
  transition: transform var(--t-mid) var(--ease-out);
}
.sg-arrow--right {
  --rot: 45deg;
}
.sg-arrow--down {
  --rot: 135deg;
}
.sg-arrow--up {
  --rot: -45deg;
}

/* --- 4a. diagonal copper lines (white + black surfaces) — reference:
   linii-copper-fundal.png. Each <i> is one hairline rising to the right at the
   chamfer angle, copper at its upper end, fading to transparent below. */
.has-deco {
  isolation: isolate;
}
.deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.deco__line {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--l, 520px);
  height: 1.5px;
  transform-origin: 0 50%;
  transform: rotate(calc(-1 * var(--cut-deg)));
  background: linear-gradient(90deg, rgb(187 77 20 / 0) 0%, rgb(187 77 20 / 0.18) 45%, rgb(187 77 20 / 0.62) 100%);
  opacity: var(--o, 0.7);
}
.tone-dark .deco__line {
  background: linear-gradient(90deg, rgb(222 187 168 / 0) 0%, rgb(194 118 59 / 0.2) 45%, rgb(194 118 59 / 0.6) 100%);
}

/* --- 4b. corner motifs (colt-sus.svg top-right, colt-jos.svg bottom-left;
   top-left = colt-sus mirrored): the supplied vectors as plain background
   images (decoded once – CSS masks were re-rasterised while scrolling).
   V4.1b: colour per placement, only from the scheme – Technical Blue
   (= eyebrow / blue section surface), paper, white or black – via copies of
   the same vectors with a different fill (public/deco/colt-*-{tech,paper,white,black}.svg). */
.corner-motif {
  position: absolute;
  z-index: -1;
  width: clamp(64px, 8.6vw, 132px);
  aspect-ratio: 24.102033 / 14.966059;
  pointer-events: none;
  /* V4.1c: the shape overruns its box by 2 px on the two edges it touches and
     the box clips it there – a hard edge flush with the section edge, no
     anti-aliased hairline between the motif and the next / previous section */
  background: var(--cm-img) no-repeat;
  background-size: calc(100% + 2px) calc(100% + 2px);
  background-position: 0 100%; /* TR / TL: spills over top + right */
}
.corner-motif--tr,
.corner-motif--tl {
  top: 0;
  --cm-img: url('../deco/colt-sus-tech.svg');
}
.corner-motif--tr {
  right: 0;
}
.corner-motif--tl {
  left: 0;
  transform: scaleX(-1);
}
.corner-motif--bl {
  bottom: 0;
  left: 0;
  --cm-img: url('../deco/colt-jos-tech.svg');
  background-position: 100% 0; /* spills over bottom + left */
}
.corner-motif--tr.cm-paper,
.corner-motif--tl.cm-paper {
  --cm-img: url('../deco/colt-sus-paper.svg');
}
.corner-motif--tr.cm-white,
.corner-motif--tl.cm-white {
  --cm-img: url('../deco/colt-sus-white.svg');
}
.corner-motif--tr.cm-black,
.corner-motif--tl.cm-black {
  --cm-img: url('../deco/colt-sus-black.svg');
}
.corner-motif--bl.cm-paper {
  --cm-img: url('../deco/colt-jos-paper.svg');
}
.corner-motif--bl.cm-white {
  --cm-img: url('../deco/colt-jos-white.svg');
}
.corner-motif--bl.cm-black {
  --cm-img: url('../deco/colt-jos-black.svg');
}

/* --- 4c. blue surfaces: large, cropped colt shapes, tonal blue on blue —
   copies of the same vectors with a fading gradient fill (tint = light,
   deep = dark shade of Technical Blue) */
.deco__colt {
  position: absolute;
  width: var(--w, 46vw);
  aspect-ratio: 24.102033 / 14.966059;
  background: center / 100% 100% no-repeat;
}
.deco__colt--sus {
  background-image: url('../deco/colt-sus-tint.svg');
}
.deco__colt--jos {
  background-image: url('../deco/colt-jos-tint.svg');
}
.deco__colt--sus.deco__colt--deep {
  background-image: url('../deco/colt-sus-deep.svg');
}
.deco__colt--jos.deco__colt--deep {
  background-image: url('../deco/colt-jos-deep.svg');
}

@media (max-width: 599px) {
  .deco__line {
    --l: 300px;
  }
}