/* ═══════════════════════════════════════════════════════════════
   Immersive Landing System v10.1.0 (RWD-strict)
   3 breakpoints: mobile (0-767) / tablet (768-1023) / desktop (1024+)
   Mobile-first base, progressive enhancement via min-width queries
   Respects prefers-reduced-motion (does NOT force animations)
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   ROOT vars — palette comes from PHP inline, structural defaults here
   ─────────────────────────────────────────────────────────────── */
:root {
  --imv10-primary:   #fafafa;
  --imv10-secondary: #333333;
  --imv10-accent:    #ff6b35;
  --imv10-highlight: #f0f0f0;
  --imv10-text:      #1a1a1a;
  --imv10-bg:        #ffffff;

  --imv10-page-max:        1200px;
  --imv10-hero-title-size: clamp(2.1rem, 7vw, 5.5rem);
  --imv10-hero-sub-size:   clamp(0.95rem, 2.2vw, 1.3rem);
  --imv10-section-py:      clamp(56px, 9vw, 120px);
  --imv10-section-px:      clamp(20px, 5vw, 64px);
  --imv10-body-size:       clamp(0.95rem, 1.5vw, 1.05rem);

  /* RWD-driven intensity vars (overridden in tablet/desktop media queries) */
  --imv10-particle-count:    8;
  --imv10-cutout-count:      2;
  --imv10-parallax-strength: 0.2;
  --imv10-motion-on:         1;
}

html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────────
   PAGE SHELL
   ─────────────────────────────────────────────────────────────── */
.imv10-shell {
  width: 100%;
  max-width: var(--imv10-page-max);
  margin-inline: auto;
  padding-inline: var(--imv10-section-px);
}

/* ════════════════════════════════════════════════════════════════
   1. ImmersiveHero — mobile first single column, grid on desktop
   ════════════════════════════════════════════════════════════════ */
.imv10-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 96px var(--imv10-section-px) 56px;
  background: var(--imv10-bg);
  overflow: hidden;
  isolation: isolate;
}
.imv10-hero__content {
  position: relative;
  z-index: 10;
  max-width: 680px;
  text-align: left;
}
.imv10-hero__title {
  font-size: var(--imv10-hero-title-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--imv10-text);
}
.imv10-hero__subtitle {
  font-size: var(--imv10-hero-sub-size);
  line-height: 1.7;
  margin: 0 0 28px;
  color: var(--imv10-text);
  opacity: 0.78;
  font-weight: 400;
}
.imv10-hero__visual {
  position: relative;
  z-index: 5;
  margin-top: 32px;
  min-height: 200px;
}

/* Tablet 768-1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --imv10-particle-count:    14;
    --imv10-cutout-count:      3;
    --imv10-parallax-strength: 0.6;
  }
  .imv10-hero {
    min-height: 90svh;
    padding: 120px var(--imv10-section-px) 80px;
  }
  .imv10-hero__visual { min-height: 280px; }
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
  :root {
    --imv10-particle-count:    24;
    --imv10-cutout-count:      5;
    --imv10-parallax-strength: 1;
  }
  .imv10-hero {
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
    gap: clamp(40px, 5vw, 80px);
    padding: 120px var(--imv10-section-px) 90px;
  }
  .imv10-hero__visual {
    margin-top: 0;
    min-height: 480px;
  }
}

/* ════════════════════════════════════════════════════════════════
   2. MotionBackground container + sub-layers
   ════════════════════════════════════════════════════════════════ */
.imv10-motion {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* MeshGradientLayer */
.imv10-mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, var(--imv10-secondary) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 70%, var(--imv10-accent) 0%, transparent 55%),
    radial-gradient(ellipse 60% 30% at 50% 100%, var(--imv10-highlight) 0%, transparent 50%);
  opacity: 0.18;
  filter: blur(60px);
  animation: imv10-mesh-drift 30s ease-in-out infinite alternate;
}
@keyframes imv10-mesh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.05); }
}

