/* ============================================================
   JOKZZ — Zoro Bottom Border Overlay
   1920x1080 · transparan · aman untuk browser source StreamChamp
   ============================================================ */

:root {
  --green: #3ee07f;
  --green-hi: #8dffc0;
  --green-deep: #0b3d24;

  --bar-h: clamp(96px, 12vh, 140px);
  --char-h: clamp(200px, 34vh, 380px);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: transparent;
}

body {
  overflow: hidden;
  font-family: "Bebas Neue", "Oswald", Impact, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  cursor: default;
}

.overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Karakter
   ------------------------------------------------------------ */
.character {
  position: absolute;
  left: clamp(16px, 2.2vw, 64px);
  bottom: calc(var(--bar-h) - 6px);
  height: var(--char-h);
  z-index: 2;
  opacity: 0;
  animation: char-in 1.1s var(--ease-out) 0.25s forwards;
}

.character__img {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  z-index: 2;
  filter:
    saturate(1.06)
    contrast(1.04)
    drop-shadow(0 0 14px rgba(62, 224, 127, 0.38))
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.42));
}

/* aura haki di belakang karakter */
.aura {
  position: absolute;
  inset: -14% -26% -6%;
  z-index: 1;
  background: radial-gradient(
    ellipse 46% 48% at 50% 56%,
    rgba(62, 224, 127, 0.26),
    rgba(62, 224, 127, 0.06) 46%,
    rgba(62, 224, 127, 0) 72%
  );
  filter: blur(14px);
  animation: aura-pulse 5.6s ease-in-out 1.6s infinite;
}

/* pijakan / pantulan cahaya di kaki */
.character__ground {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 68%;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(62, 224, 127, 0.45), rgba(62, 224, 127, 0) 70%);
  filter: blur(6px);
  z-index: 3;
}

/* ------------------------------------------------------------
   Border bawah
   ------------------------------------------------------------ */
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  z-index: 3;
}

.bar__fill {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(62, 224, 127, 0.035) 0 1px,
      transparent 1px 26px
    ),
    linear-gradient(
      180deg,
      rgba(4, 15, 9, 0) 0%,
      rgba(4, 15, 9, 0.66) 24%,
      rgba(3, 12, 7, 0.93) 62%,
      rgba(2, 9, 5, 0.99) 100%
    );
}

/* garis tepi atas border */
.bar__edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(62, 224, 127, 0) 0%,
    rgba(62, 224, 127, 0.35) 9%,
    rgba(62, 224, 127, 0.95) 50%,
    rgba(62, 224, 127, 0.35) 91%,
    rgba(62, 224, 127, 0) 100%
  );
  box-shadow:
    0 0 12px rgba(62, 224, 127, 0.55),
    0 0 34px rgba(62, 224, 127, 0.22);
  transform: scaleX(0);
  animation: edge-in 1s var(--ease-out) 0.15s forwards;
}

/* kilau yang berjalan di sepanjang garis */
.bar__sweep {
  position: absolute;
  top: -1px;
  left: 0;
  width: 260px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--green-hi), transparent);
  filter: blur(1px);
  opacity: 0;
  animation: sweep 9s ease-in-out 2.4s infinite;
}

/* bekas tebasan pada border */
.cut {
  position: absolute;
  top: -6px;
  height: calc(100% + 12px);
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(141, 255, 192, 0.95) 40%, transparent);
  box-shadow: 0 0 10px rgba(62, 224, 127, 0.7);
  transform: rotate(19deg);
  opacity: 0;
  animation: cut-in 0.7s var(--ease-out) forwards;
}

.cut--l {
  left: 34%;
  animation-delay: 0.55s;
}

.cut--r {
  right: 16%;
  animation-delay: 0.7s;
}

/* isi border */
.bar__content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 28px);
  padding: 0 clamp(20px, 4vw, 70px);
}

.tag {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(9px, 0.68vw, 13px);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  white-space: nowrap;
  color: rgba(141, 255, 192, 0.9);
  text-shadow:
    0 0 12px rgba(62, 224, 127, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: fade-up 0.8s var(--ease-out) 0.75s forwards;
}

.tag--end {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(9px, 0.66vw, 12px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: rgba(141, 255, 192, 0.55);
}

.name {
  position: relative;
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-size: clamp(34px, 3.4vw, 66px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.24em;
  text-indent: 0.24em;

  background: linear-gradient(180deg, #ffffff 0%, #e8fff2 40%, #9ae8bc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  -webkit-text-stroke: clamp(1px, 0.09vw, 1.6px) rgba(2, 14, 8, 0.65);
  filter: drop-shadow(0 0 10px rgba(62, 224, 127, 0.55));

  opacity: 0;
  animation: name-in 0.9s var(--ease-out) 0.6s forwards;
}

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */
@keyframes char-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes name-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes edge-in {
  to {
    transform: scaleX(1);
  }
}

@keyframes cut-in {
  from {
    opacity: 0;
    transform: rotate(19deg) scaleY(0.2);
  }
  to {
    opacity: 1;
    transform: rotate(19deg) scaleY(1);
  }
}

@keyframes aura-pulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

@keyframes sweep {
  0% {
    transform: translateX(-260px);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  48% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(100vw);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   Aksesibilitas
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}