/* ==========================================================================
   Certificates Section — styles for certificatesSection.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared section-title mask transforms (also used by other sections)
   -------------------------------------------------------------------------- */
.leftmask   { transform: translateX(0); }
.rightmask  { transform: translateX(0); }
.topmask    { transform: translateY(0); }
.bottommask { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Loading spinner (used by slider lazy-loader + modal loader)
   -------------------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Certificate items (slider view)
   -------------------------------------------------------------------------- */
.slide .certificate-item {
  width: min(180px, 25vw);
  height: min(270px, 37.5vw);
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  background-size: cover !important;
  background-position: 50% 50% !important;
  display: inline-block;
  transition: 0.5s;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.85;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.slide .certificate-item:not(.loaded) {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(0, 0, 0, 0.25)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%);
  background-size: cover, 200% 100%;
  animation: cert-shimmer 1.6s linear infinite;
}

.slide .certificate-item.loaded .lazy-loader {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.slide .certificate-item.loaded {
  background-size: cover !important;
  background-position: 50% 50% !important;
}

@keyframes cert-shimmer {
  0%   { background-position: 50% 50%, 200% 0; }
  100% { background-position: 50% 50%, -200% 0; }
}

.slide .certificate-item:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

.slide .certificate-item.first,
.slide .certificate-item.second {
  top: 0;
  left: 0;
  transform: translate(0, 0);
  border-radius: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  border: none;
}

.slide .certificate-item.third {
  left: 55%;
  opacity: 0.7;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.slide .certificate-item.fourth {
  left: calc(55% + 190px);
  opacity: 0.5;
  z-index: 4;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.slide .certificate-item.fifth {
  left: calc(55% + 380px);
  opacity: 0.3;
  z-index: 3;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.slide .certificate-item.hidden-item {
  left: calc(55% + 570px);
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Content overlay inside certificate items
   -------------------------------------------------------------------------- */
.certificate-item .content {
  position: absolute;
  top: 50%;
  left: min(20px, 3vw);
  width: min(350px, 80vw);
  text-align: left;
  color: #ffffff;
  transform: translate(0, -50%);
  font-family: system-ui;
  display: none;
  z-index: 20;
  background: rgba(0, 0, 0, 0.7);
  padding: min(20px, 3vw);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
}

.slide .certificate-item.second .content {
  display: block;
}

.content .name {
  font-size: clamp(14px, 4vw, 20px);
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  animation: animate 1s ease-in-out 1 forwards;
  line-height: 1.3;
  margin-bottom: clamp(8px, 2vw, 12px);
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
  word-wrap: break-word;
}

.content .des {
  margin-top: clamp(5px, 1.5vw, 8px);
  margin-bottom: clamp(15px, 3vw, 20px);
  opacity: 0;
  animation: animate 1s ease-in-out 0.3s 1 forwards;
  font-size: clamp(12px, 3vw, 14px);
  color: #f0f0f0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  word-wrap: break-word;
}

.content button,
.content .validate-btn,
.content .view-btn {
  padding: clamp(8px, 2vw, 10px) clamp(15px, 3vw, 20px);
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: animate 1s ease-in-out 0.6s 1 forwards;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: clamp(11px, 2.5vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content .validate-btn {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

.content .validate-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(0, 0, 0, 1) 0%, rgba(50, 50, 50, 1) 100%);
}

.content .view-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
}

.content .view-btn:hover {
  background: rgba(0, 0, 0, 0.95);
  transform: scale(1.05);
  border-color: white;
}

.dark .certificate-item .content {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .content .validate-btn {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.dark .content .view-btn {
  background: rgba(30, 30, 30, 0.8);
  color: white;
}

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

/* --------------------------------------------------------------------------
   Filter buttons
   -------------------------------------------------------------------------- */
.filter-btn {
  transition: all 0.3s ease;
  opacity: 0.9;
}

.filter-btn:hover {
  opacity: 1;
}

.filter-btn-active {
  background: #000 !important;
  color: white !important;
  border-color: transparent !important;
  opacity: 1;
}

.dark .filter-btn-active {
  background: #fff !important;
  color: #000 !important;
}

.filter-hidden {
  display: none !important;
}

/* Show More specific hidden class - separate from filter */
.filter-hidden-by-showmore {
  display: none !important;
}

.filter-btn span {
  display: inline-block;
  font-weight: 500;
  transition: all 0.3s ease;
}

.filter-btn-active span {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white;
}

.dark .filter-btn-active span {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #000;
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
#modal {
  backdrop-filter: blur(8px);
}

#modal .relative {
  max-width: 90vw;
  max-height: 90vh;
}

#modal-img {
  object-fit: contain;
  max-height: 80vh;
}

#modal-buttons button {
  min-width: 100px;
  justify-content: center;
}

#modal-buttons button:hover {
  transform: translateY(-1px);
}

/* Modal lazy loading states */
#modal-loader {
  transition: opacity 0.5s ease;
}
#modal-loader.hidden {
  opacity: 0;
  pointer-events: none;
}
#modal-img.loaded {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Node / Network view
   -------------------------------------------------------------------------- */
.node-container {
  background: transparent;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  --float-scale: 1;
}

#nodeCanvas {
  z-index: 0;
}

.cert-node {
  z-index: 1;
}

.cert-node:hover {
  z-index: 10;
}

.cert-node:hover .node-label {
  opacity: 1;
}

.cert-node:hover .node-circle {
  border-color: #000;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

.dark .cert-node:hover .node-circle {
  border-color: #fff;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.cert-node.active .node-circle {
  border-color: #000;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(0, 0, 0, 0.2);
  transform: scale(1.15);
}

.dark .cert-node.active .node-circle {
  border-color: #fff;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.2), 0 0 80px rgba(255, 255, 255, 0.1);
}

.node-label {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 20;
}

.dark .cert-node .node-circle {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Molecule drift animation */
@keyframes moleculeFloat {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(calc(var(--float-x) * var(--float-scale, 1)), calc(var(--float-y) * var(--float-scale, 1) * -1)) rotate(var(--float-rot)); }
  50%  { transform: translate(calc(var(--float-x) * var(--float-scale, 1) * -0.7), calc(var(--float-y) * var(--float-scale, 1) * 0.6)) rotate(0deg); }
  75%  { transform: translate(calc(var(--float-x) * var(--float-scale, 1) * 0.5), calc(var(--float-y) * var(--float-scale, 1) * -0.4)) rotate(calc(var(--float-rot) * -1)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.node-circle {
  animation: moleculeFloat var(--float-dur, 7s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
}

.cert-node:hover .node-circle,
.cert-node.active .node-circle {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Slider responsive breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .slider-container { height: 550px; }
  .slide .certificate-item { width: 180px; height: 270px; }
  .slide .certificate-item.third { left: 55%; }
  .slide .certificate-item.fourth { left: calc(55% + 190px); }
  .slide .certificate-item.fifth { left: calc(55% + 380px); }
  .slide .certificate-item.hidden-item { left: calc(55% + 570px); }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .slider-container { height: 500px; }
  .slide .certificate-item { width: 160px; height: 240px; }
  .slide .certificate-item.third { left: 52%; }
  .slide .certificate-item.fourth { left: calc(52% + 170px); }
  .slide .certificate-item.fifth { left: calc(52% + 340px); }
  .slide .certificate-item.hidden-item { left: calc(52% + 510px); }
}

@media (max-width: 991px) and (min-width: 768px) {
  .slider-container { height: 450px; }
  .slide .certificate-item { width: 140px; height: 210px; }
  .slide .certificate-item.third { left: 50%; }
  .slide .certificate-item.fourth { left: calc(50% + 150px); }
  .slide .certificate-item.fifth { left: calc(50% + 300px); }
  .slide .certificate-item.hidden-item { left: calc(50% + 450px); }
  .certificate-item .content { left: 15px; width: 280px; padding: 15px; }
  .content .name { font-size: 16px; margin-bottom: 8px; }
  .content .des { font-size: 12px; margin-bottom: 15px; }
  .content button { padding: 8px 16px; font-size: 12px; }
}

@media (max-width: 767px) and (min-width: 576px) {
  .slider-container { height: 400px; }
  .slide .certificate-item { width: 120px; height: 180px; }
  .slide .certificate-item.third { left: 48%; }
  .slide .certificate-item.fourth { left: calc(48% + 130px); }
  .slide .certificate-item.fifth { left: calc(48% + 260px); }
  .slide .certificate-item.hidden-item { left: calc(48% + 390px); }
  .certificate-item .content { left: 10px; width: 220px; padding: 12px; }
  .content .name { font-size: 14px; margin-bottom: 6px; }
  .content .des { font-size: 11px; margin-bottom: 12px; }
  .content button { padding: 6px 12px; font-size: 10px; }
}

@media (max-width: 575px) and (min-width: 480px) {
  .slider-container { height: 350px; }
  .slide .certificate-item { width: 100px; height: 150px; }
  .slide .certificate-item.third { left: 45%; }
  .slide .certificate-item.fourth { left: calc(45% + 110px); }
  .slide .certificate-item.fifth { left: calc(45% + 220px); }
  .slide .certificate-item.hidden-item { left: calc(45% + 330px); }
  .certificate-item .content { left: 8px; width: 180px; padding: 10px; }
  .content .name { font-size: 12px; margin-bottom: 5px; }
  .content .des { font-size: 10px; margin-bottom: 10px; }
  .content button { padding: 5px 10px; font-size: 9px; }
}

@media (max-width: 479px) {
  .slider-container { height: 300px; }
  .slide .certificate-item { width: 80px; height: 120px; }
  .slide .certificate-item.third { left: 42%; }
  .slide .certificate-item.fourth { left: calc(42% + 90px); }
  .slide .certificate-item.fifth { left: calc(42% + 180px); }
  .slide .certificate-item.hidden-item { left: calc(42% + 270px); }
  .certificate-item .content { left: 5px; width: 150px; padding: 8px; }
  .content .name { font-size: 10px; margin-bottom: 4px; }
  .content .des { font-size: 8px; margin-bottom: 8px; }
  .content button { padding: 4px 8px; font-size: 8px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .slider-container { height: 250px; }
  .slide .certificate-item { width: 100px; height: 150px; }
  .certificate-item .content { padding: 10px; }
  .content .name { font-size: 12px; margin-bottom: 5px; }
  .content .des { font-size: 10px; margin-bottom: 10px; }
}

/* Network view responsive */
@media (max-width: 768px) {
  .node-container { height: 450px !important; --float-scale: 0.5; margin-bottom: 70px; }
  .cert-node .node-circle { width: 3rem !important; height: 3rem !important; }
  .cert-node .node-year-badge { width: 1rem !important; height: 1rem !important; font-size: 6px !important; }
  .cert-node .node-link-badge { width: 0.875rem !important; height: 0.875rem !important; }

  /* Modal mobile */
  #modal-buttons {
    position: relative;
    bottom: 0;
    margin-top: 12px;
    justify-content: center;
    width: 100%;
    border-radius: 12px;
    padding: 12px;
  }
  #modal-buttons button {
    min-width: 80px;
    font-size: 12px;
    padding: 8px 12px;
  }
  #modal .relative {
    margin: 0 10px;
  }
  #modal-close {
    top: -40px;
    right: 0;
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .node-container { height: 350px !important; --float-scale: 0.35; margin-bottom: 60px; }
  .cert-node .node-circle { width: 2.5rem !important; height: 2.5rem !important; }
  .cert-node .node-year-badge { width: 0.875rem !important; height: 0.875rem !important; }
  .cert-node .node-link-badge { width: 0.75rem !important; height: 0.75rem !important; }
  #modal-buttons button {
    min-width: 60px;
    font-size: 10px;
    padding: 6px 10px;
  }
  #modal-buttons {
    gap: 6px;
    padding: 8px;
  }
  #modal-close {
    font-size: 24px;
    top: -35px;
  }
}

/* --------------------------------------------------------------------------
   View toggle button + view transition
   -------------------------------------------------------------------------- */
#toggleView {
  transition: all 0.3s ease;
}

#toggleView:hover {
  transform: scale(1.02);
}

#toggleView .fa-solid {
  transition: transform 0.3s ease;
}

#sliderView,
#networkView {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#sliderView.hidden,
#networkView.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  width: 100%;
}

#sliderView:not(.hidden),
#networkView:not(.hidden) {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}

/* --------------------------------------------------------------------------
   Node background image (was inline style="background-image: url(...)")
   -------------------------------------------------------------------------- */
.node-bg-image {
  background-size: cover;
  background-position: center;
  image-rendering: auto;
  opacity: 0.7;
}