/* ==================================================
   ARTISTIC MOTION III (REFINED & ANIMATED)
   Fonts: Oswald (Giant), Inter (UI)
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Oswald:wght@500;700&display=swap');

:root {
  --bg-color: #F7F5F2;
  --text-main: #1D1D1F;
  --accent-art: #FF3300;

  --glass: rgba(255, 255, 255, 0.7);
  --border-glass: 1px solid rgba(255, 255, 255, 0.9);
  --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.08);

  --ball-size: 60px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: var(--bg-color);
  color: var(--text-main);
  overflow-x: hidden;
}

/* Base Animations */
.reveal-base {
  opacity: 0;
  transition: 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-up {
  transform: translateY(50px);
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-right {
  transform: translateX(50px);
}

.reveal-scale {
  transform: scale(0.9);
}

.active.reveal-base {
  opacity: 1;
  transform: translate(0) scale(1);
}


/* 1. SIDEBAR BALL (Top-Left) */
.ball-toggle {
  position: fixed;
  top: 40px;
  left: 40px;
  /* Changed from bottom/right */
  width: var(--ball-size);
  height: var(--ball-size);
  background: var(--text-main);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.ball-toggle:hover {
  transform: scale(1.1);
  background: var(--accent-art);
}

.ball-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
}

.art-menu {
  position: fixed;
  inset: 0;
  background: rgba(247, 245, 242, 0.95);
  backdrop-filter: blur(20px);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s;
}

.art-menu.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-link {
  font-family: 'Oswald';
  font-size: 4rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-main);
  transition: 0.3s;
}

.menu-link:hover {
  color: var(--text-main);
}


/* 2. PROFILE */
.section-profile {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5%;
  perspective: 2000px;
}

/* REVERTED Background Text (Centered) */
.giant-text-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Oswald';
  font-size: 15vw;
  color: var(--bg-color);
  text-shadow:
    1px 1px 0 #e0e0e0, 2px 2px 0 #e0e0e0, 3px 3px 0 #e0e0e0, 4px 4px 0 #e0e0e0,
    5px 5px 0 #d0d0d0, 6px 6px 0 #d0d0d0, 7px 7px 0 #d0d0d0, 8px 8px 0 #c0c0c0,
    15px 20px 20px rgba(0, 0, 0, 0.1);
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.6;
}

.profile-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1400px;
  gap: 0;
  z-index: 10;
  align-items: center;
}

.profile-card {
  background: var(--glass);
  backdrop-filter: blur(20px);
  padding: 60px;
  border-radius: 40px;
  border: var(--border-glass);
  box-shadow: var(--shadow-float);
  position: relative;
  transform-style: preserve-3d;
  transform: translateX(50px);
}

.avatar-float {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: -75px;
  left: 60px;
  border: 5px solid white;
  box-shadow: var(--shadow-float);
  object-fit: cover;
  transform: translateZ(30px);
}

.profile-title {
  font-family: 'Oswald';
  font-size: 4rem;
  line-height: 1;
  margin: 50px 0 10px;
  transform: translateZ(20px);
}

/* UPDATED ROLE LINE: Neutral Color */
.role-line {
  font-family: 'Inter';
  font-weight: 500;
  letter-spacing: 1px;
  font-size: 1.1rem;
  color: #555;
  /* Neutral Dark Grey, NOT Orange */
  margin-bottom: 25px;
  text-transform: uppercase;
  transform: translateZ(15px);
  display: inline-block;
  border-bottom: 2px solid var(--accent-art);
  /* Subtle accent underline */
  padding-bottom: 5px;
}

/* SOCIAL ROW */
.social-row {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  transform: translateZ(15px);
}

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #333;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.social-btn:hover {
  background: var(--accent-art);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(255, 51, 0, 0.3);
}


.quote-box {
  border-left: 3px solid var(--text-main);
  padding-left: 20px;
  margin-top: 20px;
  transform: translateZ(10px);
}

.quote-text {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #444;
  line-height: 1.6;
}

.quote-author {
  font-family: 'Oswald';
  font-size: 0.9rem;
  color: #888;
  margin-top: 10px;
  text-align: right;
  display: block;
}

.sphere-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  transform: translateX(-50px) translateY(50px);
  z-index: 100;
}


/* 3. HUB */
.section-hub {
  padding: 100px 5%;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  /* Context for absolute model */
}

