/* RAJAGACOR — modern casino, elegant cyberpunk.
   Visual layer only. Layout, links, and behavior stay intact. */

:root {
  --cp-void: #070512;
  --cp-ink: #100b1e;
  --cp-panel: rgba(16, 12, 32, 0.82);
  --cp-panel-2: rgba(22, 16, 44, 0.92);
  --cp-text: #f6f3ff;
  --cp-muted: #c4bddf;
  --cp-dim: #9b93b8;
  --cp-cyan: #3df0ff;
  --cp-cyan-deep: #0891b2;
  --cp-magenta: #ff2f9a;
  --cp-magenta-deep: #be185d;
  --cp-violet: #8b5cf6;
  --cp-gold: #f5c56b;
  --cp-line: rgba(61, 240, 255, 0.38);
  --cp-line-hot: rgba(255, 47, 154, 0.45);
}

html,
body#teepublic {
  background-color: var(--cp-void) !important;
  background-image:
    linear-gradient(rgba(61, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 240, 255, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse 70% 42% at 8% -8%, rgba(255, 47, 154, 0.22), transparent 52%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(61, 240, 255, 0.16), transparent 48%),
    radial-gradient(ellipse 50% 36% at 50% 110%, rgba(139, 92, 246, 0.2), transparent 55%),
    linear-gradient(180deg, #090616 0%, #070512 42%, #05030e 100%) !important;
  background-size: 56px 56px, 56px 56px, auto, auto, auto, auto !important;
  background-attachment: fixed !important;
  color: var(--cp-text);
}

body#teepublic {
  padding-bottom: 118px !important;
}

/* ── Header & search ── */
#teepublic .vc-header {
  background: rgba(8, 6, 18, 0.9) !important;
  border-bottom: 1px solid var(--cp-line) !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 47, 154, 0.35) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#teepublic .m-header__search-field,
#teepublic .m-header__search-field-container,
#teepublic .m-header__search {
  background: transparent !important;
}

#teepublic .m-header__search,
#teepublic .m-header__search-field-container,
#teepublic .input-group {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

#teepublic .m-header__search-field {
  background: rgba(9, 7, 20, 0.92) !important;
  color: var(--cp-text) !important;
  border: 1px solid rgba(61, 240, 255, 0.45) !important;
  border-right: 0 !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

#teepublic .m-header__search-field-placeholder,
#teepublic .m-header__search-field-placeholder p {
  color: #8f87ad !important;
}

#teepublic .m-header__search-submit {
  background: linear-gradient(180deg, #67f6ff, var(--cp-cyan-deep)) !important;
  border: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 0 0 16px rgba(61, 240, 255, 0.35) !important;
}

#teepublic .m-header__search-close-button,
#teepublic .vc-header .teepublicon {
  color: var(--cp-cyan) !important;
}

/* ── Category strip ── */
#teepublic .m-explore-nav,
#teepublic .m-tab-nav,
#teepublic .m-explore-nav__container,
#teepublic .m-explore-nav__tab-content,
#teepublic .m-tab-nav__content,
#teepublic .m-tab-nav__tab-content {
  background: rgba(8, 6, 18, 0.72) !important;
  color: var(--cp-text) !important;
  border-color: rgba(61, 240, 255, 0.16) !important;
}

#teepublic .m-tab-nav__list {
  border-bottom: 1px solid rgba(61, 240, 255, 0.2) !important;
}

#teepublic .m-explore-nav a,
#teepublic .m-tab-nav a,
#teepublic .m-tab-nav__item a {
  color: #d7f9ff !important;
}

#teepublic .m-tab-nav__item a {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

#teepublic .m-explore-nav a:hover,
#teepublic .m-tab-nav a:hover {
  color: var(--cp-magenta) !important;
}

