/* Portfolio v3 — scroll-snap shell, scroll-driven motion, paper field
   Pair with Tailwind Play CDN in v3/index.html. No Tailwind build output. */

:root {
  color-scheme: light;
  --v3-ink: #141312;
  --v3-ink-soft: #3d3a36;
  --v3-paper: #f4f1eb;
  --v3-paper-warm: #ebe6dc;
  --v3-line: #1a1917;
  --v3-accent: #2d4a3e;
  --v3-focus: #1a5fb4;
  --v3-header-h: 3.5rem;
  --v3-rail-w: 2.75rem;
  --v3-foot-h: 2.25rem;
  --v3-pad: clamp(1rem, 4vw, 2rem);
  --v3-viewport: calc(100dvh - var(--v3-header-h) - var(--v3-foot-h) - 6px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html.v3-root {
  height: 100%;
  scroll-behavior: smooth;
}

body.v3-body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--v3-ink);
  background-color: var(--v3-paper);
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--v3-paper-warm) 70%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--v3-paper-warm) 70%, transparent) 1px,
      transparent 1px
    );
  background-size: 24px 24px;
}

.v3-body a:focus-visible {
  outline: 2px solid var(--v3-focus);
  outline-offset: 2px;
}

.v3-skip {
  position: absolute;
  left: var(--v3-pad);
  top: -100%;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--v3-paper);
  color: var(--v3-ink);
  font-weight: 600;
  border: 2px solid var(--v3-line);
  text-decoration: none;
}

.v3-skip:focus {
  top: 0.5rem;
}

/* Fixed shell */

.v3-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
}

/* Scroll region: snap + hide scrollbar */

.v3-snap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-block: 0;
  -webkit-overflow-scrolling: touch;
}

.v3-snap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Panels: one viewport tall, soft edges (no chapter rule) */

.v3-panel {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: var(--v3-viewport);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v3-pad);
  padding-bottom: calc(var(--v3-pad) + 0.75rem);
  position: relative;
}

.v3-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--v3-paper) 0%, transparent) 0%,
    transparent 12%,
    transparent 88%,
    color-mix(in srgb, var(--v3-paper) 25%, transparent) 100%
  );
}

.v3-panel-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 56rem);
}

.v3-panel-inner--hero {
  width: min(100%, 62rem);
}

/* Large line-art: no frame, bleed-friendly */

.v3-art-target {
  display: flex;
  align-items: center;
  justify-content: center;
}

.v3-art-target img {
  display: block;
  height: auto;
  width: min(92vw, 26rem);
  max-height: min(58dvh, 520px);
  object-fit: contain;
}

@media (min-width: 48rem) {
  .v3-art-target img {
    width: min(65vw, 36rem);
    max-height: min(62dvh, 620px);
  }

  .v3-panel-inner--hero .v3-art-target img {
    width: min(58vw, 34rem);
    max-height: min(68dvh, 680px);
  }
}

/* Scroll-driven motion (progressive enhancement) */

@keyframes v3-art-rise {
  from {
    opacity: 0.35;
    transform: translate3d(0, 2.75rem, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes v3-prose-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.v3-art-motion {
  animation: v3-art-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 42%;
  /* slower drift feel = larger range travel in keyframes */
}

.v3-prose-motion {
  animation: v3-prose-rise linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 55%;
}

.v3-tag-motion {
  animation: v3-prose-rise linear both;
  animation-timeline: view();
  animation-range: entry 12% cover 62%;
}

@media (prefers-reduced-motion: reduce) {
  html.v3-root {
    scroll-behavior: auto;
  }

  .v3-snap {
    scroll-snap-type: none;
  }

  .v3-panel {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .v3-art-motion,
  .v3-prose-motion,
  .v3-tag-motion {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@supports not (animation-timeline: view()) {
  .v3-art-motion,
  .v3-prose-motion,
  .v3-tag-motion {
    animation: none;
    opacity: 1;
    transform: none;
  }
}