/* Shared category theme layers — tabs + category subpages */

.portfolio-theme-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.portfolio-theme-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Only fade opacity — transitioning visibility can leave layers stuck invisible */
  transition: opacity 0.45s ease;
}

/* Active on tiles page via data-tile-theme / is-theme-active class */
body.portfolio-page--tiles[data-tile-theme="video"] .portfolio-theme-layer[data-theme-layer="video"],
body.portfolio-page--tiles[data-tile-theme="graphics"] .portfolio-theme-layer[data-theme-layer="graphics"],
body.portfolio-page--tiles[data-tile-theme="systems"] .portfolio-theme-layer[data-theme-layer="systems"],
body.portfolio-page--tiles[data-tile-theme="web"] .portfolio-theme-layer[data-theme-layer="web"],
body.portfolio-theme-page--video .portfolio-theme-layer[data-theme-layer="video"],
body.portfolio-theme-page--graphics .portfolio-theme-layer[data-theme-layer="graphics"],
body.portfolio-theme-page--systems .portfolio-theme-layer[data-theme-layer="systems"],
body.portfolio-theme-page--web .portfolio-theme-layer[data-theme-layer="web"],
.portfolio-theme-layer.is-theme-active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none;
}

body.portfolio-theme-page--video {
  background: #050505;
  color: #f5f5f5;
}
body.portfolio-theme-page--graphics {
  background: #f2f2f4;
  color: #111;
}
body.portfolio-theme-page--systems {
  background: #eef1f6;
  color: #111;
}
body.portfolio-theme-page--web {
  background: #040404;
  color: #f5f5f5;
}

body.portfolio-theme-page--graphics .site-nav__toggle,
body.portfolio-theme-page--graphics .lang-switch button,
body.portfolio-theme-page--systems .site-nav__toggle,
body.portfolio-theme-page--systems .lang-switch button {
  color: #111;
}
body.portfolio-theme-page--graphics .site-nav__toggle-bars span,
body.portfolio-theme-page--systems .site-nav__toggle-bars span {
  background: #111;
}

body.portfolio-theme-page .subpage-ambient,
body.portfolio-theme-page .subpage-ambient__blur,
body.portfolio-theme-page .subpage-ambient__shade,
body.portfolio-theme-page .portfolio-sand-portal,
body.portfolio-theme-page .subpage-cube-portal {
  display: none !important;
}

body.portfolio-theme-page .portfolio-theme-stage {
  z-index: 0;
}
body.portfolio-theme-page #main,
body.portfolio-theme-page.is-portfolio-sand-active #main {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
body.portfolio-theme-page .portfolio-hero,
body.portfolio-theme-page .reels-gallery,
body.portfolio-theme-page .graphics-gallery,
body.portfolio-theme-page .portfolio-cases,
body.portfolio-theme-page .graphics-masonry {
  background: transparent !important;
}

.portfolio-theme-layer__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.portfolio-theme-layer__veil--video {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.22), rgba(5, 5, 5, 0.04) 22%, rgba(5, 5, 5, 0.06) 70%, rgba(5, 5, 5, 0.32)),
    linear-gradient(90deg, rgba(5, 5, 5, 0.16), transparent 16%, transparent 84%, rgba(5, 5, 5, 0.16));
}
.portfolio-theme-layer__veil--graphics {
  background:
    linear-gradient(180deg, rgba(242, 242, 244, 0.35), rgba(242, 242, 244, 0.08) 22%, rgba(242, 242, 244, 0.2) 72%, rgba(242, 242, 244, 0.55));
}
body.portfolio-theme-page--video .portfolio-theme-layer__veil--video {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.4), rgba(5, 5, 5, 0.1) 20%, rgba(5, 5, 5, 0.14) 68%, rgba(5, 5, 5, 0.52)),
    linear-gradient(90deg, rgba(5, 5, 5, 0.22), transparent 16%, transparent 84%, rgba(5, 5, 5, 0.22));
}