/* ── Product stage ── */
#teepublic .m-design,
#teepublic .m-design__content,
#teepublic .m-design__product,
#teepublic .m-design__options,
#teepublic .m-design__ratings,
#teepublic .m-design-product-info,
#teepublic .m-design-product-info-and-faqs,
#teepublic .m-design-product-info--product-quality,
#teepublic .m-design__additional-info,
#teepublic .m-design__additional-info-container,
#teepublic .m-product-options__social,
#teepublic .cqd-banner,
#teepublic .cqd-banner__container,
#teepublic .section-container,
#teepublic .section-container-gray-bg {
  background: transparent !important;
  color: var(--cp-text) !important;
}

#teepublic .m-design-details__title h1,
#teepublic .m-design-product-info h4,
#teepublic .m-design__ratings-heading,
#teepublic .m-product-options__social-title {
  color: var(--cp-text) !important;
  letter-spacing: 0.03em;
  text-shadow: 0 0 22px rgba(255, 47, 154, 0.28);
}

#teepublic .m-design__price,
#teepublic .m-design__price--sale {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 14px rgba(61, 240, 255, 0.45);
}

#teepublic .m-design__price--regular {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 12px rgba(245, 197, 107, 0.35);
}

#teepublic .m-design__preview {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 47, 154, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(18, 12, 36, 0.9), rgba(8, 6, 18, 0.75)) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(255, 47, 154, 0.18),
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(61, 240, 255, 0.12) !important;
}

#teepublic .m-cart-config__color-name,
#teepublic .m-cart-config__color-label,
#teepublic .m-design__ratings-service-name,
#teepublic .m-design__ratings-details,
#teepublic .m-design-product-info p,
#teepublic .tp-text-note,
#teepublic .tp-text-note__text {
  color: var(--cp-muted) !important;
}

#teepublic .m-design__ratings-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

#teepublic .m-design__ratings-service {
  background: var(--cp-panel) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 16px 18px !important;
}

#teepublic .m-design__ratings-heading {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
}

#teepublic .tp-text-note--on-light,
#teepublic .tp-text-note--information {
  background: linear-gradient(135deg, rgba(255, 47, 154, 0.16), rgba(61, 240, 255, 0.08)) !important;
  border: 1px solid var(--cp-line-hot) !important;
  border-radius: 14px !important;
  color: var(--cp-text) !important;
}

#teepublic .tp-text-note .strong,
#teepublic .tp-text-note__text .strong {
  color: var(--cp-gold) !important;
}

#teepublic .glide__arrow,
#teepublic .tp-favorite-button {
  background: rgba(10, 8, 22, 0.82) !important;
  color: var(--cp-cyan) !important;
  border: 1px solid rgba(61, 240, 255, 0.4) !important;
  box-shadow: 0 0 14px rgba(61, 240, 255, 0.2) !important;
}

/* ── Login / Daftar ── */
#teepublic .ruby-access-btn {
  border-radius: 16px !important;
  letter-spacing: 0.16em !important;
  font-weight: 800;
}

