/* ========================================
   CSS Variables
   ======================================== */

:root {
  --background-primary: #F1F0EF;
  --background-clean: #ffffff;
  --text-primary: #000000;
  --text-secondary: #ffffff;
  --border-primary: rgba(0, 0, 0, 0.25);
  --border-secondary: rgba(255, 255, 255, 0.2);

  --font-size-s: 12px;
  --font-size-m: 16px;
  --font-size-l: 24px;
  --font-size-xl: 36px;

  --line-height-s: 16px;
  --line-height-m: 22px;
  --line-height-l: 28px;
  --line-height-xl: 40px;
  --line-height-base: 1.5;

  --font-weight-reg: 400;
  --font-weight-bold: 600;

  --font-display: 'aktiv-grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'georgiapro', 'Georgia', serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}

/* ========================================
   Prevent FOUC
   ======================================== */

html.is-transitioning .info-container,
html.is-transitioning .slider-container,
html.is-transitioning .branding-item,
html.is-transitioning .nav,
html.is-transitioning .bottom-bar {
  opacity: 0;
  visibility: hidden;
}

html.is-first-load .branding-item,
html.is-first-load .nav,
html.is-first-load .slider-container,
html.is-first-load .bottom-bar {
  opacity: 0;
  visibility: hidden;
}

/* ========================================
   Reset & Base Styles
   ======================================== */

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

/* Typography Balancing */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--background-primary);
  color: var(--text-primary);
  line-height: var(--line-height-base);
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  touch-action: manipulation;
  appearance: none;
  -webkit-appearance: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.text-display {
  font-family: var(--font-display);
}

.text-bold {
  font-weight: var(--font-weight-bold);
}

/* ========================================
   Navigation
   ======================================== */

.nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  z-index: 100;
  mix-blend-mode: difference;
  color: var(--text-secondary);
}

.nav-link {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-m);
  transition: transform 0.15s ease;
}

.sound-toggle-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  mix-blend-mode: difference;
  color: var(--text-secondary);
  padding: 0;
  background: none;
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-toggle-btn img {
  filter: brightness(0) invert(1);
}

.nav-link:active,
.sound-toggle-btn:active {
  transform: scale(.9);
}

/* ========================================
   Bottom Bar
   ======================================== */

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 24px;
  z-index: 100;
  mix-blend-mode: difference;
}

/* Add margin to separate items, but only if they are visible */
.bottom-bar>*:not(:first-child) {
  margin-left: 16px;
}

/* Mode Toggle (text style) */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mode-toggle-btn {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  font-weight: var(--font-weight-reg);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mode-toggle-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-toggle-icon .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mode-toggle-btn.active .dot {
  opacity: 1;
}

/* ========================================
   Branding Bar
   ======================================== */

.branding-bar {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  mix-blend-mode: difference;
  pointer-events: none;
}

.branding-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.branding-portrait,
.branding-stars {
  height: 48px;
  width: auto;
}

.branding-portrait {
  width: 40px;
  height: 48px;
  object-fit: contain;
}

.branding-stars {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.branding-text {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  color: #fff;
}

/* ========================================
   Slider Container
   ======================================== */

.slider-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 64px;
}

body.grid-mode .slider-container {
  pointer-events: none;
}

.slider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 32px);
}

/* ========================================
   Slider Image
   ======================================== */

