/* ══════════════════════════════════════════════════════════
   FIBONACCI CRAFT® — Animation Stylesheet v1.0.0
   Fibonacci-inspired animations & micro-interactions
   ══════════════════════════════════════════════════════════ */

/* ─── HERO ANIMATIONS ─── */
.hero-section {
  min-height: 100vh; display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden; position: relative;
}
.hero-left {
  padding: 80px 64px 80px 52px;
  display: flex; flex-direction: column;
  justify-content: center; position: relative; z-index: 2;
  background: var(--w);
}
.hero-right {
  position: relative; overflow: hidden;
}
.hero-right img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: hero-zoom 10s ease-out forwards;
}
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-right::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--w) 0%, transparent 28%),
              linear-gradient(to top, rgba(27,67,50,.25) 0%, transparent 60%);
  z-index: 1;
}

/* Fibonacci canvas container */
.fib-canvas-wrap {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
#fib-canvas { width: 100%; height: 100%; opacity: .12; }

/* Hero text animations */
.h-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gl); color: var(--g);
  padding: 6px 14px; border-radius: 100px;
  font-family: var(--fm); font-size: .65rem; letter-spacing: .12em;
  margin-bottom: 28px;
  opacity: 0; animation: anim-rise .7s var(--ease) .5s forwards;
}
.h-eyebrow::before { content: '◆'; font-size: .42rem; }

.h-title {
  font-family: var(--fd);
  font-size: clamp(2.6rem, 5.5vw, 5.2rem);
  font-weight: 900; line-height: 1.04; letter-spacing: -.03em; color: var(--ink);
}
.h-title .line {
  display: block; overflow: hidden;
}
.h-title .word {
  display: inline-block;
  opacity: 0; transform: translateY(100%);
  animation: word-rise 1s var(--ease) forwards;
}
.h-title em  { font-style: italic; color: var(--g); }
.h-title .stroke { -webkit-text-stroke: 1.5px var(--g); color: transparent; }

.h-desc {
  font-size: .975rem; font-weight: 300; color: var(--i3);
  line-height: 1.85; max-width: 420px; margin: 24px 0 38px;
  opacity: 0; animation: anim-rise .7s var(--ease) .9s forwards;
}
.h-btns {
  display: flex; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: anim-rise .7s var(--ease) 1.05s forwards;
}

/* Floating stat pills */
.h-stats {
  position: absolute; bottom: 40px; left: 52px;
  display: flex; gap: 12px; flex-wrap: wrap; z-index: 10;
  opacity: 0; animation: anim-rise .8s var(--ease) 1.2s forwards;
}
.h-stat {
  background: rgba(250,250,247,.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(27,67,50,.1); border-radius: 10px;
  padding: 14px 20px;
  transition: transform .3s var(--spr), box-shadow .3s;
}
.h-stat:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.h-stat-n {
  font-family: var(--fd); font-size: 1.9rem; font-weight: 900;
  color: var(--g); line-height: 1; display: block; letter-spacing: -.04em;
}
.h-stat-l {
  font-family: var(--fm); font-size: .58rem; letter-spacing: .1em;
  color: var(--i4); text-transform: uppercase; display: block; margin-top: 3px;
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3;
  opacity: 0; animation: anim-rise .6s var(--ease) 1.5s forwards;
}
.sh-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--g), transparent); animation: sh-anim 1.8s ease-in-out infinite; }
@keyframes sh-anim { 0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.4);opacity:.4} }
.sh-text { font-family: var(--fm); font-size: .56rem; letter-spacing: .16em; color: var(--i4); text-transform: uppercase; }

