/* Clean atmospheric gradients and spacious layout. */
.home-intro, .product-chapter { isolation: isolate; }
.scene-layer, .scene-halo { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.intro-inner, .chapter-inner, .hero-content { position: relative; z-index: 1; }
.chapter-index { z-index: 2; }

/* ==========================================================================
   Luminous Studio Canvas & Ambient Lighting
   ========================================================================== */
.home-intro {
  background:
    radial-gradient(1100px 650px at 50% -60px, rgba(22, 101, 52, 0.06) 0%, transparent 70%),
    radial-gradient(800px 500px at 85% 20%, rgba(56, 189, 248, 0.04) 0%, transparent 60%),
    radial-gradient(700px 500px at 15% 35%, rgba(245, 158, 11, 0.035) 0%, transparent 60%),
    #fafbfa;
  min-height: auto;
}

/* ==========================================================================
   Distinct Ambient Chapter Light Halos
   ========================================================================== */
.product-chapter {
  min-height: auto;
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.chapter-polaris {
  background:
    radial-gradient(900px 550px at 78% 50%, rgba(16, 185, 129, 0.08) 0%, transparent 70%),
    radial-gradient(600px 400px at 20% 30%, rgba(56, 189, 248, 0.04) 0%, transparent 60%),
    #ffffff;
}
.chapter-starwish {
  background:
    radial-gradient(900px 550px at 22% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 70%),
    radial-gradient(600px 400px at 80% 30%, rgba(244, 63, 94, 0.03) 0%, transparent 60%),
    #ffffff;
}

.chapter-readermode {
  background:
    radial-gradient(950px 550px at 78% 50%, rgba(79, 70, 229, 0.06) 0%, transparent 70%),
    radial-gradient(600px 400px at 20% 40%, rgba(16, 185, 129, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
}
.chapter-feedlens {
  background:
    radial-gradient(900px 550px at 22% 50%, rgba(14, 165, 233, 0.07) 0%, transparent 70%),
    radial-gradient(600px 400px at 80% 30%, rgba(245, 158, 11, 0.04) 0%, transparent 60%),
    #ffffff;
}

.chapter-glyphgo {
  background:
    radial-gradient(950px 550px at 78% 50%, rgba(139, 92, 246, 0.07) 0%, transparent 70%),
    radial-gradient(600px 400px at 20% 40%, rgba(56, 189, 248, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #fafafc 0%, #f8fafc 100%);
}
.chapter-jinshi {
  background:
    radial-gradient(900px 550px at 22% 50%, rgba(46, 78, 126, 0.06) 0%, transparent 70%),
    radial-gradient(600px 400px at 80% 30%, rgba(196, 92, 72, 0.04) 0%, transparent 60%),
    #faf8f5;
}

/* Canvas particle atmospheric blend */
canvas[data-particles] {
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Product Keywords Chips */
.product-keywords {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
  max-width: 480px;
}
.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.keyword-chip:hover {
  background: #ffffff;
  border-color: rgba(22, 101, 52, 0.3);
  color: #0f172a;
  transform: translateY(-2.5px) scale(1.03);
  box-shadow: 0 6px 16px -2px rgba(22, 101, 52, 0.12);
}
.keyword-chip i {
  font-size: 12px;
  color: var(--accent);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.keyword-chip:hover i {
  transform: scale(1.18);
}
.product-keywords:empty { display: none; }

/* Chapter Philosophy Card - Luxury Editorial Design */
.chapter-philosophy {
  position: relative;
  margin: 28px 0 0;
  padding: 14px 18px 14px 20px;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.chapter-philosophy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(22, 101, 52, 0.2);
}
.chapter-philosophy i {
  font-size: 16px;
  color: var(--accent);
  opacity: 0.85;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chapter-philosophy:hover i {
  transform: scale(1.1);
}
.chapter-philosophy p { margin: 0; font-style: normal; }

/* ==========================================================================
   Realistic Phone Mockup System (Titanium Finish)
   ========================================================================== */
.product-visual {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-phone {
  padding: 24px 0;
}
.visual-phone.has-secondary {
  padding-left: 60px;
}

.phone-frame {
  position: relative;
  display: inline-block;
  background: #111215;
  border-radius: 54px;
  padding: 11px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 0 0 1px #232529,
    0 0 0 3px #0a0b0d,
    0 35px 80px -15px rgba(0, 0, 0, 0.35),
    0 15px 30px -10px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hardware Buttons */
.phone-frame::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 105px;
  width: 4px;
  height: 48px;
  background: #25272b;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 60px 0 #25272b, 0 -42px 0 #25272b;
}
.phone-frame::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 130px;
  width: 4px;
  height: 68px;
  background: #25272b;
  border-radius: 0 3px 3px 0;
}

.phone-screen {
  position: relative;
  border-radius: 43px;
  overflow: hidden;
  background: #000;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #000000;
  border-radius: 20px;
  z-index: 10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone-notch::before {
  content: '';
  position: absolute;
  right: 12px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #1e293b 0%, #06090e 70%);
  box-shadow: inset 0 0 2px rgba(56, 189, 248, 0.4);
}
.phone-notch::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #090d13;
}

.screen-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 38%, transparent 55%);
  z-index: 5;
}

.primary-frame {
  position: relative;
  z-index: 2;
  transform: rotate(2deg) translateZ(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.primary-frame .primary-screen {
  width: 290px;
  height: auto;
  display: block;
}

.secondary-frame {
  position: absolute;
  left: -25px;
  top: 8%;
  z-index: 1;
  transform: perspective(1200px) rotateY(-10deg) rotateX(4deg) rotateZ(-4deg);
  opacity: 0.95;
  border-radius: 48px;
  padding: 9px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px #232529,
    0 25px 55px -15px rgba(0, 0, 0, 0.3);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
.secondary-frame::before,
.secondary-frame::after {
  display: none;
}
.secondary-frame .phone-screen {
  border-radius: 39px;
}
.secondary-frame .secondary-screen {
  width: 240px;
  height: auto;
  display: block;
}

/* StarWish phone orientation mirror */
.chapter-starwish .visual-phone.has-secondary {
  padding-left: 0;
  padding-right: 60px;
}
.chapter-starwish .primary-frame {
  transform: rotate(-2deg);
}
.chapter-starwish .secondary-frame {
  left: auto;
  right: -25px;
  transform: perspective(1200px) rotateY(10deg) rotateX(4deg) rotateZ(4deg);
}

/* ==========================================================================
   macOS Browser Window Mockup System
   ========================================================================== */
.visual-browser {
  width: 100%;
}
.browser-frame {
  width: 100%;
  max-width: 660px;
  margin: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 25px 65px -15px rgba(0, 0, 0, 0.16),
    0 10px 25px -8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.browser-header {
  height: 44px;
  background: linear-gradient(180deg, #fbfcfd 0%, #edf0f2 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
}
.browser-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.browser-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.dot-close { background: #ff5f57; border: 1px solid #e0443e; }
.dot-min { background: #febc2e; border: 1px solid #d89e24; }
.dot-max { background: #28c840; border: 1px solid #1aab29; }

.browser-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 550;
  color: #1e293b;
  background: #ffffff;
  padding: 6px 16px;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid #ffffff;
  margin-bottom: -1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.browser-tab i { font-size: 13px; color: var(--accent); }

.browser-address {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 4px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.browser-address i { font-size: 12px; color: #166534; }

.browser-viewport img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   macOS Desktop Window Mockup System
   ========================================================================== */
.visual-desktop {
  width: 100%;
}
.desktop-frame {
  width: 100%;
  max-width: 680px;
  margin: auto;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.desktop-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   Icon / Development Stage Mockup System
   ========================================================================== */
.visual-icon { min-height: 420px; }
.icon-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: auto;
  height: 390px;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f1f5f9 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 25px 60px -15px rgba(35, 30, 55, 0.12);
}

.icon-floating-card {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 2;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow:
    0 20px 48px -10px rgba(35, 25, 60, 0.25),
    0 4px 14px rgba(35, 25, 60, 0.08);
  transform: rotate(-3deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.icon-floating-card:hover,
.product-chapter:hover .icon-floating-card {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  box-shadow:
    0 28px 60px -12px rgba(35, 25, 60, 0.3),
    0 8px 20px rgba(35, 25, 60, 0.1);
}
.icon-floating-card .primary-screen {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.icon-stage-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 550;
  color: #6b46c1;
}



/* ==========================================================================
   Product Detail Story & Features Bento System
   ========================================================================== */
.product-story {
  max-width: var(--max);
  margin: auto;
  padding: clamp(80px, 8vw, 110px) 0 clamp(85px, 8.5vw, 120px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 80px;
}
.story-scene {
  margin: 0;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 20px 50px -15px rgba(20, 35, 25, 0.14);
}
.story-scene img { height: 100%; width: 100%; object-fit: cover; }
.story-content h2 { font-size: 34px; letter-spacing: -0.025em; line-height: 1.3; }
.story-content .story-body { color: #475569; line-height: 1.85; font-size: 15.5px; margin-top: 20px; }

/* Bento Feature Grid */
.features {
  max-width: var(--max);
  margin: 0 auto clamp(96px, 10vw, 140px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(22, 101, 52, 0.2),
    0 22px 45px -10px rgba(0, 0, 0, 0.09);
  border-color: rgba(22, 101, 52, 0.2);
}
.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.feature-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(22, 101, 52, 0.08);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.feature-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 101, 52, 0.06);
  color: var(--accent);
  border-radius: 12px;
  font-size: 22px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(4deg);
  background: rgba(22, 101, 52, 0.1);
}
.feature-card h3 {
  font-size: 19px;
  font-weight: 650;
  margin-bottom: 12px;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.feature-card p {
  font-size: 14.5px;
  color: #475569;
  line-height: 1.7;
  margin: 0;
}

/* Detail Gallery */
.detail-gallery {
  background: linear-gradient(145deg, #f5f8f5, #fbfaf5);
  padding: clamp(84px, 8.5vw, 116px) 30px;
  display: flex;
  justify-content: center;
  gap: 70px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.gallery-item { margin: 0; text-align: center; }
.gallery-frame img {
  max-height: 560px;
  width: auto;
  border-radius: 32px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 25px 55px -10px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center bottom;
}
.gallery-item:hover .gallery-frame img {
  transform: translateY(-8px) scale(1.018);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 35px 75px -12px rgba(0, 0, 0, 0.24);
}
.detail-gallery.gallery-browser,
.detail-gallery.gallery-desktop {
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.gallery-browser .gallery-item,
.gallery-desktop .gallery-item {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.gallery-browser .gallery-frame img,
.gallery-desktop .gallery-frame img {
  max-width: 100%;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center bottom;
}
.gallery-browser .gallery-item:hover .gallery-frame img,
.gallery-desktop .gallery-item:hover .gallery-frame img {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 65px -12px rgba(0, 0, 0, 0.18);
}
.gallery-item figcaption {
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 22px;
  color: #475569;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gallery-item:hover figcaption {
  color: #0f172a;
  transform: translateY(-2px);
}

/* Motion and Responsive */
.motion-paused .product-visual { transform: none !important; }
.motion-paused .hero-bg { transform: none !important; will-change: auto; }

@media (max-width: 1100px) {
  .product-story { gap: 40px; margin-inline: 24px; }
  .story-scene { height: 320px; }
  .features { gap: 18px; margin-inline: 24px; }
  .feature-card { padding: 26px; }
  .detail-gallery { gap: 40px; }
}

@media (max-width: 850px) {
  .features { grid-template-columns: 1fr; gap: 16px; }
  .product-story { grid-template-columns: 1fr; gap: 30px; }
  .visual-phone.has-secondary { padding-left: 20px; }
  .chapter-starwish .visual-phone.has-secondary { padding-right: 20px; }
  .primary-frame .primary-screen { width: 230px; }
  .secondary-frame .secondary-screen { width: 180px; }
  .detail-gallery { flex-direction: column; align-items: center; padding: 55px 20px; gap: 35px; }
  .gallery-frame img { max-height: 420px; }
}

@media (max-width: 600px) {
  .product-story, .features { margin-inline: 20px; }
  .home-intro {
    min-height: auto;
  }

  .product-chapter { min-height: 0; }
  .visual-phone.has-secondary {
    padding: 0 0 0 30px;
    width: 290px;
    max-width: 100%;
    margin: auto;
  }
  .chapter-starwish .visual-phone.has-secondary {
    padding: 0 30px 0 0;
  }
  .primary-frame .primary-screen { width: 200px; }
  .secondary-frame .secondary-screen { width: 155px; }
  .phone-frame { border-radius: 42px; padding: 8px; }
  .phone-screen { border-radius: 34px; }
  .phone-notch { width: 62px; height: 16px; }
  .icon-stage { height: 310px; }
  .icon-floating-card { left: 16px; bottom: 20px; padding: 10px; border-radius: 22px; }
  .icon-floating-card .primary-screen { width: 78px; height: 78px; border-radius: 17px; }
  .keyword-chip { font-size: 11px; padding: 5px 10px; }
  .chapter-philosophy { margin-top: 24px; font-size: 12px; }
  .story-scene { height: 240px; }
  .story-content h2 { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particles { display: none; }
  .hero-bg { transform: none !important; will-change: auto; }
  .primary-screen { transition: none; }
}

/* Restore a restrained preview response only on devices with a precise pointer.
   No chapter-wide trigger, animated shadow, scaling, or permanent layer hint. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .primary-frame, .browser-frame, .desktop-frame {
    transition: transform 180ms ease-out;
  }
  .primary-frame:hover,
  .chapter-starwish .primary-frame:hover {
    transform: rotate(0deg) translateY(-3px);
  }
  .browser-frame:hover, .desktop-frame:hover {
    transform: translateY(-3px);
  }
}