/* —— Montaż: one irregular L→R stream of mixed-size reel tiles —— */
.portfolio-montaz-field {
  position: absolute;
  inset: 0;
  background: #050505;
  overflow: hidden;
}
.portfolio-montaz-stream {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.portfolio-montaz-stream__belt {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
  animation: montaz-stream-ltr 42s linear infinite;
  animation-play-state: paused;
}
.portfolio-montaz-stream.is-ready .portfolio-montaz-stream__belt {
  animation-play-state: running;
}
body.portfolio-page--tiles:not([data-tile-theme="video"]) .portfolio-montaz-stream__belt {
  animation-play-state: paused;
}
@keyframes montaz-stream-ltr {
  /* belt = [set][set]; move so tiles travel left → right */
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.portfolio-montaz-stream__set {
  position: relative;
  flex: 0 0 auto;
  width: min(190vw, 110rem);
  height: 100%;
}
.portfolio-montaz-stream__card {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: min(20vw, 10rem);
  aspect-ratio: 9 / 16;
  border-radius: 0.95rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #141414;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.62);
  transform: rotate(var(--rot, 0deg));
}
.portfolio-montaz-stream__card--sm {
  width: min(13vw, 6.5rem);
  z-index: 1;
}
.portfolio-montaz-stream__card--md {
  width: min(20vw, 10rem);
  z-index: 2;
}
.portfolio-montaz-stream__card--lg {
  width: min(28vw, 14rem);
  z-index: 3;
}
.portfolio-montaz-stream__card--xl {
  width: min(36vw, 18rem);
  z-index: 4;
}
.portfolio-montaz-stream__card img,
.portfolio-montaz-stream__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-montaz-stream__card video {
  z-index: 1;
}

/* —— Grafiki: light homepage ambient only (no poster drift) —— */
.portfolio-grafiki-ambient-wrap,
.portfolio-web-ambient-wrap {
  position: absolute;
  inset: 0;
}
.portfolio-grafiki-ambient-wrap .home-ambient,
.portfolio-grafiki-ambient-wrap canvas.home-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(ellipse 140% 90% at 50% 38%, #f6f6f8 0%, #ececf0 42%, #e4e4ea 100%);
}
.portfolio-web-ambient-wrap .home-ambient,
.portfolio-web-ambient-wrap canvas.home-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(ellipse 140% 90% at 50% 38%, #0e0e0e 0%, #040404 42%, #000 100%);
}
.portfolio-grafiki-ambient-wrap .home-ambient__blur,
.portfolio-web-ambient-wrap .home-ambient__blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 80vmax;
  height: 80vmax;
  margin: -40vmax 0 0 -40vmax;
  opacity: 0.35;
  transform: translate3d(50vw, 50vh, 0);
  will-change: transform;
}
.portfolio-grafiki-ambient-wrap .home-ambient__blur {
  background:
    radial-gradient(
      circle closest-side,
      rgba(40, 40, 50, 0.12) 0%,
      rgba(40, 40, 50, 0.06) 30%,
      transparent 66%
    );
}
.portfolio-web-ambient-wrap .home-ambient__blur {
  opacity: 0.55;
  background:
    radial-gradient(
      circle closest-side,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.055) 22%,
      rgba(255, 255, 255, 0.012) 50%,
      transparent 66%
    );
}
.portfolio-grafiki-ambient-wrap .home-ambient__shade {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
}
.portfolio-web-ambient-wrap .home-ambient__shade {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 3, 0.28);
}

/* Systems field (shared with tiles) */
body.portfolio-theme-page--systems .portfolio-tile-bg {
  opacity: 1 !important;
  z-index: 1;
}
body.portfolio-theme-page--systems .portfolio-theme-stage {
  z-index: 0;
}

