/* ── Lev presentation styles ── */

html { font-size: min(0.833vw, 1.481vh); }

/* ── Typography ── */
/* h1: section headers (Recent Experience, Lev, etc.) */
.s h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(var(--text-xl), 5.5vw, var(--text-3xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
/* h1.mega: title slide only */
.s h1.mega {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(var(--text-3xl), 9vw, var(--text-4xl));
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* h2: slide titles */
.s h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(var(--text-lg), 3.5vw, var(--text-xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}

/* ── Slide Templates ── */

.t-section {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
}

.t-content {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
}
.t-content h2 { margin-bottom: 1em; }
.t-content .body-area {
  display: flex; flex-direction: column;
  gap: 0; max-width: 85%;
}

.t-summary {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
  position: relative;
}
.t-summary h2 { font-weight: 500; margin-bottom: 1em; }
.t-summary .bullet-list { max-width: none; width: 100%; }
.bullet-list > li { transition: opacity 0.4s ease; margin-bottom: 1.2em; }
.bullet-list > li:last-child { margin-bottom: 0; }

.t-north-star {
  display: flex; align-items: center;
  height: 100%; padding: 5.2%;
}
.t-north-star > div { max-width: 75%; }
.t-north-star .body { font-weight: 700; margin-bottom: 0.5em; }
.t-north-star h1 { font-weight: 300; }

.t-process {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
}
.t-process h2 { margin-bottom: 1em; }
.t-process-top {
  display: flex; flex-direction: column;
  justify-content: flex-start;
  height: 100%; padding: 5.2%;
}
.t-process-top h2 { margin-bottom: 2rem; }
.process-cards {
  display: flex; flex: 1; align-items: center; justify-content: center;
}
.process-cards-inner {
  display: flex; gap: 2.5rem; align-items: flex-start;
}
.process-card {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 1rem;
  transition: opacity 0.4s ease;
}
.process-card img {
  width: 100%; max-width: 320px; height: 18rem; object-fit: contain;
}
.process-card .step-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
}
.process-card.dropping, .process-card-arrow.dropping {
  animation: dropOff 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes dropOff {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(120vh); opacity: 0; }
}

.process-card-arrow {
  font-size: 2rem; color: var(--ink-muted);
  display: flex; align-items: center;
  height: 18rem;
  transition: opacity 0.4s ease;
}

.t-split { height: 100%; }

/* Visual-side modifiers */
.visual-side--padded { padding: 1rem; position: relative; }
.visual-side--top-pad { padding: 48px 0 0 0; position: relative; overflow: visible; }

/* Image fill patterns */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0.5rem; }
.img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-overflow { width: 125%; display: block; margin-left: 40%; }

/* Full-bleed image slide */
.t-image-top {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.t-image-top h2 { padding: 5.2% 5.2% 1rem 5.2%; flex-shrink: 0; }
.t-image-top img { width: 100%; flex: 1; object-fit: contain; min-height: 0; }

/* Pause animations on inactive slides */
.slide:not(.active) .scroll-container img,
.slide:not(.active) .crossfade img,
.slide:not(.active) .chaos-stack img { animation-play-state: paused; }

/* Split sides */
.text-side {
  width: 50%; display: flex; flex-direction: column;
  justify-content: center; padding: 0 5.2%;
}
.text-side .body-lg { margin-top: 0.5em; }
.visual-side {
  width: 50%; display: flex;
  align-items: center; justify-content: center;
  padding: 0 5%;
}

.t-cards {
  display: flex; flex-direction: column;
  justify-content: center;
  height: 100%; padding: 5.2%;
}
.t-cards h2 { margin-bottom: 0.5em; }
.t-cards h2 + .body-lg,
.t-cards h2 + .body,
.t-cards h2 + .body-sm { margin-bottom: 1em; }
.t-cards .feature-grid { max-width: 80%; }
.grid-2col { grid-template-columns: repeat(2, 1fr); }
.grid-3col { grid-template-columns: repeat(3, 1fr); }
.feature-card-centered { text-align: center; }

.t-end {
  display: flex; align-items: center; justify-content: center;
  height: 100%; position: relative;
}

/* T-COMPANY */
.t-company {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  height: 100%; padding: 5.2%;
}
.t-company .company-logo {
  width: clamp(48px, 5vw, 80px); height: clamp(48px, 5vw, 80px);
  background: rgba(22,22,29,0.06); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-muted); margin-bottom: 1.5rem;
}
.t-company h2 { margin-bottom: 0.3em; }
.t-company .body { margin-bottom: 0.5em; }
.t-company .body-lg { margin-top: 1em; }

/* ── Shared helpers ── */

.lavender { background: #ece8f2; }

.lev-watermark {
  position: absolute; left: 5.2%; top: 50%;
  transform: translateY(-50%);
  width: 30%; opacity: 0.12;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.img-ph {
  background: linear-gradient(135deg, rgba(22,22,29,0.04), rgba(22,22,29,0.1));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-family: var(--font-mono);
  font-size: var(--text-xs); min-height: 200px;
}
.dark .img-ph {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.3);
}

.slide-img {
  max-width: 90%; max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.deco-icon {
  position: absolute; right: 12%; top: 50%;
  transform: translateY(-50%);
  width: clamp(80px, 10vw, 160px); opacity: 0.7;
}

.screenshot-pair {
  display: flex; gap: clamp(0.5rem, 1vw, 1rem); max-width: 90%;
}
.screenshot-pair .slide-img { max-height: 55vh; width: auto; }

.dimmed { opacity: 0.4; }

.splash {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.visual-side .img-ph { width: 100%; min-height: 60%; }

/* Media placeholder */
.media-ph {
  width: 100%; min-height: 60%;
  border-radius: 12px; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--ink-muted);
}
.media-photo {
  background: linear-gradient(135deg, rgba(22,22,29,0.04), rgba(22,22,29,0.08));
}
.media-photo::before { content: "📷  Photo"; }
.media-video {
  background: linear-gradient(135deg, rgba(225,75,59,0.06), rgba(225,75,59,0.12));
}
.media-video::before { content: "▶  Video"; }

/* Slide badge */
.slide-badge {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.35);
  z-index: 100;
  mix-blend-mode: difference;
}

/* Disco ball */
.disco-ball {
  position: relative;
  border-radius: 50%;
}

/* Progress bar — top, forest green */
.progress {
  top: 0; bottom: auto;
  background: var(--lev-green);
  box-shadow: 0 0 8px rgba(0, 33, 32, 0.4);
}

/* View Transitions: Magic Move */
.slide.active .vt-headshot { view-transition-name: headshot; }
.slide.active .vt-disco { view-transition-name: jf-disco; }
::view-transition-old(headshot),
::view-transition-new(headshot),
::view-transition-old(jf-disco),
::view-transition-new(jf-disco) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Section bar */
.section-bar {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  display: flex; align-items: center; gap: 0.75rem;
  z-index: 10;
}
.section-bar .disco-ball {
  width: 28px; height: 28px;
}

/* Subtle scale */
.subtle-scale .slide { transform: scale(0.98); }
.subtle-scale .slide.active { transform: scale(1); }

/* Scroll strip */
.scroll-container {
  position: absolute; inset: 0; overflow: hidden;
}
.scroll-container img {
  width: 100%; display: block;
  animation: scrollImg 14s 1s ease-in-out infinite;
}
@keyframes scrollImg {
  0%, 10%  { transform: translateY(30%); }
  45%, 55% { transform: translateY(-30%); }
  90%, 100% { transform: translateY(30%); }
}

/* Crossfade slideshow */
.crossfade {
  position: relative; width: 100%; height: 100%; overflow: hidden;
}
.crossfade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: crossfade 4.5s ease-in-out infinite;
}
.crossfade img:nth-child(2) { animation-delay: 1.5s; }
.crossfade img:nth-child(3) { animation-delay: 3s; }
@keyframes crossfade {
  0%       { opacity: 0; }
  11%, 33% { opacity: 1; }
  44%, 100%{ opacity: 0; }
}

/* Chaotic layered images */
.chaos-stack {
  position: relative; width: 100%; flex: 1; min-height: 0;
  display: grid; place-items: center;
}
.chaos-stack img {
  grid-area: 1/1;
  width: 90%; height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  animation: chaosIn 0.3s ease forwards;
}
.chaos-stack img:nth-child(1) {
  transform: rotate(-2deg) translate(-5%, -5%);
  animation-delay: 0.2s;
}
.chaos-stack img:nth-child(2) {
  transform: rotate(1.5deg) translate(15%, 5%);
  animation-delay: 0.5s;
}
.chaos-stack img:nth-child(3) {
  transform: rotate(-1deg) translate(0%, 15%);
  animation-delay: 0.8s;
}
@keyframes chaosIn {
  0%   { opacity: 0; scale: 0.96; }
  100% { opacity: 1; scale: 1; }
}

@keyframes fadeInOut {
  0%, 10%  { opacity: 0; }
  25%, 75% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Slide navigator overlay */
.slide-nav {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.9);
  overflow-y: auto; padding: 2rem;
}
.slide-nav.open { display: block; }
.slide-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; max-width: 1400px; margin: 0 auto;
}
.slide-nav-item {
  cursor: pointer; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; transition: border-color 0.2s;
  position: relative; background: #fff;
}
.slide-nav-item:hover { border-color: var(--accent); }
.slide-nav-item.is-current { border-color: var(--accent); }
.slide-nav-item canvas {
  width: 100%; display: block; aspect-ratio: 16/9;
}
.slide-nav-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.7); color: #fff;
  font: 500 11px/1.4 var(--font-body); padding: 4px 8px;
}

