/* =========================================
   DOLLY BEATRIZ
   ARCHITECTURAL GALLERY
   INFORMACIÓN CINEMATOGRÁFICA
   ========================================= */

/* 01. PANEL SIN RECUADRO */

.inmersive-projects .project-panel {
  position: relative;

  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  box-shadow: none;
  border: none;

  padding: clamp(12px, 2vw, 30px);
}

/* 02. LÍNEA ARQUITECTÓNICA */

.inmersive-projects .project-panel::before {
  content: "";
  display: block;

  width: 56px;
  height: 1px;

  margin-bottom: 30px;

  background: var(--arena);

  transform-origin: left center;

  transition: transform 700ms
    cubic-bezier(0.22, 1, 0.36, 1);
}

/* 03. TIPOGRAFÍA EDITORIAL */

.inmersive-projects .project-panel-count {
  margin-bottom: 24px;
  font-size: 11px;
  letter-spacing: 0.24em;
}

.inmersive-projects .project-panel-title {
  max-width: 450px;

  font-size: clamp(38px, 3.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.048em;
}

.inmersive-projects .project-panel-summary {
  max-width: 370px;

  font-size: 15px;
  line-height: 1.85;
}

/* 04. ESTADOS DE ANIMACIÓN */

.inmersive-projects .project-panel.is-revealing
.project-panel-title,

.inmersive-projects .project-panel.is-revealing
.project-panel-location,

.inmersive-projects .project-panel.is-revealing
.project-panel-summary,

.inmersive-projects .project-panel.is-revealing
.project-panel-link {
  animation: reveal-project-info 760ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.inmersive-projects .project-panel.is-revealing
.project-panel-location {
  animation-delay: 65ms;
}

.inmersive-projects .project-panel.is-revealing
.project-panel-summary {
  animation-delay: 110ms;
}

.inmersive-projects .project-panel.is-revealing
.project-panel-link {
  animation-delay: 160ms;
}

.inmersive-projects .project-panel.is-revealing::before {
  animation: draw-project-line 750ms ease both;
}

@keyframes reveal-project-info {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes draw-project-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* 05. ENLACE EDITORIAL */

.inmersive-projects .project-panel-link {
  position: relative;

  gap: 14px;

  padding: 12px 0;

  border-bottom: none;

  font-weight: 500;
  letter-spacing: 0.12em;

  transition:
    color 350ms ease,
    letter-spacing 350ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .inmersive-projects .project-panel-link:hover {
    color: var(--marron);
    letter-spacing: 0.16em;
  }
}

/* 06. TABLET Y MÓVIL */

@media (max-width: 1024px) {
  .inmersive-projects .project-panel {
    padding: 12px 0;
  }

  .inmersive-projects .project-panel::before {
    margin-bottom: 20px;
  }

  .inmersive-projects .project-panel-title {
    font-size: clamp(32px, 6vw, 48px);
  }
}

/* 07. MOVIMIENTO REDUCIDO */

@media (prefers-reduced-motion: reduce) {
  .inmersive-projects .project-panel.is-revealing
  .project-panel-title,

  .inmersive-projects .project-panel.is-revealing
  .project-panel-location,

  .inmersive-projects .project-panel.is-revealing
  .project-panel-summary,

  .inmersive-projects .project-panel.is-revealing
  .project-panel-link,

  .inmersive-projects .project-panel.is-revealing::before {
    animation: none !important;
  }
}