/* ==========================================================================
   DIKMADOK PORTFOLIO — STREETWEAR ANIME THEME
   Outer Tech Canvas + Framed Poster Container
   ========================================================================== */

/* Hide scrollbar for clean carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#client-carousel, #client-carousel * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Outer Canvas Background (Dark Navy Tech Studio) */
body {
  background-color: #070c18;
  background-image: 
    radial-gradient(rgba(56, 189, 248, 0.16) 1.5px, transparent 1.5px),
    linear-gradient(to right, rgba(56, 189, 248, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* OC Character Semi-3D Sticker Double-Stroke & Offset Shadow */
.oc-sticker-3d {
  filter: 
    drop-shadow(2.5px 0px 0px #ffffff)
    drop-shadow(-2.5px 0px 0px #ffffff)
    drop-shadow(0px 2.5px 0px #ffffff)
    drop-shadow(0px -2.5px 0px #ffffff)
    drop-shadow(7px 7px 0px #0c1222);
  transition: transform 0.2s ease, filter 0.2s ease;
}

#hero-character:hover .oc-sticker-3d {
  filter: 
    drop-shadow(2.5px 0px 0px #ffffff)
    drop-shadow(-2.5px 0px 0px #ffffff)
    drop-shadow(0px 2.5px 0px #ffffff)
    drop-shadow(0px -2.5px 0px #ffffff)
    drop-shadow(9px 9px 0px #0c1222);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #070c18;
}
::-webkit-scrollbar-thumb {
  background: #38bdf8;
  border-radius: 9999px;
  border: 2px solid #070c18;
}

/* Inner Poster Frame Grid */
.poster-inner-grid {
  background-color: #f8fafc;
  background-image: 
    linear-gradient(to right, rgba(12, 18, 34, 0.04) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(12, 18, 34, 0.04) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Sticker Typography Effects (Smooth Vector Stroke + Solid 3D Comic Pop Shadow) */
.sticker-blue {
  color: #38bdf8;
  -webkit-text-stroke: 2px #0c1222;
  paint-order: stroke fill;
  filter: drop-shadow(3.5px 3.5px 0px #0c1222);
  letter-spacing: 0.02em;
}

.sticker-yellow {
  color: #facc15;
  -webkit-text-stroke: 2px #0c1222;
  paint-order: stroke fill;
  filter: drop-shadow(3.5px 3.5px 0px #0c1222);
  letter-spacing: 0.02em;
}

.sticker-white {
  color: #ffffff;
  -webkit-text-stroke: 2px #0c1222;
  paint-order: stroke fill;
  filter: drop-shadow(3.5px 3.5px 0px #0c1222);
  letter-spacing: 0.02em;
}

.sticker-navy {
  color: #0c1222;
  filter: drop-shadow(4px 4px 0px rgba(12, 18, 34, 0.25));
}

/* Hazard Caution Stripes (Cleanly bounded inside the container) */
.hazard-stripe-blue {
  background: repeating-linear-gradient(
    -45deg,
    #38bdf8,
    #38bdf8 16px,
    #ffffff 16px,
    #ffffff 32px
  );
}

.hazard-stripe-yellow {
  background: repeating-linear-gradient(
    -45deg,
    #facc15,
    #facc15 16px,
    #0c1222 16px,
    #0c1222 32px
  );
}

/* Manga Action Burst Lines (///) */
/* Speech Bubble (Thanks for visiting!) */
.speech-bubble {
  position: relative;
  background: #ffffff;
  border: 2.5px solid #0c1222;
  border-radius: 9999px;
  padding: 8px 18px;
  box-shadow: 3px 3px 0px #0c1222;
  font-family: 'Caveat', cursive;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  right: 28px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #ffffff transparent;
  display: block;
  width: 0;
}
.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -13px;
  right: 26px;
  border-width: 12px 12px 0;
  border-style: solid;
  border-color: #0c1222 transparent;
  display: block;
  width: 0;
}

/* Tactile button press */
.btn-press {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-press:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #0c1222 !important;
}

/* Video card hover zoom */
.video-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px #0c1222;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Cherry Bomb One Font (for ^D^ logo) */
.cherry-bomb-one-regular {
  font-family: "Cherry Bomb One", system-ui, cursive;
  font-weight: 400;
  font-style: normal;
}