/* BlobLayer */
.imv10-blobs { position: absolute; inset: 0; }
.imv10-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.22;
  mix-blend-mode: multiply;
  will-change: transform;
  /* Each blob has its own animation, scaled by parallax-strength */
}
.imv10-blob--1 { width: 380px; height: 380px; background: var(--imv10-secondary); top: -10%; left: -5%; animation: imv10-blob-1 28s ease-in-out infinite; }
.imv10-blob--2 { width: 460px; height: 460px; background: var(--imv10-accent);    bottom: -15%; right: -8%; animation: imv10-blob-2 32s ease-in-out infinite; }
.imv10-blob--3 { width: 300px; height: 300px; background: var(--imv10-highlight); top: 40%; left: 50%;    animation: imv10-blob-3 36s ease-in-out infinite; }
@keyframes imv10-blob-1 { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(calc(40px * var(--imv10-parallax-strength)), calc(30px * var(--imv10-parallax-strength))); } }
@keyframes imv10-blob-2 { 0%,100% { transform: translate(0, 0); } 50% { transform: translate(calc(-30px * var(--imv10-parallax-strength)), calc(-40px * var(--imv10-parallax-strength))); } }
@keyframes imv10-blob-3 { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(calc(-30% - 20px * var(--imv10-parallax-strength)), calc(-70% - 10px * var(--imv10-parallax-strength))); } }

/* Mobile: hide blob 3 entirely (less visual noise) */
@media (max-width: 767px) {
  .imv10-blob--3 { display: none; }
  .imv10-blob--1, .imv10-blob--2 { opacity: 0.14; }
  .imv10-mesh { opacity: 0.4; }
}

/* GrainLayer */
.imv10-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ParticleLayer — count populated by JS based on --imv10-particle-count */
.imv10-particles { position: absolute; inset: 0; overflow: hidden; }
.imv10-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--imv10-accent);
  opacity: 0.5;
  animation: imv10-particle-float linear infinite;
}
@keyframes imv10-particle-float {
  0%   { transform: translate3d(0, 100vh, 0) scale(0.5); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { transform: translate3d(40px, -10vh, 0) scale(1); opacity: 0; }
}
@media (max-width: 767px) {
  .imv10-particle { width: 3px; height: 3px; opacity: 0.35; }
}

/* ════════════════════════════════════════════════════════════════
   3. FloatingCutouts — count controlled by hide-via-nth-child
   ════════════════════════════════════════════════════════════════ */
.imv10-cutouts { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.imv10-cutout {
  position: absolute;
  width: clamp(60px, 14vw, 180px);
  aspect-ratio: 1;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.15));
  opacity: 0.85;
  will-change: transform;
}
.imv10-cutout svg, .imv10-cutout img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.imv10-cutout--1 { top: 8%;  right: 6%;   animation: imv10-cut-1 24s ease-in-out infinite; }
.imv10-cutout--2 { bottom: 12%; left: 5%; animation: imv10-cut-2 28s ease-in-out infinite; }
.imv10-cutout--3 { top: 42%; right: 16%;  animation: imv10-cut-3 30s ease-in-out infinite; }
.imv10-cutout--4 { bottom: 28%; right: 8%; animation: imv10-cut-4 26s ease-in-out infinite; }
.imv10-cutout--5 { top: 18%; left: 14%;   animation: imv10-cut-5 32s ease-in-out infinite; }
@keyframes imv10-cut-1 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(calc(-20px * var(--imv10-parallax-strength)), calc(25px * var(--imv10-parallax-strength))) rotate(8deg); } }
@keyframes imv10-cut-2 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(calc(25px * var(--imv10-parallax-strength)), calc(-20px * var(--imv10-parallax-strength))) rotate(-6deg); } }
@keyframes imv10-cut-3 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(calc(15px * var(--imv10-parallax-strength)), calc(30px * var(--imv10-parallax-strength))) rotate(10deg); } }
@keyframes imv10-cut-4 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(calc(-30px * var(--imv10-parallax-strength)), calc(20px * var(--imv10-parallax-strength))) rotate(-12deg); } }
@keyframes imv10-cut-5 { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(calc(20px * var(--imv10-parallax-strength)), calc(-25px * var(--imv10-parallax-strength))) rotate(6deg); } }

