@charset "UTF-8";
/* ==========================================================================
   portfolio.css — Full-Screen Edge-to-Edge Masonry Portfolio
   Amara Fetish Clinic (Kappe Full-Bleed Style)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE ROOT & SECTION (Zero Margin, Zero Padding)
   -------------------------------------------------------------------------- */
body.portfolio-page {
  background-color: #060e17;
  overflow-x: clip;
  width: 100%;
}

.portfolio-page .site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.portfolio-section {
  background-color: #060e17;
  padding: 0;
  margin: 0;
  width: 100%;
}

.portfolio-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   2. ASYMMETRICAL MASONRY GRID (4 Columns on Desktop, Varied Heights)
   -------------------------------------------------------------------------- */
.portfolio-grid {
  column-count: 4;
  column-gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #060e17;
}

@media (max-width: 1280px) {
  .portfolio-grid {
    column-count: 3;
  }
}

@media (max-width: 850px) {
  .portfolio-grid {
    column-count: 2;
  }
}

@media (max-width: 550px) {
  .portfolio-grid {
    column-count: 1;
  }
}

/* --------------------------------------------------------------------------
   3. FULL-BLEED TILE (Asymmetrical Ratios, Clean Background)
   -------------------------------------------------------------------------- */
.portfolio-card {
  break-inside: avoid;
  page-break-inside: avoid;
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #060e17;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Alturas desiguales orgánicas (estilo Kappe Masonry) */
.portfolio-card--16-9  { aspect-ratio: 16 / 9; }
.portfolio-card--4-5   { aspect-ratio: 4 / 5; }   /* Tarjeta alta */
.portfolio-card--1-1   { aspect-ratio: 1 / 1; }   /* Tarjeta cuadrada */
.portfolio-card--4-3   { aspect-ratio: 4 / 3; }   /* Tarjeta clásica */
.portfolio-card--16-10 { aspect-ratio: 16 / 10; }
.portfolio-card--3-4   { aspect-ratio: 3 / 4; }   /* Tarjeta vertical */

/* Línea ultrafina de separación sutil entre celdas contiguas */
.portfolio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 5;
}

/* Enlace a pantalla completa */
.portfolio-card__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  z-index: 10;
}

/* Contenedor del fondo multimedia */
.portfolio-card__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-color: #060e17;
}

