@import url('/css/style.min.css');

/* ==========================================================================
   THE MOTION ENGINE (CLEAN FADE-AND-RISE ARRAY)
   ========================================================================== */

/* --- 1. HERO LOAD-IN ENTRANCE ARRAY --- */
@keyframes megaEntrance {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(40px) scale(0.96);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

/* Elements stay perfectly invisible until preloader fires .hero-start class */
.static-line, .action-line, .software-stack-container, .icon-item {
  opacity: 0;
}

.hero-start .static-line { animation: megaEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-start .action-line { animation: megaEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.hero-start .software-stack-container { animation: megaEntrance 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }

@keyframes iconPop {
  0% { opacity: 0; transform: translateY(20px) scale(0.4); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-start .icon-flex-row .icon-item,
.hero-start .icon-flex-row-lang .icon-item {
  animation: iconPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hero-start .icon-item:nth-child(1)  { animation-delay: 0.35s; }
.hero-start .icon-item:nth-child(2)  { animation-delay: 0.40s; }
.hero-start .icon-item:nth-child(3)  { animation-delay: 0.45s; }
.hero-start .icon-item:nth-child(4)  { animation-delay: 0.50s; }
.hero-start .icon-item:nth-child(5)  { animation-delay: 0.55s; }
.hero-start .icon-item:nth-child(6)  { animation-delay: 0.60s; }
.hero-start .icon-item:nth-child(7)  { animation-delay: 0.65s; }
.hero-start .icon-item:nth-child(8)  { animation-delay: 0.70s; }
.hero-start .icon-item:nth-child(9)  { animation-delay: 0.75s; }
.hero-start .icon-item:nth-child(10) { animation-delay: 0.80s; }
.hero-start .icon-item:nth-child(11) { animation-delay: 0.85s; }
.hero-start .icon-item:nth-child(12) { animation-delay: 0.90s; }


/* --- 2. LIQUID GRAPHIC HEADER TEXT --- */
.name-button {
  position: relative;
  background: linear-gradient(to right, var(--accent-main) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke-color: var(--accent-main) !important;
  transition: background-position 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-text-stroke-color 0.4s ease !important;
}

.name-button:hover {
  background-position: 0 0;
}


/* --- 3. CROSS-BROWSER SCROLL DRIVEN ENTRANCE TRACKS --- */
.project-heading-text,
.project-card-link,
.project-btn-wrapper, 
.blog-heading-text,
.blog-single-link,
.blog-btn-wrapper,    
.ascii-leaf-parent-container,
.ascii-leaves-parent-container {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.2s ease;
}

.project-heading-text { transform: translateX(-80px) skewX(8deg); filter: blur(4px); }
.blog-heading-text { transform: translateX(80px) skewX(-8deg); filter: blur(4px); }

.project-card-link, .project-btn-wrapper { transform: translateY(50px); }
.blog-single-link, .blog-btn-wrapper { transform: translateY(50px); }

.ascii-leaf-parent-container { transform: translateY(80px); }
.ascii-leaves-parent-container { transform: translateY(-80px); }


/* --- BUTTON WRAPPER LAYOUT ALIGNMENTS --- */
.project-btn-wrapper,
.blog-btn-wrapper {
  display: flex;
  width: 100%;
  padding-top: 10px; 
  margin-top: -10px;
}

.project-btn-wrapper { justify-content: flex-start; }
.blog-btn-wrapper { justify-content: flex-end; }

@media (max-width: 1100px) {
  .project-btn-wrapper,
  .blog-btn-wrapper {
    justify-content: center !important;
  }
}


/* --- 4. ENGINE ACTIVATION SWITCH ARRAYS --- */
.in-view {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) scale(1) skewX(0deg) rotateX(0deg) !important;
  filter: blur(0) brightness(1) !important;
}

.ascii-leaf-parent-container.in-view {
  opacity: 0.15 !important;
  transform: translateY(0) !important;
}

.ascii-leaves-parent-container.in-view {
  opacity: 0.4 !important;
  transform: translateY(0) !important;
}

.ascii-leaf-parent-container.in-view #ascii-leaf-container,
.ascii-leaves-parent-container.in-view #ascii-leaves-container {
  opacity: 1 !important;
  display: block !important;
}

/* Scroll Entrance Stagger (Strict child grouping) */
.project-list > a:nth-child(2) { transition-delay: 0.1s; }
.project-list > a:nth-child(3) { transition-delay: 0.2s; }

.blog-index-list > a:nth-child(2) { transition-delay: 0.08s; }
.blog-index-list > a:nth-child(3) { transition-delay: 0.16s; }
.blog-index-list > a:nth-child(4) { transition-delay: 0.24s; }
.blog-index-list > a:nth-child(5) { transition-delay: 0.32s; }

/* Immediate mouse interaction overrides */
.project-card-link:hover,
.projects-page-link:hover,
.blog-page-link:hover {
  transition-delay: 0s !important;
}


/* --- 5. INTERACTION MICRO-ELEVATIONS & HOVERS --- */

/* Target the visual assets inside the item wrappers rather than the animated wrapper block */
.icon-item img,
.icon-item svg,
.icon-item .link-icon {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* Apply the structural scale up directly to the element child nodes on hover */
.icon-item:hover img,
.icon-item:hover svg,
.icon-item:hover .link-icon {
  transform: translateY(-4px) scale(1.4);
}

@media (min-width: 768px) {
  .nav-item {
    position: relative;
    padding: 4px 0;
    display: inline-block;
  }

  .nav-item::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-main);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-item:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.icon-flex-row:hover .icon-item:not(:hover),
.icon-flex-row-lang:hover .icon-item:not(:hover) {
  opacity: 0.35;
  transform: scale(0.9);
}

/* --- FIXED BUTTON HOVER ANIMS --- */
.projects-page-link, 
.blog-page-link {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s ease-in-out,
              opacity 0.4s ease-in-out !important;
}

.projects-page-link:hover, 
.blog-page-link:hover {
  transform: translateY(-4px) !important;
  opacity: 0.95 !important;
}


/* --- 6. METADATA COMPONENTS MICRO-TRANSITIONS --- */
.project-card-link {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card-link:hover {
  transform: translateX(15px) translateY(0);
}

.project-index-card {
  transition: border-color 0.4s ease;
}

.project-card-link:hover .project-index-card {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.project-index-title { 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; 
}
.project-card-link:hover .project-index-title { 
  color: var(--accent-light); 
  transform: translateX(5px); 
}

.project-index-desc { 
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}
.project-card-link:hover .project-index-desc { 
  opacity: 0.9; 
  transform: translateX(5px); 
}