/* RWD cutout visibility */
@media (max-width: 767px) {
  .imv10-cutout--3, .imv10-cutout--4, .imv10-cutout--5 { display: none !important; }
  .imv10-cutout { transform: scale(0.65); opacity: 0.6; }
  /* Mobile: cutouts must NOT overlap text — push them to corners only */
  .imv10-cutout--1 { top: 4%; right: 4%; }
  .imv10-cutout--2 { bottom: 8%; left: 4%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imv10-cutout--4, .imv10-cutout--5 { display: none !important; }
  .imv10-cutout { transform: scale(0.82); }
}

/* ════════════════════════════════════════════════════════════════
   4. CursorGlow (desktop only)
   ════════════════════════════════════════════════════════════════ */
.imv10-cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--imv10-accent) 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.imv10-cursor-glow.imv10-active { opacity: 0.32; }
@media (pointer: coarse), (max-width: 1023px) {
  .imv10-cursor-glow { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   5. ProgressBar
   ════════════════════════════════════════════════════════════════ */
.imv10-progress {
  position: fixed;
  top: 0; left: 0;
  width: var(--imv10-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, var(--imv10-secondary), var(--imv10-accent));
  z-index: 9998;
  transition: width 0.15s ease-out;
}

/* ════════════════════════════════════════════════════════════════
   6. ScrollRevealSection
   ════════════════════════════════════════════════════════════════ */
.imv10-scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.imv10-scroll-reveal.imv10-in-view { opacity: 1; transform: translateY(0); }
@media (max-width: 767px) {
  .imv10-scroll-reveal { transform: translateY(20px); }
}

/* ════════════════════════════════════════════════════════════════
   7. MarqueeSlogan (weimei only)
   ════════════════════════════════════════════════════════════════ */
.imv10-marquee {
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--imv10-accent) 16%, transparent), transparent);
  border-block: 1px solid color-mix(in srgb, var(--imv10-accent) 25%, transparent);
  user-select: none;
}
.imv10-marquee__track {
  display: flex;
  gap: 60px;
  animation: imv10-marquee-scroll 32s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.imv10-marquee__item {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 500;
  color: var(--imv10-text);
  letter-spacing: 0.05em;
}
@keyframes imv10-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .imv10-marquee { padding: 10px 0; }
  .imv10-marquee__track { gap: 36px; animation-duration: 42s; }
  .imv10-marquee__item { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   8. FrostedGlassWidgets
   ════════════════════════════════════════════════════════════════ */
.imv10-glass,
body.imv10-glass-widgets .widget,
body.imv10-glass-widgets aside .widget,
body.imv10-glass-widgets .wp-block-latest-posts,
body.imv10-glass-widgets .wp-block-search {
  background: color-mix(in srgb, var(--imv10-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--imv10-secondary) 12%, transparent);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 4px 24px -8px color-mix(in srgb, var(--imv10-secondary) 20%, transparent);
}
body.imv10-glass-widgets .widget { margin-bottom: 22px; }
@media (max-width: 767px) {
  body.imv10-glass-widgets .widget { padding: 16px 18px !important; backdrop-filter: blur(10px); }
}

/* ════════════════════════════════════════════════════════════════
   9. MagneticCTAButton — touch-friendly, 44px min on mobile
   ════════════════════════════════════════════════════════════════ */
.imv10-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  padding: 14px 28px;
  min-height: 44px;
  background: var(--imv10-secondary);
  color: var(--imv10-bg);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--imv10-secondary) 30%, transparent);
  z-index: 1;
}
.imv10-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--imv10-mx, 50%) var(--imv10-my, 50%), color-mix(in srgb, var(--imv10-accent) 60%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.imv10-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--imv10-accent) 40%, transparent); }
.imv10-cta:hover::before { opacity: 1; }
.imv10-cta:active { transform: translateY(0); }
@media (max-width: 767px) {
  .imv10-cta {
    width: 100%;
    max-width: 320px;
    padding: 16px 24px;
    font-size: 16px;
    min-height: 48px;
  }
  /* mobile touch feedback instead of magnetic */
  .imv10-cta:active { background: var(--imv10-accent); transform: scale(0.98); }
}

