/* Canasta Lessons — page loader (theme: site primary + accent) */
.canasta-page-loader {
  --bg:       #080517;
  --bg2:      #120a20;
  --gold:     #d30606;
  --gold2:    #e83838;
  --gold3:    #ff8a8a;
  --cream:    #ffffff;
  --red:      #d30606;
  --red2:     #ff5555;
  --muted:    rgba(255, 255, 255, 0.45);
  --faint:    rgba(211, 6, 6, 0.12);

  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
}

.canasta-page-loader *,
.canasta-page-loader *::before,
.canasta-page-loader *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── NOISE ── */
.canasta-page-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
}

/* ── RADIAL GLOW ── */
.canasta-page-loader .glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(211, 6, 6, 0.22) 0%, rgba(211, 6, 6, 0.08) 50%, transparent 75%);
  animation: canasta-glow-breathe 5s ease-in-out infinite;
}

@keyframes canasta-glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* ── GRID ── */
.canasta-page-loader .grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(211, 6, 6, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 6, 6, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 20%, transparent 100%);
}

/* ── CORNER ORNAMENTS ── */
.canasta-page-loader .corner {
  position: absolute;
  z-index: 2;
  width: clamp(36px, 5.5vw, 60px);
  height: clamp(36px, 5.5vw, 60px);
  opacity: 0;
  animation: canasta-corner-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.canasta-page-loader .corner::before,
.canasta-page-loader .corner::after {
  content: '';
  position: absolute;
  background: var(--gold);
}

.canasta-page-loader .corner::before {
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.canasta-page-loader .corner::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
}

.canasta-page-loader .corner.tl { top: clamp(14px, 2.5vw, 28px); left: clamp(14px, 2.5vw, 28px); }
.canasta-page-loader .corner.tr { top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px); transform: scaleX(-1); }
.canasta-page-loader .corner.bl { bottom: clamp(14px, 2.5vw, 28px); left: clamp(14px, 2.5vw, 28px); transform: scaleY(-1); }
.canasta-page-loader .corner.br { bottom: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px); transform: scale(-1, -1); }

@keyframes canasta-corner-in {
  from { opacity: 0; width: 0; height: 0; }
  to { opacity: 0.55; width: clamp(36px, 5.5vw, 60px); height: clamp(36px, 5.5vw, 60px); }
}

/* ── FLOATING CARDS ── */
.canasta-page-loader .float-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.canasta-page-loader .card-chip {
  position: absolute;
  opacity: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 3.5vw, 34px);
  animation: canasta-card-float linear infinite;
}

@keyframes canasta-card-float {
  0% { transform: translateY(0) rotate(var(--rot)) scale(0.7); opacity: 0; }
  12% { opacity: 0.18; }
  88% { opacity: 0.12; }
  100% { transform: translateY(-110vh) rotate(calc(var(--rot) + 20deg)) scale(1); opacity: 0; }
}

/* ── MAIN LOADER ── */
.canasta-page-loader #loader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.canasta-page-loader .logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  opacity: 0;
  animation: canasta-rise 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes canasta-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.canasta-page-loader .ring-wrap {
  position: relative;
  width: clamp(120px, 20vw, 170px);
  height: clamp(120px, 20vw, 170px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.canasta-page-loader .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
}

.canasta-page-loader .ring-1 {
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  animation: canasta-spin 2.8s linear infinite;
}

.canasta-page-loader .ring-2 {
  inset: 15px;
  border: 1px solid transparent;
  border-bottom-color: var(--gold2);
  border-left-color: var(--gold2);
  animation: canasta-spin 2s linear infinite reverse;
}

.canasta-page-loader .ring-3 {
  inset: 30px;
  border: 1px solid transparent;
  border-top-color: var(--gold3);
  animation: canasta-spin 1.4s linear infinite;
  opacity: 0.5;
}

@keyframes canasta-spin {
  to { transform: rotate(360deg); }
}

.canasta-page-loader .logo-disc {
	position: relative;
	z-index: 2;
	width: clamp(74px, 12vw, 106px);
	height: clamp(74px, 12vw, 106px);
	border-radius: 50%;
	background: var(--bg2);
	border: 1.5px solid rgba(211, 6, 6, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	animation: canasta-disc-glow 3.5s ease-in-out infinite;
	overflow: hidden;
}

.canasta-page-loader .logo-disc-img {
	display: block;
	width: clamp(44px, 8vw, 62px);
	height: auto;
	max-height: 62px;
	object-fit: contain;
}

@keyframes canasta-disc-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(211, 6, 6, 0.25); }
  50% { box-shadow: 0 0 40px rgba(211, 6, 6, 0.55), 0 0 60px rgba(211, 6, 6, 0.2); }
}

