.loading-experience {
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.56s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.56s;
}

.loading-experience.hidden {
  display: none;
}

.loading-experience.active {
  opacity: 1;
  visibility: visible;
}

.loading-experience.le-fade-out {
  opacity: 0;
  visibility: hidden;
}

.le-background {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 18%, rgba(255, 238, 221, 0.72), transparent 40%),
              radial-gradient(circle at 80% 26%, rgba(245, 206, 201, 0.72), transparent 46%),
              radial-gradient(circle at 52% 88%, rgba(210, 178, 165, 0.52), transparent 45%),
              linear-gradient(145deg, #f6ede3 0%, #efdfd0 42%, #ead3be 100%);
  animation: leGradientBreath 9s ease-in-out infinite;
}

.loading-experience[data-context="dashboard"] .le-background {
  background: radial-gradient(circle at 20% 25%, rgba(255, 223, 204, 0.62), transparent 45%),
              radial-gradient(circle at 78% 20%, rgba(229, 189, 176, 0.66), transparent 45%),
              radial-gradient(circle at 48% 84%, rgba(196, 170, 141, 0.45), transparent 44%),
              linear-gradient(145deg, #f4e8db 0%, #ead8c6 46%, #e5c8b0 100%);
}

.loading-experience[data-context="onboardingComplete"] .le-background {
  background: radial-gradient(circle at 22% 20%, rgba(254, 225, 215, 0.68), transparent 43%),
              radial-gradient(circle at 80% 26%, rgba(244, 193, 177, 0.64), transparent 48%),
              radial-gradient(circle at 54% 84%, rgba(209, 170, 151, 0.52), transparent 45%),
              linear-gradient(145deg, #f7ebdf 0%, #edd8c8 46%, #e5c3ac 100%);
}

.le-grain {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(85, 60, 44, 0.12) 0.7px, transparent 0.7px);
  background-size: 3px 3px;
}

.le-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.le-animation-wrap {
  width: min(460px, 88vw);
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.le-message {
  max-width: min(660px, 90vw);
  animation: leTextIn 0.7s ease both;
}

.le-main {
  margin: 0 0 10px;
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(2rem, 4.3vw, 3.1rem);
  font-weight: 600;
  line-height: 1.15;
  color: #2d2421;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.le-sub {
  margin: 0;
  font-family: var(--font-sans, 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(65, 50, 43, 0.82);
  text-wrap: pretty;
}

.le-progress {
  width: min(360px, 80vw);
  margin-top: 22px;
}

.le-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(253, 249, 244, 0.5);
  border: 1px solid rgba(138, 102, 84, 0.15);
  overflow: hidden;
}

.le-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(214, 163, 142, 0.95), rgba(196, 132, 116, 0.95));
  box-shadow: 0 0 10px rgba(196, 132, 116, 0.35);
  transition: width 0.48s ease;
}

.le-progress-label {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(79, 62, 54, 0.8);
}

.le-progress.hidden {
  display: none;
}

/* Common animation frame */
.le-anim {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Breathing hearts */
.le-breathing-hearts {
  min-height: 165px;
}

.le-heart {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 3px 14px rgba(120, 53, 46, 0.28);
  background: linear-gradient(145deg, rgba(218, 157, 150, 0.95), rgba(187, 116, 101, 0.95));
  box-shadow: 0 12px 26px rgba(181, 115, 99, 0.28);
}

.le-heart-left {
  animation: leHeartLeft 4s ease-in-out infinite;
}

.le-heart-right {
  animation: leHeartRight 4s ease-in-out infinite;
}

.le-heart-link {
  width: min(190px, 34vw);
  height: 2px;
  margin: 0 12px;
  background-image: linear-gradient(to right, rgba(188, 120, 104, 0.1), rgba(188, 120, 104, 0.64), rgba(188, 120, 104, 0.1));
  background-size: 24px 2px;
  animation: leDashFlow 1.8s linear infinite;
}

/* Distance */
.le-distance {
  flex-direction: column;
  gap: 8px;
}

.le-distance-svg {
  width: min(420px, 84vw);
  height: 165px;
}

.le-distance-arc {
  fill: none;
  stroke: rgba(182, 124, 108, 0.78);
  stroke-width: 2;
  stroke-dasharray: 6 7;
  animation: leDashFlow 2.4s linear infinite;
}

.le-pin-dot {
  fill: rgba(182, 113, 97, 0.95);
}

.le-pin-pulse {
  fill: none;
  stroke: rgba(182, 113, 97, 0.44);
  stroke-width: 1.8;
  animation: lePinPulse 2.2s ease-out infinite;
  transform-origin: center;
}

.le-pin-pulse-delay {
  animation-delay: 0.4s;
}

.le-distance-caption {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(72, 55, 48, 0.74);
  letter-spacing: 0.01em;
}

/* Hourglass hearts */
.le-hourglass {
  min-height: 165px;
}

.le-hourglass-frame {
  position: relative;
  width: 112px;
  height: 140px;
  border: 3px solid rgba(170, 120, 104, 0.7);
  border-radius: 20px;
}

.le-hourglass-frame::before,
.le-hourglass-frame::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  background: rgba(170, 120, 104, 0.65);
}