/* New Digital Twin Container - Free Flowing */
.digital-twin-container {
  position: absolute;
  top: 0;
  right: -30%;
  width: 100%;
  height: 270%;
  /* Spans below */
  z-index: 0;
  /* Behind Hub content (z-5) */
  pointer-events: none;
  /* Don't block clicks on underlying content */
  background: transparent !important;
  /* Force transparent */
  transform: scale(0.4);
  /* 视觉上保持大尺寸，但实际渲染分辨率降低 */
  transform-origin: top right;
}

/* FORCE TRANSPARENCY ON COMPONENT */
.digital-twin-container model-viewer {
  background-color: transparent !important;
  --poster-color: transparent !important;
  width: 100%;
  height: 100%;
}

/* Ensure model itself passes events if needed, or captures if we want rotation?
   User wants it as "background", so likely no rotation needed if it blocks content.
   But if they want rotation, we need complex layout.
   I'll assume background means "visual only" for now to solve the blocking. */

.hub-grid {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  position: relative;
  z-index: 5;
  /* Content firmly above model */
}

.services-panel {
  flex: 1;
  /* Take available space */
  max-width: 60%;
  /* Limit width to leave room for model visual */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cat-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cat-label {
  font-family: 'Oswald';
  font-size: 1rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}

.service-card-art {
  position: relative;
  /* For tooltip */
  background: white;
  height: 140px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.service-card-art:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 30px rgba(255, 51, 0, 0.15);
  border-color: var(--accent-art);
}

/* SPECIAL DRAW.IO STYLES */
.special-drawio:hover {
  border-color: #28a745 !important;
  /* Green */
  box-shadow: 0 15px 30px rgba(40, 167, 69, 0.2) !important;
}

.special-drawio:hover .free-tag {
  transform: rotate(0deg) scale(1.1);
}

.free-tag {
  position: absolute;
  top: -10px;
  right: 10px;
  background: #FFD700;
  color: #333;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  transform: rotate(15deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 25;
  transition: 0.3s;
}

/* Tooltip Styles */
.service-card-art::after {
  content: attr(data-desc);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
  z-index: 20;
}

.service-card-art:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

.hub-title {
  font-family: 'Oswald';
  font-size: 1.5rem;
  color: var(--text-main);
  margin-bottom: 20px;
  border-left: 4px solid var(--accent-art);
  padding-left: 15px;
}

.s-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.s-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #333;
}

/* .model-box-art removed, replaced by free-flowing .digital-twin-container */


/* 4. WORKS */
.section-works {
  padding: 0 5% 100px;
}

.section-title {
  font-family: 'Oswald';
  font-size: 5rem;
  color: var(--text-main);
  margin-bottom: 40px;
}

.work-cine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.work-card-cine {
  position: relative;
  height: 450px;
  border-radius: 30px;
  overflow: hidden;
  color: white;
  transition: 0.5s;
}

.work-card-cine:hover {
  transform: scale(0.98);
}

.work-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: 0.5s;
}

.work-card-cine:hover .work-bg {
  transform: scale(1.1);
}

.work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

.w-title {
  font-family: 'Oswald';
  font-size: 2rem;
  margin-bottom: 10px;
}

.w-desc {
  font-size: 0.9rem;
  opacity: 0.8;
}

.masonry-wall {
  column-count: 3;
  column-gap: 20px;
  margin-bottom: 100px;
}

.masonry-item {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: 0.5s;
}

.masonry-item:hover img {
  transform: scale(1.05);
}


/* FOOTER FIXED */
.footer-fixed {
  width: 100%;
  text-align: center;
  padding: 20px;
  background: rgba(247, 245, 242, 0.9);
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.85rem;
  color: #999;
}

.footer-fixed a {
  color: inherit;
  border-bottom: 1px dotted #999;
}

.footer-fixed a:hover {
  color: var(--accent-art);
  border-color: var(--accent-art);
}

@media (max-width: 900px) {
  .profile-cluster {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .profile-card {
    transform: none;
    text-align: center;
  }

  .hub-grid {
    flex-direction: column;
  }

  .model-box-art {
    height: 400px;
  }

  .work-cine-grid {
    grid-template-columns: 1fr;
  }

  .masonry-wall {
    column-count: 1;
  }
}