.slider-image-wrapper {
  width: 90%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.slider-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

/* ========================================
   Slider Navigation
   ======================================== */

.slider-nav {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 0 24px;
}

.slider-thumbnails {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 100;
}

.slider-thumbnail {
  width: 48px;
  height: 48px;
  cursor: pointer;
  will-change: transform, opacity;
  border-radius: 4px;
  padding: 4px;
  transition: background-color 0.15s ease;
}

.slider-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.slider-thumbnail:hover img,
.slider-thumbnail.active:hover img {
  transform: scale(.9);
}

.slider-thumbnail.active {
  box-shadow: 0px 0px 0px 1px var(--text-primary);
}

.slide-counter,
.project-description {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-counter {
  flex-shrink: 0;
}

.slide-counter::after {
  content: ":";
}

.bottom-bar .project-description {
  margin-left: 4px;
}

.btn-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.15s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.btn-circle:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.btn-circle:active {
  transform: scale(.9);
}

.btn-circle img {
  width: 16px;
  height: 16px;
}

/* Play/Pause button states */
.slider-pause .icon-play {
  display: none;
}

.slider-pause.paused .icon-pause {
  display: none;
}

.slider-pause.paused .icon-play {
  display: block;
}


/* Progress Ring */
.slider-pause {
  position: relative;
  border-color: transparent;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring-track {
  fill: none;
  stroke: var(--border-secondary);
  stroke-width: 1.5;
}

.progress-ring-progress {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.5;
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
}

.slider-pause.playing .progress-ring-progress {
  /* Animation handled by GSAP */
  opacity: 1;
  /* Ensure visible */
}

/* ========================================
   Grid Container
   ======================================== */

.grid-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  cursor: grab;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.grid-container:active {
  cursor: grabbing;
}

body.grid-mode .grid-container {
  /* opacity: 1; */
  pointer-events: auto;
  background: var(--background-primary);
}

/* ========================================
   Grid Items
   ======================================== */

/* Cell container — same size for all cards */
.grid-item {
  position: absolute;
  width: 360px;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 360px 400px;
}

/* 
 * CRITICAL: content-visibility: auto applies 'contain: paint' behind the scenes, 
 * which strictly clips ALL child content to the element's bounding box regardless 
 * of 'overflow: visible'.
 * We must disable it for cards whose glow needs to physically bleed outside the card bounds.
 */
.grid-item:has(.glow-canvas),
.grid-item:has(.quick-note),
.grid-item:has(.quote-bubble) {
  content-visibility: visible;
  overflow: visible;
  /* Keep layout containment to retain some performance benefits */
  contain: layout style;
}

/* --- Project card --- */
.grid-item-project {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 16px;
}

.grid-item-project:hover {
  z-index: 10;
}

.grid-card-image {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.grid-item-project:has(.glow-canvas) .grid-card-image {
  overflow: visible;
}

.grid-card-image img,
.grid-card-image .grid-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  pointer-events: none;
  -webkit-user-drag: none;
}

.grid-card-description {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  margin: 0 0 8px;
}

.grid-card-description strong {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

.grid-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
}

.grid-card-meta span+span::before {
  content: ' •';
  margin-right: 4px;
}

/* --- Custom card --- */
.grid-item-custom {
  cursor: default;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Full-bleed custom cards (no padding needed) */
/* :has() for modern browsers, .has-* class fallback for older Firefox */
.grid-item-custom:has(.quick-note),
.grid-item-custom.has-quick-note {
  padding: 40px 0;
  overflow: visible;
}

.grid-item-custom:has(.quote-bubble),
.grid-item-custom.has-quote-bubble {
  padding: 0;
  overflow: visible;
}

.grid-item-custom:has(.my-files),
.grid-item-custom.has-my-files {
  padding: 0;
}

.grid-item-custom:has(.clients-ticker),
.grid-item-custom.has-clients-ticker {
  padding: 20px 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* --- Per-card background overrides (set via customClass in JSON) --- */
.bg-purple {
  background: #8066FF;
  color: var(--text-secondary);
}

.bg-pink {
  background: linear-gradient(180deg, #FF4123 0%, #F87ED6 20%, #924A7E 100%);
  color: var(--text-secondary);
}

.bg-yellow {
  background: linear-gradient(180deg, #FFFF80 0%, #EDE879 20%, #E2E0DF 80%, #FFFFFF 100%);
}

.bg-grey {
  background: #E0E1E0;
}

.grid-item.card-video {
  overflow: visible;
}

.card-video .grid-card-image {
  padding: 0;
  overflow: visible;
}

/* Squircle mask specifically for the pink background video project */
.grid-item.bg-pink .grid-video-container {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50C0 0 0 0 50 0C100 0 100 0 100 50C100 100 100 100 50 100C0 100 0 100 0 50' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M0 50C0 0 0 0 50 0C100 0 100 0 100 50C100 100 100 100 50 100C0 100 0 100 0 50' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Safari hack to force compositing and ensure the mask clips the playing video correctly */
  transform: translateZ(0);
}

.grid-video-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.card-video .grid-card-image video {
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.glow-canvas {
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(24px) saturate(2) brightness(1.25);
  opacity: 0.6;
  pointer-events: none;
  background: transparent;
}


/* ========================================
   Information Page
   ======================================== */

html:has(body.info-page) {
  overflow: auto;
  height: auto;
  scroll-behavior: smooth;
}

body.info-page {
  overflow: auto;
  height: auto;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 500px;
  margin: 0 auto;
  padding: calc(50dvh - 105px) 24px 120px;
}

.info-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-signature {
  flex-shrink: 0;
  width: 100px;
}

.signature-svg {
  width: 100%;
  height: auto;
  display: block;
}

.signature-path {
  fill: none;
  stroke: var(--text-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

.footer-text {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.info-footer p {
  font-family: var(--font-body);
  font-size: var(--font-size-s);
  color: var(--text-primary);
  margin: 0;
}

.layout-2col {
  display: flex;
  gap: 16px;
}

.layout-2col>* {
  flex: 1 1 50%;
}

.layout-2col>p {
  margin-bottom: 0;
}

.info-section-image {
  display: block;
  width: 212px;
  max-width: 55%;
  margin: 0 auto 16px;
}

/* Card Viewer */
.card-viewer {
  margin: 0 auto 24px;
  width: 320px;
  max-width: 100%;
  position: relative;
}

.card-viewer__stage {
  position: relative;
  width: 100%;
  perspective: 1000px;
}

.card-viewer__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.card-viewer__card:first-child {
  position: relative;
  /* first card holds layout height */
  opacity: 1;
}

.card-viewer__card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 16px 20px -8px rgba(0, 0, 0, .1);
}

.card-retry {
  position: absolute;
  bottom: -8px;
  right: -8px;
  padding: 12px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  border-radius: 100px;
  cursor: pointer;
  transform-origin: bottom right;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card-retry:disabled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transform: scale(0.9);
  cursor: default;
}

.card-retry:disabled img {
  opacity: .5;
}

.card-retry__icon {
  display: block;
  flex-shrink: 0;
  will-change: transform;
}

.info-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.info-section-number,
.info-section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  font-weight: var(--font-weight-bold);
}

.info-section-divider {
  text-align: center;
  margin-bottom: 16px;
}

.info-section-divider .info-section-roman {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  display: block;
  margin-bottom: 8px;
}

.info-section-body {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  margin-bottom: 32px;
}

.info-section-body p {
  margin-bottom: 16px;
}

.info-section-body p:last-child {
  margin-bottom: 0;
}

.info-section-body em {
  font-style: italic;
}


.experience-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.experience-company,
.experience-role {
  flex-shrink: 0;
}

.experience-fill {
  flex: 1;
  overflow: hidden;
  opacity: 0.35;
  align-self: flex-end;
}

.experience-fill::before {
  content: '............................................................................................................................................................................................................';
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .branding-bar {
    padding: 0 16px;
  }

  .branding-text {
    display: none;
  }

  .branding-portrait,
  .branding-stars {
    height: 36px;
  }

  .branding-portrait {
    width: 30px;
    height: 36px;
  }

  .branding-stars {
    width: 36px;
    height: 36px;
  }

  .slider-item {
    width: 100%;
    max-width: none;
    /*padding: 0 16px;*/
  }

  .slider-image-wrapper {
    width: 100%;
  }

  .slider-image {
    max-width: 150%;
    max-height: none;
  }

  .slider-nav {
    width: 100%;
  }

  .slider-container {
    padding-bottom: 16px;
  }

  .slider-thumbnails {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
  }

  /* Single-column stack: pause → description → mode-toggle */
  .bottom-bar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    row-gap: 10px;
    padding: 14px 16px;
    justify-items: center;
    transition: transform 0.3s ease;
  }

  /* Reset desktop sibling margin */
  .bottom-bar>*:not(:first-child) {
    margin-left: 0;
  }

  /* Row 1 — centered */
  .slider-pause {
    grid-column: 1;
    grid-row: 1;
    max-width: none !important;
  }

  /* Hidden — counter not shown on mobile */
  .slide-counter {
    display: none;
  }

  /* Row 2 — full width, centered text */
  .project-description {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-left: 0 !important;
    /* override GSAP margin animation */
    max-width: none !important;
    /* prevent GSAP maxWidth from reflowing text */
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
    text-align: center;
    width: 100%;
  }

  /* Row 3 — centered */
  .mode-toggle {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    margin-top: 0;
  }

  body.thumbnails-visible .bottom-bar {
    transform: translateY(-64px);
  }

  /* In grid mode: collapse the slider-only rows so bar hugs the mode-toggle */
  body.grid-mode .bottom-bar {
    grid-template-rows: 0 0 auto;
    row-gap: 0;
  }

  body.grid-mode .slider-pause,
  body.grid-mode .project-description {
    overflow: hidden;
  }

  .grid-item {
    width: 320px;
    height: 360px;
  }

  .grid-card-description {
    text-align: center;
  }

  .grid-card-meta {
    justify-content: center;
  }

  .info-section-image {
    max-width: 75%;
  }

  .card-retry {
    right: 50%;
    transform: translateX(50%);
    transform-origin: bottom center;
  }

  .card-retry:disabled {
    transform: translateX(50%) scale(0.9);
  }

  /* Tap-to-pause feedback */
  .slider-image-wrapper:active .slider-image {
    opacity: 0.85;
  }

}

@media (max-width: 480px) {
  .slider-image-wrapper {
    aspect-ratio: 1 / 1;
  }
}

/* ========================================
   Performance Optimizations
   ======================================== */

.grid-item,
.slider-image-wrapper {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ========================================
   QUICK LOOK
   ======================================== */

.quicklook-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 4000;
}

.quicklook-overlay.active {
  pointer-events: auto;
}

.quicklook {
  position: fixed;
  z-index: 4500;
  background: rgba(200, 200, 205, 0.3);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  will-change: transform;
  backdrop-filter: blur(20px);
}

.quicklook.active {
  pointer-events: auto;
}

.quicklook-titlebar {
  flex-shrink: 0;
  height: 32px;
  display: flex;
  align-items: center;
  position: relative;
  gap: 12px;
  padding: 0 12px;
}

.quicklook-close {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s ease;
}

.quicklook-close::before,
.quicklook-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 1px;
}

.quicklook-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.quicklook-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.quicklook-close:hover {
  background: rgba(0, 0, 0, 0.35);
}

.quicklook-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quicklook-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2px;
  min-height: 0;
}

.quicklook-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Quick Look – PDF content */
.ql-pdf {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: #f5f5f5;
}

.ql-pdf__page {
  width: 100%;
  background: #fff;
  padding: 40px 36px;
}

.ql-pdf__logo {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

.ql-pdf__tagline {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  margin-bottom: 24px;
}

.ql-pdf__section {
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
}

.ql-pdf__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4px 16px;
}

.ql-pdf__entry {
  margin-bottom: 12px;
}

.ql-pdf__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--font-size-m);
}

.ql-pdf__row span {
  font-weight: var(--font-weight-reg);
  color: #666;
}

.ql-pdf__role {
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  color: #888;
  margin-bottom: 2px;
}

.ql-pdf__desc {
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-s);
}

.ql-pdf__tl-entry {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ql-pdf__tl-entry:last-child {
  border-bottom: none;
}

.ql-pdf__tl-date {
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  margin-bottom: 8px;
}

.ql-pdf__tl-title {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-m);
  margin-bottom: 12px;
}

.ql-pdf__tl-title:last-child {
  margin-bottom: 0;
}

.ql-pdf__tl-title a,
.ql-pdf__tl-sub a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ql-pdf__tl-sub {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  margin: 12px 0 6px;
}

.ql-pdf__list {
  padding-left: 14px;
  margin-bottom: 8px;
}

.ql-pdf__list li {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  margin-bottom: 4px;
}

.ql-pdf__checklist {
  list-style: none;
  padding: 0;
}

.ql-pdf__checklist li {
  font-family: var(--font-body);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  color: #444;
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}

.ql-pdf__checklist li::before {
  content: '□';
  position: absolute;
  left: 0;
  top: 0;
}

/* Quick Look – Markdown content */
.ql-md {
  width: 100%;
  padding: 40px 36px;
  background: #fff;
  font-family: var(--font-body);
}

.ql-md__h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l);
}

.ql-md__meta {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  color: #666;
  margin-bottom: 24px;
}

.ql-md__h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  margin-bottom: 12px;
  margin-top: 16px;
}

