/* =========================================================
   TEXT DROP 2 — HARD FIX: center column + bigger type
   Paste AFTER existing TextDrop2 styles so it wins
========================================================= */

#textDrop2 .text-drop__copy{
  /* force true centered column */
  width: min(64ch, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* ensure the wrapper itself is centered in the section */
  left: auto !important;
  right: auto !important;
  transform: none !important;

  /* nicer “column” balance */
  padding-left: clamp(1.1rem, 2.2vw, 2.4rem) !important;
  padding-right: clamp(1.1rem, 2.2vw, 2.4rem) !important;
}

/* Force line alignment + remove any inherited offset */
#textDrop2 .text-drop__copy .text-drop__line{
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;

  /* prevent “stretched” feeling */
  letter-spacing: 0.01em !important;
  line-height: 1.34 !important;

  /* bigger baseline size */
  font-size: clamp(1.35rem, 1.15vw, 1.95rem) !important;
}

/* Desktop bump: match the column + feel intentional */
@media (min-width: 992px){
  #textDrop2 .text-drop__copy{
    width: min(70ch, 68vw) !important;
    padding-top: clamp(4.25rem, 5vw, 6.25rem) !important;
    padding-bottom: clamp(4.25rem, 5vw, 6.25rem) !important;
  }

  #textDrop2 .text-drop__copy .text-drop__line{
    font-size: clamp(1.55rem, 1.05vw, 2.15rem) !important;
    line-height: 1.32 !important;
  }
}

/* Large desktop: slightly bigger still */
@media (min-width: 1400px){
  #textDrop2 .text-drop__copy .text-drop__line{
    font-size: clamp(1.7rem, 0.95vw, 2.35rem) !important;
  }
}

/* Optional: if your last line should feel like a “button” beat */
#textDrop2 .text-drop__line--closer{
  font-size: clamp(1.75rem, 1.05vw, 2.45rem) !important;
  line-height: 1.26 !important;
}

