/* Selected crystal concept, without gemstones. The moving texture is the site's
   existing nebula; the glass rim and live text stay still above the mist. */
:root body .ritual-cta.ritual-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 100%;
  min-width: 0;
  height: auto;
  isolation: isolate;
  overflow: visible;
  min-height: 48px;
  padding: 9px 23px;
  border: 1px solid #d8bd88;
  border-radius: 24px;
  background: #29123f;
  color: #fff0ce;
  font: 400 21px/1.2 var(--reading);
  white-space: normal;
  text-align: center;
  text-decoration: none;
  letter-spacing: normal;
  cursor: pointer;
  transform: none;
  box-shadow: 0 2px 0 #866037, 0 5px 8px #08020fb3,
    0 0 7px #e6b7ff26, 0 0 15px #bc7ce326;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.ritual-cta::before, .ritual-cta::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 18px;
  height: 36px;
  background: url('/assets/ritual-button-scroll.svg') center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1px #160a20b3);
  pointer-events: none;
}
.ritual-cta::before { left: -5px; transform: translateY(-50%); }
.ritual-cta::after { right: -5px; transform: translateY(-50%) scaleX(-1); }
/* The three ornate arches already frame their buttons; keep these ends plain. */
.catalog-card .ritual-cta::before, .catalog-card .ritual-cta::after { content: none; }
.site-menu .ritual-cta--menu::before, .site-menu .ritual-cta--menu::after { content: none; }
.site-menu summary:has(.ritual-cta-label)>.site-menu-fallback{display:none}
#site-menu-surface{display:contents;border-radius:inherit}
@media (min-width:701px) and (max-width:1049px) {
  :root body .site-menu .ritual-cta.ritual-cta--menu {
    min-height:44px;
    min-width:116px;
    padding:9px 16px;
    font-size:18px;
  }
  .site-menu .ritual-cta-label { gap:9px; }
  .site-menu-chevron { font:14px/1 var(--ui);color:#e8c788; }
  .site-menu[open] .ritual-cta--menu { --cta-hover:1; }
}
.ritual-cta-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
  z-index: 2;
  text-shadow: 0 1px 3px #15081f, 0 0 8px #15081fcc;
}
/* Reflections sit above the mist so its opaque base cannot hide the bevel. */
.ritual-cta-glass {
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 0%, #fff1ff2e, transparent 45%),
    radial-gradient(ellipse at 86% 100%, #ddacff40, transparent 38%),
    linear-gradient(180deg, #e6bfff1a, #b183d908 30%, #16082733 60%, #11051b55 78%, #d9a9ff26);
  box-shadow: inset 0 2px 3px #fff3ff59, inset 2px 0 4px #e7c6ff40,
    inset -2px 0 4px #e7c6ff33, inset 0 4px 4px #c594ee33,
    inset 0 -3px 4px #edcaff59, inset 0 -7px 6px #7c3eaa66,
    inset 0 0 0 1px #eedbff33;
  transition: transform .18s ease, filter .25s ease, box-shadow .18s ease;
}
.ritual-cta-glass::before {
  content: '';
  position: absolute;
  inset: 3px 10px auto;
  height: 3px;
  border-radius: 70% 55% 45% 35% / 100% 100% 35% 30%;
  background: linear-gradient(165deg, #ffffff99, #f0d9ff55 50%, transparent 85%);
  filter: blur(.7px);
}
.ritual-cta-glass::after {
  content: '';
  position: absolute;
  inset: auto 14px 3px;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #e3b4ff66 20%, transparent 48%, #fff0ffa6 82%, transparent);
  filter: blur(.8px);
}
.ritual-cta-glints { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.ritual-cta-glints::before, .ritual-cta-glints::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 20px;
  background: url('/assets/ritual-button-glint.svg') center / contain no-repeat;
  filter: blur(1.8px);
  opacity: .4;
}
.ritual-cta-glints::before { top: -9px; right: 15%; }
.ritual-cta-glints::after { bottom: -9px; left: 13%; width: 21px; height: 17px; opacity: .3; }
.ritual-cta-glints::before, .ritual-cta-glints::after { transition: opacity .25s ease; }
.ritual-cta-sheen {
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.ritual-cta-sheen::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 36%;
  height: 200%;
  background: linear-gradient(90deg, transparent, #f2dcff14 28%, #fff7ec59 50%, #e8ccff1f 72%, transparent);
  transform: translateX(-160%) skewX(-20deg);
  opacity: 0;
}
.ritual-cta-mist {
  position: absolute;
  container: button-mist / inline-size;
  inset: 2px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background: #2c1543;
  transition: transform .18s ease;
}
.ritual-cta-mist::before, .ritual-cta-mist::after {
  content: '';
  position: absolute;
  inset: -28px -46px;
  background: url('/assets/nebula.webp') 68% 46% / 470px auto no-repeat;
  background-size: max(470px, 100%) auto;
  opacity: .68;
  animation: ritual-mist-drift 16s ease-in-out infinite alternate;
  transition: opacity .25s ease;
}
.ritual-cta-mist::after {
  background-position: 85% 65%;
  background-size: max(350px, 100%) auto;
  opacity: .34;
  mix-blend-mode: screen;
  animation-name: ritual-mist-return;
  animation-duration: 21s;
  animation-delay: -9s;
}
/* Crop the brighter cloud region on wide controls; compact buttons keep their
   approved texture scale. The absolute mist container cannot affect sizing. */
@container button-mist (min-width: 280px) {
  .ritual-cta-mist::before { background-size: 240% auto; background-position: 78% 46%; }
  .ritual-cta-mist::after { background-size: 190% auto; background-position: 78% 65%; }
}
/* Same fractional-sampling fix as the main nebula (Mozilla 2069657).
   Keep rotation constant and tiny so slow Firefox motion does not snap. */
@supports (-moz-appearance: none) {
  .ritual-cta-mist::before, .ritual-cta-mist::after { rotate: .1deg; }
  @media (prefers-reduced-motion: reduce) {
    .ritual-cta-mist::before, .ritual-cta-mist::after { rotate: none; }
  }
}
.catalog-card[data-ritual=runes] .ritual-cta-mist::before { animation-delay: -6s; }
.catalog-card[data-ritual=natal] .ritual-cta-mist::before { animation-delay: -11s; }
.ritual-cta { --cta-hover: 0; }
.ritual-cta:focus-visible { --cta-hover: 1; }
@media (hover: hover) and (pointer: fine) {
  .ritual-cta:hover:not(:disabled) { --cta-hover: 1; }
}
:root body .ritual-cta.ritual-cta,
:root body .ritual-cta.ritual-cta:hover:not(:disabled) {
  border-color: color-mix(in srgb, #d8bd88, #fff0be calc(var(--cta-hover) * 100%));
  box-shadow: 0 2px 0 #866037, 0 5px 8px rgb(8 2 15 / calc(.7 - var(--cta-hover) * .35)),
    0 0 calc(7px + var(--cta-hover) * 7px) rgb(230 183 255 / calc(.15 + var(--cta-hover) * .22)),
    0 0 calc(15px + var(--cta-hover) * 17px) rgb(188 124 227 / calc(.15 + var(--cta-hover) * .25));
}
.ritual-cta-glass {
  filter: brightness(calc(1 + var(--cta-hover) * .14));
  transform-origin: center bottom;
  transform: scaleY(calc(1 + var(--cta-hover) * .025));
}
.ritual-cta-mist::before { opacity: calc(.68 + var(--cta-hover) * .16); }
.ritual-cta-mist::after { opacity: calc(.34 + var(--cta-hover) * .1); }
.ritual-cta-glints::before { opacity: calc(.4 + var(--cta-hover) * .2); }
.ritual-cta-glints::after { opacity: calc(.3 + var(--cta-hover) * .15); }
@keyframes ritual-glass-sweep {
  0% { transform: translateX(-160%) skewX(-20deg); opacity: 0; }
  15%, 70% { opacity: 1; }
  100% { transform: translateX(420%) skewX(-20deg); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ritual-cta:focus-visible .ritual-cta-sheen::before { animation: ritual-glass-sweep .6s ease-out; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ritual-cta:hover:not(:disabled) .ritual-cta-sheen::before { animation: ritual-glass-sweep .6s ease-out; }
}
:root body .ritual-cta.ritual-cta:active:not(:disabled) {
  transition-duration: .08s;
  border-color: #d8bd88;
  box-shadow: 0 1px 0 #866037, 0 3px 6px #08020f66, 0 0 20px #bc7ce359;
}
.ritual-cta:active:not(:disabled) .ritual-cta-glass {
  transform: translateY(.35px) scale(.995, .985);
  filter: brightness(.98);
  box-shadow: inset 0 1px 2px #10051c4d, inset 0 2px 3px #fff3ff40,
    inset 2px 0 4px #e7c6ff33, inset -2px 0 4px #e7c6ff26,
    inset 0 -2px 3px #edcaff59, inset 0 -5px 5px #7c3eaa4d,
    inset 0 0 0 1px #eedbff33;
  transition-duration: .08s;
}
.ritual-cta:active:not(:disabled) .ritual-cta-mist { transform: translateY(.35px) scale(.995, .985); transition-duration: .08s; }
.ritual-cta:active:not(:disabled) .ritual-cta-sheen::before { animation: none !important; }
.ritual-cta:active:not(:disabled) .ritual-cta-glints { opacity: .75; }
/* Keep the anchor and label stationary: pointer-down cannot move the hit area. */
@media (prefers-reduced-motion: reduce) {
  .ritual-cta-glass, .ritual-cta-mist, .ritual-cta-mist::before, .ritual-cta-mist::after,
  .ritual-cta-glints::before, .ritual-cta-glints::after { transition: none; }
  .ritual-cta .ritual-cta-glass, .ritual-cta .ritual-cta-mist { transform: none !important; }
}
@keyframes ritual-mist-drift {
  from { transform: translate3d(-17px, -8px, 0); }
  to { transform: translate3d(19px, 9px, 0); }
}
@keyframes ritual-mist-return {
  from { transform: translate3d(22px, -6px, 0); }
  to { transform: translate3d(-20px, 10px, 0); }
}
@media (max-width: 1000px) {
  :root body .ritual-cta.ritual-cta {
    min-height: 44px;
    padding: 9px 16px;
    font-size: 18px;
  }
  .ritual-cta::before, .ritual-cta::after { width: 14px; height: 32px; }
  .ritual-cta::before { left: -4px; }
  .ritual-cta::after { right: -4px; }
}
@media (max-width: 359px) {
  :root body .ritual-cta.ritual-cta { padding-inline: 9px; font-size: 16px; }
  .ritual-cta::before, .ritual-cta::after { width: 12px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ritual-cta-mist::before, .ritual-cta-mist::after { animation: none; }
  :root body .ritual-cta.ritual-cta { transition: none; }
}

/* Override legacy page-specific skins, retaining their layout and form behavior. */
:root body .ritual-cta.ritual-cta:hover:not(:disabled),
:root body .ritual-cta.ritual-cta:focus-visible,
:root body .ritual-cta.ritual-cta:active:not(:disabled) {
  background: #29123f;
  color: #fff0ce;
  transform: none;
  text-decoration: none;
}
:root body .ritual-cta.ritual-cta:focus-visible {
  outline: 2px solid #fff0ce;
  outline-offset: 5px;
}
:root body .ritual-cta.ritual-cta:disabled {
  --cta-hover: 0;
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.55);
  box-shadow: 0 1px 0 #86603766;
}
.ritual-cta:disabled .ritual-cta-mist::before,
.ritual-cta:disabled .ritual-cta-mist::after { animation-play-state: paused; }
.ritual-cta:disabled .ritual-cta-glints { opacity: .2; }

/* Exit keeps the gold ornament and original nebula, tinted to garnet. */
:root body .ritual-cta.ritual-cta--exit,
:root body .ritual-cta.ritual-cta--exit:is(:hover, :focus-visible, :active):not(:disabled) {
  min-width: 116px;
  background: #45121c;
  box-shadow: 0 2px 0 #866037, 0 5px 8px rgb(8 2 15 / calc(.7 - var(--cta-hover) * .35)),
    0 0 calc(7px + var(--cta-hover) * 7px) rgb(255 143 143 / calc(.15 + var(--cta-hover) * .22)),
    0 0 calc(15px + var(--cta-hover) * 17px) rgb(190 62 80 / calc(.15 + var(--cta-hover) * .25));
}
.ritual-cta--exit .ritual-cta-mist { filter: hue-rotate(85deg) saturate(1.55); }
:root body .ritual-cta.ritual-cta--exit .ritual-cta-glass {
  filter: hue-rotate(85deg) saturate(1.25) brightness(calc(1 + var(--cta-hover) * .14));
}

/* The plain details control must stay above the card's full-area link. */
.home-details { position: relative; z-index: 5; }

/* The green action variant tints the nebula and glass, keeping gold and text. */
:root body .ritual-cta.ritual-cta--green,
:root body .ritual-cta.ritual-cta--green:is(:hover, :focus-visible, :active):not(:disabled) {
  background: #123c30;
  box-shadow: 0 2px 0 #866037, 0 5px 8px rgb(8 2 15 / calc(.7 - var(--cta-hover) * .35)),
    0 0 calc(7px + var(--cta-hover) * 7px) rgb(139 235 190 / calc(.15 + var(--cta-hover) * .22)),
    0 0 calc(15px + var(--cta-hover) * 17px) rgb(56 156 112 / calc(.15 + var(--cta-hover) * .25));
}
.ritual-cta--green .ritual-cta-mist { filter: hue-rotate(190deg) saturate(.9); }
:root body .ritual-cta.ritual-cta--green .ritual-cta-glass {
  filter: hue-rotate(190deg) saturate(.9) brightness(calc(1 + var(--cta-hover) * .14));
}