/* ============================================================
   main.css  —  Naomity Portfolio
   Root stylesheet — imports all partials in order.
   ============================================================ */

/* ---- 1. Base ---- */
@import url('./base/_variables.css');
@import url('./base/_reset.css');

/* ---- 2. Layout ---- */
@import url('./layout/_grid.css');

/* ---- 3. Components ---- */
@import url('./components/_navbar.css');
@import url('./components/_hero.css');
@import url('./components/_projects.css');
@import url('./components/_contact.css');

/* ============================================================
   Global / Shared Styles
   ============================================================ */

/* ---- Footer ---- */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-10);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.footer__logo {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--fw-black);
  background:   var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
  list-style: none;
}

.footer__links a {
  font-size:   var(--text-sm);
  color:       var(--color-text-subtle);
  transition:  color var(--duration-fast);
}

.footer__links a:hover { color: var(--color-text-muted); }

.footer__copy {
  font-size:  var(--text-sm);
  color:      var(--color-text-subtle);
}

/* ---- Scroll-reveal animation class (added by JS) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.stagger.revealed > * { opacity: 1; transform: translateY(0); }
.stagger.revealed > *:nth-child(1)  { transition-delay: 0ms;   }
.stagger.revealed > *:nth-child(2)  { transition-delay: 80ms;  }
.stagger.revealed > *:nth-child(3)  { transition-delay: 160ms; }
.stagger.revealed > *:nth-child(4)  { transition-delay: 240ms; }
.stagger.revealed > *:nth-child(5)  { transition-delay: 320ms; }
.stagger.revealed > *:nth-child(6)  { transition-delay: 400ms; }

/* ---- Noise texture overlay ---- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.025;
}