/* =============================================================================
   COMPONENTS.CSS — All section & component styles (desktop/base)
   Organized by section. Responsive overrides live in responsive.css.
   ============================================================================= */


/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--black);
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 18px;
  color: var(--black);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

/* Double-border button effect (from component library) */
.nav-links a::before {
  content: '';
  position: absolute;
  inset: 3px -3px -3px 3px;
  border: 1px solid var(--black);
  pointer-events: none;
}

.nav-links a:hover,
.nav-links a.active {
  border-color: var(--black);
}

/* Filled "contact" button */
.nav-links a.contact-btn {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.nav-links a.contact-btn::before {
  border-color: var(--black);
}

/* Hamburger (hidden on desktop, shown via responsive.css) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--black);
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer (hidden by default) */
.mobile-nav {
  display: none;
  position: fixed;
  top: 62px; left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--black);
  z-index: 99;
  flex-direction: column;
  padding: 20px 32px 28px;
  gap: 12px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  color: var(--black);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 12px;
}
.mobile-nav a:last-child { border-bottom: none; }


/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */

/* ─── Hero intro animation ─── */
@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-greeting {
  opacity: 0;
  animation: hero-fade-in 2s ease forwards;
  animation-delay: 0.2s;
}

.hero-name {
  opacity: 0;
  animation: hero-fade-in 2s ease forwards;
  animation-delay: .9s;
}

.hero-subtitle {
  opacity: 0;
  animation: hero-fade-in 2s ease forwards;
  animation-delay: 1.6s;
}
#hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}

/* Full-bleed SVG background */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.85;
  pointer-events: none;
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
}

/*
 * FUZZY BLUR HALOS
 * ─────────────────────────────────────────────
 * Four concentric backdrop-filter layers sit behind the card.
 * Each uses a radial-gradient mask so blur fades organically
 * at the edges instead of cutting off hard at a border-radius.
 *
 * Layer order (back → front):
 *   .blur-halo-4  widest spread,  softest blur  (6px)
 *   .blur-halo-3                               (15px)
 *   .blur-halo-2                               (30px)
 *   .blur-halo-1  tightest spread, sharpest blur (48px)
 *
 * To adjust the bloom size: change the inset values.
 * To adjust blur strength: change the blur() values.
 * To adjust falloff softness: edit the radial-gradient stop positions.
 */
.hero-card-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.blur-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Outermost — widest spread, faintest blur */
.blur-halo-4 {
  inset: -210px -240px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, 0.01);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 0%, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 0%, black 20%, transparent 70%);
}

.blur-halo-3 {
  inset: -135px -165px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(255, 255, 255, 0.02);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, black 30%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 0%, black 30%, transparent 72%);
}

.blur-halo-2 {
  inset: -75px -98px;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.03);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 0%, black 40%, transparent 75%);
          mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, black 0%, black 40%, transparent 75%);
}

/* Innermost — tightest spread, strongest blur */
.blur-halo-1 {
  inset: -27px -36px;
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  background: rgba(255, 255, 255, 0.04);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, black 50%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, black 50%, transparent 80%);
}

/* Card text content — sits above all halo layers */
.hero-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 459px;
  padding: 72px 80px 80px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* "Hello, I'm" black bar */
.hero-greeting {
  position: relative;
  display: inline-block;
}
.hero-greeting-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  color: var(--white);
  padding: 10px 28px;
  background: var(--black);
  white-space: nowrap;
}

/* "Emmett." */
.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 10vw, 128px);
  color: var(--black);
  letter-spacing: 0.07em;
  line-height: 1;
  margin-top: 4px;
}

/* "[a Flagstaff based website designer]" */
.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 20px);
  color: var(--muted);
  letter-spacing: 0.36em;
  margin-top: 4px;
}