.ql-md__p {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  margin-bottom: 12px;
}

.ql-md__list {
  list-style: disc;
  padding-left: 14px;
  margin-bottom: 8px;
}

.ql-md__list li {
  font-family: var(--font-body);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  margin-bottom: 4px;
}

.ql-md__hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.ql-md__footer {
  font-family: var(--font-body);
  font-size: var(--font-size-s);
  line-height: var(--line-height-s);
  color: #888;
}

@media (max-width: 480px) {

  .ql-pdf__page,
  .ql-md {
    padding: 16px;
  }
}

/* ========================================
   Image Card
   ======================================== */

.grid-item-image {
  overflow: hidden;
  cursor: default;
}

.image-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.grid-item-image:hover .image-card__photo {
  transform: scale(1.04);
}

.image-card__bubble {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: calc(100% - 40px);
  background: #fff;
  color: #000;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Tail */
.image-card__bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 10px;
  border: 0 solid transparent;
  border-top: 8px solid #fff;
  border-right: 8px solid transparent;
}

.grid-item-image:hover .image-card__bubble {
  opacity: 1;
  transform: translateY(0);
}

.image-card__bubble-text {
  font-family: var(--font-body);
  font-size: var(--font-size-s);
  line-height: 1.4;
  margin: 0;
}

