/* =============================================================
   main.css — Custom styles for Vincent Yang portfolio
   (Tailwind CDN handles utilities; these are site-specific rules)
   ============================================================= */

/* ── Portfolio card max-width ─────────────────────────────────── */
.portfolio-card {
  max-width: 400px;
}

/* ── Nav link hover ───────────────────────────────────────────── */
.nav-link:hover {
  text-decoration: underline;
  font-weight: 700;
}

/* ── Hamburger morph (open state) ────────────────────────────── */
#hamburger.open span:nth-child(1) { transform: rotate(45deg) translateY(4px); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: rotate(-45deg) translateY(-4px); }

/* ── Branch / twig "bud" buttons ─────────────────────────────── */
/* Position and initial hidden state; --tx/--ty set per-button inline */
.branch-btn {
  position: absolute;
  width: 5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: .75rem;
  background: #1f2937;
  color: #fff;
  font-size: .875rem;
  opacity: 0;
  transform: translate(var(--tx), var(--ty)) scale(.8);
  transition: opacity .3s ease, transform .3s ease;
}

/* Reveal buds only when both .menu-open AND .branch-ready are on body */
.menu-open.branch-ready .branch-btn {
  opacity: 1;
  transform: translate(var(--tx), var(--ty)) scale(1);
}

/* ── Scroll-snap helpers ──────────────────────────────────────── */
.snap-start { scroll-snap-align: start; }
body.snap-active #snapContainer { scroll-snap-type: y mandatory; }

/* ── Blossom layer GPU promotion ─────────────────────────────── */
#blossomLayer { will-change: opacity; }
#blossomLayer:not(.active) {
  z-index: 0 !important;    /* push behind content when inactive */
  pointer-events: none;
}

/* ── Z-index stack ────────────────────────────────────────────── */
#blossomLayer { z-index: 30; }
header        { z-index: 40; }

/* ── Typewriter / hero name ───────────────────────────────────── */
#heroName   { transition: opacity 0.4s ease; }
#heroLine   { overflow: hidden; white-space: pre-line; }
#typed      { display: inline-block; position: relative; }
#caret {
  display: inline-block;
  width: 2px;
  height: 0.8em;
  background: currentColor;
  animation: caretBlink .8s step-end infinite;
}
/* Pause caret blink while typing */
.typing #caret { animation-play-state: paused; }

@keyframes caretBlink { 50% { opacity: 0; } }

/* ── Hamburger bounce animation ──────────────────────────────── */
@keyframes bounceStack {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-6px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(-3px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

#hamburger.animate span:nth-child(1) { animation: bounceStack 1s ease-out 0s; }
#hamburger.animate span:nth-child(2) { animation: bounceStack 1s ease-out 0.1s; }
#hamburger.animate span:nth-child(3) { animation: bounceStack 1s ease-out 0.2s; }

/* Idle hover bounce (closed state) */
#hamburger:not(.open):hover span { animation: bounceStack 0.6s ease-in-out; }

/* ── Hamburger wiggle animations (open state hover) ─────────── */
@keyframes wiggle {
  0%, 100% { transform: rotate(45deg) translateY(4px); }
  25%       { transform: rotate(50deg) translateY(4px); }
  75%       { transform: rotate(40deg) translateY(4px); }
}

@keyframes wiggleBottom {
  0%, 100% { transform: rotate(-45deg) translateY(-4px); }
  25%       { transform: rotate(-50deg) translateY(-4px); }
  75%       { transform: rotate(-40deg) translateY(-4px); }
}

#hamburger.open:hover span:nth-child(1) { animation: wiggle 0.4s ease-in-out; }
#hamburger.open:hover span:nth-child(3) { animation: wiggleBottom 0.4s ease-in-out; }

/* ── Scrollbar hide helper ────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Timeline cards ───────────────────────────────────────────── */
.timeline-card { flex-shrink: 0; }

/* Fade edges of the timeline track */
#timelineContainer::before,
#timelineContainer::after {
  content: "";
  position: absolute;
  top: 0;
  width: 5vw;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
#timelineContainer::before {
  left: 0;
  background: linear-gradient(to right, white 60%, transparent);
}
#timelineContainer::after {
  right: 0;
  background: linear-gradient(to left, white 60%, transparent);
}

/* Timeline card base */
.timeline-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #ffffff 5%, #f3f4f6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
}
.timeline-card:hover {
  box-shadow: 0 0 10px rgba(100, 200, 255, 0.4), 0 0 25px rgba(100, 200, 255, 0.2);
  border-color: rgba(100, 200, 255, 0.4);
  transform: scale(1.05);
}
.timeline-card h3 {
  font-family: 'Segoe UI Semibold', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.03em;
}
.timeline-card .diamond {
  box-shadow: 0 0 4px rgba(0, 150, 255, 0.3);
}

/* ── Diamond animations ───────────────────────────────────────── */
.diamond-core { transform: rotate(45deg); }

@keyframes diamondRotate {
  0%   { transform: rotate(45deg); }
  25%  { transform: rotate(135deg); animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1.7); }
  50%  { transform: rotate(225deg); animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1.7); }
  75%  { transform: rotate(315deg); animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1.7); }
  100% { transform: rotate(405deg); }
}

@keyframes counterRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* Gentle idle breathing for the inner square */
@keyframes squarePulse {
  0%, 25%, 50%, 75%, 100% { transform: rotate(45deg) scale(1); }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(45deg) scale(1.9);
    animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1.7);
  }
}

@keyframes hoverPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Idle animation classes */
.animate-diamond-outer   { animation: diamondRotate 6s linear infinite; }
.animate-diamond-counter { animation: counterRotate 6s linear infinite; }
.animate-diamond-inner   { animation: squarePulse 6s cubic-bezier(0.6, 0, 0.4, 1.5) infinite; }

/* Hover spin — inner square grows to fill shell */
.diamond.hover-spin .diamond-square {
  animation: none !important;
  transform: rotate(45deg) scale(1.8);
  transition: transform .6s cubic-bezier(.3, .8, .4, 1.2);
}

/* Reverting — mouse left before spin ended */
.diamond.reverting .diamond-square {
  transform: rotate(45deg) scale(1);
  transition: transform .2s ease-out;
}

/* Settled (clicked) — frozen grey state */
.diamond.diamond-settled .diamond-square {
  transform: rotate(45deg) scale(1);
  background: #9ca3af;
}

/* Diamond tooltip */
.diamond .diamond-tip      { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.diamond .diamond-tip.show { opacity: 1; }

/* ── Petal fade helper ────────────────────────────────────────── */
.petal-fade { transition: opacity 0.6s ease; }