/* ════════════════════════════════════════════════════════════════
  10. ThreeDTiltCard
   ════════════════════════════════════════════════════════════════ */
.imv10-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.imv10-tilt:hover { transform: translateY(-4px); }
@media (pointer: coarse), (max-width: 1023px) {
  .imv10-tilt { transform: none !important; }
  .imv10-tilt:active { transform: scale(0.99) !important; }
  .imv10-tilt:hover  { transform: translateY(-2px) !important; }
}

/* ════════════════════════════════════════════════════════════════
  11. Cards grid (responsive)
   ════════════════════════════════════════════════════════════════ */
.imv10-cards {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: 1fr; /* mobile single column */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imv10-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .imv10-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .imv10-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════
  12. Visibility helpers
   ════════════════════════════════════════════════════════════════ */
.imv10-mobile-only   { display: block;  }
.imv10-tablet-only   { display: none;   }
.imv10-desktop-only  { display: none;   }
@media (min-width: 768px) and (max-width: 1023px) {
  .imv10-mobile-only  { display: none;  }
  .imv10-tablet-only  { display: block; }
}
@media (min-width: 1024px) {
  .imv10-mobile-only  { display: none;  }
  .imv10-desktop-only { display: block; }
}

/* ════════════════════════════════════════════════════════════════
  13. ReducedMotionFallback (proper: keep visible, kill motion)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .imv10-motion,
  .imv10-mesh,
  .imv10-blob,
  .imv10-particle,
  .imv10-particles,
  .imv10-cutout,
  .imv10-marquee__track,
  .imv10-cursor-glow,
  .imv10-scroll-reveal,
  .imv10-tilt,
  .imv10-cta {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .imv10-particle, .imv10-cursor-glow { display: none !important; }
  .imv10-cutout { transform: none !important; opacity: 0.85 !important; }
  .imv10-mesh, .imv10-blob { transform: none !important; opacity: 0.18 !important; }
  .imv10-marquee__track { transform: none !important; flex-wrap: wrap; justify-content: center; }
  .imv10-scroll-reveal { opacity: 1 !important; transform: none !important; }
  .imv10-tilt:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
  14. Scene overlays — loaded conditionally
   ════════════════════════════════════════════════════════════════ */

/* coffee-pour */
.imv10-scene--coffee-pour .imv10-blob--1 { background: #92400e; }
.imv10-scene--coffee-pour .imv10-blob--2 { background: #c89060; }
.imv10-scene--coffee-pour::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255, 220, 180, 0.3) 0%, transparent 60%);
  animation: imv10-steam 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes imv10-steam { 0%,100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 0.9; transform: translateY(-10px); } }

/* soft-spotlight-warm (weimei-star) */
.imv10-scene--soft-spotlight-warm::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 40% 30% at 50% 40%, color-mix(in srgb, var(--imv10-accent) 26%, transparent), transparent 60%);
  animation: imv10-spotlight 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes imv10-spotlight { 0% { transform: translateX(-5%); } 100% { transform: translateX(5%); } }

/* search-ranking-rise (pingbai) */
.imv10-scene--search-ranking-rise .imv10-motion {
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--imv10-secondary) 5%, transparent) 100%),
    repeating-linear-gradient(0deg, transparent 0px, transparent 39px, color-mix(in srgb, var(--imv10-secondary) 10%, transparent) 40px);
  animation: imv10-grid-pulse 8s ease-in-out infinite;
}
@keyframes imv10-grid-pulse { 0%,100% { background-position: 0 0; } 50% { background-position: 0 40px; } }