/* ========================================
   CUSTOM CARDS
   ======================================== */

/* ---- Quick Note Card ---- */
.quick-note {
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* -- Title bar -- */
.quick-note__header {
  flex-shrink: 0;
  background: #FFD400;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
}

.quick-note__dots {
  display: flex;
  position: absolute;
  left: 24px;
  gap: 4px;
}

.quick-note__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.quick-note__title {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  font-weight: var(--font-weight-reg);
  color: var(--text-primary);
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  width: 100%;
  text-align: center;
}

/* -- Scrollable body -- */
.quick-note__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 24px 24px;
  -webkit-overflow-scrolling: touch;
}

/* Thin scrollbar */
.quick-note__body::-webkit-scrollbar {
  width: 4px;
}

.quick-note__body::-webkit-scrollbar-track {
  background: transparent;
}

.quick-note__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.quick-note__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* -- Checklist -- */
.quick-note__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-note__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-reg);
}

.quick-note__cta-link {
  margin-top: 8px;
  font-weight: var(--font-weight-bold);
  color: inherit;
  text-decoration: none;
}

.quick-note__cta-link:hover {
  text-decoration: underline;
}

.quick-note__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFD400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-note__check::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid #000;
  border-bottom: 1.5px solid #000;
  transform: rotate(-45deg) translateY(-1px);
}

