/* KIN eye feedback: the left anchor stays fixed; the filled right cap travels 31px. */
:root{--control-light-shadow:-3px -3px 8px rgb(241 237 230 / 6%);--control-cast-shadow:4px 6px 12px rgb(0 0 0 / 24%)}
/* The glass brown shared with the menu bar and pills (navigation.css --glass-inset); a little darker on hover. */
.cta{--cta-ease:cubic-bezier(.23,1,.32,1);--cta-fill:rgb(28 25 22 / 70%);isolation:isolate;
  background:var(--cta-fill);transform-origin:left center}
.cta:hover{--cta-fill:rgb(28 25 22 / 80%);background:var(--cta-fill)}
/* Reserve is a full capsule seated in a shallow socket. Real rounded surfaces
   expand together so the right rim stays as complete as the left at rest/hover. */
#hero .cta,#hero .cta:hover{--hero-extension:0px;--cta-fill:#48443e;background:transparent;filter:none}
#hero .cta::before,#hero .cta::after{content:'';position:absolute;pointer-events:none;border-radius:999px;clip-path:none;
  transition:width 200ms var(--cta-ease),background-color 200ms var(--cta-ease),box-shadow 160ms ease-out,translate 160ms ease-out}
#hero .cta::before{z-index:-2;inset:-3px auto -3px -3px;width:calc(100% + 6px + var(--hero-extension));
  background:linear-gradient(180deg,#171513 0%,#24211e 65%,#514a43 100%);
  box-shadow:inset 0 1px 2px rgb(0 0 0 / 65%),0 1px 1px rgb(241 237 230 / 7%),-3px -4px 12px rgb(241 237 230 / 5%),3px 7px 14px rgb(0 0 0 / 28%)}
#hero .cta::after{z-index:-1;inset:0 auto 0 0;width:calc(100% + var(--hero-extension));
  background-color:var(--cta-fill);
  background-image:radial-gradient(ellipse at 50% -55%,rgb(241 237 230 / 14%),transparent 72%),linear-gradient(180deg,rgb(241 237 230 / 3%),rgb(14 12 10 / 16%));
  box-shadow:inset 0 1px 1px rgb(241 237 230 / 19%),inset 0 -2px 3px rgb(14 12 10 / 24%),0 2px 2px rgb(0 0 0 / 48%)}
#hero .cta:active{transform:none}
#hero .cta:active::after{translate:0 1px;box-shadow:inset 0 1px 3px rgb(14 12 10 / 25%),inset 0 -1px 1px rgb(241 237 230 / 6%),0 1px 1px rgb(0 0 0 / 30%);transition-duration:90ms}
#hero .cta:active :is(.cta-label,.cta-arrow,.cta-dot,.cta-eye-glow){translate:0 1px}
.cta-dot{left:24px;top:50%;width:33px;height:6px;margin-top:-3px;
  border-radius:0;clip-path:inset(0 27px 0 0 round 3px);
  transition:clip-path 200ms var(--cta-ease)}
.cta-label,.cta-arrow{transition:transform 200ms var(--cta-ease)}
.cta-arrow{display:block;flex-shrink:0;width:17px;height:17px;line-height:0}
.cta-arrow svg{display:block;overflow:visible}
/* A separate halo preserves the crisp 33px core and fades cleanly on exit. */
.cta-eye-glow{position:absolute;pointer-events:none;left:24px;top:50%;
  width:33px;height:4px;margin-top:-2px;opacity:0;
  transition:opacity 200ms var(--cta-ease)}
.cta-eye-glow::before{content:'';position:absolute;inset:0;border-radius:2px;
  background:#ffe1ad;box-shadow:0 0 5px 1px rgba(255,196,107,.55),0 0 12px 3px rgba(255,174,73,.18);
  opacity:0}
@keyframes kin-eye-breathe{0%,100%{opacity:0}50%{opacity:1}}
.cta.cta-motion,.cta.cta-motion:hover{background:transparent}
.cta-motion::before{content:'';position:absolute;z-index:-1;inset:-1px -32px -1px -1px;
  border-radius:999px;background:var(--cta-fill);opacity:1;
  clip-path:inset(0 31px 0 0 round 999px);
  transition:clip-path 200ms var(--cta-ease),background-color 200ms var(--cta-ease)}
