/* =========================================================
   interactions.css — preloader, button feedback,
   scroll reveals & page transitions.
   Loaded AFTER styles.css on every page.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --accent: #9fc7b3;            /* soft mint pulled from the site's greens */
}

html { -webkit-tap-highlight-color: transparent; }

/* ---------- 1. Cursor rules now live in styles.css (see "cursor" section) ---------- */

/* keyboard users get a clear focus ring */
a:focus-visible,
button:focus-visible,
.hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- 2. Button / link reactions ---------- */

/* nav links: lift + press */
nav a { display: inline-block; transition: transform .25s var(--ease-out), opacity .3s ease; }
.desktop-nav a:hover { transform: translateY(-2px); }
nav a:active { transform: scale(.94); }

/* logo: star spins on hover */
header .logo img,
.mobile-nav > a img {
  transition: transform .6s var(--ease-out);
}
header .logo:hover img,
.mobile-nav > a:hover img { transform: rotate(90deg) scale(1.08); }
header .logo:active img { transform: rotate(90deg) scale(.92); }

/* hamburger press */
.hamburger { transition: transform .2s var(--ease-out); }
.hamburger:active { transform: scale(.88); }

/* contact links: slide + underline */
.contacts a {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: transform .3s var(--ease-out), color .3s ease;
}
.contacts a img { transition: transform .35s var(--ease-out); }
.contacts a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.contacts a:hover { transform: translateX(8px); color: var(--accent); }
.contacts a:hover img { transform: rotate(-12deg) scale(1.15); }
.contacts a:hover::after { transform: scaleX(1); transform-origin: left; }
.contacts a:active { transform: translateX(8px) scale(.97); }

/* footer socials: bounce up */
.social a { display: inline-block; transition: transform .3s var(--ease-out), opacity .3s; }
.social a:hover { transform: translateY(-5px); }
.social a:active { transform: translateY(-2px) scale(.9); }
.social:hover a:not(:hover) { opacity: .5; }

/* project cards on home */
.contain { border-radius: 2px; transition: transform .35s var(--ease-out); }
.contain::after {
  content: "View project  \2192";
  position: absolute;
  left: 50%; bottom: 1.2em;
  transform: translate(-50%, 12px);
  padding: .55em 1.1em;
  background: #fff;
  color: #000;
  font-family: 'helvetica-neue-lt-pro', sans-serif;
  font-weight: 500;
  font-size: .85em;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .45s var(--ease-out);
}
.contain:hover::after,
.contain:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.contain:active { transform: scale(.98); }
.work h4 { transition: letter-spacing .4s var(--ease-out), color .3s ease; }
.one-column a:hover + h4 { letter-spacing: .08em; color: var(--accent); }

/* prev / next */
.bottom-nav a { display: inline-block; transition: transform .3s var(--ease-out); }
.bottom-nav .b1:hover { transform: translateX(-8px); }
.bottom-nav .b2:hover { transform: translateX(8px); }
.bottom-nav a:active { transform: scale(.92); }

/* outlined CTA buttons (Test it Out / PDF Version) */
.sugarshot-button {
  transition: background-color .35s ease, color .35s ease, transform .2s var(--ease-out), letter-spacing .35s var(--ease-out);
}
.sugarshot-button:hover { letter-spacing: .04em; }
.sugarshot-button:active { transform: scale(.95); }

/* gallery images hint that they're clickable */
.images-gallery img,
.images-gallery video {
  transition: transform .45s var(--ease-out), filter .35s ease;
}
.images-gallery img:hover { transform: scale(1.015); filter: brightness(1.08); }
.images-gallery img:active { transform: scale(.99); }

/* lightbox close */
.lightbox-close { transition: transform .3s var(--ease-out), opacity .3s; }
.lightbox-close:hover { transform: rotate(90deg); }