/* ─── KEYFRAMES ─── */
@keyframes anim-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes word-rise {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-left {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes anim-scale {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(2deg); }
  66%      { transform: translateY(6px)  rotate(-1.5deg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-rev  { to { transform: rotate(-360deg); } }

/* ─── FIBONACCI RINGS (hero decoration) ─── */
.fib-rings {
  position: absolute; top: 10%; right: 4%;
  pointer-events: none; z-index: 1;
}
.fib-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(27,67,50,.1);
  animation: float 12s ease-in-out infinite;
}
/* Golden ratio sizes: 1 1 2 3 5 8 × base(34px) */
.fib-ring-1 { width: 34px;  height: 34px;  top: 180px; left: 140px; animation-delay: 0s; }
.fib-ring-2 { width: 55px;  height: 55px;  top: 158px; left: 119px; animation-delay: -2s; border-color: rgba(27,67,50,.08); }
.fib-ring-3 { width: 89px;  height: 89px;  top: 125px; left: 96px;  animation-delay: -4s; border-color: rgba(27,67,50,.07); }
.fib-ring-4 { width: 144px; height: 144px; top: 70px;  left: 48px;  animation-delay: -6s; border-color: rgba(27,67,50,.05); }
.fib-ring-5 { width: 233px; height: 233px; top: -17px; left: -41px; animation-delay: -8s; border-color: rgba(27,67,50,.04); }
.fib-ring-6 { width: 377px; height: 377px; top: -134px;left: -168px;animation-delay:-10s; border-color: rgba(27,67,50,.025); }

/* ─── GOLDEN SPIRAL (SVG path animation) ─── */
.fib-spiral-svg { overflow: visible; }
.fib-spiral-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw-spiral 2.5s var(--ease) 0.8s forwards;
}
@keyframes draw-spiral { to { stroke-dashoffset: 0; } }

/* ─── NUMBER COUNTER ─── */
.counter-wrap { position: relative; overflow: hidden; display: inline-block; }
.counter-old { animation: counter-out .3s ease forwards; }
.counter-new { animation: counter-in  .3s ease forwards; }
@keyframes counter-out { to   { transform: translateY(-100%); opacity: 0; } }
@keyframes counter-in  { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ─── LINK UNDERLINE ANIMATION ─── */
.link-u {
  position: relative; display: inline-block;
}
.link-u::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1.5px; background: currentColor;
  transition: width .35s var(--ease);
}
.link-u:hover::after { width: 100%; }

/* ─── STAGGER CHILDREN ─── */
.stagger-children > * { opacity: 0; transform: translateY(24px); }
.stagger-children.in > *:nth-child(1) { animation: anim-rise .7s var(--ease) .05s forwards; }
.stagger-children.in > *:nth-child(2) { animation: anim-rise .7s var(--ease) .15s forwards; }
.stagger-children.in > *:nth-child(3) { animation: anim-rise .7s var(--ease) .25s forwards; }
.stagger-children.in > *:nth-child(4) { animation: anim-rise .7s var(--ease) .35s forwards; }
.stagger-children.in > *:nth-child(5) { animation: anim-rise .7s var(--ease) .45s forwards; }
.stagger-children.in > *:nth-child(6) { animation: anim-rise .7s var(--ease) .55s forwards; }

/* ─── IMAGE PARALLAX WRAPPER ─── */
.parallax-img { overflow: hidden; }
.parallax-img img { transform-origin: center; will-change: transform; }

/* ─── HOVER TILT CARD ─── */
.tilt-card { transition: transform .4s var(--ease); transform-style: preserve-3d; }

/* ─── PROGRESS BADGES ─── */
.skill-bars { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.skill-bar { }
.skill-bar-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--fm); font-size: .65rem; letter-spacing: .08em; color: var(--i3); }
.skill-bar-track { height: 4px; background: var(--w3); border-radius: 4px; overflow: hidden; }
.skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--g), var(--g3)); border-radius: 4px; width: 0; transition: width 1.4s var(--ease); }
.skill-bar-fill.animated { width: var(--pct); }

/* ─── NAV EMBLEM GLOW ─── */
.n-emblem {
  animation: emblem-glow 4s ease-in-out infinite;
}
@keyframes emblem-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(27,67,50,0); }
  50%      { box-shadow: 0 0 0 8px rgba(27,67,50,.15); }
}

/* ─── PAGE TRANSITION ─── */
.page-transition {
  position: fixed; inset: 0; z-index: 9985;
  background: var(--g); transform-origin: top;
  transform: scaleY(0);
  transition: transform .5s var(--snap);
  pointer-events: none;
}
.page-transition.active { transform: scaleY(1); }
.page-transition.leaving { transform-origin: bottom; transform: scaleY(0); }

/* ─── ABOUT HERO ─── */
.about-hero-wrap {
  position: relative; overflow: hidden;
  height: 55vh; min-height: 380px;
  display: flex; align-items: flex-end;
  padding: 0 52px 52px;
}
.about-hero-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; animation: hero-zoom 10s ease-out forwards;
}
.about-hero-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14,26,20,.8) 0%, rgba(14,26,20,.1) 60%, transparent 100%);
}
.about-hero-text { position: relative; z-index: 2; }

/* ─── ACTIVE NAV INDICATOR ─── */
.n-links > li > a.active::after {
  content: ''; position: absolute; bottom: -3px; left: 14px; right: 14px;
  height: 2px; background: var(--g); border-radius: 2px;
}

/* ─── HERO RESPONSIVE ─── */
@media (max-width: 900px) {
  .hero-section { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 56px 28px 40px; }
  .hero-right { height: 52vw; min-height: 280px; }
  .h-stats { left: 28px; bottom: 20px; }
  .h-stat-n { font-size: 1.5rem; }
  .fib-rings { display: none; }
  .h-btns { flex-direction: column; }
  .h-btns .btn-g, .h-btns .btn-o { justify-content: center; }
  .scroll-hint { display: none; }
  .about-hero-wrap { padding: 0 28px 40px; }
}