#teepublic .ruby-access-btn.ruby-access-login {
  color: #041318 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.45), transparent 42%),
    linear-gradient(180deg, #d8fbff 0%, #3df0ff 42%, #0891b2 100%) !important;
  border-color: #e7fdff !important;
  border-bottom-color: #066070 !important;
  box-shadow:
    0 5px 0 #05586a,
    0 12px 24px rgba(8, 145, 178, 0.35),
    0 0 22px rgba(61, 240, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  text-shadow: none !important;
}

#teepublic .ruby-access-btn.ruby-access-login:hover {
  border-color: #ffffff !important;
  box-shadow:
    0 7px 0 #05586a,
    0 16px 28px rgba(8, 145, 178, 0.45),
    0 0 28px rgba(61, 240, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

#teepublic .ruby-access-btn.ruby-access-register {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(180deg, #ff8ec4 0%, #ff2f9a 46%, #9d174d 100%) !important;
  border-color: #ffd0e6 !important;
  border-bottom-color: #6b1038 !important;
  box-shadow:
    0 5px 0 #6b1038,
    0 12px 24px rgba(190, 24, 93, 0.38),
    0 0 22px rgba(255, 47, 154, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 2px 6px rgba(60, 0, 30, 0.35) !important;
}

#teepublic .ruby-access-btn.ruby-access-register:hover {
  border-color: #fff !important;
  box-shadow:
    0 7px 0 #6b1038,
    0 16px 28px rgba(190, 24, 93, 0.5),
    0 0 30px rgba(255, 47, 154, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

#teepublic .btn-x {
  color: #1a0a12 !important;
  background: linear-gradient(180deg, #ffe7a3 0%, #f5c56b 48%, #c4892a 100%) !important;
  border-color: #f8e2a8 !important;
  box-shadow:
    0 0 18px rgba(245, 197, 107, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

#teepublic .btn-x:hover {
  color: #1a0a12 !important;
  background: linear-gradient(180deg, #fff4cf 0%, #ffd98a 100%) !important;
  box-shadow: 0 8px 24px rgba(245, 197, 107, 0.45) !important;
}

/* ── Spec card ── */
#teepublic .ruby-spec-card {
  background: linear-gradient(160deg, rgba(18, 12, 36, 0.96), rgba(10, 8, 22, 0.94)) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(139, 92, 246, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#teepublic .ruby-spec-card::before {
  background:
    radial-gradient(circle at var(--rs-x, 50%) 0, rgba(255, 47, 154, 0.16), transparent 36%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(61, 240, 255, 0.03) 18px 19px) !important;
}

#teepublic .ruby-spec-title,
#teepublic .mx-section-heading,
#teepublic .app-header {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 0, rgba(61, 240, 255, 0.22), transparent 46%),
    linear-gradient(120deg, #3b0764 0%, #12081f 48%, #083344 100%) !important;
  border-color: rgba(61, 240, 255, 0.4) !important;
  border-bottom-color: rgba(255, 47, 154, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

#teepublic .ruby-spec-title::before,
#teepublic .mx-section-heading::before {
  background: linear-gradient(90deg, transparent, var(--cp-cyan), #fff, var(--cp-magenta), transparent) !important;
  filter: drop-shadow(0 0 6px var(--cp-cyan));
}

#teepublic .ruby-spec-title::after,
#teepublic .mx-section-heading::after {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 12px rgba(61, 240, 255, 0.8) !important;
}

#teepublic .ruby-spec-row {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom-color: rgba(61, 240, 255, 0.1) !important;
}

#teepublic .ruby-spec-row:hover {
  background: linear-gradient(90deg, rgba(255, 47, 154, 0.12), rgba(61, 240, 255, 0.06)) !important;
  box-shadow: none !important;
}

#teepublic .ruby-spec-row::before {
  background: linear-gradient(var(--cp-cyan), var(--cp-magenta)) !important;
  box-shadow: 0 0 10px rgba(61, 240, 255, 0.55) !important;
}

#teepublic .ruby-spec-key {
  color: var(--cp-cyan) !important;
}

#teepublic .ruby-spec-key::before {
  background: linear-gradient(145deg, var(--cp-cyan), var(--cp-violet)) !important;
  border-color: rgba(61, 240, 255, 0.5) !important;
  box-shadow: 0 0 8px rgba(61, 240, 255, 0.45) !important;
}

#teepublic .ruby-spec-data {
  color: var(--cp-muted) !important;
}

#teepublic .ruby-spec-data strong,
#teepublic .ruby-spec-score {
  color: #1a0a12 !important;
  background: linear-gradient(145deg, #ffd0e8, var(--cp-magenta) 55%, #7c1d4e) !important;
  border-color: rgba(255, 208, 232, 0.7) !important;
  box-shadow: 0 0 12px rgba(255, 47, 154, 0.35) !important;
}

#teepublic .ruby-spec-rating,
#teepublic .ruby-spec-rating::before {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 8px rgba(245, 197, 107, 0.45);
}