/* ---------- 4. Preloader ---------- */
.skip-preloader #preloader { display: none; }
html.preloading,
html.preloading body { overflow: hidden; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b0b0b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0);
  transition: transform 1s var(--ease-inout);
  font-family: 'helvetica-neue-lt-pro', sans-serif;
}
#preloader.is-done { transform: translateY(-100%); }
#preloader.is-done .preloader-inner { opacity: 0; transform: translateY(-40px); }

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  transition: opacity .5s ease, transform .8s var(--ease-inout);
}
#preloader .preloader-logo {
  width: clamp(160px, 22vw, 260px);
  height: auto;
  max-width: 70vw;
  opacity: 0;
  animation: preloader-logo-in 1s var(--ease-out) forwards;
}
@keyframes preloader-logo-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.preloader-name {
  display: flex;
  gap: .35em;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.preloader-name > span { display: block; overflow: hidden; }
.preloader-name > span > span {
  display: block;
  transform: translateY(110%);
  animation: preloader-rise .9s var(--ease-out) forwards;
}
.preloader-name > span:nth-child(2) > span { animation-delay: .12s; }
.preloader-sub {
  font-weight: 100;
  font-style: italic;
  font-size: clamp(.9rem, 2vw, 1.2rem);
  opacity: 0;
  animation: preloader-fade .8s ease .45s forwards;
}
@keyframes preloader-rise { to { transform: translateY(0); } }
@keyframes preloader-fade { to { opacity: .7; } }

.preloader-count {
  position: absolute;
  right: 5vw;
  bottom: 4vh;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.preloader-count::after { content: "%"; font-size: .3em; font-weight: 100; vertical-align: top; margin-left: .1em !important; }
/* logo + loading bar only */
.preloader-bar {
  width: clamp(160px, 22vw, 260px);     /* same width as the logo */
  height: 2px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

/* hero intro once preloader is gone */
.js .hero h1,
.js .hero h5 { opacity: 0; transform: translateY(30px); }
.intro-ready .hero h1,
.intro-ready .hero h5 {
  animation: intro-up 1s var(--ease-out) forwards;
}
.intro-ready .hero h5 { animation-delay: .15s; }
@keyframes intro-up { to { opacity: 1; transform: translateY(0); } }

/* ---------- 5. Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* once revealed, let hover transitions run at normal speed */
.reveal.is-visible.contain { transition: transform .35s var(--ease-out), opacity .9s var(--ease-out); transition-delay: 0s; }

/* ---------- 6. Page transitions ---------- */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0b0b0b;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform .55s var(--ease-inout);
}
.page-wipe.is-active { transform: translateY(0); pointer-events: all; }
.js body { animation: page-in .6s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js .hero h1, .js .hero h5 { opacity: 1; transform: none; }
}

/* =========================================================
   7. Project pages — live side panel
   (split-screen idea: the left panel reacts to the gallery)
   ========================================================= */
.project-index {
  font-family: 'helvetica-neue-lt-pro', sans-serif;
  font-weight: 300;
  font-size: .85em !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: 0 0 .6em 0 !important;
}
.project-meta {
  margin-top: auto !important;           /* sits at the bottom of the sticky panel */
  padding-top: 1.5em;
  display: flex;
  flex-direction: column;
  gap: .9em;
  font-family: 'helvetica-neue-lt-pro', sans-serif;
  color: #fff;
}
.expand-hint {
  font-size: .85em !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 !important;
  animation: hint-blink 2.6s ease-in-out infinite;
}
@keyframes hint-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.gallery-progress { display: flex; align-items: center; gap: 1em; }
.gp-count {
  font-size: .9em;
  font-weight: 500;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gp-bar { flex: 1; height: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.gp-bar > span {
  display: block; height: 100%; width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s linear;
}
.to-top {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55em 1em;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  font-family: inherit;
  font-size: .85em;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s var(--ease-out), background-color .25s ease, color .25s ease, visibility .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #fff; color: #000; transform: translateY(-2px); }
.to-top:active { transform: scale(.94); }

/* next / prev show where they lead */
.bottom-nav a { line-height: 1.1; }
.nav-sub {
  display: block;
  font-size: .4em;
  font-weight: 300;
  letter-spacing: .15em;
  color: rgba(255,255,255,.55);
  padding-top: .5em;
  white-space: nowrap;
  transition: color .3s ease;
}
.bottom-nav a:hover .nav-sub { color: var(--accent); }

/* ---------- Lightbox: browsing between images ---------- */
.lightbox-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8em;
  max-width: 86%;
  max-height: 92%;
}
.lightbox-overlay .lightbox-figure img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}
.lightbox-overlay .lightbox-figure img.is-in { animation: zoomIn .25s ease; }
.lightbox-count {
  font-family: 'helvetica-neue-lt-pro', sans-serif;
  font-size: .9em;
  letter-spacing: .2em;
  color: rgba(255,255,255,.75);
}
.lightbox-close,
.lightbox-arrow {
  background: none;
  border: 0;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  font-size: 1.4em;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-out);
}
.lightbox-prev { left: 3%; }
.lightbox-next { right: 3%; }
.lightbox-arrow:hover { background: #fff; color: #000; }
.lightbox-prev:hover { transform: translate(-4px, -50%); }
.lightbox-next:hover { transform: translate(4px, -50%); }
.lightbox-arrow:active { transform: translateY(-50%) scale(.9); }

@media (max-width: 966px) {
  .project-meta { padding-top: 1em; }
  .gallery-progress { display: none; }       /* page scrolls normally on phones */
  .to-top {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 50;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .lightbox-arrow { top: auto; bottom: 4%; transform: none; width: 48px; height: 48px; }
  .lightbox-prev:hover, .lightbox-next:hover, .lightbox-arrow:active { transform: none; }
  .lightbox-figure { max-width: 100%; }
}

/* =========================================================
   8. Fixes: nav underline alignment + one-line contact links
   ========================================================= */

/* Nav underline: the old line spanned the link's padding plus the
   trailing letter-spacing, so it sat off-center from the word. */
nav a {
  padding: 0;
  max-width: none;
}
nav a:after,
.desktop-nav a:hover:after {
  left: 0;
  bottom: -6px;
  width: calc(100% - 0.15em);          /* ignore the trailing letter-space */
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--ease-out);
}
.desktop-nav a:hover:after,
.desktop-nav a:focus-visible:after { transform: scaleX(1); }
.desktop-nav ul { align-items: center; gap: 2.2em; }
.desktop-nav ul li { padding: 0; }

/* Contact links: always one line, and the column sizes to its links */
.contacts ul { display: inline-flex; flex-direction: column; align-items: flex-start; }
.contacts li { white-space: nowrap; }
.contacts a { gap: .45em; }
.contacts img { padding: 0; width: 1.1em; height: 1.1em; flex-shrink: 0; object-fit: contain; }

@media (min-width: 1275px) {
  .contact { grid-template-columns: 1fr auto; }
  .contacts { grid-column: 2; padding-left: 0; }
}
@media (max-width: 1274px) {
  .contact { grid-template-columns: 1fr; }
  .contacts, .contactme { grid-column: 1 / -1; }
  .contacts li { font-size: clamp(1rem, 3.2vw, 1.5em); }
}
@media (max-width: 700px) {
  /* shrink the type just enough that the longest link fits the screen */
  .contacts { font-size: 1em; }
  .contacts li { font-size: clamp(.8rem, 4.6vw, 1.25rem); }
}

/* ---------- Footer social links: more breathing room ---------- */
footer .social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75em;
  padding-top: 1.2em;
}
footer .social a { padding: .35em; }            /* bigger tap target */
footer .social a img,
footer div a img { padding: 0; display: block; }
@media (max-width: 700px) {
  footer .social { gap: 1.5em; }
}

/* ---------- Homepage: link to the About page ---------- */
.more-about {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .7em 1.3em;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #fff;
  font-family: 'helvetica-neue-lt-pro', sans-serif;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .9em;
  transition: background-color .25s ease, color .25s ease, transform .2s var(--ease-out);
}
.more-about:hover { background: #fff; color: #000; }
.more-about:active { transform: scale(.96); }

/* ---------- Project tags: pill chips (match About page skills) ---------- */
.tags { gap: .5rem; padding-bottom: 1em; }
.tags .tag {
  padding: .45em .95em !important;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-family: 'helvetica-neue-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  transition: border-color .25s ease, background-color .25s ease;
}
.tags .tag:hover { border-color: #9fc7b3; background: rgba(159,199,179,.08); }