/* CTF Website Manager */

:root {
  --ctf-motion-distance: 14px;
  --ctf-motion-duration: 420ms;
  --ctf-motion-ease: ease-out;
  --ctf-page-hero-height: 548px;
}

/* Elementor hides animated sections with .elementor-invisible until its
   front-end JS runs. Port-forward previews can block or delay those scripts,
   so keep content visible and let motion be progressive enhancement. */
body:not(.elementor-editor-active) .elementor-invisible {
  visibility: visible !important;
}

html.ctf-motion-ready .ctf-motion-item {
  opacity: 0;
  transform: translate3d(0, var(--ctf-motion-distance), 0);
  transition:
    opacity var(--ctf-motion-duration) var(--ctf-motion-ease),
    transform var(--ctf-motion-duration) var(--ctf-motion-ease);
  transition-delay: var(--ctf-motion-delay, 0ms);
  will-change: opacity, transform;
}

html.ctf-motion-ready .ctf-motion-item.ctf-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.ctf-motion-ready .ctf-motion-item.ctf-motion-visible.ctf-motion-from-left,
html.ctf-motion-ready .ctf-motion-item.ctf-motion-visible.ctf-motion-from-right {
  transform: translate3d(0, 0, 0);
}

html.ctf-motion-ready .ctf-motion-from-left {
  transform: translate3d(0, var(--ctf-motion-distance), 0);
}

html.ctf-motion-ready .ctf-motion-from-right {
  transform: translate3d(0, var(--ctf-motion-distance), 0);
}

@media (max-width: 768px) {
  body:not(.elementor-editor-active) .elementor-invisible,
  html.ctf-motion-ready .ctf-motion-item,
  html.ctf-motion-ready .ctf-motion-item.ctf-motion-visible,
  html.ctf-motion-ready .ctf-motion-from-left,
  html.ctf-motion-ready .ctf-motion-from-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
    will-change: auto !important;
  }

  html.ctf-motion-ready .ctf-motion-from-left,
  html.ctf-motion-ready .ctf-motion-from-right {
    transform: none !important;
  }
}

.ctf-motion-card,
.ctf-motion-link,
.ctf-motion-media img {
  transition:
    transform 260ms cubic-bezier(0.2, 0.72, 0.18, 1),
    box-shadow 260ms ease,
    opacity 220ms ease,
    filter 220ms ease;
}

.ctf-motion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 19, 57, 0.10);
}

html.ctf-motion-ready .ctf-motion-item.ctf-motion-visible.ctf-motion-card:hover {
  transform: translateY(-3px);
}

.ctf-motion-link:hover {
  transform: translateY(-2px);
}

.ctf-motion-media {
  overflow: hidden;
}

.ctf-motion-media:hover img {
  transform: scale(1.015);
}

.ctf-motion-ready .ctf-hero-watermark {
  animation: ctf-watermark-drift 18s ease-in-out infinite alternate;
}

#ctf-hero {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

#ctf-hero .ctf-highlight-layer {
  z-index: 0;
}

.ctf-hero-arrow,
.ctf-hero-thumb {
  cursor: pointer;
  outline: none;
}

.ctf-hero-arrow:focus-visible,
.ctf-hero-thumb:focus-visible {
  outline: 2px solid rgba(252, 202, 102, 0.88);
  outline-offset: 4px;
}