/* ── Article, reviews, FAQ ── */
#teepublic .mx-article-panel,
#teepublic .mx-review-card,
#teepublic .mx-faq-item {
  background: linear-gradient(160deg, rgba(20, 14, 40, 0.94), rgba(10, 8, 22, 0.92)) !important;
  border: 1px solid rgba(139, 92, 246, 0.32) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#teepublic .mx-article-panel::before {
  background:
    radial-gradient(circle at 0 0, rgba(61, 240, 255, 0.08), transparent 32%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 47, 154, 0.03) 18px 19px) !important;
}

#teepublic .mx-article-content,
#teepublic .mx-article-content p,
#teepublic .mx-review-text,
#teepublic .mx-faq-answer p {
  color: var(--cp-muted) !important;
}

#teepublic .mx-article-content h1,
#teepublic .mx-review-name,
#teepublic .mx-faq-question {
  color: var(--cp-text) !important;
}

#teepublic .mx-article-content h2,
#teepublic .mx-article-content h3,
#teepublic .mx-article-content h4,
#teepublic .mx-article-content a {
  color: var(--cp-cyan) !important;
  border-bottom-color: rgba(61, 240, 255, 0.35) !important;
}

#teepublic .mx-article-content a:hover {
  color: var(--cp-magenta) !important;
  border-bottom-color: var(--cp-magenta) !important;
}

#teepublic .mx-review-card::before,
#teepublic .mx-faq-item::before {
  background: linear-gradient(var(--cp-magenta), var(--cp-cyan)) !important;
  box-shadow: 0 0 12px rgba(255, 47, 154, 0.45) !important;
}

#teepublic .mx-review-card::after {
  color: var(--cp-gold) !important;
  text-shadow: 0 0 8px rgba(245, 197, 107, 0.55);
}

#teepublic .mx-review-card:hover,
#teepublic .mx-faq-item:hover {
  border-color: rgba(61, 240, 255, 0.55) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(61, 240, 255, 0.12) !important;
}

#teepublic .mx-review-name::before {
  background: linear-gradient(145deg, var(--cp-cyan), var(--cp-magenta)) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 8px rgba(61, 240, 255, 0.4) !important;
}

#teepublic .mx-faq-question::before {
  color: #041318 !important;
  background: linear-gradient(145deg, #d8fbff, var(--cp-cyan)) !important;
  box-shadow: 0 0 12px rgba(61, 240, 255, 0.4) !important;
}

#teepublic .mx-faq-answer::before {
  color: var(--cp-magenta) !important;
  background: rgba(255, 47, 154, 0.1) !important;
  border-color: rgba(255, 47, 154, 0.4) !important;
}

/* ── Info table & legacy reviews ── */
#teepublic .app-card {
  background: rgba(12, 9, 24, 0.94) !important;
  border: 1px solid rgba(61, 240, 255, 0.32) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(139, 92, 246, 0.12) !important;
}

#teepublic .app-card:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4), 0 0 26px rgba(61, 240, 255, 0.16) !important;
}

#teepublic .app-table th {
  background: rgba(61, 240, 255, 0.08) !important;
  color: var(--cp-cyan) !important;
  border-bottom-color: rgba(61, 240, 255, 0.25) !important;
}

#teepublic .app-table td {
  color: var(--cp-muted) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
}

#teepublic .review-card {
  background: rgba(14, 10, 28, 0.92) !important;
  border-left-color: var(--cp-magenta) !important;
  border-top-color: rgba(139, 92, 246, 0.28) !important;
  border-right-color: rgba(139, 92, 246, 0.28) !important;
  border-bottom-color: rgba(139, 92, 246, 0.28) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

#teepublic .review-card:hover {
  background: rgba(22, 14, 42, 0.96) !important;
  box-shadow: 0 14px 30px rgba(255, 47, 154, 0.16) !important;
}

#teepublic .review-author,
#teepublic .review-card p {
  color: var(--cp-text) !important;
}

