/* ============================================================
   MAKERS — Institute of Creative Practice
   Brand override stylesheet (loaded after main.css)
   Palette derived from the MAKERS working-concept deck:
   deep purple/black background, vivid purple, magenta, lime.
   ============================================================ */

:root {
  /* core darks -> deep purple-black */
  --tp-common-black: #17101f;
  --tp-common-black-2: #221730;
  --tp-common-black-4: #120b1a;
  --tp-common-black-5: #140d1d;
  --tp-common-black-6: #241a30;
  --tp-common-black-7: #150e1e;
  --tp-common-black-8: #1c1424;
  --tp-common-black-9: #1a0f27;
  --tp-common-black-10: #21182e;

  /* accent colors -> MAKERS purple / magenta / lime */
  --tp-theme-green: #c6ff3d; /* lime accent (used for badges/tags) */
  --tp-theme-pink: #ff19c6; /* magenta accent (logo dot) */
  --tp-theme-yellow: #9b3bef; /* purple accent (primary CTA color) */
  --tp-common-blue: #9b3bef;
  --tp-common-red: #9b3bef;
  --tp-common-red-2: #9b3bef;
  --tp-common-red-3: #9b3bef;
  --tp-theme-primary: #9b3bef;
}

/* Fill/stroke on inline SVG icons that use currentColor pick up
   the color rules above automatically. A few extra safety nets: */

.dgm-hero-tite,
.dgm-hero-tite-mike {
  color: #ffffff;
}

a,
.tp-btn,
.tp-btn-2,
.tp-btn-gradient,
.tp-btn-border {
  transition: color 0.3s ease, background-color 0.3s ease,
    border-color 0.3s ease;
}

::selection {
  background: #9b3bef;
  color: #ffffff;
}

/* ---- Hero background video (autoplaying, no play button) ----
   Mirrors the .dgm-hero-thumb > img sizing rules in main.css so the
   <video> fills the same frame the placeholder image used to. */
.dgm-hero-thumb video.dgm-hero-video,
.dgm-hero-thumb div.anim-zoomin-wrap div.anim-zoomin > video {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  display: block;
}

/* ---- Hover-zoom on project/case-study thumbnails ---- */
.dgm-project-thumb {
  overflow: hidden;
  border-radius: 20px;
}
.dgm-project-thumb img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.dgm-project-item:hover .dgm-project-thumb img {
  transform: scale(1.08);
}

/* ---- Kinetic word-reveal on scroll (see assets/js/makers-effects.js) ---- */
.mk-kinetic-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
}
.mk-kinetic-word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}
.mk-kinetic.mk-in-view .mk-kinetic-word {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Generic scroll fade-up (safe on headings with nested markup) ---- */
.mk-fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
}
.mk-fade-up.mk-in-view {
  opacity: 1;
  transform: translateY(0);
}
.mk-fade-up.mk-delay-1 {
  transition-delay: 0.12s;
}
.mk-fade-up.mk-delay-2 {
  transition-delay: 0.24s;
}

/* ---- Generic reusable hover-zoom (image tint + scale on hover) ---- */
.mk-hover-zoom {
  position: relative;
  overflow: hidden;
  display: block;
}
.mk-hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.mk-hover-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(155, 59, 239, 0.55),
    rgba(255, 25, 198, 0.4)
  );
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.mk-hover-zoom:hover img {
  transform: scale(1.08);
}
.mk-hover-zoom:hover::after {
  opacity: 1;
}

/* ---- Mobile-friendliness safety net ---- */
html,
body {
  overflow-x: hidden;
}
video {
  max-width: 100%;
  height: auto;
}
.dgm-hero-thumb video.dgm-hero-video {
  max-width: none; /* the hero video should still fill its frame, not shrink */
}
@media (max-width: 767px) {
  .mk-badge-wrap {
    display: none;
  }
  .mk-hover-caption {
    font-size: 14px;
    padding: 14px 16px;
  }
}

/* ---- Rotating MAKERS badge (continuous spin, like a stamp/seal) ---- */
.mk-badge {
  width: 130px;
  height: 130px;
  animation: mk-spin 16s linear infinite;
}
@keyframes mk-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.mk-badge-wrap {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 991px) {
  .mk-badge-wrap {
    display: none;
  }
}

/* ---- Hover image-swap on project thumbnails (duotone overlay + caption) ---- */
.dgm-project-thumb {
  position: relative;
}
.dgm-project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(155, 59, 239, 0.75),
    rgba(255, 25, 198, 0.55)
  );
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.dgm-project-thumb .mk-hover-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 24px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease;
  pointer-events: none;
}
.dgm-project-item:hover .dgm-project-thumb::after {
  opacity: 1;
}
.dgm-project-item:hover .dgm-project-thumb .mk-hover-caption {
  transform: translateY(0);
  opacity: 1;
}
/* Touch devices have no hover — show the caption + tint by default instead */
@media (hover: none) {
  .dgm-project-thumb::after {
    opacity: 0.55;
  }
  .dgm-project-thumb .mk-hover-caption {
    transform: translateY(0);
    opacity: 1;
  }
}

.agntix-dark .dgm-brand-item img {
  filter: none;
}

/* ---- Shrink the oversized "INSTITUTE OF CREATIVE PRACTICE" heading ---- */
.tp-about-us-2-title {
  font-size: clamp(58px, 8vw, 200px);
  letter-spacing: -2px;
  overflow-wrap: normal;
}

.des-brand-item.black-style .des-brand-item-inner img {
  filter: none;
}

/* ---- Shrink the "MAKERS is my response..." headline ---- */
.tp-about-us-2 .tp-section-title-clash {
  font-size: clamp(32px, 3.2vw, 64px);
}

/* ---- "Get in Touch" card: orange -> purple ---- */
.mk-funfact-purple {
  background-color: #9b3bef !important;
  background-image: linear-gradient(160deg, #9b3bef, #6e1fc9) !important;
  border-radius: 24px;
}