.portfolio-card__image,
.portfolio-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.portfolio-card:hover .portfolio-card__image,
.portfolio-card:hover .portfolio-card__video {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   4. HOVER OVERLAY, LOGO & ADAPTIVE WHITE TITLE
   (En reposo: 100% limpio. En hover: overlay azul acento 60%, logo 140px y título blanco)
   -------------------------------------------------------------------------- */
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(11, 22, 34, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.35s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-align: center;
  box-sizing: border-box;
}

.portfolio-card:hover .portfolio-card__overlay,
.portfolio-card:focus-within .portfolio-card__overlay,
.portfolio-card.is-touched .portfolio-card__overlay {
  opacity: 1;
  visibility: visible;
}

/* Logo arriba a la derecha en hover (140px) */
.portfolio-card__hover-logo {
  position: absolute;
  top: clamp(0.85rem, 1.5vw, 1.35rem);
  right: clamp(0.85rem, 1.5vw, 1.35rem);
  width: 140px;
  max-width: 45%;
  height: auto;
  object-fit: contain;
  z-index: 12;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.portfolio-card:hover .portfolio-card__hover-logo,
.portfolio-card:focus-within .portfolio-card__hover-logo,
.portfolio-card.is-touched .portfolio-card__hover-logo {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-card__overlay-inner {
  max-width: 92%;
  transform: translateY(14px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portfolio-card:hover .portfolio-card__overlay-inner,
.portfolio-card:focus-within .portfolio-card__overlay-inner,
.portfolio-card.is-touched .portfolio-card__overlay-inner {
  transform: translateY(0);
}

.portfolio-card__title {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff !important;
  margin: 0;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. SENTINEL & LOADING STATE (Infinite Scroll)
   -------------------------------------------------------------------------- */
.portfolio-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
  min-height: 110px;
  background-color: #060e17;
  width: 100%;
  box-sizing: border-box;
}

.loader {
  --color-1: #ffffff;
  --color-2: rgba(255, 255, 255, 0.2);
  --color-3: rgba(255, 255, 255, 0.5);
  --color-4: rgba(255, 255, 255, 0.7);
  --size: 1.45px;

  font-size: calc(10 * var(--size));
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-1),
      1.8em -1.8em 0 0em var(--color-2),
      2.5em 0em 0 0em var(--color-2),
      1.75em 1.75em 0 0em var(--color-2),
      0em 2.5em 0 0em var(--color-2),
      -1.8em 1.8em 0 0em var(--color-2),
      -2.6em 0em 0 0em var(--color-3),
      -1.8em -1.8em 0 0em var(--color-4);
  }
  12.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-4),
      1.8em -1.8em 0 0em var(--color-1),
      2.5em 0em 0 0em var(--color-2),
      1.75em 1.75em 0 0em var(--color-2),
      0em 2.5em 0 0em var(--color-2),
      -1.8em 1.8em 0 0em var(--color-2),
      -2.6em 0em 0 0em var(--color-2),
      -1.8em -1.8em 0 0em var(--color-3);
  }
  25% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-3),
      1.8em -1.8em 0 0em var(--color-4),
      2.5em 0em 0 0em var(--color-1),
      1.75em 1.75em 0 0em var(--color-2),
      0em 2.5em 0 0em var(--color-2),
      -1.8em 1.8em 0 0em var(--color-2),
      -2.6em 0em 0 0em var(--color-2),
      -1.8em -1.8em 0 0em var(--color-2);
  }
  37.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-2),
      1.8em -1.8em 0 0em var(--color-3),
      2.5em 0em 0 0em var(--color-4),
      1.75em 1.75em 0 0em var(--color-1),
      0em 2.5em 0 0em var(--color-2),
      -1.8em 1.8em 0 0em var(--color-2),
      -2.6em 0em 0 0em var(--color-2),
      -1.8em -1.8em 0 0em var(--color-2);
  }
  50% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-2),
      1.8em -1.8em 0 0em var(--color-2),
      2.5em 0em 0 0em var(--color-3),
      1.75em 1.75em 0 0em var(--color-4),
      0em 2.5em 0 0em var(--color-1),
      -1.8em 1.8em 0 0em var(--color-2),
      -2.6em 0em 0 0em var(--color-2),
      -1.8em -1.8em 0 0em var(--color-2);
  }
  62.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-2),
      1.8em -1.8em 0 0em var(--color-2),
      2.5em 0em 0 0em var(--color-2),
      1.75em 1.75em 0 0em var(--color-3),
      0em 2.5em 0 0em var(--color-4),
      -1.8em 1.8em 0 0em var(--color-1),
      -2.6em 0em 0 0em var(--color-2),
      -1.8em -1.8em 0 0em var(--color-2);
  }
  75% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-2),
      1.8em -1.8em 0 0em var(--color-2),
      2.5em 0em 0 0em var(--color-2),
      1.75em 1.75em 0 0em var(--color-2),
      0em 2.5em 0 0em var(--color-3),
      -1.8em 1.8em 0 0em var(--color-4),
      -2.6em 0em 0 0em var(--color-1),
      -1.8em -1.8em 0 0em var(--color-2);
  }
  87.5% {
    box-shadow:
      0em -2.6em 0em 0em var(--color-2),
      1.8em -1.8em 0 0em var(--color-2),
      2.5em 0em 0 0em var(--color-2),
      1.75em 1.75em 0 0em var(--color-2),
      0em 2.5em 0 0em var(--color-2),
      -1.8em 1.8em 0 0em var(--color-3),
      -2.6em 0em 0 0em var(--color-4),
      -1.8em -1.8em 0 0em var(--color-1);
  }
}

.portfolio-end-message {
  text-align: center;
  padding: 3.5rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-white-muted);
  background-color: #060e17;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.portfolio-end-message__icon {
  font-size: 1.6rem;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.5rem;
}