#teepublic .review-card p {
  color: var(--cp-muted) !important;
}

#teepublic .review-author::before {
  filter: none !important;
}

#teepublic .review-rating {
  color: var(--cp-gold) !important;
}

#teepublic .stars {
  --star-empty: rgba(255, 255, 255, 0.18);
  --star-fill: var(--cp-gold);
}

#teepublic .badge small {
  color: var(--cp-dim) !important;
}

/* ── Fixed vault nav ── */
#teepublic .ruby-vault-nav {
  background:
    radial-gradient(circle at var(--rv-x, 50%) 0, rgba(61, 240, 255, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(18, 10, 36, 0.96), rgba(6, 4, 16, 0.98) 50%, rgba(8, 24, 36, 0.96)) !important;
  border-color: rgba(61, 240, 255, 0.38) !important;
  border-bottom-color: rgba(255, 47, 154, 0.55) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(255, 47, 154, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#teepublic .ruby-vault-nav::after {
  background: linear-gradient(90deg, transparent, var(--cp-cyan), #fff, var(--cp-magenta), transparent) !important;
  filter: drop-shadow(0 0 8px var(--cp-cyan));
}

#teepublic .ruby-vault-item {
  color: #b7afd4 !important;
}

#teepublic .ruby-vault-item:hover {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(61, 240, 255, 0.14), rgba(255, 47, 154, 0.08)) !important;
  border-color: rgba(61, 240, 255, 0.28) !important;
}

#teepublic .ruby-vault-icon {
  color: var(--cp-cyan) !important;
  background: linear-gradient(145deg, rgba(61, 240, 255, 0.16), rgba(18, 10, 32, 0.7)) !important;
  border-color: rgba(61, 240, 255, 0.35) !important;
}

#teepublic .ruby-vault-item:hover .ruby-vault-icon {
  color: #041318 !important;
  background: linear-gradient(145deg, #d8fbff, var(--cp-cyan)) !important;
  box-shadow: 0 0 16px rgba(61, 240, 255, 0.55) !important;
}

#teepublic .ruby-vault-core {
  color: #fff !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.28), transparent 32%),
    linear-gradient(145deg, #ff8ec4 0%, #ff2f9a 48%, #7a1248 100%) !important;
  border-color: #ffd0e6 !important;
  border-bottom-color: #6b1038 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(255, 47, 154, 0.45) !important;
}

#teepublic .ruby-vault-core:hover {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(145deg, #ffb3d6, #ff2f9a 50%, #9d174d) !important;
  border-color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 14px 26px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(255, 47, 154, 0.6) !important;
}

#teepublic .ruby-vault-core .ruby-vault-icon {
  color: #fff !important;
  background: rgba(40, 0, 24, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

#teepublic .ruby-vault-core:hover .ruby-vault-icon {
  color: #fff !important;
  background: rgba(40, 0, 24, 0.28) !important;
}

@media (max-width: 640px) {
  #teepublic .app-table th {
    background: rgba(61, 240, 255, 0.1) !important;
  }
}

/* ── Cool motion layer ── */
@keyframes cpAurora {
  0%,
  100% {
    background-position: 0 0, 0 0, 8% -8%, 100% 0%, 50% 110%, 0 0;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 28px 14px, -20px 20px, 18% 4%, 88% 8%, 42% 100%, 0 0;
    filter: hue-rotate(12deg);
  }
}

@keyframes cpOrbDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }
  33% {
    transform: translate3d(4vw, -3vh, 0) scale(1.12);
    opacity: 0.85;
  }
  66% {
    transform: translate3d(-5vw, 2vh, 0) scale(0.92);
    opacity: 0.65;
  }
}

@keyframes cpLogoNeon {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(61, 240, 255, 0.35))
      drop-shadow(0 0 18px rgba(255, 47, 154, 0.25));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(61, 240, 255, 0.75))
      drop-shadow(0 0 32px rgba(255, 47, 154, 0.55))
      drop-shadow(0 0 48px rgba(245, 197, 107, 0.25));
    transform: translateY(-2px);
  }
}