/* Star decoration (top-left of hero) */
.star-deco {
  position: absolute;
  top: 30%;
  left: 8%;
  width: 120px;
  opacity: 0.15;
  pointer-events: none;
  animation: spin-slow 20s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────
   WORK / CONTRIBUTIONS
   ───────────────────────────────────────────── */

#work {
  position: relative;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
  margin-top: calc(100vh - 400px);
}
#work::before {
  content: '';
  position: absolute;
  inset: -60px -80px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.65);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.section-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  color: var(--black);
  margin-bottom: var(--space-lg);
}
.section-label .bracket { color: var(--navy); }

/* Project video — inline with title, same height */
.project-video {
  display: block;
  height: 4em;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Project card */
.project-card {
  flex: 1;
  position: relative;
  border-top: 2px solid var(--black);
  padding: 32px 0 48px;
}

.project-title-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.project-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: 0.02em;
}

.project-title-sub {
  font-weight: 400;
}

.project-url {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

/* Two-column inner layout */
.project-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border: none;
  border-top: 2px solid var(--black);
}

.project-desc {
  padding: 14px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.6;
  color: var(--black);
  border-right: 1px solid var(--black);
}

.project-meta {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meta-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--black);
}
.meta-row:last-of-type { border-bottom: none; }

.meta-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
  color: var(--black);
}
.meta-label::before { content: '['; font-style: normal; font-weight: 400; }
.meta-label::after  { content: ']'; font-style: normal; font-weight: 400; }

.meta-value {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--black);
}

.case-study-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 24px;
  background: var(--pink);
  border: 1px solid var(--pink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--black);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.case-study-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.more-coming {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--muted);
  margin-top: 40px;
  text-align: right;
}


/* Semicircle right-edge decoration */
.semicircle-deco {
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  height: 100%;
  max-width: 12vw;
  pointer-events: none;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   ABOUT
   ───────────────────────────────────────────── */

/* Full-width wrapper so semicircle can reach the true viewport edge */
.about-outer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#about {
  position: relative;
  padding: 100px var(--space-lg) var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
}
#about::before {
  content: '';
  position: absolute;
  inset: -60px -80px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.65);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 80px;
  align-items: start;
}

/* "about me" SVG badge */
.about-label-block {
  flex-shrink: 0;
}
.about-tag-svg {
  width: 149px;
  height: 145px;
  display: block;
}

/* Bio text */
.about-text-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.8;
  color: var(--black);
  text-align: center;
}

.about-para .key {
  font-style: italic;
  font-weight: 700;
}
.about-para .key::before { content: '['; font-style: normal; font-weight: 400; }
.about-para .key::after  { content: ']'; font-style: normal; font-weight: 400; }


/* ─────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────── */

#contact {
  padding: 80px var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  border-top: 1px solid var(--black);
}

.contact-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
}

.contact-arrows {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  min-height: 1em;
  display: flex;
  align-items: center;
}
.contact-arrows::after {
  content: '>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>';
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 22px);
  color: var(--pink);
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
}

.contact-link-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.contact-underline {
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 2px;
  background: var(--black);
}

.contact-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--black);
  text-decoration: none;
}

/* Animated arrow (3 bouncing diamonds) */
.arrow-deco {
  display: flex;
  align-items: center;
  gap: 6px;
}
.arrow-diamond {
  width: 10px;
  height: 10px;
  background: var(--black);
  transform: rotate(45deg);
  animation: bounce-right 1.2s ease-in-out infinite;
}
@keyframes bounce-right {
  0%, 100% { transform: rotate(45deg) translateX(0); }
  50%       { transform: rotate(45deg) translateX(4px); }
}


/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */

footer {
  background: var(--black);
  color: var(--white);
  padding: 32px var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--sky); /* already have this blue token: #07ACFF */
  text-decoration: none;
  margin-left: calc(50% - 105px);
}

.footer-copy {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.back-to-top {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  transition: background 0.2s;
}
.back-to-top:hover { background: rgba(255, 255, 255, 0.1); }