.le-hourglass-frame::before { top: 10px; }
.le-hourglass-frame::after { bottom: 10px; }

.le-hourglass-sand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  background: rgba(241, 190, 174, 0.88);
  border-radius: 0 0 50px 50px;
}

.le-hourglass-sand.top {
  top: 22px;
  height: 30px;
  animation: leSandTop 3.4s ease-in-out infinite;
}

.le-hourglass-sand.bottom {
  bottom: 22px;
  height: 22px;
  border-radius: 50px 50px 10px 10px;
  animation: leSandBottom 3.4s ease-in-out infinite;
}

.le-heart-drop {
  position: absolute;
  left: 50%;
  top: 58px;
  font-size: 14px;
  color: rgba(177, 107, 91, 0.95);
  opacity: 0;
}

.le-heart-drop.d1 { animation: leHeartDrop 2.6s ease-in-out infinite; }
.le-heart-drop.d2 { animation: leHeartDrop 2.6s ease-in-out infinite 0.7s; }
.le-heart-drop.d3 { animation: leHeartDrop 2.6s ease-in-out infinite 1.4s; }

/* Constellation */
.le-constellation-svg {
  width: min(420px, 84vw);
  height: 168px;
}

.le-star {
  fill: rgba(182, 115, 96, 0.92);
  animation: leStarPulse 2.8s ease-in-out infinite;
}

.le-star:nth-child(2) { animation-delay: 0.22s; }
.le-star:nth-child(3) { animation-delay: 0.44s; }
.le-star:nth-child(4) { animation-delay: 0.65s; }
.le-star:nth-child(5) { animation-delay: 0.88s; }

.le-star-link {
  fill: none;
  stroke: rgba(172, 113, 98, 0.6);
  stroke-width: 2;
  stroke-dasharray: 8 9;
  animation: leDashFlow 3.1s linear infinite;
}

/* Paper airplane */
.le-airplane {
  min-height: 170px;
}

.le-airplane-svg {
  width: min(420px, 84vw);
  height: 165px;
}

.le-air-trail {
  fill: none;
  stroke: rgba(178, 118, 100, 0.55);
  stroke-width: 2;
  stroke-dasharray: 8 10;
  animation: leDashFlow 2.5s linear infinite;
}

.le-plane {
  position: absolute;
  top: 100px;
  left: 30px;
  font-size: 30px;
  color: rgba(168, 104, 88, 0.95);
  filter: drop-shadow(0 6px 10px rgba(120, 72, 60, 0.2));
  animation: lePlaneFly 3.6s ease-in-out infinite;
}

.le-cloud {
  position: absolute;
  width: 42px;
  height: 17px;
  border-radius: 999px;
  background: rgba(253, 249, 244, 0.52);
}

.le-cloud::before,
.le-cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.le-cloud::before {
  width: 16px;
  height: 16px;
  top: -7px;
  left: 5px;
}

.le-cloud::after {
  width: 20px;
  height: 20px;
  top: -9px;
  left: 16px;
}

.le-cloud.c1 { top: 38px; left: 76px; opacity: 0.75; }
.le-cloud.c2 { top: 74px; right: 84px; opacity: 0.6; }
.le-cloud.c3 { top: 118px; right: 120px; opacity: 0.5; }

/* Polaroids */
.le-polaroids {
  flex-direction: column;
  min-height: 166px;
}

.le-polaroid {
  position: absolute;
  width: 118px;
  height: 132px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(253, 249, 244, 0.95), rgba(248, 236, 225, 0.95));
  border: 1px solid rgba(193, 144, 124, 0.26);
  box-shadow: 0 10px 20px rgba(92, 65, 52, 0.16);
}

.le-polaroid::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 30px;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(240, 194, 177, 0.65), rgba(223, 164, 145, 0.65));
}

