.text-stroke {
    -webkit-text-stroke: 1px var(--pink-brand);
    color: transparent;
  }

  .rot-n15 { --rot: -15deg; }
  .rot-15 { --rot: 15deg; }
  .rot-n5 { --rot: -5deg; }
  .rot-10 { --rot: 10deg; }

  .merch-svg {
    filter: drop-shadow(0 15px 25px rgba(255, 20, 118, 0.25));
  }

  @keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes float-main {
    0%, 100% { transform: translateY(0) rotate(var(--base-rot, 0deg)); }
    50% { transform: translateY(-20px) rotate(calc(var(--base-rot, 0deg) + 5deg)); }
  }
  @keyframes pulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
  }
  @keyframes loading {
    0% { left: -40%; }
    100% { left: 100%; }
  }

  .glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(255, 20, 118, 0.06);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(255, 20, 118, 0.12);
    border-color: rgba(255, 20, 118, 0.25);
  }

  .loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 240, 245, 0.85);
    backdrop-filter: blur(16px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .loading-overlay.active {
    display: flex;
    animation: fadeUp 0.4s ease;
  }
  .loading-overlay .loading-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px;
    padding: 48px 56px;
    box-shadow: 0 30px 80px rgba(255, 20, 118, 0.15);
    text-align: center;
    max-width: 480px;
    width: 90%;
  }
  .loading-overlay .loading-icon {
    width: 80px; height: 80px;
    border: 4px solid rgba(255, 20, 118, 0.12);
    border-top-color: var(--pink-brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 28px;
  }
  .loading-overlay .loading-step-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .loading-overlay .step-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 20, 118, 0.15);
    transition: all 0.4s ease;
  }
  .loading-overlay .step-dot.active {
    background: var(--pink-brand);
    box-shadow: 0 0 12px rgba(255, 20, 118, 0.4);
    transform: scale(1.2);
  }
  .loading-overlay .step-dot.done {
    background: var(--pink-brand);
  }

  .loading-overlay .bear-scene {
    display: none;
  }

  .loading-visual-stage {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 260px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  .loading-tv {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(180px, 44vw);
    aspect-ratio: 4 / 3;
    transform: translate(-50%, -50%);
    border: 7px solid rgba(26, 5, 15, 0.82);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.75), rgba(255,240,245,0.54) 60%, rgba(255,20,118,0.05));
    box-shadow: 6px 6px 0 rgba(26, 5, 15, 0.08), 0 18px 48px rgba(255, 20, 118, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.44;
    z-index: 1;
  }

  .loading-tv::before,
  .loading-tv::after {
    content: '';
    position: absolute;
    top: -28px;
    width: 42px;
    height: 5px;
    background: rgba(26, 5, 15, 0.72);
    border-radius: 999px;
  }
  .loading-tv::before { left: 48px; transform: rotate(-28deg); }
  .loading-tv::after { right: 48px; transform: rotate(28deg); }

  .loading-tv-screen {
    position: absolute;
    inset: 16px;
    border-radius: 16px;
    border: 2px dashed rgba(255, 20, 118, 0.22);
    background: rgba(255,255,255,0.5);
  }

  .loading-tv-title {
    position: relative;
    z-index: 2;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    color: var(--pink-brand);
    letter-spacing: 0.04em;
  }

  .loading-thumb-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
  }

  .loading-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 78px;
    border-radius: 16px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 18px 34px rgba(26, 5, 15, 0.22), 5px 5px 0 rgba(255, 20, 118, 0.16);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    z-index: var(--z, 10);
    animation: thumbBurst 2.6s cubic-bezier(.2,.85,.2,1) infinite;
    animation-delay: var(--delay, 0s);
  }

  .loading-video {
    display: none;
    width: 100%;
    max-width: 340px;
    height: 220px;
    margin: 0 auto;
    border-radius: 24px;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: 0 24px 64px rgba(255, 20, 118, 0.2);
    object-fit: cover;
    box-sizing: border-box;
  }

  .loading-visual-stage.show-video .loading-tv,
  .loading-visual-stage.show-video .loading-thumb-burst {
    display: none;
  }
  .loading-visual-stage.show-video .loading-video.active {
    display: block;
  }

  @keyframes thumbBurst {
    0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
    12% { opacity: var(--o, 1); }
    62% {
      transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(var(--s, 1)) rotate(var(--r, 0deg));
      opacity: var(--o, 1);
    }
    100% {
      transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(0.88) rotate(var(--r, 0deg));
      opacity: 0;
    }
  }

  #landingPage {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  #landingPage.hiding {
    opacity: 0;
    transform: translateY(-30px);
    pointer-events: none;
  }
  @media (max-width: 768px) {
    .loading-overlay .loading-card { padding: 36px 28px; }
  }


   .bear-scene {
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
    position: relative;
  }

  .bear-character {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.7) translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
  }
  .bear-character.active {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  @keyframes b1Body {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-4px); }
  }
  @keyframes b1Mag {
    0%, 100% { transform: translate(0,0) rotate(-8deg); }
    30% { transform: translate(10px,-6px) rotate(4deg); }
    70% { transform: translate(-6px,-3px) rotate(-12deg); }
  }
  @keyframes b1EyeL {
    0%, 100% { cx: 82; }
    30% { cx: 79; }
    70% { cx: 85; }
  }
  @keyframes b1EyeR {
    0%, 100% { cx: 112; }
    30% { cx: 109; }
    70% { cx: 115; }
  }
  #bear0.active .b-body { animation: b1Body 2.5s ease-in-out infinite; transform-origin: center bottom; }
  #bear0.active .b-mag { animation: b1Mag 2.5s ease-in-out infinite; transform-origin: center; }
  #bear0.active .eye-l { animation: b1EyeL 2.5s ease-in-out infinite; }
  #bear0.active .eye-r { animation: b1EyeR 2.5s ease-in-out infinite; }

  @keyframes b2Munch {
    0%, 70%, 100% { d: path("M91 108 Q97 113 103 108"); }
    80% { d: path("M91 108 Q97 116 103 108"); }
  }
  @keyframes b2Eyes {
    0%, 40%, 44%, 100% { transform: scaleY(1); }
    42% { transform: scaleY(0.08); }
  }
  @keyframes b2Screen {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  @keyframes b2Pop {
    0%, 100% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(-14px); opacity: 1; }
    90% { transform: translateY(-20px); opacity: 0; }
  }
  #bear1.active .b-mouth { animation: b2Munch 2s ease-in-out infinite; }
  #bear1.active .b-eyes { animation: b2Eyes 3.5s ease-in-out infinite; transform-origin: center; }
  #bear1.active .b-screen { animation: b2Screen 1.8s ease-in-out infinite; }
  #bear1.active .pop1 { animation: b2Pop 1.4s ease-out infinite; }
  #bear1.active .pop2 { animation: b2Pop 1.4s ease-out infinite 0.3s; }
  #bear1.active .pop3 { animation: b2Pop 1.4s ease-out infinite 0.6s; }

  @keyframes b3Body {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  @keyframes b3Bulb {
    0%, 100% { transform: scale(0.85); opacity: 0.5; filter: brightness(0.9); }
    50% { transform: scale(1.1); opacity: 1; filter: brightness(1.2); }
  }
  @keyframes b3Bubble {
    0%, 100% { r: 3; opacity: 0.3; }
    50% { r: 4.5; opacity: 0.8; }
  }
  #bear2.active .b-body { animation: b3Body 2.5s ease-in-out infinite; transform-origin: center bottom; }
  #bear2.active .b-bulb { animation: b3Bulb 2s ease-in-out infinite; transform-origin: center bottom; }
  #bear2.active .bub1 { animation: b3Bubble 2s ease-in-out infinite; }
  #bear2.active .bub2 { animation: b3Bubble 2s ease-in-out infinite 0.4s; }
  #bear2.active .bub3 { animation: b3Bubble 2s ease-in-out infinite 0.8s; }

  @keyframes b4Body {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-4deg); }
    75% { transform: translateY(-8px) rotate(4deg); }
  }
  @keyframes b4Heart {
    0% { transform: translate(0, 0) scale(0.3) rotate(-10deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(var(--hx), var(--hy)) scale(0.7) rotate(var(--hr)); opacity: 0; }
  }
  #bear3.active .b-body { animation: b4Body 1.6s ease-in-out infinite; transform-origin: center bottom; }
  #bear3.active .h1 { --hx: -28px; --hy: -55px; --hr: -20deg; animation: b4Heart 2.2s ease-out infinite; }
  #bear3.active .h2 { --hx: 5px; --hy: -65px; --hr: 10deg; animation: b4Heart 2.2s ease-out infinite 0.4s; }
  #bear3.active .h3 { --hx: 25px; --hy: -50px; --hr: 15deg; animation: b4Heart 2.2s ease-out infinite 0.9s; }
  #bear3.active .h4 { --hx: -15px; --hy: -70px; --hr: -5deg; animation: b4Heart 2.2s ease-out infinite 1.4s; }

  @keyframes b5Pencil {
    0%, 100% { transform: rotate(-25deg) translate(0, 0); }
    25% { transform: rotate(-20deg) translate(6px, 3px); }
    50% { transform: rotate(-28deg) translate(12px, 0); }
    75% { transform: rotate(-22deg) translate(6px, -3px); }
  }
  @keyframes b5Line {
    0% { stroke-dashoffset: 80; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes b5Tongue {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1.5px); }
  }
  #bear4.active .b-pencil { animation: b5Pencil 1.2s ease-in-out infinite; transform-origin: 140px 155px; }
  #bear4.active .b-line { stroke-dasharray: 80; animation: b5Line 2.5s linear infinite; }
  #bear4.active .b-tongue { animation: b5Tongue 1.2s ease-in-out infinite; }

  @keyframes b6Body {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
  }
  @keyframes b6Sparkle {
    0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1) rotate(180deg); opacity: 1; }
  }
  @keyframes b6Card {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
  }
  #bear5.active .b-body { animation: b6Body 2s ease-in-out infinite; transform-origin: center bottom; }
  #bear5.active .sp1 { animation: b6Sparkle 1.6s ease-in-out infinite; }
  #bear5.active .sp2 { animation: b6Sparkle 1.6s ease-in-out infinite 0.3s; }
  #bear5.active .sp3 { animation: b6Sparkle 1.6s ease-in-out infinite 0.6s; }
  #bear5.active .sp4 { animation: b6Sparkle 1.6s ease-in-out infinite 0.9s; }
  #bear5.active .b-card { animation: b6Card 2s ease-in-out infinite; transform-origin: center bottom; }

  @keyframes bubblePop {
    0% { opacity: 0; transform: scale(0.8) translateY(6px); }
    40% { opacity: 1; transform: scale(1.03) translateY(0); }
    60% { transform: scale(0.98) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .bear-bubble { animation: bubblePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

  .loading-overlay .loading-card .bear-scene {
    display: none !important;
  }