/* Edit mode */
.edit-mode .slide.active h1,
.edit-mode .slide.active h2,
.edit-mode .slide.active p,
.edit-mode .slide.active li {
  outline: 1px dashed rgba(225,75,59,0.4);
  outline-offset: 4px;
  cursor: text;
  min-width: 40px;
  min-height: 1em;
}
.edit-mode .slide.active h1:focus,
.edit-mode .slide.active h2:focus,
.edit-mode .slide.active p:focus,
.edit-mode .slide.active li:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  background: rgba(225,75,59,0.05);
}
.edit-mode .slide.active .visual-side,
.edit-mode .slide.active .media-ph {
  cursor: pointer;
}
.edit-mode .slide.active .visual-side::after {
  content: '+ Drop or click to add image';
  position: absolute; bottom: 0.5rem; right: 0.5rem;
  background: var(--accent); color: #fff;
  font: 500 12px/1 var(--font-body);
  padding: 6px 10px; border-radius: 4px;
  pointer-events: none; opacity: 0.8;
}
.edit-banner {
  display: none; position: fixed; top: 0; left: 0; right: 0;
  z-index: 9998; background: var(--accent); color: #fff;
  font: 500 13px/1 var(--font-body);
  padding: 6px 16px; text-align: center;
}
.edit-mode .edit-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.edit-banner button {
  background: rgba(255,255,255,0.2); border: none; color: #fff;
  font: 500 12px/1 var(--font-body); padding: 4px 10px;
  border-radius: 4px; cursor: pointer;
}
.edit-banner button:hover { background: rgba(255,255,255,0.35); }