/* magnifier-scan (know.pingbai) */
.imv10-scene--magnifier-scan::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--imv10-secondary) 18%, transparent) 50%, transparent 70%);
  animation: imv10-scan-line 6s linear infinite;
  pointer-events: none;
}
@keyframes imv10-scan-line { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }

/* pasta-sauce / sauce-swirl / pasta-sauce-handmade */
.imv10-scene--pasta-sauce         .imv10-blob--1,
.imv10-scene--sauce-swirl         .imv10-blob--1,
.imv10-scene--pasta-sauce-handmade .imv10-blob--1 { background: #c0392b; }
.imv10-scene--pasta-sauce         .imv10-blob--2,
.imv10-scene--sauce-swirl         .imv10-blob--2,
.imv10-scene--pasta-sauce-handmade .imv10-blob--2 { background: #7fa650; }

/* toothpaste-ribbon (taiwanbeauty) */
.imv10-scene--toothpaste-ribbon::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
  animation: imv10-ribbon 10s ease-in-out infinite;
  filter: blur(4px);
  pointer-events: none;
}
@keyframes imv10-ribbon { 0%,100% { transform: translateX(-100%) rotate(-5deg); } 50% { transform: translateX(100%) rotate(5deg); } }

/* enamel-scan (techniques.IE) */
.imv10-scene--enamel-scan .imv10-motion {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--imv10-highlight) 30%, transparent) 0%, transparent 70%);
}

/* nutrition-particles (traditionaltastesofasia) */
.imv10-scene--nutrition-particles .imv10-blob--1 { background: #6b8e5a; }
.imv10-scene--nutrition-particles .imv10-blob--2 { background: #c9a86b; }

/* checklist-reveal (guide.weimei) */
.imv10-scene--checklist-reveal::before {
  content: ''; position: absolute; right: 5%; top: 20%; width: 30%; height: 60%;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 28px, color-mix(in srgb, var(--imv10-accent) 20%, transparent) 30px);
  border-radius: 8px;
  opacity: 0.3;
  pointer-events: none;
}
@media (max-width: 767px) { .imv10-scene--checklist-reveal::before { right: -10%; opacity: 0.15; } }

/* job-cards-filter (job.weimei) */
.imv10-scene--job-cards-filter::before {
  content: ''; position: absolute; inset: 10% 5%;
  background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--imv10-secondary) 10%, transparent) 100%);
  pointer-events: none;
}

/* rose-petals-gentle (life.weimei) */
.imv10-scene--rose-petals-gentle .imv10-particle {
  background: var(--imv10-accent);
  width: 6px; height: 6px;
  border-radius: 50% 0 50% 50%;
}

/* starfield-vision (star.weimei) */
.imv10-scene--starfield-vision .imv10-motion {
  background-image:
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 40% 70%, white, transparent),
    radial-gradient(2px 2px at 60% 20%, white, transparent),
    radial-gradient(1px 1px at 80% 60%, white, transparent),
    radial-gradient(1px 1px at 30% 90%, white, transparent);
  opacity: 0.6;
}

/* Dark mode body class */
body.imv10-dark, body.imv10-dark .imv10-hero { background-color: var(--imv10-bg); color: var(--imv10-text); }

/* ::selection */
.imv10-hero ::selection { background: var(--imv10-accent); color: var(--imv10-bg); }

