/* ============================================================
   Sam Black — Portfolio (redesign)
   Shared tokens + nav + footer. Every measurement below comes from the
   1920px-wide Illustrator artboard: 1 "u" = 1 design pixel at 1920px wide,
   and everything scales down in proportion on smaller desktop screens.
   ============================================================ */

:root {
  --ink: #100f0d;
  --cream: #fffdf8;
  --pink: #d91c97;
  --gray-fill: #e1e1df;

  /* 1u = 1 artboard pixel at 1920 wide; scales with the viewport, capped at
     1:1 on very wide screens and floored so type never gets tiny. */
  --u: clamp(0.62px, 0.052083vw, 1px);

  --font: "Lexend", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --nav-h: calc(92 * var(--u));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 10px); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: calc(24.3 * var(--u));
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}

/* every page fades in */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in 0.6s ease both; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.wrap {
  width: calc(1634 * var(--u));
  max-width: calc(100% - 40px);
  margin-inline: auto;
}

/* ---------------- Pink arrows (outlined from Proxima Nova Regular) ---------------- */

.arrow { fill: var(--pink); flex: none; }
.arrow-right { width: calc(22.55 * var(--u)); height: calc(17.17 * var(--u)); }
.arrow-left  { width: calc(22.55 * var(--u)); height: calc(17.17 * var(--u)); transform: scaleX(-1); }
.arrow-down  { width: calc(12.08 * var(--u)); height: calc(15.91 * var(--u)); display: inline-block; margin-left: calc(11.4 * var(--u)); vertical-align: calc(-0.5 * var(--u)); }

/* ---------------- Nav: fixed, slightly translucent ---------------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 253, 248, 0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--ink);
}

.nav-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(61 * var(--u)) 0 calc(49 * var(--u));
}

.nav-logo {
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.nav-tagline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(21 * var(--u));
  white-space: nowrap;
  font-weight: 300;
  font-size: calc(24.3 * var(--u));
  line-height: 1;
}
.nav-tagline img { width: calc(28 * var(--u)); height: auto; }
@media (max-width: 1100px) { .nav-tagline { display: none; } }

/* ---------------- Scroll reveal: a soft fade + small rise as things enter view ---------------- */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(calc(22 * var(--u)));
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* elements that already carry their own hover transitions keep them */
.has-reveal .see-more.reveal {
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s ease, border-color 0.18s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s;
}

/* Stars: a small, quick wiggle on hover */
.nav-tagline img, .hero-star, .work-star-a, .work-star-b, .about-star-a, .about-star-b, .contact-star { transform-origin: 50% 50%; }
@keyframes star-wiggle {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-9deg) scale(1.06); }
  45%  { transform: rotate(7deg) scale(1.06); }
  70%  { transform: rotate(-4deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nav-tagline img:hover, .hero-star:hover, .work-star-a:hover, .work-star-b:hover, .about-star-a:hover, .about-star-b:hover, .contact-star:hover {
    animation: star-wiggle 0.7s ease-in-out;
  }
}

.nav-links { display: flex; align-items: center; gap: calc(46.5 * var(--u)); }
.nav-links a {
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: 1;
  color: var(--ink);
  transition: color 0.18s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--pink); }

.nav-toggle { display: none; }

/* ---------------- Footer / contact ---------------- */

.site-footer { padding-bottom: calc(74 * var(--u)); }

.footer-rule { height: 1px; background: var(--ink); }

.footer-heading {
  margin-top: calc(68 * var(--u));
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1.325;
}

.email-box {
  margin-top: calc(37.6 * var(--u));
  display: inline-flex;
  align-items: center;
  height: calc(72 * var(--u));
  padding: 0 calc(24 * var(--u));
  border: 1px solid var(--ink);
  max-width: 100%;
  cursor: pointer;
  transition: padding 0.25s ease;
}

.email-link {
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.18s ease;
}

.copy-btn {
  flex: none;
  overflow: hidden;
  width: 0;
  height: calc(44 * var(--u));
  margin-left: 0;
  padding: 0;
  border: 1px solid transparent;
  background: var(--gray-fill);
  font-weight: 300;
  font-size: calc(22.5 * var(--u));
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  white-space: nowrap;
  transition: width 0.25s ease, margin 0.25s ease, opacity 0.2s ease, border-color 0.2s ease;
}

/* hover (or keyboard focus inside the box): pink address + copy button slides in */
.email-box:hover .email-link,
.email-box:focus-within .email-link { color: var(--pink); }

.email-box:hover .copy-btn,
.email-box:focus-within .copy-btn {
  width: calc(104 * var(--u));
  margin-left: calc(20 * var(--u));
  border-color: var(--ink);
  opacity: 1;
}
.email-box:hover,
.email-box:focus-within { padding-right: calc(18 * var(--u)); }

.copy-btn:hover { background: #d3d3d0; }

.footer-legal {
  margin-top: calc(50 * var(--u));
  font-weight: 300;
  font-size: calc(11.5 * var(--u));
  line-height: 1.33;
}

/* ---------------- Tablet / mobile (proposed reflow) ---------------- */

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .wrap { width: auto; max-width: none; margin-inline: 22px; }

  .nav-inner { padding: 0 22px; }
  .nav-logo { font-size: 20px; }
  .nav-tagline { display: none; }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    position: relative;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .nav-toggle span::before { position: absolute; top: -7px; }
  .nav-toggle span::after  { position: absolute; top: 7px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

  .site-nav nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: var(--cream);
    border-bottom: 1px solid var(--ink);
  }
  .site-nav nav.is-open { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 22px 14px; }
  .nav-links a { display: block; padding: 14px 0; font-size: 23px; }

  .arrow-right, .arrow-left { width: 20px; height: 15.2px; }
  .arrow-down { width: 11px; height: 14.5px; margin-left: 9px; }

  .footer-heading { margin-top: 44px; font-size: 22px; }
  .email-box { display: inline-flex; width: auto; max-width: 100%; height: 52px; padding: 0 10px 0 14px; margin-top: 24px; }
  .email-link { font-size: min(14px, 3.6vw); flex: none; }
  .copy-btn { width: 52px; height: 32px; margin-left: 12px; font-size: 14px; border-color: var(--ink); opacity: 1; }
  .email-box:hover .copy-btn, .email-box:focus-within .copy-btn { width: 52px; margin-left: 12px; }
  .email-box:hover, .email-box:focus-within { padding-right: 10px; }
  .footer-legal { margin-top: 30px; font-size: 11px; }
  .site-footer { padding-bottom: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}