.canasta-page-loader .suits-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.canasta-page-loader .suit {
  font-size: clamp(13px, 2.2vw, 18px);
  line-height: 1;
  animation: canasta-suit-beat 2.4s ease-in-out infinite;
}

.canasta-page-loader .suit.red-s { color: var(--red2); }
.canasta-page-loader .suit.black-s { color: var(--cream); }
.canasta-page-loader .suit:nth-child(1) { animation-delay: 0s; }
.canasta-page-loader .suit:nth-child(2) { animation-delay: 0.3s; }
.canasta-page-loader .suit:nth-child(3) { animation-delay: 0.6s; }
.canasta-page-loader .suit:nth-child(4) { animation-delay: 0.9s; }

@keyframes canasta-suit-beat {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

.canasta-page-loader .disc-letter {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 700;
  color: var(--gold2);
  line-height: 1;
  letter-spacing: -0.5px;
  margin-top: 2px;
}

.canasta-page-loader .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 16px;
}

.canasta-page-loader .brand-main {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(20px, 4.5vw, 42px);
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: clamp(1px, 0.5vw, 3px);
}

.canasta-page-loader .brand-sub {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: clamp(11px, 1.6vw, 14px);
  color: var(--gold2);
  letter-spacing: clamp(3px, 0.8vw, 7px);
  text-transform: uppercase;
}

.canasta-page-loader .ornament-line {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: canasta-rise 1s ease 0.9s forwards;
  margin-top: 10px;
}

.canasta-page-loader .ornament-line .line {
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.canasta-page-loader .ornament-line .diamond {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

.canasta-page-loader .progress-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: canasta-rise 1s ease 1.1s forwards;
  margin-top: clamp(28px, 4vw, 44px);
}

.canasta-page-loader .progress-track {
  width: clamp(180px, 32vw, 300px);
  height: 2px;
  background: rgba(211, 6, 6, 0.14);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.canasta-page-loader .progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--gold3));
  border-radius: 99px;
  animation: canasta-fill-prog 3.8s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
  position: relative;
}

.canasta-page-loader .progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55));
  animation: canasta-shimmer 1.4s ease-in-out infinite;
}

@keyframes canasta-fill-prog {
  0% { width: 0%; }
  35% { width: 48%; }
  65% { width: 75%; }
  85% { width: 90%; }
  100% { width: 100%; }
}

@keyframes canasta-shimmer {
  from { transform: translateX(-60px); opacity: 0; }
  50% { opacity: 1; }
  to { transform: translateX(30px); opacity: 0; }
}

.canasta-page-loader .dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.canasta-page-loader .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  animation: canasta-dot-blink 1.8s ease-in-out infinite;
}

.canasta-page-loader .dot:nth-child(2) { animation-delay: 0.28s; }
.canasta-page-loader .dot:nth-child(3) { animation-delay: 0.56s; }

@keyframes canasta-dot-blink {
  0%, 100% { opacity: 0.22; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.55); }
}

.canasta-page-loader .status {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0;
  animation: canasta-rise 0.8s ease 1.4s forwards;
}

.canasta-page-loader .status span {
  display: inline-block;
  animation: canasta-status-cycle 4s ease-in-out infinite 1.4s;
}

@keyframes canasta-status-cycle {
  0% { opacity: 1; }
  45% { opacity: 1; }
  55% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}

.canasta-page-loader #loader.done {
  animation: canasta-fade-out 0.9s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

.canasta-page-loader.is-hidden {
  animation: canasta-fade-out 0.9s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

@keyframes canasta-fade-out {
  to { opacity: 0; visibility: hidden; }
}

body.canasta-loading {
  overflow: hidden;
}

@media screen and (max-width: 767px) {

  .canasta-page-loader .logo-disc-img {
    width: clamp(34px, 8vw, 62px);

    max-height: 60px;

  }
  
}