/* Print */
@media print {
  .imv10-motion, .imv10-cutouts, .imv10-cursor-glow, .imv10-progress, .imv10-marquee { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   v10.2.0 — Full-page immersive landing (takes over entire homepage)
   On body.imv10-active.home: hide ALL legacy WP/theme/Elementor content,
   render imv10-landing app shell with hero + 5 sections + footer.
   ════════════════════════════════════════════════════════════════ */

/* Hide legacy WP / theme / Elementor on imv10-active home — explicit selectors */
body.imv10-active.home #masthead,
body.imv10-active.home .site-header,
body.imv10-active.home #ast-desktop-header,
body.imv10-active.home #ast-mobile-header,
body.imv10-active.home .ast-main-header-wrap,
body.imv10-active.home .main-header-bar,
body.imv10-active.home header.site-header,
body.imv10-active.home .wm-nav-fixed,
body.imv10-active.home nav.glass-nav,
body.imv10-active.home .home-mesh-bg,
body.imv10-active.home .noise-grain,
body.imv10-active.home .scroll-progress,
body.imv10-active.home #content,
body.imv10-active.home .site-content,
body.imv10-active.home .site-main,
body.imv10-active.home main:not(.imv10-landing main),
body.imv10-active.home .ast-container > article,
body.imv10-active.home .ast-container > main,
body.imv10-active.home .entry-content,
body.imv10-active.home .wp-block-group,
body.imv10-active.home .elementor,
body.imv10-active.home .elementor-section,
body.imv10-active.home #colophon,
body.imv10-active.home .site-footer,
body.imv10-active.home footer.site-footer {
  display: none !important;
}
/* Whitelist guard: any direct child of body that isn't imv10 or admin should be hidden */
body.imv10-active.home > main,
body.imv10-active.home > article,
body.imv10-active.home > section:not(.imv10-section):not(.imv10-hero):not([class*="imv10-"]),
body.imv10-active.home > div:not(.imv10-landing):not(.imv10-progress):not(.imv10-cursor-glow):not([class*="imv10-"]):not(#wpadminbar) {
  display: none !important;
}
body.imv10-active.home .imv10-landing { display: block !important; }

/* keep WP admin bar visible if logged in */
body.imv10-active.home #wpadminbar { display: block !important; }

/* Ensure body/html can scroll — some themes lock body height to 100vh */
html.imv10-active-html,
body.imv10-active.home {
  height: auto !important;
  min-height: 100svh;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* ───── App shell wrapper ───── */
.imv10-landing {
  position: relative;
  width: 100%;
  background: var(--imv10-bg);
  color: var(--imv10-text);
  overflow-x: hidden;
}

/* ───── Generic section ───── */
.imv10-section {
  position: relative;
  padding: var(--imv10-section-py) var(--imv10-section-px);
  max-width: var(--imv10-page-max);
  margin: 0 auto;
}
.imv10-section__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--imv10-text);
  margin: 0 0 12px;
  text-align: center;
}
.imv10-section__lead {
  font-size: var(--imv10-body-size);
  color: var(--imv10-text);
  opacity: 0.78;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* alt background for variety */
.imv10-section--alt {
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--imv10-secondary) 4%, transparent) 100%),
    var(--imv10-bg);
  max-width: none;
}
.imv10-section--alt > .imv10-section__inner {
  max-width: var(--imv10-page-max);
  margin: 0 auto;
}

/* ───── Card grid (used by about/features/menu/contact) ───── */
.imv10-cards-grid {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imv10-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .imv10-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ───── Frosted card ───── */
.imv10-card {
  background: color-mix(in srgb, var(--imv10-bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--imv10-secondary) 12%, transparent);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 4px 24px -8px color-mix(in srgb, var(--imv10-secondary) 18%, transparent);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
}
.imv10-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--imv10-secondary) 28%, transparent);
}
.imv10-card__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--imv10-accent) 16%, transparent);
  color: var(--imv10-secondary);
  margin-bottom: 16px;
}
.imv10-card__icon svg { width: 32px; height: 32px; }
.imv10-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--imv10-text);
  letter-spacing: -0.01em;
}
.imv10-card__body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--imv10-text);
  opacity: 0.78;
  margin: 0;
}

/* ───── Menu / product card (with price) ───── */
.imv10-menu-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.5vw, 28px);
  background: color-mix(in srgb, var(--imv10-bg) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--imv10-secondary) 14%, transparent);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.imv10-menu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--imv10-secondary), var(--imv10-accent));
}
.imv10-menu-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--imv10-text);
  margin: 0;
}
.imv10-menu-card__desc {
  font-size: 0.85rem;
  color: var(--imv10-text);
  opacity: 0.7;
  line-height: 1.6;
}
.imv10-menu-card__price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--imv10-secondary);
  margin-top: 4px;
}

