/* ============================================
   Custom overrides for full-screen scaling
   and animations
   ============================================ */

/* --- Global resets --- */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
}

/* --- Gradient text for underlined words (CMU, smile, technology, humane) --- */
.gradient-word .a_GcMg {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  background: linear-gradient(90deg, #a6a6a6, #ffffff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-decoration-line: none !important;
  transition: background 0.4s ease, font-size 0.3s ease;
}

.gradient-word {
  text-decoration: none !important;
  cursor: pointer;
  animation: word-glow-breath 0.5s ease-in-out infinite;
}

@keyframes word-glow-breath {
  0%, 100% {
    filter:
      drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  70% {
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 1))
      drop-shadow(0 0 25px rgba(255, 255, 255, 0.6))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.25));
  }
}

.gradient-word:hover {
  animation: none;
  filter: none;
}

.gradient-word:hover .a_GcMg {
  background: #ffffff !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 22px !important;
  text-decoration-line: none !important;
}

/* --- Quote breath animation: bright -> fade -> bright --- */
@keyframes quote-breath {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* heartbeat-active class is added by JS after fade-in completes */
.heartbeat-quote.heartbeat-active {
  animation: quote-breath 5s ease-in-out infinite !important;
}

/* --- Desktop: scale fixed canvas to fill viewport --- */
@media (min-width: 769px) {
  html, body {
    overflow: hidden;
  }
  .ZRRuDw {
    overflow: hidden !important;
  }
  ._8jGYJw {
    contain: layout style !important;
    transform-origin: top left;
  }
}

/* ============================================
   Mobile layout: reposition elements to match
   original Canva mobile rendering (390x1127)
   ============================================ */
@media (max-width: 768px) {
  html, body, #root {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width:100%
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }

  /* Allow ALL parent containers to expand for scrolling */
  .yIDCqA,
  ._8OlyIw,
  ._4KoDHA,
  .KYQZFA,
  .ZRRuDw {
    height: auto !important;
    overflow: visible !important;
  }

  /* Resize the canvas container from 1903x928 to viewport-width x taller */
  ._8jGYJw {
    width: 100vw !important;
    height: calc(100vw * 2.89) !important; /* 1127/390 aspect ratio */
    contain: layout style !important;
  }

  .onhyOQ {
    width: 100vw !important;
    height: calc(100vw * 2.89) !important;
  }

  .GDnEHQ {
    width: 100vw !important;
    height: calc(100vw * 2.89) !important;
  }

  ._mXnjA {
    width: 100vw !important;
    height: calc(100vw * 2.89) !important;
  }

  .QhExXw.pKfnlA {
    width: 100vw !important;
    height: calc(100vw * 2.89) !important;
  }

  .ZRRuDw {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Scale factor: 390/1903 = 0.2049 for width mapping
     But Canva recalculates positions, not just scales.
     We use vw units to map the mobile coordinates.
     Original mobile canvas: 390px wide, positions in px.
     We convert: x_vw = (x_mobile / 390) * 100vw
                 y is trickier - we use the ratio to canvas height */

  /* --- Portrait image (clip-path container) --- */
  /* Original mobile: 358.8x637.6 at (15.6, 0), clip to 614.274px height */
  div[style*="clip-path"] {
    clip-path: polygon(4vw 0px, 96vw 0px, 96vw calc(100vw * 1.575), 4vw calc(100vw * 1.575)) !important;
  }

  #LBDCd1JmbqkJhPRP {
    width: 92vw !important;
    height: calc(92vw * 1.777) !important;
    transform: translate(4vw, 0px) !important;
  }
  /* Inner image: 425.1/358.8 = 1.1847x wider, offset left by 33.1/358.8 = 9.22% */
  #LBDCd1JmbqkJhPRP .DF_utQ {
    width: 92vw !important;
    height: calc(92vw * 1.777) !important;
  }
  #LBDCd1JmbqkJhPRP .Izwocg {
    width: calc(92vw * 1.1847) !important;
    height: calc(92vw * 1.777) !important;
    transform: translate(calc(-92vw * 0.0922), 0px) rotate(0deg) !important;
  }
  #LBDCd1JmbqkJhPRP img {
    width: 100% !important;
    height: 100% !important;
  }

  /* --- "YIWEN WEI" name --- */
  /* Mobile: 331x64 at (51, 73) */
  #LBzm9W79wkmqfjVS {
    transform: translate(13.2vw, calc(100vw * 0.187)) !important;
  }

  /* --- "Who am I?" heading --- */
  /* Mobile: 279x54 at (24, 630) */
  #LBBsfTgmzmw24h5m {
    transform: translate(6.05vw, calc(100vw * 1.615)) !important;
  }

  /* --- Body text (Product and Entrepreneurship...) --- */
  /* Mobile: 364x55 at (24, 696) */
  #LBWkLWRYQkZjxbTL {
    transform: translate(6.05vw, calc(100vw * 1.785)) !important;
  }

  /* --- Divider line 1 --- */
  /* Mobile: 335x1 at (24, 769) */
  #LBgT3dm0HZMHySR0 {
    width: 85.9vw !important;
    height: 1px !important;
    transform: translate(6.05vw, calc(100vw * 1.971)) !important;
  }

  /* --- "I think" --- */
  /* Mobile: 221x54 at (24, 773) */
  #LB4sSj5DxgVQFvYp {
    transform: translate(6.05vw, calc(100vw * 1.981)) !important;
  }

  /* --- "01" label --- */
  /* Mobile: 18x13 at (284, 793) */
  #LBNFnN3BBrtQ3sWG {
    transform: translate(72.9vw, calc(100vw * 2.034)) !important;
  }

  /* --- "I teach" --- */
  /* Mobile: 221x54 at (24, 843) */
  #LB9Mk4jffcm2QdtQ {
    transform: translate(6.05vw, calc(100vw * 2.16)) !important;
  }

  /* --- "02" label --- */
  /* Mobile: 18x13 at (284, 863) */
  #LBnsrLPZQhnNL6q7 {
    transform: translate(72.9vw, calc(100vw * 2.213)) !important;
  }

  /* --- "I talk" --- */
  /* Mobile: 221x54 at (24, 912) */
  #LBVKchzfdp9MpRN0 {
    transform: translate(6.05vw, calc(100vw * 2.338)) !important;
  }

  /* --- "03" label --- */
  /* Mobile: 18x13 at (284, 933) */
  #LBpzCD4WwzL7XCmt {
    transform: translate(72.9vw, calc(100vw * 2.391)) !important;
  }

  /* --- Divider line 2 --- */
  /* Mobile: 335x1 at (24, 979) */
  #LBjX0YtvYQlp1MyD {
    width: 85.9vw !important;
    height: 1px !important;
    transform: translate(6.05vw, calc(100vw * 2.511)) !important;
  }

  /* --- Quote text --- */
  /* Mobile: 391x61 at (24, 996) */
  #LBrtFtQf2kZDQLHR {
    transform: translate(6.05vw, calc(100vw * 2.553)) !important;
  }

  /* --- LinkedIn icon --- */
  /* Mobile: 41x41 at (24, 1070) */
  #__id8 {
    width: 10.56vw !important;
    height: 10.56vw !important;
    transform: translate(6.05vw, calc(100vw * 2.744)) !important;
  }

  /* --- Email icon --- */
  /* Mobile: 33x33 at (83, 1075) */
  #__id12 {
    width: 8.44vw !important;
    height: 8.44vw !important;
    transform: translate(21.59vw, calc(100vw * 2.756)) !important;
  }

  /* --- X/Twitter icon --- */
  #__id16 {
    width: 6.01vw !important;
    height: 6.15vw !important;
    transform: translate(35.01vw, calc(100vw * 2.767)) !important;
  }

  /* --- Cal.com icon --- */
  #__id_cal {
    width: 7.6vw !important;
    height: 7.6vw !important;
    transform: translate(46.77vw, calc(100vw * 2.760)) !important;
  }

  /* Fix icon sizing within containers */
  #__id8 .Izwocg,
  #__id12 .Izwocg,
  #__id16 .Izwocg,
  #__id_cal .Izwocg {
    width: 100% !important;
    height: 100% !important;
  }
  #__id8 img,
  #__id12 img,
  #__id16 img,
  #__id_cal img {
    width: 100% !important;
    height: 100% !important;
  }

  /* Text containers: let JS set explicit widths for proper scale rendering */
}

