/* ==========================================================================
   CONIC SWEEP CTA  —  Tanel Website Studio element library
   ==========================================================================
   One soft arc of the client's accent color travelling the border of a single
   button, forever, on a 4.6 second loop.

   ONE PER SITE. The whole effect is that exactly one thing on the page is
   alive. Put it on a second button and it stops meaning anything.

   The color is NOT gold by default in a client build. Gold is the reference
   implementation only. The sweep takes the client's own accent, the same
   value that fills --tag in the storefront template, or Wheat in American
   Craftsman for studio-owned surfaces.

   GROUND REQUIREMENT: this only works on a dark ground. The arc is read as
   light, and light needs dark around it. On the storefront template that
   means the Nylon (#111214) section, never the Cotton page ground.

   BROWSER: needs @property (Chrome 85+, Safari 16.4+, Firefox 128+) to tween
   the angle. Where it is missing the gradient never paints and the button
   degrades to a plain --sweep-track ring around the face, which is a fine
   button. Nothing breaks, nothing is unreadable.
   ========================================================================== */

@property --tws-sweep-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.sweep-cta {

  /* --- THEME TOKENS. Set these per client, nothing else. ----------------
     --sweep-0 MUST be the same hue as --sweep at zero alpha. Do not use the
     `transparent` keyword there: it computes to transparent BLACK, and the
     gradient interpolates through gray, which puts a dirty smudge on each
     end of the arc. This is the one token that looks redundant and is not.
  --------------------------------------------------------------------- */
  --sweep:          #F5D271;              /* the arc */
  --sweep-hot:      #FFF4C9;              /* its hottest point, 25deg wide */
  --sweep-dim:      rgba(199,154,46,.35); /* the leading falloff */
  --sweep-0:        rgba(245,210,113,0);  /* same hue, zero alpha */

  --sweep-track:    #242424;   /* the ring where the arc is not */
  --sweep-face:     #464646;   /* button face, top of its gradient */
  --sweep-face-2:   #3C3C3C;   /* button face, bottom */
  --sweep-face-hi:  #525252;   /* face on hover */
  --sweep-label:    #F4F4F4;
  --sweep-icon:     #F7DE77;   /* the round icon plate */
  --sweep-icon-ink: #141414;   /* the glyph inside it */

  --sweep-speed:    4.6s;      /* Ryan's setting. Slower reads expensive. */
  --sweep-ring:     2px;       /* 2 to 3. Past 4 it stops being a border. */
  --sweep-bloom:    12px;      /* halo blur. 0 kills the halo entirely. */

  position: relative;
  display: inline-block;
  padding: var(--sweep-ring);
  border-radius: 999px;
  background: var(--sweep-track);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* The arc itself, sitting in the ring gap. */
.sweep-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--tws-sweep-angle),
    var(--sweep-0)    0deg,
    var(--sweep-0)  200deg,
    var(--sweep-dim) 250deg,
    var(--sweep)     300deg,
    var(--sweep-hot) 325deg,
    var(--sweep)     345deg,
    var(--sweep-0)  360deg);
  animation: tws-sweep var(--sweep-speed) linear infinite;
}

/* The halo. Same gradient, larger and blurred, behind the plate. */
.sweep-cta::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: inherit;
  filter: blur(var(--sweep-bloom));
  opacity: .55;
  background: conic-gradient(from var(--tws-sweep-angle),
    var(--sweep-0)    0deg,
    var(--sweep-0)  200deg,
    var(--sweep-dim) 250deg,
    var(--sweep)     300deg,
    var(--sweep-hot) 325deg,
    var(--sweep)     345deg,
    var(--sweep-0)  360deg);
  animation: tws-sweep var(--sweep-speed) linear infinite;
}

/* The dark face. Sits above the arc, leaving only the ring gap showing. */
.sweep-cta__face {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 9px 9px 34px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sweep-face), var(--sweep-face-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .25s ease;
}

.sweep-cta__label {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--sweep-label);
  white-space: nowrap;
}

.sweep-cta__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sweep-icon);
  display: grid;
  place-items: center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.sweep-cta__icon svg {
  display: block;
  width: 19px;
  height: 19px;
  stroke: var(--sweep-icon-ink);
}