/* Case pages on systems WebGL — light field needs dark type */
body.case-page.portfolio-theme-page--systems {
  color: #111;
}
body.case-page.portfolio-theme-page--systems #main {
  background: transparent !important;
}
body.case-page.portfolio-theme-page--systems .case-study,
body.case-page.portfolio-theme-page--systems .case-study--systems,
body.case-page.portfolio-theme-page--systems .case-study--viz {
  color: #111;
}
body.case-page.portfolio-theme-page--systems .case-study__title,
body.case-page.portfolio-theme-page--systems .case-viz-tile__title,
body.case-page.portfolio-theme-page--systems .case-viz-intro .case-study__title {
  color: #111;
}
body.case-page.portfolio-theme-page--systems .case-study__lede,
body.case-page.portfolio-theme-page--systems .case-study__back a,
body.case-page.portfolio-theme-page--systems .case-viz-tile__text,
body.case-page.portfolio-theme-page--systems .case-viz-tile__hint,
body.case-page.portfolio-theme-page--systems .case-viz-intro__index a,
body.case-page.portfolio-theme-page--systems .case-study__meta {
  color: rgba(17, 17, 17, 0.72);
}
body.case-page.portfolio-theme-page--systems .site-nav__toggle,
body.case-page.portfolio-theme-page--systems .lang-switch button {
  color: #111;
}
body.case-page.portfolio-theme-page--systems .site-nav__toggle-bars span {
  background: #111;
}

/* Tabs only: drifting graphics on Grafiki theme. Subpages = ambient only. */
.portfolio-grafiki-drift {
  display: none;
}
body.portfolio-page--tiles .portfolio-grafiki-drift {
  display: block;
  position: absolute;
  inset: -6%;
  z-index: 1;
}
.portfolio-grafiki-drift__item {
  position: absolute;
  width: min(24vw, 12rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.7rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  opacity: 0.78;
  will-change: transform;
  animation: grafiki-drift 22s ease-in-out infinite;
}
.portfolio-grafiki-drift__item:nth-child(1) { left: 4%; top: 10%; animation-duration: 24s; animation-delay: -2s; }
.portfolio-grafiki-drift__item:nth-child(2) { left: 26%; top: 56%; width: min(20vw, 10rem); animation-duration: 20s; animation-delay: -6s; }
.portfolio-grafiki-drift__item:nth-child(3) { left: 50%; top: 6%; width: min(22vw, 11rem); animation-duration: 26s; animation-delay: -4s; }
.portfolio-grafiki-drift__item:nth-child(4) { left: 70%; top: 40%; animation-duration: 21s; animation-delay: -9s; }
.portfolio-grafiki-drift__item:nth-child(5) { left: 10%; top: 60%; width: min(18vw, 9rem); animation-duration: 23s; animation-delay: -11s; }
.portfolio-grafiki-drift__item:nth-child(6) { left: 38%; top: 26%; width: min(19vw, 9.5rem); animation-duration: 19s; animation-delay: -3s; }
.portfolio-grafiki-drift__item:nth-child(7) { left: 76%; top: 12%; width: min(17vw, 8.5rem); animation-duration: 25s; animation-delay: -7s; }
.portfolio-grafiki-drift__item:nth-child(8) { left: 58%; top: 64%; width: min(21vw, 10.5rem); animation-duration: 22s; animation-delay: -13s; }
@keyframes grafiki-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  33% { transform: translate3d(18px, -22px, 0) rotate(2deg); }
  66% { transform: translate3d(-14px, 16px, 0) rotate(-1deg); }
}

/* Subpages: no reel stream / no poster drift — plain theme fills only */
body.portfolio-theme-page--video .portfolio-montaz-stream,
body.portfolio-theme-page .portfolio-grafiki-drift,
.portfolio-montaz-drift {
  display: none !important;
}

html.reduce-motion .portfolio-montaz-stream__belt,
html.reduce-motion .portfolio-grafiki-drift__item {
  animation: none !important;
}

@media (max-width: 720px) {
  .portfolio-montaz-stream__set {
    width: 280vw;
  }
  .portfolio-montaz-stream__card--sm {
    width: min(24vw, 6.5rem);
  }
  .portfolio-montaz-stream__card--md {
    width: min(32vw, 8.5rem);
  }
  .portfolio-montaz-stream__card--lg {
    width: min(42vw, 11rem);
  }
  .portfolio-montaz-stream__card--xl {
    width: min(52vw, 13.5rem);
  }
}