.le-polaroid.p1 {
  transform: translate(-58px, 0) rotate(-12deg);
  animation: lePolaroidFloat 3.4s ease-in-out infinite;
}

.le-polaroid.p2 {
  transform: translate(0, -10px) rotate(0deg);
  z-index: 2;
  animation: lePolaroidFloat 3.4s ease-in-out infinite 0.25s;
}

.le-polaroid.p3 {
  transform: translate(58px, 0) rotate(12deg);
  animation: lePolaroidFloat 3.4s ease-in-out infinite 0.5s;
}

.le-polaroid-caption {
  position: absolute;
  bottom: -4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(69, 51, 44, 0.72);
}

/* Rare: fireflies */
.le-fireflies {
  min-height: 168px;
}

.le-firefly {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 241, 184, 0.95);
  box-shadow: 0 0 12px rgba(255, 222, 131, 0.75);
}

.le-firefly.f1 { top: 50px; left: 96px; animation: leFirefly 4s ease-in-out infinite; }
.le-firefly.f2 { top: 90px; left: 140px; animation: leFirefly 4s ease-in-out infinite 0.4s; }
.le-firefly.f3 { top: 48px; left: 220px; animation: leFirefly 4s ease-in-out infinite 0.8s; }
.le-firefly.f4 { top: 102px; left: 266px; animation: leFirefly 4s ease-in-out infinite 1.2s; }
.le-firefly.f5 { top: 72px; left: 328px; animation: leFirefly 4s ease-in-out infinite 1.6s; }
.le-firefly.f6 { top: 120px; left: 192px; animation: leFirefly 4s ease-in-out infinite 2s; }

/* Generic fallback loader blocks still in HTML before JS boot */
.auth-loading,
.onboarding-page-loading {
  background: linear-gradient(145deg, #f7ebde 0%, #eedcc9 45%, #e5c7ad 100%) !important;
  color: #3c312d !important;
}

.auth-loading p,
.onboarding-page-loading p {
  color: rgba(60, 49, 45, 0.86) !important;
  font-weight: 700;
}

.auth-loading .loading-spinner,
.onboarding-page-loading .loading-spinner {
  border-color: rgba(253, 249, 244, 0.65) !important;
  border-top-color: #bb7e69 !important;
}

@keyframes leGradientBreath {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.07) brightness(1.02); }
}

@keyframes leTextIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes leHeartLeft {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(16px) scale(1.06); }
}

@keyframes leHeartRight {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(-16px) scale(1.06); }
}

@keyframes leDashFlow {
  to { stroke-dashoffset: -32; background-position-x: -24px; }
}

@keyframes lePinPulse {
  0% { r: 14; opacity: 0.44; }
  70% { r: 34; opacity: 0; }
  100% { r: 14; opacity: 0; }
}

@keyframes leSandTop {
  0%, 100% { height: 30px; opacity: 0.95; }
  50% { height: 14px; opacity: 0.82; }
}

@keyframes leSandBottom {
  0%, 100% { height: 22px; }
  50% { height: 36px; }
}

@keyframes leHeartDrop {
  0% { transform: translate(-50%, -16px) scale(0.7); opacity: 0; }
  20% { opacity: 0.95; }
  80% { opacity: 0.5; }
  100% { transform: translate(-50%, 52px) scale(1); opacity: 0; }
}

@keyframes leStarPulse {
  0%, 100% { opacity: 0.46; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes lePlaneFly {
  0% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(188px, -50px) rotate(3deg); }
  100% { transform: translate(330px, -88px) rotate(6deg); }
}

@keyframes lePolaroidFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}

.le-polaroid.p1 { --r: -12deg; }
.le-polaroid.p2 { --r: 0deg; }
.le-polaroid.p3 { --r: 12deg; }

@keyframes leFirefly {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  25% { transform: translate(8px, -14px); opacity: 1; }
  50% { transform: translate(-6px, -20px); opacity: 0.55; }
  75% { transform: translate(6px, -10px); opacity: 0.95; }
}

@media (max-width: 768px) {
  .le-animation-wrap {
    min-height: 152px;
    margin-bottom: 18px;
  }

  .le-main {
    font-size: clamp(1.72rem, 7vw, 2.3rem);
  }

  .le-sub {
    font-size: 1rem;
  }

  .le-heart {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .le-heart-link {
    width: min(132px, 30vw);
  }

  .le-polaroid {
    width: 96px;
    height: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-experience,
  .loading-experience * {
    animation: none !important;
    transition: none !important;
  }
}