/* Hover is deliberately small: the face lifts a step, the glyph nudges, the
   arc roughly doubles. NO translateY on the button. DESIGN.md bans hover-lift
   as a depth cue and that rule is older than this element. */
.sweep-cta:hover .sweep-cta__face { background: linear-gradient(180deg, var(--sweep-face-hi), #414141); }
.sweep-cta:hover .sweep-cta__icon { transform: translateX(3px); }
.sweep-cta:hover::before,
.sweep-cta:hover::after   { animation-duration: calc(var(--sweep-speed) * .5); }

.sweep-cta:focus-visible {
  outline: 2px solid var(--sweep);
  outline-offset: 5px;
}

@keyframes tws-sweep { to { --tws-sweep-angle: 360deg } }

/* Freeze the arc rather than delete it. Someone who cannot take motion still
   gets the gold edge, just parked. */
@media (prefers-reduced-motion: reduce) {
  .sweep-cta::before,
  .sweep-cta::after {
    animation: none;
    --tws-sweep-angle: 300deg;
  }
}

@media (max-width: 520px) {
  .sweep-cta__face  { padding: 8px 8px 8px 26px; gap: 16px }
  .sweep-cta__label { font-size: 16px }
  .sweep-cta__icon  { flex-basis: 38px; width: 38px; height: 38px }
}

/* ==========================================================================
   READY-MADE THEMES
   Add ONE of these classes beside .sweep-cta. Each carries a matched
   --sweep-0, which is the token people forget.
   ========================================================================== */

/* Gold. The reference. Right for hospitality, and for anything selling taste. */
.sweep-cta--gold {
  --sweep:     #F5D271;
  --sweep-hot: #FFF4C9;
  --sweep-dim: rgba(199,154,46,.35);
  --sweep-0:   rgba(245,210,113,0);
  --sweep-icon:#F7DE77;
}

/* Wheat on Ink. American Craftsman, for studio-owned surfaces only. */
.sweep-cta--craftsman {
  --sweep:      #D9A441;
  --sweep-hot:  #F2D9A0;
  --sweep-dim:  rgba(217,164,65,.35);
  --sweep-0:    rgba(217,164,65,0);
  --sweep-track:#1C1A17;
  --sweep-face: #2A2721;
  --sweep-face-2:#211E1A;
  --sweep-face-hi:#332F27;
  --sweep-label:#F6F1E6;
  --sweep-icon: #D9A441;
}

/* Safety orange. Storefront template default tag color, on the Nylon band. */
.sweep-cta--tag-orange {
  --sweep:     #FF7A38;
  --sweep-hot: #FFD2B0;
  --sweep-dim: rgba(255,77,0,.35);
  --sweep-0:   rgba(255,122,56,0);
  --sweep-track:#1A1B1D;
  --sweep-face:#2A2C30;
  --sweep-face-2:#1F2124;
  --sweep-face-hi:#33363B;
  --sweep-icon:#FF4D00;
  --sweep-icon-ink:#111214;
}

/* Forest. For a trade whose own color is green, or a calmer hospitality read. */
.sweep-cta--forest {
  --sweep:     #4FD07A;
  --sweep-hot: #CFF7DC;
  --sweep-dim: rgba(27,122,62,.4);
  --sweep-0:   rgba(79,208,122,0);
  --sweep-icon:#4FD07A;
}

/* ==========================================================================
   TPIC theme. Added 2026-09-16.
   The library ships a `--gold` reference theme at #F5D271, which is the
   hiddengem.media value, not this client's. TPIC's own gold is #C8991A with
   #E0AE28 as its on-dark lift, so the sweep takes those instead, per the
   element's own rule that the arc carries the CLIENT's colour.
   One button on this site gets it: the hero call to action.
   ========================================================================== */
.sweep-cta--tpic {
  --sweep:        #E0AE28;
  --sweep-hot:    #FFEFC2;
  --sweep-dim:    rgba(200,153,26,.35);
  --sweep-0:      rgba(224,174,40,0);
  --sweep-track:  #26241C;
  --sweep-face:   #2E2B22;
  --sweep-face-2: #211F18;
  --sweep-face-hi:#38342A;
  --sweep-label:  #F6F2E8;
  --sweep-icon:   #E0AE28;
  --sweep-icon-ink:#16150F;
}