/* ───── Gallery grid ───── */
.imv10-gallery {
  display: grid;
  gap: clamp(12px, 1.5vw, 16px);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imv10-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .imv10-gallery { grid-template-columns: repeat(3, 1fr); }
}
.imv10-gallery__item {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: color-mix(in srgb, var(--imv10-secondary) 8%, transparent);
}
.imv10-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.imv10-gallery__item:hover img { transform: scale(1.05); }
.imv10-gallery__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ───── Contact section ───── */
.imv10-contact {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .imv10-contact { grid-template-columns: repeat(3, 1fr); }
}
.imv10-contact__card {
  text-align: center;
}
.imv10-contact__card .imv10-card__icon { margin: 0 auto 16px; }

/* ───── Footer ───── */
.imv10-footer {
  position: relative;
  background: color-mix(in srgb, var(--imv10-secondary) 92%, var(--imv10-text));
  color: color-mix(in srgb, var(--imv10-bg) 88%, transparent);
  padding: clamp(48px, 7vw, 80px) var(--imv10-section-px) 24px;
  margin-top: var(--imv10-section-py);
}
.imv10-footer__inner {
  max-width: var(--imv10-page-max);
  margin: 0 auto;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 768px) {
  .imv10-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    text-align: left;
  }
}
.imv10-footer__brand h3 {
  font-size: 1.4rem;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--imv10-bg) 96%, transparent);
}
.imv10-footer__brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  opacity: 0.78;
  margin: 0;
}
.imv10-footer__col h4 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  color: var(--imv10-accent);
}
.imv10-footer__col ul { list-style: none; padding: 0; margin: 0; }
.imv10-footer__col li { margin-bottom: 8px; font-size: 0.9rem; opacity: 0.85; }
.imv10-footer__bottom {
  max-width: var(--imv10-page-max);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--imv10-bg) 12%, transparent);
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.65;
}

/* ────── Section spacing on mobile ────── */
@media (max-width: 767px) {
  .imv10-section { padding: clamp(48px, 12vw, 80px) clamp(20px, 5vw, 32px); }
  .imv10-section__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

/* ════════════════════════════════════════════════════════════════
   v10.1.1 polish patches (minimal scope, do not alter scene/RWD/reduce-motion)
   ════════════════════════════════════════════════════════════════ */

/* P2-1 + P2-3: hide WP theme header + custom Luminous template chrome on weimei sites */
body.imv10-weimei.home .site-header,
body.imv10-weimei.home #ast-desktop-header,
body.imv10-weimei.home #ast-mobile-header,
body.imv10-weimei.home .main-header-bar,
body.imv10-weimei.home header.site-header,
body.imv10-weimei.home #masthead,
/* Luminous template custom hero & duplicated layers */
body.imv10-weimei.home > header,
body.imv10-weimei.home > div > header,
body.imv10-weimei.home main > header,
body.imv10-weimei.home header[class*="min-h-screen"],
body.imv10-weimei.page-template-page-luminous-home > header,
body.imv10-weimei.page-template-page-luminous-home header[class*="min-h-screen"],
/* Luminous fixed nav + duplicate bg layers */
body.imv10-weimei.home .wm-nav-fixed,
body.imv10-weimei.home nav.glass-nav,
body.imv10-weimei.home .home-mesh-bg,
body.imv10-weimei.home .noise-grain,
body.imv10-weimei.home .scroll-progress {
  display: none !important;
}

/* P2-2: force CTA readable contrast (white text regardless of palette --bg) */
.imv10-cta,
.imv10-cta:visited,
.imv10-cta:hover,
.imv10-cta:active,
.imv10-cta:focus {
  color: #ffffff !important;
}
.imv10-cta svg,
.imv10-cta .icon {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}