@keyframes cpBannerPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 47, 154, 0.18),
      0 20px 50px rgba(0, 0, 0, 0.35),
      0 0 32px rgba(61, 240, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(61, 240, 255, 0.45),
      0 24px 56px rgba(0, 0, 0, 0.4),
      0 0 48px rgba(255, 47, 154, 0.35),
      0 0 72px rgba(61, 240, 255, 0.22);
  }
}

@keyframes cpBannerFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.012);
  }
}

@keyframes cpCtaPulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

@keyframes cpTitleShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes cpScanSweep {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    transform: translateY(220%);
    opacity: 0;
  }
}

html body#teepublic {
  animation: cpAurora 18s ease-in-out infinite;
}

body#teepublic::before,
body#teepublic::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(48px);
  animation: cpOrbDrift 14s ease-in-out infinite;
}

body#teepublic::before {
  top: 12%;
  left: -6%;
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  background: radial-gradient(circle, rgba(255, 47, 154, 0.28), transparent 68%);
}

body#teepublic::after {
  right: -4%;
  bottom: 18%;
  width: min(48vw, 480px);
  height: min(48vw, 480px);
  background: radial-gradient(circle, rgba(61, 240, 255, 0.22), transparent 68%);
  animation-delay: -7s;
  animation-duration: 17s;
}

#teepublic .vc-header,
#teepublic .main-wrapper,
#teepublic .ruby-access-section,
#teepublic .ruby-vault-nav {
  position: relative;
  z-index: 1;
}

#teepublic .header-mini__logo img,
#teepublic .vc-header-logo__image {
  animation: cpLogoNeon 3.6s ease-in-out infinite;
  will-change: filter, transform;
}

#teepublic .m-design__preview {
  animation: cpBannerPulse 4.8s ease-in-out infinite;
  overflow: hidden;
}

#teepublic .m-design__preview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(61, 240, 255, 0.12),
    transparent
  );
  animation: cpScanSweep 5.5s ease-in-out infinite;
}

#teepublic .m-design__preview img,
#teepublic .m-design__preview picture,
#teepublic .m-design__preview .jsDesignMock {
  animation: cpBannerFloat 5.2s ease-in-out infinite;
  will-change: transform;
}

#teepublic .ruby-access-btn.ruby-access-login,
#teepublic .ruby-access-btn.ruby-access-register {
  animation: cpCtaPulse 2.4s ease-in-out infinite;
}

#teepublic .ruby-access-btn.ruby-access-register {
  animation-delay: 0.35s;
}

#teepublic .m-design-details__title h1 {
  background: linear-gradient(
    105deg,
    #f6f3ff 0%,
    var(--cp-cyan) 28%,
    #fff 50%,
    var(--cp-magenta) 72%,
    #f6f3ff 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: cpTitleShimmer 6s ease-in-out infinite;
  text-shadow: none !important;
}

#teepublic .ruby-access-btn::after {
  animation: none;
}

#teepublic .ruby-access-btn:not(:hover)::after {
  left: -55%;
  animation: cpBtnShine 3.8s ease-in-out infinite;
}

@keyframes cpBtnShine {
  0%,
  55% {
    left: -55%;
  }
  85%,
  100% {
    left: 125%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body#teepublic,
  body#teepublic::before,
  body#teepublic::after,
  #teepublic .header-mini__logo img,
  #teepublic .vc-header-logo__image,
  #teepublic .m-design__preview,
  #teepublic .m-design__preview::after,
  #teepublic .m-design__preview img,
  #teepublic .m-design__preview picture,
  #teepublic .m-design__preview .jsDesignMock,
  #teepublic .ruby-access-btn.ruby-access-login,
  #teepublic .ruby-access-btn.ruby-access-register,
  #teepublic .m-design-details__title h1,
  #teepublic .ruby-access-btn:not(:hover)::after {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}