@media (max-width: 767px) {
  .text-drop.celestial-fade {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .book-cover {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .features-list {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .contact-info-section {
    display: none !important;
  }
}


        /* =========================================================
   HEADER CTA — Preorder (Shimmer Ring)
   Uses same shimmer-ring logic as hero version, but scoped
   to .btn-getstarted-preorder so it won't conflict.
========================================================= */

/* Base button layout (needed for ring positioning) */
.btn-getstarted-preorder.btn-shimmer{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  /* You can tweak these to match your header button sizing */
  padding: 0.65rem 1.05rem;
  border-radius: var(--pill-radius, 999px);
  text-decoration: none;

  /* Keep your existing header CTA look here, or leave minimal */
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);

  overflow: hidden; /* ensures ring/glow stays clean */
}

/* Required for ring mask + animation */
.btn-getstarted-preorder.btn-shimmer{
  --pill-radius: 999px;
  --ring: 2px;
  --spin: 0turn;
}

/* If spin/shinePulse keyframes already exist in your CSS, remove these.
   If not, keep them. */
@keyframes spin { to { --spin: 1turn; } }

@keyframes shinePulse{
  0%   { transform: scale(0.98); }
  60%  { transform: scale(1.00); }
  100% { transform: scale(1.00); }
}

/* ==========================================
   Shimmer ring (pill outline)
========================================== */
.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring{
  position: absolute;
  inset: 0;
  border-radius: var(--pill-radius);
  pointer-events: none;
  z-index: 2;

  padding: var(--ring);

  background: conic-gradient(
    from var(--spin),
    transparent 0%,
    transparent 34%,
    rgba(248, 181, 210, 0.00) 39%,
    rgba(248, 181, 210, 0.80) 42%,
    rgba(227, 120, 168, 0.72) 45%,
    rgba(248, 181, 210, 0.00) 48%,
    transparent 54%,
    transparent 100%
  );

  mix-blend-mode: plus-lighter;
  opacity: 0;
  animation: spin 1s linear infinite;

  -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,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ring glow strokes */
.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring::before,
.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring::after{
  content:"";
  position:absolute;
  inset: var(--ring);
  border-radius: var(--pill-radius);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring::before{
  box-shadow:
    0 0 8px 2px rgba(248, 181, 210, 0.55),
    0 0 18px 4px rgba(227, 120, 168, 0.45);
}

.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    inset 0 0 6px rgba(248, 181, 210, 0.22);
}

@media (hover:hover){
  .btn-getstarted-preorder.btn-shimmer:hover .btn-shimmer-ring{
    opacity: 1;
  }
  .btn-getstarted-preorder.btn-shimmer:hover .btn-shimmer-ring::before,
  .btn-getstarted-preorder.btn-shimmer:hover .btn-shimmer-ring::after{
    opacity: 1;
    animation: shinePulse 1.2s ease-in 1 forwards;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring{
    animation: none !important;
  }
}

/* Text visibility (your requested override) */
.btn-getstarted-preorder.btn-shimmer .btn-text{
  color: var(--btn-text, #E7D7F7) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  animation: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.28);
  position: relative;
  z-index: 3; /* ensures it stays above the ring */
}
      /* =========================================================
   FORCE Header Preorder CTA purple in ALL states
   Paste at the VERY END so it wins the cascade.
========================================================= */

/* Base (non-hover) */
.header .btn-getstarted-preorder.btn-shimmer,
#header .btn-getstarted-preorder.btn-shimmer,
a.btn-getstarted-preorder.btn-shimmer{
  background-color: #220C33 !important; /* solid fallback */
  background-image: linear-gradient(180deg, #2B0E3E 0%, #170822 100%) !important;
  border: 1px solid rgba(231, 215, 247, 0.28) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}

/* Hover / focus (slightly brighter purple) */
@media (hover:hover){
  .header .btn-getstarted-preorder.btn-shimmer:hover,
  #header .btn-getstarted-preorder.btn-shimmer:hover,
  a.btn-getstarted-preorder.btn-shimmer:hover{
    background-color: #2A0F40 !important;
    background-image: linear-gradient(180deg, #3A1460 0%, #1B0A2A 100%) !important;
    border-color: rgba(231, 215, 247, 0.36) !important;
  }
}

.header .btn-getstarted-preorder.btn-shimmer:focus-visible,
#header .btn-getstarted-preorder.btn-shimmer:focus-visible,
a.btn-getstarted-preorder.btn-shimmer:focus-visible{
  outline: 2px solid rgba(231, 215, 247, 0.45);
  outline-offset: 3px;
}

/* Keep text readable */
.header .btn-getstarted-preorder.btn-shimmer .btn-text,
#header .btn-getstarted-preorder.btn-shimmer .btn-text,
a.btn-getstarted-preorder.btn-shimmer .btn-text{
  color: #F2E9FF !important;
}

/* =========================================================
   HEADER CTA — Ensure original purple pill shows
   Paste AFTER the shimmer CSS so it overrides any "glass" styles
========================================================= */
.btn-getstarted-preorder.btn-shimmer{
  /* your original pill look */
  background: linear-gradient(180deg, #2B0E3E 0%, #1B0A2A 100%) !important;
  border: 1px solid rgba(231, 215, 247, 0.28) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}

/* keep it purple on hover/focus too (some button styles flip on hover) */
.btn-getstarted-preorder.btn-shimmer:hover,
.btn-getstarted-preorder.btn-shimmer:focus-visible{
  background: linear-gradient(180deg, #32114A 0%, #1B0A2A 100%) !important;
  border-color: rgba(231, 215, 247, 0.36) !important;
}

/* ensure the ring doesn't "wash out" the base */
.btn-getstarted-preorder.btn-shimmer .btn-shimmer-ring{
  mix-blend-mode: plus-lighter; /* keep your effect */
}

/* keep text readable */
.btn-getstarted-preorder.btn-shimmer .btn-text{
  color: #EDE3FA !important;
}