.quick-note__date {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-reg);
  line-height: var(--line-height-s);
  color: var(--text-primary);
  opacity: .5;
  pointer-events: none;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

/* ---- Quote Bubble Card ---- */
.quote-bubble {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.quote-bubble__card {
  position: relative;
  flex: 1;
  border-radius: 24px;
  background: linear-gradient(180deg, #3D83F7 0%, #8BBEFE 100%);
  box-shadow: 0px 4px 16px rgba(54, 127, 248, 0.24), 0px 4px 8px -4px rgba(0, 0, 0, 0.16), 0px 4px 4px -4px rgba(0, 0, 0, 0.16), inset 0px -4px 16px rgba(255, 255, 255, 0.4), inset 0px 1px 2px 1px #0060FF, inset 0px 0px 3px 2px rgba(61, 131, 247, 0.6);
  padding: 20px 64px 20px 20px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* Glossy highlight */
.quote-bubble__card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 16px;
  right: 16px;
  height: 32px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  filter: blur(1px);
}

.quote-bubble__text {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-reg);
  line-height: var(--line-height-xl);
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 1px 2px #004ECC;
}

.quote-bubble__text-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.quote-bubble__big {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.quote-bubble__small {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
}

/* Bottom meta row */
.quote-bubble__meta {
  margin-top: 10px;
  display: flex;
  justify-content: end;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  color: var(--text-primary);
  opacity: .4;
  gap: 4px;
}

.quote-bubble__meta span {
  font-weight: var(--font-weight-bold);
}

/* ---- My Files Card ---- */
.my-files {
  width: 100%;
  height: 100%;
  position: relative;
}

.my-files__file {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  cursor: pointer;
}


.my-files__file:hover .my-files__name {
  background: #3478F6;
  color: #fff;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.my-files__file:hover .my-files__icon {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Positions — scattered layout */
.my-files__file--pdf {
  top: 40px;
  right: 24px;
}

.my-files__file--jpg {
  top: 150px;
  left: 36px;
}

.my-files__file--md {
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

/* File icon (image-based) */
.my-files__icon {
  padding: 0;
  border-radius: 4px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transition: background-color 0.1s ease;
}

/* Photo icon (polaroid style) */
.my-files__icon--jpg {
  border-radius: 0;
  width: 56px;
  height: 64px;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 3px solid #fff;
  overflow: hidden;
  display: flex;
}

.my-files__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
}

/* Filename */
.my-files__name {
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: var(--line-height-s);
  transition: background-color 0.05s ease, color 0.05s ease;
  padding: 0 6px 1px;
}

/* ---- Clients Ticker Card ---- */
.clients-ticker__label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  pointer-events: none;
  line-height: 1;
}

.clients-ticker {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  box-shadow: inset 0px 4px 4px #FFFFFF;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.8) 100%);
  overflow: hidden;
  position: relative;
}

.clients-ticker__physics-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 50%;
  touch-action: none;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}

.clients-ticker__item {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.clients-ticker__item:active {
  cursor: grabbing;
}

.clients-ticker__logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  /* Let drag pass through */
}

.clients-ticker__name {
  /* Hide the text name visually for the bubble effect, keep it for SR? 
     Based on reference visual, there are no text names below the bubbles */
  display: none;
}

/* ========================================
   Skip Link
   ======================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  border-radius: 4px;
  z-index: 9999;
  text-decoration: none;
}

/* ========================================
   Focus Visible States
   ======================================== */

.nav-link:focus-visible,
.mode-toggle-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.btn-circle:focus-visible,
.slider-image-wrapper:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.slider-thumbnail:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.quicklook-close:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.grid-item-project:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: -3px;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .clients-ticker__track {
    animation: none;
  }
}