/* --- TreeWidget 10.1 (Adjusted Hover Interaction) --- */

/* 1. The Master Link Container */
.ww-link-wrapper {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin: 0 auto;
  cursor: pointer;
}

/* 2. The Tree Structure */
.ww-master-tree {
  position: relative;
  width: 140px;
  height: 140px;
  overflow: visible;
  /* Reduced properties in transition to match changes */
  transition: transform 3s cubic-bezier(0.25, 1, 0.5, 1), 
              filter 3s ease;
  border-radius: 50%;
}

.tree-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

/* --- BASE LAYER TIMELINES (Unchanged) --- */
.green-phase {
  opacity: 0;
  transform: scale(0.8);
  transform-origin: bottom center;
}

.gold-phase {
  opacity: 0;
  transform-origin: bottom center;
}

.g-core   { animation: greenLoop 24s ease-in-out 0s infinite, dynamicShimmer 4s ease-in-out 0s infinite alternate; }
.g-base   { animation: greenLoop 24s ease-in-out 0.5s infinite, dynamicShimmer 4.5s ease-in-out 0s infinite alternate-reverse; }
.g-tips   { animation: greenLoop 24s ease-in-out 1.0s infinite, dynamicShimmer 3.5s ease-in-out 0s infinite alternate; }

.o-core   { animation: goldLoop 24s ease-in-out 0s infinite, dynamicShimmer 4s ease-in-out 0s infinite alternate; }
.o-base   { animation: goldLoop 24s ease-in-out 0.5s infinite, dynamicShimmer 4.5s ease-in-out 0s infinite alternate-reverse; }
.o-tips   { animation: goldLoop 24s ease-in-out 1.0s infinite, dynamicShimmer 3.5s ease-in-out 0s infinite alternate; }

.o-ground { animation: groundLoop 24s ease-in-out 0s infinite; }

/* --- THE INVITATION TEXT --- */
.ww-hover-text {
  margin-top: 15px;
  color: #36454F; 
  font-family: inherit; 
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* =========================================
   --- THE HOVER INTERACTION OVERRIDES --- 
   ========================================= */

/* A. Tree Hover State */
.ww-link-wrapper:hover .ww-master-tree {

}

/* B. Drop the text down and fade it in */
.ww-link-wrapper:hover .ww-hover-text {
  opacity: 1;

}

/* C. Force Full Green Bloom (Overrides Animation Clock - Unchanged) */
.ww-link-wrapper:hover .green-phase {
  animation: none !important; 
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
  transition: opacity 2s ease, transform 3s ease;
}

/* D. Hide all Gold/Autumn layers instantly (Unchanged) */
.ww-link-wrapper:hover .gold-phase {
  animation: none !important; 
  opacity: 0 !important;
  transition: opacity .5s ease;
}

/* --- MASTER KEYFRAMES (Unchanged) --- */
@keyframes greenLoop {
  0%, 8% { opacity: 0; transform: scale(0.8); }
  16%, 40% { opacity: 1; transform: scale(1); }
  48%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes goldLoop {
  0%, 35% { opacity: 0; }
  45%, 70% { opacity: 1; }
  83%, 100% { opacity: 0; }
}
@keyframes groundLoop {
  0%, 70% { opacity: 0; }
  80%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dynamicShimmer {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(1.5deg) scale(1.01); }
}/* --- Footer Tree Widget Overrides --- */

/* Magnify the tree by 1.8x (roughly 250px) without breaking image proportions */
.ww-link-wrapper.ww-footer-tree .ww-master-tree {
  transform: scale(3.0);
  margin-top: 100px;
  margin-bottom: 60px; /* Forces the footer to stay pushed down */
}

/* Force text to stay visible, and push it down to clear the bigger branches */
.ww-link-wrapper.ww-footer-tree .ww-hover-text {
  opacity: 1 !important;
  transform: translateY(60px) !important; 
  font-size: 20px; /* Bumps up the text size slightly to match the larger tree */
}