.cta-outline{display:none;position:absolute;left:-1px;top:-1px;overflow:visible;pointer-events:none;
  fill:none;stroke:rgba(241,237,230,.35);stroke-width:1}
.cta-outline-right{transition:transform 200ms var(--cta-ease)}
.cta-outline-extension{clip-path:inset(-1px 100% -1px 0);transform-box:fill-box;
  transition:clip-path 200ms var(--cta-ease)}
@media(hover:hover) and (pointer:fine){
  #hero .cta:hover{--cta-fill:#504c45}
  #hero .cta-motion:hover{--hero-extension:31px}
  #hero .cta-motion:hover:not(:active)::before,#hero .cta-motion:hover:not(:active)::after{transition-duration:280ms}
  .cta-motion:hover .cta-eye-glow{opacity:1;transition-delay:280ms}
  .cta-motion:hover .cta-eye-glow::before{animation:kin-eye-breathe 3200ms ease-in-out 280ms infinite}
  .cta-motion:hover .cta-dot{clip-path:inset(1px 0 1px 0 round 2px)}
  .cta-motion:hover .cta-label,.cta-motion:hover .cta-arrow,
  .cta-motion:hover .cta-outline-right{transform:translateX(31px)}
  .cta-motion:hover .cta-outline-extension{clip-path:inset(-1px 0 -1px 0)}
  .cta-motion:hover::before{opacity:1;clip-path:inset(0 0 0 0 round 999px)}
  .cta-motion:hover .cta-dot,.cta-motion:hover .cta-label,.cta-motion:hover .cta-arrow,
  .cta-motion:hover .cta-outline-right,.cta-motion:hover .cta-outline-extension,
  .cta-motion:hover::before{transition-duration:280ms}
}
.cta:focus-visible .cta-eye-glow{opacity:0;transition:none}
.cta:focus-visible .cta-eye-glow::before{animation:none}
/* Keyboard and reduced-motion paths retain the static, complete affordance. */
#hero .cta:focus-visible{--hero-extension:0px;outline:2px solid var(--amber);outline-offset:7px}
#hero .cta:focus-visible::before,#hero .cta:focus-visible::after{clip-path:none;transition:none}
#hero .cta:focus-visible:active::after,#hero .cta:focus-visible:active :is(.cta-label,.cta-arrow,.cta-dot,.cta-eye-glow){translate:none}
.cta:focus-visible .cta-dot{clip-path:inset(0 27px 0 0 round 3px);transition:none}
.cta:focus-visible:active{transform:none}
.cta:focus-visible .cta-label,.cta:focus-visible .cta-arrow,
.cta:focus-visible .cta-outline-right{transform:none;transition:none}
.cta:focus-visible .cta-outline-extension{clip-path:inset(-1px 100% -1px 0);transition:none}
.cta:focus-visible::before{clip-path:inset(0 31px 0 0 round 999px);transition:none}
@media(prefers-reduced-motion:reduce){
  #hero .cta-motion:hover{--hero-extension:0px}
  #hero .cta::before,#hero .cta::after,#hero .cta:active::after{clip-path:none;translate:none;transition:none}
  #hero .cta:active :is(.cta-label,.cta-arrow,.cta-dot,.cta-eye-glow){translate:none}
  .cta-motion:hover .cta-eye-glow{opacity:0;transition:none}
  .cta-motion:hover .cta-eye-glow::before{animation:none}
  .cta-motion:hover .cta-dot{clip-path:inset(0 27px 0 0 round 3px)}
  .cta-motion:hover .cta-label,.cta-motion:hover .cta-arrow,.cta-motion:hover .cta-outline-right{transform:none}
  .cta-motion:hover .cta-outline-extension{clip-path:inset(-1px 100% -1px 0)}
  .cta-motion:hover::before{clip-path:inset(0 31px 0 0 round 999px)}
  .cta-motion:active{transform:none}
}