/* =========================================================
   ANIMATION STYLES — ESP Web
   ─────────────────────────────────────────────────────────
   SCOPE: Only non-border animations live here.
   Animated-border system → esp-animated-border.css
   Legacy .holder/.holders4/.holders5 border system is kept
   here ONLY for backward-compat with older Elementor pages
   that still use those classes directly.
   ========================================================= */

/* =========================================================
   LEGACY HOLDER SYSTEM (backward-compat only)
   Used by older pages that reference .holder / .holders4 /
   .holders5 directly. New pages use .main-container-s.
   ========================================================= */

.holder {
  position: relative;
  background-color: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: visible;
}

/* Legacy S-series: scoped to holder containers to avoid
   conflicts with the new .main-container-s system          */
.holder [class*="layer-back-s"],
.holder [class*="layer-middle-s"],
.holder [class*="animated-border-s"],
.holders4 [class*="layer-back-s"],
.holders4 [class*="layer-middle-s"],
.holders4 [class*="animated-border-s"],
.holders5 [class*="layer-back-s"],
.holders5 [class*="layer-middle-s"],
.holders5 [class*="animated-border-s"] {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.holder [class*="layer-back-s"],
.holders4 [class*="layer-back-s"],
.holders5 [class*="layer-back-s"] {
  z-index: 1;
  background: var(--ColorBack);
}

.holder [class*="layer-middle-s"],
.holders4 [class*="layer-middle-s"],
.holders5 [class*="layer-middle-s"] {
  object-fit: cover;
  z-index: 2;
}

.holder [class*="layer-back-s"],
.holder [class*="layer-middle-s"],
.holder [class*="animated-border-s"],
.holders4 [class*="layer-back-s"],
.holders4 [class*="layer-middle-s"],
.holders4 [class*="animated-border-s"],
.holders5 [class*="layer-back-s"],
.holders5 [class*="layer-middle-s"],
.holders5 [class*="animated-border-s"] {
  width: calc(100% - var(--Offcet));
  height: calc(100% - var(--Offcet));
}

/* SERIES S: Image Bottom-Right, Back & Border Top-Left */
.holder .layer-middle-s {
  top: var(--Offcet);
  left: var(--Offcet);
  right: auto;
  bottom: auto;
}
.holder .layer-back-s,
.holder .animated-border-s {
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}

/* SERIES S3: Image Bottom-Left, Back & Border Top-Right */
.holder .layer-middle-s3 {
  top: var(--Offcet);
  right: var(--Offcet);
  left: auto;
  bottom: auto;
}
.holder .layer-back-s3,
.holder .animated-border-s3 {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
}

/* SERIES S4: Image Top-Right, Back & Border Bottom-Left */
.holder .layer-middle-s4,
.holders4 .layer-middle-s4 {
  bottom: var(--Offcet);
  left: var(--Offcet);
  right: auto;
  top: auto;
}
.holder .layer-back-s4,
.holder .animated-border-s4,
.holders4 .layer-back-s4,
.holders4 .animated-border-s4 {
  bottom: 0;
  left: 0;
  right: auto;
  top: auto;
}

/* SERIES S5: Image Top-Left, Back & Border Bottom-Right */
.holder .layer-middle-s5,
.holders5 .layer-middle-s5 {
  bottom: var(--Offcet);
  right: var(--Offcet);
  left: auto;
  top: auto;
}
.holder .layer-back-s5,
.holder .animated-border-s5,
.holders5 .layer-back-s5,
.holders5 .animated-border-s5 {
  bottom: 0;
  right: 0;
  left: auto;
  top: auto;
}

[class*="animated-border-s"] {
  z-index: 4;
}

.holder .animated-border-s::before,
.holder .animated-border-s::after,
.holder .animated-border-s3::before,
.holder .animated-border-s3::after,
.holder .animated-border-s4::before,
.holder .animated-border-s4::after,
.holder .animated-border-s5::before,
.holder .animated-border-s5::after,
.holders4 .animated-border-s::before,
.holders5 .animated-border-s::before {
  content: '';
  position: absolute;
  background: var(--ColorBorder);
  backdrop-filter: blur(8px);
  z-index: 5;
}

/* Static Border Positions — Desktop */
@media (min-width: 1025px) {

  .holder {
    aspect-ratio: 1 / 1;
    width: clamp(350px, 30vw, 800px) !important;
    height: auto;
  }
  .holders4 {
    aspect-ratio: 1 / 1;
    width: clamp(350px, 30vw, 800px) !important;
    height: auto;
  }
  .holders5 {
    aspect-ratio: 1 / 1;
    width: clamp(300px, 30vw, 800px) !important;
    height: auto;
  }

  /* Series S */
  .animated-border-s::before {
    top: 0; right: 0; left: auto;
    width: calc(1*var(--border-thk)); height: 0;
  }
  .animated-border-s::after {
    top: auto; bottom: 0;
    right: calc(1*var(--border-thk)); left: auto;
    width: 0; height: calc(1*var(--border-thk));
  }
  .scroll-animate .animated-border-s::before {
    animation: draw-right 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s::after {
    animation: draw-bottom 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }

  /* Series S3 */
  .animated-border-s3::before {
    top: 0; left: 0;
    width: calc(1*var(--border-thk)); height: 0;
  }
  .animated-border-s3::after {
    top: auto; bottom: 0;
    left: calc(1*var(--border-thk));
    width: 0; height: calc(1*var(--border-thk));
  }
  .scroll-animate .animated-border-s3::before {
    animation: draw-vertical-s3 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }
  .scroll-animate .animated-border-s3::after {
    animation: draw-horizontal-s3 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 3.3s;
  }

  /* Series S4 */
  .animated-border-s4::before {
    top: 0; left: -100vw;
    width: calc(100% + 100vw); height: calc(1*var(--border-thk));
    transform: translateX(-100%);
  }
  .animated-border-s4::after {
    top: calc(1*var(--border-thk)); right: 0; left: auto;
    width: calc(1*var(--border-thk)); height: 0;
  }
  .scroll-animate .animated-border-s4::before {
    animation: slide-in-top-border-s4 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: .5s;
  }
  .scroll-animate .animated-border-s4::after {
    animation: draw-vertical-s4 2.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }
}

/* Series S5 — global (overridden by media queries below) */
.animated-border-s5::before {
  top: 0; right: 0; left: auto;
  width: 0; height: calc(1*var(--border-thk));
}
.animated-border-s5::after {
  top: calc(1*var(--border-thk)); left: 0;
  width: calc(1*var(--border-thk)); height: 0;
}
.scroll-animate .animated-border-s5::before {
  animation: draw-top-s5 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 1.6s;
}
.scroll-animate .animated-border-s5::after {
  animation: draw-right-s5 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 2.6s;
}

/* Fade in back + image layers (legacy) */
.holder.scroll-animate .layer-back-s,
.holder.scroll-animate .layer-back-s3,
.holder.scroll-animate .layer-back-s4,
.holder.scroll-animate .layer-back-s5,
.holders4.scroll-animate .layer-back-s,
.holders5.scroll-animate .layer-back-s {
  animation: fadeInUp 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.5s;
}
.holder.scroll-animate .layer-middle-s,
.holder.scroll-animate .layer-middle-s3,
.holder.scroll-animate .layer-middle-s4,
.holder.scroll-animate .layer-middle-s5,
.holders4.scroll-animate .layer-middle-s,
.holders5.scroll-animate .layer-middle-s {
  animation: fadeInLeft 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 1s;
}
.holder.scroll-animate .animated-border-s,
.holder.scroll-animate .animated-border-s3,
.holder.scroll-animate .animated-border-s4,
.holder.scroll-animate .animated-border-s5,
.holders4.scroll-animate .animated-border-s,
.holders5.scroll-animate .animated-border-s {
  opacity: 1;
  transition-delay: 1.5s;
}


/* =========================================================
   KEYFRAMES — legacy holder system
   ========================================================= */
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translateY(85px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  0%   { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* S */
@keyframes draw-bottom {
  to { width: calc(100% - var(--border-thk)); }
}
@keyframes draw-right {
  to { height: 100%; }
}
/* S-Mobile */
@keyframes draw-bottom-M {
  to { height: 100%; }
}
@keyframes draw-left-M {
  to { width: calc(100% - var(--border-thk)); }
}
/* S3 */
@keyframes draw-vertical-s3 {
  to { height: 100%; }
}
@keyframes draw-horizontal-s3 {
  to { width: calc(100% - var(--border-thk)); }
}
/* S3-Mobile */
@keyframes draw-vertical-M-s3 {
  to { height: 100%; }
}
@keyframes draw-horizontal-M-s3 {
  to { width: calc(100% - var(--border-thk)); }
}
/* S4 */
@keyframes slide-in-top-border-s4 {
  to { transform: translateX(0); }
}
@keyframes draw-vertical-s4 {
  to { height: calc(100% - var(--border-thk)); }
}
/* S4-Mobile */
@keyframes draw-top-M-s4 {
  to { width: calc(100% - var(--Offcet)); }
}
@keyframes draw-right-M-s4 {
  to { height: calc(100% - var(--border-thk)); }
}
/* S5 */
@keyframes draw-top-s5 {
  to { width: 100%; }
}
@keyframes draw-right-s5 {
  to { height: calc(100% - var(--border-thk)); }
}
/* S5-Mobile */
@keyframes draw-top-M-s5 {
  to { width: calc(100% - var(--Offcet)); }
}
@keyframes draw-right-M-s5 {
  to { height: calc(100% - var(--border-thk)); }
}


/* =========================================================
   RESPONSIVE — legacy holder system
   ========================================================= */

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
  :root {
    --border-thk: clamp(6px, 1.6vw, 8px);
    --Offcet: clamp(10px, 15%, 25px);
    --bigcon-padding-vertical: clamp(2%, 8vw, 8%);
    --bigcon-padding-horizontal: 0;
    --internal-gap: clamp(15px, 8vw, 30px);
  }

  .holder {
    aspect-ratio: 1 / 1.1;
    overflow: hidden;
  }
  .holders4, .holders5 {
    aspect-ratio: 1 / 1;
    width: 100%; height: 100%;
    overflow: hidden;
  }

  .holder [class*="layer-back-s"],
  .holder [class*="layer-back-s3"],
  .holder [class*="layer-back-s4"],
  .holder [class*="layer-back-s5"],
  .holders4 [class*="layer-back-s"],
  .holders5 [class*="layer-back-s"] {
    z-index: 1;
    transform: translateY(85px);
    background: var(--ColorBack);
  }

  /* S */
  .animated-border-s::before {
    top: 0; left: auto;
    right: calc(1*var(--Offcet));
    width: calc(1*var(--border-thk)); height: 0;
  }
  .animated-border-s::after {
    top: auto; bottom: 0;
    right: calc(1*var(--Offcet) + 1*var(--border-thk));
    height: calc(1*var(--border-thk)); width: 0;
  }
  .scroll-animate .animated-border-s::before {
    animation: draw-bottom-M 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s::after {
    animation: draw-left-M 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }

  /* S3 */
  .animated-border-s3::before {
    top: 0; left: var(--Offcet);
    width: var(--border-thk); height: 0;
  }
  .animated-border-s3::after {
    bottom: 0;
    left: calc(var(--Offcet) + var(--border-thk)); right: auto;
    height: var(--border-thk); width: 0;
  }
  .scroll-animate .animated-border-s3::before {
    animation: draw-vertical-M-s3 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s3::after {
    animation: draw-horizontal-M-s3 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }

  /* S4 */
  .animated-border-s4::before {
    top: calc(1*var(--Offcet)); left: 0;
    height: calc(1*var(--border-thk)); width: 0;
  }
  .animated-border-s4::after {
    top: calc(1*var(--Offcet) + 1*var(--border-thk));
    right: calc(1*var(--Offcet));
    width: calc(1*var(--border-thk)); height: 0;
  }
  .scroll-animate .animated-border-s4::before {
    animation: draw-top-M-s4 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s4::after {
    animation: draw-right-M-s4 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.5s;
  }

  /* S5 */
  .animated-border-s5::before {
    top: calc(1*var(--Offcet)); right: 0; left: auto;
    height: calc(1*var(--border-thk)); width: 0;
  }
  .animated-border-s5::after {
    top: calc(1*var(--Offcet) + 1*var(--border-thk));
    left: calc(1*var(--Offcet));
    width: calc(1*var(--border-thk)); height: 0;
  }
  .scroll-animate .animated-border-s5::before {
    animation: draw-top-M-s5 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s5::after {
    animation: draw-right-M-s5 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.5s;
  }
}

/* Tablet (768px – 1024px) */
@media (min-width:768px) and (max-width:1024px) {
  :root {
    --border-thk: clamp(2px, .6vw, 8px);
    --Offcet: clamp(4px, 6%, 25px);
    --bigcon-padding-vertical: clamp(2%, 6vw, 8%);
    --bigcon-padding-horizontal: 0;
    --internal-gap: clamp(15px, 8vw, 30px);
  }

  .holder {
    aspect-ratio: 1 / 1;
    width: clamp(350px, 26vw, 550px) !important;
    height: auto;
  }
  .holders4 {
    aspect-ratio: 1 / 1;
    width: clamp(350px, 26vw, 550px) !important;
    height: auto;
  }
  .holders5 {
    aspect-ratio: 1 / 1;
    width: clamp(250px, 25vw, 550px) !important;
    height: auto;
  }

  /* S */
  .animated-border-s::before {
    top: 0; right: 0; left: auto;
    width: var(--border-thk); height: 0;
  }
  .animated-border-s::after {
    top: auto; bottom: 0;
    right: var(--border-thk); left: auto;
    width: 0; height: var(--border-thk);
  }
  .scroll-animate .animated-border-s::before {
    animation: draw-right 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }
  .scroll-animate .animated-border-s::after {
    animation: draw-bottom 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }

  /* S3 */
  .animated-border-s3::before {
    top: 0; left: 0;
    width: var(--border-thk); height: 0;
  }
  .animated-border-s3::after {
    top: auto; bottom: 0;
    left: var(--border-thk);
    width: 0; height: var(--border-thk);
  }
  .scroll-animate .animated-border-s3::before {
    animation: draw-vertical-s3 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.3s;
  }
  .scroll-animate .animated-border-s3::after {
    animation: draw-horizontal-s3 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 3.3s;
  }

  /* S4 */
  .animated-border-s4::before {
    top: 0; left: -100vw;
    width: calc(100% + 100vw); height: var(--border-thk);
    transform: translateX(-100%);
  }
  .animated-border-s4::after {
    top: var(--border-thk); right: 0; left: auto;
    width: var(--border-thk); height: 0;
  }
  .scroll-animate .animated-border-s4::before {
    animation: slide-in-top-border-s4 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: .5s;
  }
  .scroll-animate .animated-border-s4::after {
    animation: draw-vertical-s4 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.5s;
  }

  /* S5 */
  .animated-border-s5::before {
    top: 0; right: 0; left: auto;
    width: 0; height: var(--border-thk);
  }
  .animated-border-s5::after {
    top: calc(1*var(--border-thk)); left: 0;
    width: var(--border-thk); height: 0;
  }
  .scroll-animate .animated-border-s5::before {
    animation: draw-top-s5 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.6s;
  }
  .scroll-animate .animated-border-s5::after {
    animation: draw-right-s5 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 2.6s;
  }
}




.animation-section {
  position: relative;
  width: 80%;
  margin: 0 auto;
  min-height: 40vh;
  padding: 2rem 3rem;
  background: transparent;
  color: #fff;
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  z-index: 3;
  font-family: "Roboto Slab", serif;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
}
.animation-section h2 {
  font-family: "Roboto Slab", Sans-Serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
.animation-section p {
  font-family: "Roboto Slab", Sans-Serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  max-width: 100%;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 1024px) {
  .animation-section { width: 75%; padding: 1.5rem 1rem; }
  .animation-section h2 { font-size: clamp(1.5rem, 3.2vw, 2.8rem); margin-bottom: 1rem; }
  .animation-section p  { font-size: clamp(0.9rem, 1.5vw, 1.1rem); line-height: 1.5; }
}
@media (max-width: 767px) {
  .animation-section { width: 75%; padding: 1rem 0.5rem; text-align: center; }
  .animation-section h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); margin-bottom: 0.8rem; line-height: 1.3; }
  .animation-section p  { font-size: clamp(0.8rem, 3vw, 1rem); line-height: 1.4; }
}
@media (max-width: 480px) {
  .animation-section { padding: 0.8rem 0.3rem; }
  .animation-section h2 { font-size: clamp(1.3rem, 7vw, 1.8rem); margin-bottom: 0.6rem; }
  .animation-section p  { font-size: clamp(0.7rem, 3.5vw, 0.9rem); line-height: 1.3; }
}
@media (min-width: 1440px) {
  .animation-section { width: 70%; padding: 3rem 2rem; }
  .animation-section h2 { font-size: clamp(2.5rem, 4vw, 4rem); }
  .animation-section p  { font-size: clamp(1.1rem, 1.5vw, 1.4rem); max-width: 700px; margin: 0 auto; }
}


/* =========================================================
   SQUARE GRID (Careers section — esp-home-careers.php)
   ========================================================= */
.square-grid {
  display: grid;
  width: 40%;
  gap: 10px;
  aspect-ratio: 1.1 / 1;
  margin: 50px auto;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
  .square-grid { width: 100%; height: auto; aspect-ratio: 1.1 / 1; gap: 3px; }
  .cell.img-cell { aspect-ratio: auto; }
}
@media (min-width: 768px) and (max-width:1024px) {
  .square-grid { width: 50%; height: auto; aspect-ratio: 1.1 / 1; gap: 2px; }
  .cell.img-cell { aspect-ratio: auto; }
}

.square-grid .cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  background: #4d4d4d;
  color: white;
  opacity: 0;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  transition: opacity 1.5s ease;
  min-height: 80px;
}
.square-grid.grid-animate .cell.show { opacity: 1; }

.cell.img-cell {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cell.merged.merged-img {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.cell.text-cell span {
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 2;
  position: relative;
}
.cell.merged.merged-text {
  background: #000;
  color: #fff;
  flex-direction: column;
  justify-content: center;
}
.cell.merged.merged-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--merged-bg, url('/wp-content/uploads/2025/07/DSC_0047.webp')) center/cover no-repeat;
  z-index: 3;
  opacity: 1;
  transition: opacity 1.5s ease;
}
.cell.merged.merged-text.merged-fade::before { opacity: 0.4; }

.merged-item {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  z-index: 4;
  padding: 10px;
  text-align: center;
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}
.cell.merged.merged-text.merged-text-visible .merged-item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.cell.merged.merge-2x2 { grid-column: span 2; grid-row: span 2; }
.cell.merged.merge-1x2 { grid-row: span 2; }