/* Sol LeWitt Mini Generator */
.slm{display:flex;height:100%;border:2px solid #555;border-radius:12px;overflow:hidden;background:#f5f0e8;font-family:var(--font-body)}
.slm-controls{width:180px;min-width:180px;display:flex;flex-direction:column;border-right:2px solid #555}
.slm-select-row{padding:10px;border-bottom:2px solid #555}
.slm-select{display:block;width:100%;padding:5px 4px;font-size:11px;font-family:inherit;color:#1a1a1a;background:transparent;border:1px solid #999;border-radius:4px;cursor:pointer}
.slm-params{margin-top:8px}
.slm-param-row{display:flex;align-items:center;gap:4px}
.slm-param-row input[type=range]{flex:1;accent-color:#d25630}
.slm-val{font-size:10px;color:#1a1a1a;min-width:14px;text-align:right;font-variant-numeric:tabular-nums}
.slm-instructions{flex:1;padding:10px;display:flex;flex-direction:column;gap:4px}
.slm-label{font-size:10px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.05em}
.slm-text{font-size:11px;line-height:1.4;color:#444}
.slm-canvas-area{flex:1;display:flex;align-items:center;justify-content:center}
.slm-canvas-area canvas{width:100%;height:100%;image-rendering:auto;cursor:pointer}

@media (prefers-reduced-motion: reduce) {
  .slide:not(.active) .s > *,
  .slide:not(.active) .text-side > *,
  .slide:not(.active) .visual-side > * {
    opacity: 1;
  }
}