/* ============================================================
   shiny-cta.css — the animated Book Now button.

   A faithful vanilla-CSS port of the "shiny-cta" React component:
   conic-gradient border that rotates, a masked dot pattern, an
   inner shimmer, and a breathing glow on hover. The React wrapper
   contributed only a <span> and a class name — every visual is CSS,
   so nothing is lost in the port.

   TWO THINGS WERE DELIBERATELY CHANGED from the original:

   1. COLOUR. The original is blue-on-black and pulls Inter down from
      Google Fonts. This site is navy/gold with DM Sans, so the button
      reads from the page's own design tokens (--navy/--n3/--gold/--gl/
      --cream) and inherits the page font. Every colour routes through
      the five --shiny-cta-* variables below, so re-theming is a
      one-line edit — see the SWITCHES block.

   2. TYPOGRAPHY + PADDING stay as the site already had them
      (.btn-g / .nav-book). The original's 1.125rem Inter would break
      the nav bar and every hero row. What is adopted is the EFFECT,
      not the type scale.

   The four custom properties are also declared explicitly on the
   element, not left to @property's initial-value alone. Without that,
   a browser lacking @property support resolves var(--gradient-percent)
   to nothing, which invalidates the whole conic-gradient and therefore
   the entire background shorthand — an invisible button. Declaring
   them means such a browser simply gets a static ring instead.

   Loaded AFTER _polish.css so its generic .btn-g/.nav-book sheen
   (a skewed ::after that would fight the shimmer) is overridden
   rather than removed — pages not carrying a shiny button keep it.
   ============================================================ */

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --gradient-percent {
  syntax: "<percentage>";
  initial-value: 5%;
  inherits: false;
}
@property --gradient-shine {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}

.shiny-cta {
  /* ---- SWITCHES: the whole theme is these five lines ---------------
     Back to the original blue-on-black? Set:
       --shiny-cta-bg: #000000;  --shiny-cta-bg-subtle: #1a1818;
       --shiny-cta-fg: #ffffff;  --shiny-cta-highlight: blue;
       --shiny-cta-highlight-subtle: #8484ff;
     Prefer the old solid-gold fill with the ring on top? Set
       --shiny-cta-bg: var(--gold);  --shiny-cta-fg: var(--navy);
     ------------------------------------------------------------------ */
  --shiny-cta-bg: var(--navy, #0d1424);
  --shiny-cta-bg-subtle: var(--n3, #19273e);
  --shiny-cta-fg: var(--cream, #d8dde6);
  --shiny-cta-highlight: var(--gold, #d4a857);
  --shiny-cta-highlight-subtle: var(--gl, #f0d291);

  /* Pill is part of the look being adopted. For the site's sharp
     3px corners instead, change this one line to var(--r, 3px). */
  --shiny-cta-radius: 360px;

  --animation: gradient-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Declared, not inherited from @property — see header note. */
  --gradient-angle: 0deg;
  --gradient-angle-offset: 0deg;
  --gradient-percent: 5%;
  --gradient-shine: #ffffff;

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  text-decoration: none;
  border: 1px solid transparent !important;
  border-radius: var(--shiny-cta-radius) !important;
  color: var(--shiny-cta-fg) !important;
  background:
    linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(
        from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
        transparent,
        var(--shiny-cta-highlight) var(--gradient-percent),
        var(--gradient-shine) calc(var(--gradient-percent) * 2),
        var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
        transparent calc(var(--gradient-percent) * 4)
      )
      border-box !important;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle) !important;
  /* !important because .nav-book's page-level rule marks its own
     transition !important, which would otherwise kill the custom-
     property interpolation that the hover state depends on. */
  transition: var(--transition) !important;
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine !important;
}

.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
  /* _polish.css skews and offsets its sheen ::after; neutralise both
     so the shimmer sits square and centred. */
  transform: none;
  inset-inline-end: auto;
  inset-block-end: auto;
}

.shiny-cta:active {
  translate: 0 1px;
}

/* Dots pattern */
.shiny-cta::before {
  --size: calc(100% - var(--shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
      circle at var(--position) var(--position),
      white calc(var(--position) / 4),
      transparent 0
    )
    padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
  border-radius: inherit;
  opacity: 0.4;
  z-index: -1;
}

/* Inner shimmer */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: linear-gradient(
    -50deg,
    transparent,
    var(--shiny-cta-highlight),
    transparent
  );
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.shiny-cta span {
  z-index: 1;
  position: relative;
}

/* Breathing glow — the reason the label is wrapped in a <span>.
   The button's own ::before and ::after are already spent on the dots
   and the shimmer, so the third effect needs a third element. */
.shiny-cta span::before {
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
  opacity: 0;
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

/* Animate. The second animation ships paused, so at rest a single
   gold arc sweeps the border; hover starts the second and
   animation-composition: add layers them. */
.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
  animation: var(--animation) var(--duration),
    var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  --gradient-shine: var(--shiny-cta-highlight-subtle);
  /* _polish.css lifts .btn-g/.nav-book on hover; the original states
     its own press feedback via :active translate instead. */
  transform: none;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle) !important;
}

.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
  animation-play-state: running;
}

.shiny-cta:is(:hover, :focus-visible) span::before {
  opacity: 1;
}

/* Keep _polish.css's sweeping sheen from re-entering on hover — it
   sets left:160% on the same ::after this file uses for the shimmer. */
.shiny-cta:is(:hover, :focus-visible)::after {
  inset-inline-start: 50%;
  transform: none;
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
}

/* The original animates unconditionally. These buttons appear on every
   page of a travel site, so honour the OS setting: keep the styling,
   drop the motion. */
@media (prefers-reduced-motion: reduce) {
  .shiny-cta,
  .shiny-cta::before,
  .shiny-cta::after,
  .shiny-cta span::before {
    animation: none !important;
  }
  .shiny-cta {
    --gradient-percent: 20%;
  }
}