/* ===== cta-effects.css — load AFTER style.css ===== */

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

/* ---------- 1. Very transparent glass ---------- */
:root {
  --glass: rgba(18, 22, 25, 0.12);
  --glass-border: rgba(255, 255, 255, 0.10);
}

/* lighter overlay so the background photo shows through the glass */
.bg-overlay {
  background:
    radial-gradient(circle at 20% 10%, rgba(212,175,122,0.10) 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(212,175,122,0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(6,8,9,0.35) 0%, rgba(6,8,9,0.55) 35%, rgba(6,8,9,0.80) 100%);
}

.site-header { background: rgba(10,12,13,0.18); }

.domain-card,
.package-card,
.step,
.faq-list details {
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.bundle-inner {
  background: linear-gradient(145deg, rgba(212,175,122,0.08), rgba(20,24,27,0.14));
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.modal-content {
  background: rgba(20,24,27,0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* keep text readable on a more transparent surface */
.domain-card, .package-card, .step, .faq-list details, .bundle-inner {
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* ---------- 2. Animated golden CTA buttons ---------- */
.header-cta,
.btn--lg,
.btn-inquire-bundle,
.modal-content .btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  padding: 14px 34px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(30,30,30,0.55), rgba(5,6,7,0.75));
  border: 1px solid rgba(212,175,122,0.18);
  box-shadow:
    0 0 18px rgba(212,175,122,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
  animation: cta-pulse 3.2s ease-in-out infinite;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}

.header-cta { padding: 10px 24px; }

/* rotating gold light along the border */
.header-cta::before,
.btn--lg::before,
.btn-inquire-bundle::before,
.modal-content .btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.6px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    rgba(212,175,122,0.10) 0%,
    rgba(212,175,122,0.10) 55%,
    var(--gold) 68%,
    #fff3d6 76%,
    var(--gold-bright) 82%,
    rgba(212,175,122,0.10) 94%,
    rgba(212,175,122,0.10) 100%
  );
  -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 exclude, linear-gradient(#000 0 0);
  animation: cta-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* soft sheen sweeping across the button */
.header-cta::after,
.btn--lg::after,
.btn-inquire-bundle::after,
.modal-content .btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,238,200,0.28) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: cta-sheen 5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* primary buttons: warm gold tint inside */
.btn--primary.btn--lg,
.btn-inquire-bundle,
.modal-content .btn--primary,
.header-cta {
  background:
    linear-gradient(180deg, rgba(212,175,122,0.22), rgba(60,42,18,0.45));
  color: #fff6e6;
}

.btn--lg:hover,
.btn-inquire-bundle:hover,
.header-cta:hover,
.modal-content .btn--primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 34px rgba(240,207,154,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn--lg:hover::before,
.btn-inquire-bundle:hover::before,
.header-cta:hover::before { animation-duration: 1.6s; }

.btn--lg:active,
.btn-inquire-bundle:active { transform: translateY(-1px) scale(0.99); }

.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
}

/* arrow that nudges on hover */
.btn .arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
  animation: cta-arrow 1.8s ease-in-out infinite;
}
.btn:hover .arrow { transform: translateX(6px); animation: none; }

/* ripple + label above effects */
.btn > span:not(.arrow) { z-index: 1; }

/* big call-to-action rows */
.cta-row { display: flex; justify-content: center; margin-top: 44px; }

/* contact e-mail as a pill with shimmer underline */
.contact-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ---------- 3. Keyframes ---------- */
@keyframes cta-spin  { to { --angle: 360deg; } }
@keyframes cta-sheen {
  0%, 55%  { transform: translateX(-160%) skewX(-18deg); }
  100%     { transform: translateX(380%)  skewX(-18deg); }
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(212,175,122,0.18), inset 0 1px 0 rgba(255,255,255,0.12); }
  50%      { box-shadow: 0 0 30px rgba(240,207,154,0.42), inset 0 1px 0 rgba(255,255,255,0.18); }
}
@keyframes cta-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* browsers without @property: static gold ring instead of rotation */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .btn--lg::before, .header-cta::before, .btn-inquire-bundle::before { background: var(--gold); }
}

@media (prefers-reduced-motion: reduce) {
  .header-cta, .btn--lg, .btn-inquire-bundle, .modal-content .btn--primary,
  .header-cta::before, .btn--lg::before, .btn-inquire-bundle::before, .modal-content .btn--primary::before,
  .header-cta::after, .btn--lg::after, .btn-inquire-bundle::after, .modal-content .btn--primary::after,
  .btn .arrow, .shine-text { animation: none !important; }
}