*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(255,140,66,0.3), 0 0 60px rgba(255,105,180,0.15); }
  50% { box-shadow: 0 0 50px rgba(255,140,66,0.5), 0 0 90px rgba(255,105,180,0.25); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes moonGlow {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(255,215,0,0.4)); }
  50% { filter: drop-shadow(0 0 30px rgba(255,215,0,0.7)); }
}
@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
}
@keyframes bgShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes subtitleSparkle {
  0%, 100% { text-shadow: 0 0 5px rgba(255,215,0,0.3); }
  50% { text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,105,180,0.4); }
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: linear-gradient(135deg, #1A142B 0%, #2D1B3A 30%, #1a1035 60%, #0d0a1a 100%);
  background-size: 400% 400%;
  animation: bgShift 20s ease infinite;
  color: #f0e6ff;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><text y='18' font-size='18'>✨</text></svg>") 12 12, auto;
  user-select: none;
  -webkit-user-select: none;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #particle-canvas { display: none; }
}

/* Canvases */
#bg-canvas, #particle-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
#particle-canvas { z-index: 10; }

/* Moon - pure circle, no box */
.moon {
  position: fixed;
  top: 30px;
  right: 40px;
  width: 64px; height: 64px;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: radial-gradient(circle at 38% 38%, #fffde0, #ffd700 55%, #b8860b);
  box-shadow: 0 0 30px rgba(255,215,0,0.55), 0 0 70px rgba(255,215,0,0.18);
  animation: moonGlow 4s ease-in-out infinite;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Main layout */
.main-container {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.main-container > * { pointer-events: auto; }

/* Model container - true full screen */
.model-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.model-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}
/* Crop Sketchfab top bar (title) and bottom bar (share/settings/VR) */
.model-frame iframe {
  position: absolute;
  top: -56px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 108px);
  border: none;
  background: transparent;
}
/* Gradient blends at edges */
.model-frame::before,
.model-frame::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
.model-frame::before {
  top: 0; height: 28px;
  background: linear-gradient(to bottom, #1A142B, transparent);
}
.model-frame::after {
  bottom: 0; height: 36px;
  background: linear-gradient(to top, #1A142B, transparent);
}

/* Transparent overlay on model - captures taps, lets drags pass through */
.model-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><text y='18' font-size='18'>✨</text></svg>") 12 12, auto;
}

/* Easter egg message */
.easter-egg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(ellipse, rgba(255,105,180,0.95), rgba(45,27,58,0.95));
  padding: 30px 50px;
  border-radius: 20px;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  text-align: center;
  z-index: 100;
  border: 2px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 60px rgba(255,105,180,0.5);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}
.easter-egg.show {
  transform: translate(-50%, -50%) scale(1);
}

/* Whisper messages */
.whisper {
  position: fixed;
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  color: #FFB6C1;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  text-shadow: 0 0 10px rgba(255,182,193,0.5);
  white-space: nowrap;
  font-style: italic;
}

/* Love button */
.love-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff9ec8, #FF1493, #c0005a);
  border: none;
  outline: none;
  box-shadow: 0 0 25px rgba(255,20,147,0.45), 0 4px 15px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  animation: heartBeat 2.5s ease-in-out infinite;
}
.love-btn:active {
  transform: scale(0.88);
  box-shadow: 0 0 40px rgba(255,20,147,0.7), 0 2px 8px rgba(0,0,0,0.3);
}

/* Giant floating heart */
.giant-heart {
  position: fixed;
  font-size: 8rem;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  filter: blur(1px);
}

/* Responsive */
@media (max-width: 768px) {
  .moon { width: 48px; height: 48px; top: 16px; right: 16px; }
  .model-frame iframe { top: -44px; height: calc(100% + 88px); }
}
@media (max-height: 600px) {
  .model-frame iframe { top: -44px; height: calc(100% + 88px); }
}

/* ===== MAGICAL LOADING SCREEN ===== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0d0a1a 0%, #1A142B 40%, #2D1B3A 70%, #1a1035 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#loader-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.loader-orbit {
  position: relative;
  width: 220px; height: 220px;
  margin-bottom: 24px;
}
.loader-witch {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  font-size: 5rem;
  filter: drop-shadow(0 0 20px rgba(255,140,66,0.7)) drop-shadow(0 0 40px rgba(255,105,180,0.4));
  animation: float 3s ease-in-out infinite;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,140,66,0.15);
  animation: spin 8s linear infinite;
}
.orbit-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin: -6px 0 0 -6px;
  font-size: 1.15rem;
  animation: counter-spin 8s linear infinite;
}
.orbit-ring-2 {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,105,180,0.12);
  animation: spin 12s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter-spin { to { transform: rotate(-360deg); } }
.loader-title {
  font-family: 'Georgia', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: bold;
  background: linear-gradient(90deg, #FF8C42, #FF69B4, #FFD700, #FF7F50, #FF69B4);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
  letter-spacing: 2px;
  text-align: center;
}
.loader-sub {
  margin-top: 10px;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  color: rgba(200,160,220,0.7);
  letter-spacing: 3px;
  animation: subtitleSparkle 2s ease-in-out infinite;
}
.loader-dots span {
  display: inline-block;
  animation: dotBounce 1.4s ease-in-out infinite;
  color: #FF69B4;
  font-size: 1.4rem;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-8px); opacity: 1; }
}