/* ============================================
   Glass tooltip for interactive labels
   ============================================ */
.glass-tooltip {
  position: fixed;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Tenor Sans', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 99998;
  white-space: nowrap;
}
.glass-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Essence hover effect */
.essence-interactive {
  cursor: pointer;
  transition: font-size 0.3s ease !important;
  animation: essence-glow-breath 0.5s ease-in-out infinite;
}

@keyframes essence-glow-breath {
  0%, 100% {
    text-shadow:
      0 0 0px rgba(255, 255, 255, 0);
  }
  70% {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 1),
      0 0 25px rgba(255, 255, 255, 0.6),
      0 0 50px rgba(255, 255, 255, 0.25);
  }
}

.essence-interactive:hover {
  animation: none;
  text-shadow: none;
}

/* Touch-active states (mirror hover for touch devices) */
.gradient-word.touch-active {
  animation: none;
  filter: none;
}
.gradient-word.touch-active .a_GcMg {
  background: #ffffff !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 22px !important;
  text-decoration-line: none !important;
}
.essence-interactive.touch-active {
  animation: none;
  text-shadow: none;
}

/* ============================================
   Video modal
   ============================================ */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: videoModalFadeIn 0.25s ease;
}
@keyframes videoModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.video-modal-container {
  position: relative;
  width: 80vw;
  height: 80vh;
  max-width: 80vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-modal-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.video-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .video-modal-container {
    width: 95vw;
    height: auto;
    max-height: 80vh;
  }
  .video-modal-close {
    top: -44px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }
}

/* ============================================
   Mobile optimizations
   ============================================ */
@media (max-width: 768px) {
  .glass-tooltip {
    white-space: normal;
    max-width: calc(100vw - 32px);
    font-size: 12px;
    padding: 8px 14px;
  }

  /* Increase touch targets for small labels */
  #LBNFnN3BBrtQ3sWG,
  #LBnsrLPZQhnNL6q7,
  #LBpzCD4WwzL7XCmt {
    min-width: 44px;
    min-height: 44px;
  }
}