/* Hero "Reserve KIN 01": cream capsule, dark arrow chip, a thin outer ring with a shine that travels around it
   in KIN's matte bronze (the joint metal), a soft bronze glow beneath. Hover rolls the label and sends the arrow
   through. Replaces the embossed hero capsule only; the nav buttons keep their own style. */
@property --shine-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --kin-bronze: #c39a7c; --kin-bronze-hi: #ead0b8; }

:is(#hero,#closing) .cta.cta-shine, :is(#hero,#closing) .cta.cta-shine:hover {
  --cta-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; display: inline-flex; align-items: center; gap: 22px;
  height: 58px; padding: 0 6px 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #f7f3ec 0%, #ebe4d8 100%); color: #1d1b18; filter: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), inset 0 -1px 0 rgb(0 0 0 / 8%), 0 10px 26px rgb(0 0 0 / 30%);
  font: 500 16px/1 var(--f-display); letter-spacing: -.01em; text-transform: none; isolation: isolate;
}
:is(#hero,#closing) .cta.cta-shine .cta-dot, :is(#hero,#closing) .cta.cta-shine .cta-eye-glow { display: none; }

/* outer ring, 5px out, 1px wide: a faint bronze line with two highlights travelling round it */
:is(#hero,#closing) .cta.cta-shine::before {
  content: ''; position: absolute; z-index: -1; inset: -5px; width: auto; border-radius: 999px; padding: 1px;
  clip-path: none; translate: none; transition: none; box-shadow: none;
  background: conic-gradient(from var(--shine-a),
      rgb(195 154 124 / 22%) 0deg, var(--kin-bronze-hi) 26deg, rgb(195 154 124 / 22%) 64deg,
      rgb(195 154 124 / 22%) 180deg, var(--kin-bronze) 206deg, rgb(195 154 124 / 22%) 244deg, rgb(195 154 124 / 22%) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-shine-turn 6s linear infinite;
}
/* soft bronze glow under the capsule */
:is(#hero,#closing) .cta.cta-shine::after {
  content: ''; position: absolute; z-index: -2; inset: auto 12% -16px 12%; width: auto; height: 26px; border-radius: 50%;
  clip-path: none; translate: none; box-shadow: none; background-image: none;
  background-color: transparent; background: radial-gradient(ellipse at center, rgb(195 154 124 / 42%), transparent 70%);
  filter: blur(9px); opacity: .75; transition: opacity 400ms var(--cta-ease);
}
:is(#hero,#closing) .cta.cta-shine:hover::after { opacity: 1; }
:is(#hero,#closing) .cta.cta-shine:hover::before { animation-duration: 2.6s; }
@keyframes cta-shine-turn { to { --shine-a: 360deg; } }

/* label: rolls up and is replaced by its twin on hover */
:is(#hero,#closing) .cta.cta-shine .cta-label { position: static; display: inline-block; height: 1.25em; overflow: hidden; line-height: 1.25; transform: none; opacity: 1; color: inherit; }
:is(#hero,#closing) .cta.cta-shine .cta-roll { display: flex; flex-direction: column; transition: transform 520ms var(--cta-ease); }
:is(#hero,#closing) .cta.cta-shine .cta-roll > span { height: 1.25em; }
:is(#hero,#closing) .cta.cta-shine:hover .cta-roll, :is(#hero,#closing) .cta.cta-shine:focus-visible .cta-roll { transform: translateY(-50%); }

/* arrow chip: dark disc; on hover the arrow exits right and a new one slides in from the left */
:is(#hero,#closing) .cta.cta-shine .cta-arrow {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  color: #f1ede6; transform: none; translate: none; opacity: 1;
  background: radial-gradient(circle at 35% 28%, #3a3733 0%, #1a1917 62%, #121110 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 2px 6px rgb(0 0 0 / 35%);
}
/* inner ring inside the dark chip: same bronze shine, 2px, turning the opposite way to the outer ring (like a joint motor) */
@property --shine-b { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:is(#hero,#closing) .cta.cta-shine .cta-arrow::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--shine-b),
      rgb(195 154 124 / 18%) 0deg, var(--kin-bronze-hi) 30deg, rgb(195 154 124 / 18%) 80deg,
      rgb(195 154 124 / 18%) 180deg, var(--kin-bronze) 210deg, rgb(195 154 124 / 18%) 260deg, rgb(195 154 124 / 18%) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-shine-turn-back 6s linear infinite;
}
:is(#hero,#closing) .cta.cta-shine:hover .cta-arrow::before { animation-duration: 2.6s; }
@keyframes cta-shine-turn-back { from { --shine-b: 360deg; } to { --shine-b: 0deg; } }
:is(#hero,#closing) .cta.cta-shine .cta-arrow svg { position: relative; overflow: hidden; }   /* the svg box (17px) sits inside the ring, so it clips the arrow */
:is(#hero,#closing) .cta.cta-shine .cta-arrow svg path { transform-box: view-box; }
:is(#hero,#closing) .cta.cta-shine:hover .cta-arrow svg path { animation: cta-arrow-through 620ms var(--cta-ease); }
/* flies off the way it points (up-right), the next one arrives from the bottom-left and lands in place */
@keyframes cta-arrow-through { 0% { transform: none; } 42% { transform: translate(14px, -14px); } 43% { transform: translate(-14px, 14px); } 100% { transform: none; } }

:is(#hero,#closing) .cta.cta-shine:focus-visible { outline: none; box-shadow: 0 0 0 2px #211e1b, 0 0 0 4px var(--kin-bronze-hi); }
@media (prefers-reduced-motion: reduce) {
  :is(#hero,#closing) .cta.cta-shine::before, :is(#hero,#closing) .cta.cta-shine .cta-arrow::before { animation: none; }
  :is(#hero,#closing) .cta.cta-shine .cta-roll, :is(#hero,#closing) .cta.cta-shine .cta-arrow svg path { transition: none; animation: none; }
  :is(#hero,#closing) .cta.cta-shine:hover .cta-roll { transform: none; }
}

:is(#hero,#closing) .cta.cta-shine .cta-outline { display: none; }   /* cta-motion.js adds an outline to every .cta; the shine replaces it */