.ctf-hero-thumb {
  border: 2px solid rgba(252, 202, 102, 0);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.ctf-hero-thumb:hover,
.ctf-hero-thumb.is-active {
  border-color: #fcca66;
  transform: translateY(-2px);
}

body:not(.elementor-editor-active) .ctf-page-hero,
body:not(.elementor-editor-active) .ctf-single-hero,
body:not(.elementor-editor-active) .ctf-eo-detail-hero {
  --min-height: var(--ctf-page-hero-height) !important;
  isolation: isolate;
  min-height: var(--ctf-page-hero-height) !important;
  overflow: hidden;
  position: relative;
}

body:not(.elementor-editor-active) .ctf-hero-bg-motion {
  background-image: none !important;
}

body:not(.elementor-editor-active) .ctf-hero-bg-motion > .ctf-page-hero-bg {
  background-image: var(--ctf-hero-motion-image);
  background-position: var(--ctf-hero-motion-position, center center);
  background-repeat: var(--ctf-hero-motion-repeat, no-repeat);
  background-size: var(--ctf-hero-motion-size, cover);
  inset: -24px;
  pointer-events: none;
  position: absolute;
  transform: scale(1.08) translate3d(0, -10px, 0);
  transform-origin: center center;
  will-change: transform, opacity;
  z-index: -1;
}

html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero > .ctf-page-hero-bg,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-single-hero > .ctf-page-hero-bg,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-eo-detail-hero > .ctf-page-hero-bg {
  animation: ctf-page-hero-image-settle 1600ms cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero.ctf-motion-item,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-single-hero.ctf-motion-item,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-eo-detail-hero.ctf-motion-item,
body:not(.elementor-editor-active) .ctf-page-hero.elementor-invisible,
body:not(.elementor-editor-active) .ctf-single-hero.elementor-invisible,
body:not(.elementor-editor-active) .ctf-eo-detail-hero.elementor-invisible,
body:not(.elementor-editor-active) .ctf-page-hero.animated,
body:not(.elementor-editor-active) .ctf-single-hero.animated,
body:not(.elementor-editor-active) .ctf-eo-detail-hero.animated {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero > .e-con-inner,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero > .elementor-container,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero > .elementor-widget,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-page-hero > .e-con,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-single-hero__inner,
html.ctf-motion-ready body:not(.elementor-editor-active) .ctf-eo-detail-hero__inner {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes ctf-page-hero-image-settle {
  from {
    opacity: 0.92;
    transform: scale(1.08) translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: scale(1.015) translate3d(0, 0, 0);
  }
}

@keyframes ctf-page-hero-content {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1024px) {
  body:not(.elementor-editor-active) .ctf-page-hero,
  body:not(.elementor-editor-active) .ctf-single-hero,
  body:not(.elementor-editor-active) .ctf-eo-detail-hero {
    --ctf-page-hero-height: 500px;
  }
}

@media (max-width: 767px) {
  body:not(.elementor-editor-active) .ctf-page-hero,
  body:not(.elementor-editor-active) .ctf-single-hero,
  body:not(.elementor-editor-active) .ctf-eo-detail-hero {
    --ctf-page-hero-height: 430px;
  }
}

.ctf-highlight-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: filter 220ms ease, transform 220ms ease;
}

.ctf-highlight-stage.ctf-highlight-stage--switching {
  filter: saturate(1.06) contrast(1.03);
}

.ctf-highlight-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ctf-highlight-layer--current {
  opacity: 1;
}

.ctf-highlight-layer--next {
  opacity: 0;
  transition: opacity 420ms ease-out;
  will-change: opacity;
}

.ctf-highlight-flip {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.ctf-highlight-flip-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.96;
  backface-visibility: hidden;
  transform: rotateY(-86deg) scaleX(0.96);
  transition:
    opacity 320ms ease,
    transform 560ms cubic-bezier(0.2, 0.76, 0.18, 1);
  will-change: opacity, transform;
}

.ctf-highlight-flip-strip.is-visible {
  opacity: 1;
  transform: rotateY(0deg) scaleX(1);
}

.ctf-highlight-flip-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#ctf-highlights-labels {
  position: relative;
  z-index: 3;
}

.ctf-highlight-hotspot {
  cursor: pointer;
  outline: none;
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.ctf-highlight-hotspot:hover,
.ctf-highlight-hotspot:focus,
.ctf-highlight-hotspot.is-active {
  transform: translateY(-2px);
}

.ctf-highlight-hotspot:focus-visible {
  outline: 2px solid rgba(252, 202, 102, 0.85);
  outline-offset: 4px;
}

.ctf-highlight-hotspot .elementor-heading-title {
  line-height: 1.25 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72), 0 0 18px rgba(0, 18, 44, 0.42) !important;
}

.ctf-highlight-hotspot:hover .elementor-heading-title,
.ctf-highlight-hotspot:focus .elementor-heading-title,
.ctf-highlight-hotspot.is-active .elementor-heading-title {
  color: #fcca66 !important;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.62) !important;
}

.ctf-highlight-source {
  display: none !important;
}

@keyframes ctf-watermark-drift {
  from {
    transform: translate3d(-1.2%, 0, 0);
  }
  to {
    transform: translate3d(1.2%, 0, 0);
  }
}

@media (max-width: 640px) {
  #ctf-highlights-labels,
  #ctf-highlights-labels > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ctf-highlight-hotspot {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ctf-motion-ready .ctf-motion-item,
  .ctf-motion-card,
  .ctf-motion-link,
  .ctf-motion-media img,
  .ctf-highlight-stage,
  .ctf-highlight-layer,
  .ctf-highlight-hotspot,
  .ctf-page-hero,
  .ctf-page-hero-bg,
  .ctf-page-hero > .e-con-inner,
  .ctf-page-hero > .elementor-container,
  .ctf-page-hero > .elementor-widget,
  .ctf-page-hero > .e-con,
  .ctf-single-hero,
  .ctf-single-hero__inner,
  .ctf-eo-detail-hero,
  .ctf-eo-detail-hero__inner,
  .ctf-motion-ready .ctf-hero-watermark {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}