/* wasiat4d2-jjk-amp-stable-v1.0.10: compact action panel and footer anchored to content flow. */

:root {
  color-scheme: dark;
  --red: #890009;
  --bright-red: #ff2635;
  --gold: #c6a557;
  --font-ui: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-ink: cubic-bezier(.65, 0, .35, 1);
  --ambient-video-opacity: .68; /* 0 = invisible; 1 = full video */
  --ambient-original-opacity: .55; /* keep the original red/black texture */
}

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

html {
  min-height: 100%;
  background: #070001;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: clip;
  background: #070001;
  color: #fff;
  font: 600 14px/1.5 var(--font-ui);
  letter-spacing: .055em;
  -webkit-font-smoothing: antialiased;
  /* Center the entire composition, including its independent plain-text footer.
     Both elements remain in document flow on resize and browser zoom. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 4 corners: fixed ABOVE page background, outside banner stacking context.
   The source has transparent upper pixels and visible red marks near its lower edges.
   Each left/right half is cropped with CSS background-size and top copies only
   flip vertically (never horizontally); side orientation remains intact. */

.viewport-flash-layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.viewport-flash {
  position: absolute;
  display: block;
  width: clamp(132px, 26vw, 425px);
  aspect-ratio: 4 / 5;
  height: auto;
  background-image: url("./img_kv_flash_pc.webp?v=wasiat4d2-jjk-amp-stable-v1.0.10");
  background-repeat: no-repeat;
  background-size: 200% 100%;
  mix-blend-mode: screen;
  opacity: .9;
  filter: drop-shadow(0 0 9px rgba(255, 0, 25, .42));
  will-change: transform, opacity;
}

.viewport-flash--top {
  top: 0;
  transform-origin: center center;
}

.viewport-flash--bottom {
  bottom: 0;
  transform-origin: center bottom;
}

.viewport-flash--top-left,
.viewport-flash--bottom-left {
  left: 0;
  background-position: left center;
}

.viewport-flash--top-right,
.viewport-flash--bottom-right {
  right: 0;
  background-position: right center;
}

/* Vertical flip moves the source's lower-edge art to the top of the viewport.
   Left and right halves are never horizontally inverted. */

.viewport-flash--top-left {
  animation: viewport-energy-top 5.7s ease-in-out -.4s infinite;
}

.viewport-flash--top-right {
  animation: viewport-energy-top 6.1s ease-in-out -1.6s infinite;
}

.viewport-flash--bottom-left {
  animation: viewport-energy-bottom 5.3s ease-in-out -1.2s infinite;
}

.viewport-flash--bottom-right {
  animation: viewport-energy-bottom 5.9s ease-in-out -2.0s infinite;
}

@keyframes viewport-energy-top {
  0%,
  100% {
    transform: scaleY(-1) translate3d(0, 0, 0) scale(1);
    opacity: .82;
  }
  25% {
    transform: scaleY(-1) translate3d(0, 2px, 0) scale(1.035);
    opacity: 1;
  }
  50% {
    transform: scaleY(-1) translate3d(0, 0, 0) scale(1.015);
    opacity: .87;
  }
  75% {
    transform: scaleY(-1) translate3d(0, 2px, 0) scale(1.055);
    opacity: 1;
  }
}

@keyframes viewport-energy-bottom {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .8;
  }
  25% {
    transform: translate3d(0, -2px, 0) scale(1.045);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.01);
    opacity: .86;
  }
  75% {
    transform: translate3d(0, -3px, 0) scale(1.06);
    opacity: 1;
  }
}

/* Wrapper is independent of the four fixed corner decorations. */

.l-wrapper,
.l-main {
  position: relative;
  z-index: 1;
}

/* Full-viewport scene, separated from page content and footer.
   The original JJK artwork remains as a translucent overlay on the muted video.
   Without video playback, the original artwork returns to full opacity. */

.ambient-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background: #080102;
  contain: layout paint;
}

.ambient-scene__video,
.ambient-scene__original,
.ambient-scene__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ambient-scene__video {
  z-index: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: brightness(.83) saturate(.88) contrast(1.05);
  transition: opacity .6s ease;
}

.ambient-scene__original {
  z-index: 1;
  background: url("./bg_body_sp.webp?v=wasiat4d2-jjk-amp-stable-v1.0.10") center top / cover no-repeat;
  opacity: 1;
  transition: opacity .65s ease;
}

.ambient-scene__shade {
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(ellipse 72% 68% at 50% 46%, transparent 22%, rgb(5 0 2 / 20%) 100%),
    linear-gradient(180deg, rgb(5 0 2 / 22%), rgb(5 0 2 / 25%) 50%, rgb(5 0 2 / 32%));
  transition: opacity .65s ease;
}

html.video-background-active .ambient-scene__video {
  opacity: var(--ambient-video-opacity);
}

html.video-background-active .ambient-scene__original {
  opacity: var(--ambient-original-opacity);
}

html.video-background-active .ambient-scene__shade {
  opacity: 1;
}

.l-wrapper {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  overflow: clip;
}

/* Brand berada di luar bingkai banner. Tidak termasuk tinggi/rasio visual. */

.l-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.7vw, 14px);
  width: 100%;
  min-height: 0;
  padding: clamp(12px, 2.2vw, 20px) 12px 0;
}

.brand-header {
  position: relative;
  flex: none;
  width: min(100%, 500px);
  min-width: 0;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-header__logo {
  display: block;
  width: min(74%, 338px);
  height: auto;
  aspect-ratio: 444 / 98;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgb(0 0 0 / 32%));
}

.p-kv {
  display: block;
  flex: none;
  width: min(100%, 500px);
  min-width: 0;
  container-type: inline-size;
}

.p-kv__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  /* Auto height: no empty 100svh spacer below the buttons, no fixed-height
     panel to stretch them apart when zoom changes the viewport. */
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background: #090103;
  border: 1px solid rgb(129 28 37 / 36%);
  box-shadow: 0 18px 75px rgb(0 0 0 / 55%);
}

/* Rasio gambar yang digunakan dalam layout; tetap stabil saat browser di-zoom. */

.p-kv__visual {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1053 / 1493;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.p-kv__visual-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse 76% 60% at 50% 43%, rgb(112 0 14 / 29%), transparent 80%);
  pointer-events: none;
}

.p-kv__visual-character {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  animation: character-appear 850ms var(--ease-out) both;
}

.p-kv__visual-character img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.p-kv__visual::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: auto 0 0;
  height: clamp(26px, 9svh, 65px);
  background: linear-gradient(0deg, rgb(5 0 1 / 88%), transparent);
  pointer-events: none;
}

.p-kv__visual-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dua lapis dekorasi independen: original di kiri, dicerminkan di kanan.
   Diberi gerakan menyapu dan pulse cahaya agar terasa seperti GIF energi. */

.p-kv__visual-deco--concentrain-left,
.p-kv__visual-deco--concentrain-right {
  z-index: 3;
  top: -6%;
  bottom: -6%;
  width: 87%;
  background: url("./deco_concentrain.webp?v=wasiat4d2-jjk-amp-stable-v1.0.10") left center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: .3;
  filter: drop-shadow(0 0 10px rgb(146 0 10 / 34%));
  will-change: transform, opacity, filter;
}

.p-kv__visual-deco--concentrain-left::before,
.p-kv__visual-deco--concentrain-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: .55;
  mix-blend-mode: screen;
  filter: blur(3px);
}

.p-kv__visual-deco--concentrain-left {
  left: -15%;
  right: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 96%);
  animation: streak-drift-left 6.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

.p-kv__visual-deco--concentrain-right {
  right: -15%;
  left: auto;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 96%);
  animation: streak-drift-right 7.1s cubic-bezier(.4, 0, .2, 1) -.9s infinite;
}

.p-kv__content {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: -1px;
  padding: clamp(7px, 1.8cqw, 10px) clamp(8px, 2.2cqw, 12px) clamp(9px, 2.1cqw, 11px);
  background: linear-gradient(180deg, rgb(8 0 1 / 96%), rgb(19 3 5 / 96%) 37%, rgb(8 1 2 / 96%));
  border-top: 1px solid rgb(255 38 53 / 24%);
}

.p-kv__content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), var(--bright-red), var(--red), transparent);
  box-shadow: 0 0 12px rgb(255 38 53 / 50%);
  pointer-events: none;
}

.p-kv__content-frame {
  position: absolute;
  inset: 5px 6px 6px;
  border-inline: 1px solid rgb(137 0 9 / 20%);
  pointer-events: none;
}

/* Original Sukuna reference: crimson / antique-gold, corner brackets and fine ink strokes.
   The layers below are self-contained: the reference app CSS/Swiper files are not loaded. */

.p-kv__content-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1.6cqw, 8px);
}

.c-action {
  --blade: #d5af64;
  --blade-muted: rgb(211 160 83 / 45%);
  --edge-dark: #380b12;
  --energy: rgb(230 58 61 / 19%);
  --sheen: rgb(255 233 205 / 18%);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: clamp(44px, 10.6cqw, 53px);
  gap: clamp(5px, 1.6cqw, 8px);
  overflow: hidden;
  padding: 6px clamp(7px, 2.2cqw, 11px);
  border: 1px solid transparent;
  border-radius: 2px;
  background:
    linear-gradient(116deg, #211014 0%, #13070a 44%, #080204 100%) padding-box,
    linear-gradient(135deg, #7b4837, var(--blade) 37%, #65302d 69%, #a57546) border-box;
  color: #fff8f2;
  font: 800 clamp(10px, 2.85cqw, 14px)/1.15 var(--font-ui);
  letter-spacing: .115em;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgb(255 247 221 / 9%),
    inset 0 -8px 16px rgb(0 0 0 / 23%),
    0 3px 16px rgb(0 0 0 / 31%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 62%);
  transition:
    transform .26s var(--ease-out),
    box-shadow .32s ease,
    filter .32s ease;
  animation: action-appear 620ms var(--ease-out) backwards;
  -webkit-tap-highlight-color: transparent;
}

/* Precision inner etching – not a second wrapper. */
.c-action::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 4px;
  pointer-events: none;
  border: 1px solid rgb(250 211 155 / 13%);
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.c-action__aura,
.c-action__corner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.c-action__aura {
  z-index: 0;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 90% at 15% 100%, var(--energy), transparent 78%),
    radial-gradient(ellipse 47% 80% at 95% -10%, rgb(236 166 97 / 15%), transparent 82%);
  opacity: .74;
  transform: translate3d(0, 0, 0);
  animation: action-aura-breathe 5.6s ease-in-out infinite;
}

.c-action__icon,
.c-action__label,
.c-action__arrow {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}

.c-action__icon {
  flex-basis: clamp(16px, 4cqw, 20px);
  width: clamp(16px, 4cqw, 20px);
  height: clamp(16px, 4cqw, 20px);
  color: #f6daac;
  filter: drop-shadow(0 0 4px rgb(238 131 80 / 22%));
  transition: color .25s ease, transform .36s var(--ease-out);
}

.c-action__label {
  display: inline-block;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgb(0 0 0 / 65%), 0 0 11px rgb(239 109 102 / 11%);
}

.c-action__corner {
  z-index: 3;
  opacity: .94;
  background:
    linear-gradient(var(--blade), var(--blade)) left top / 12px 1px no-repeat,
    linear-gradient(var(--blade), var(--blade)) left top / 1px 12px no-repeat,
    linear-gradient(var(--blade), var(--blade)) right top / 7px 1px no-repeat,
    linear-gradient(var(--blade), var(--blade)) right top / 1px 7px no-repeat,
    linear-gradient(var(--blade), var(--blade)) left bottom / 7px 1px no-repeat,
    linear-gradient(var(--blade), var(--blade)) left bottom / 1px 7px no-repeat,
    linear-gradient(var(--blade), var(--blade)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--blade), var(--blade)) right bottom / 1px 12px no-repeat;
  transition: opacity .3s ease, filter .3s ease;
}

/* Entry: restrained gold curse seal. */
.c-action--login {
  --energy: rgb(203 58 55 / 14%);
  --sheen: rgb(249 221 166 / 20%);
  animation-delay: 100ms;
}

/* Register: central crimson accent, never a neon rectangle. */
.c-action--signup {
  --blade: #ffb18b;
  --blade-muted: rgb(255 185 141 / 64%);
  --energy: rgb(255 198 119 / 21%);
  --sheen: rgb(255 235 218 / 28%);
  background:
    linear-gradient(115deg, #e33b42 0%, #a80c1f 53%, #67000e 100%) padding-box,
    linear-gradient(138deg, #ff9f80, #ffc58d 36%, #b71832 70%, #f18a6c) border-box;
  box-shadow:
    inset 0 1px 0 rgb(255 229 219 / 27%),
    inset 0 -9px 17px rgb(72 0 6 / 40%),
    0 4px 18px rgb(147 0 18 / 29%);
  animation-delay: 175ms;
}

.c-action--signup .c-action__icon {
  color: #fff1de;
}

/* Chat: a wide invitation strip with a fine signal arrow. */
.c-action--chat {
  --blade: #b78365;
  --blade-muted: rgb(202 115 96 / 55%);
  --energy: rgb(178 21 39 / 23%);
  --sheen: rgb(255 178 168 / 14%);
  grid-column: 1 / -1;
  background:
    linear-gradient(112deg, #280d14, #15060a 55%, #21080d) padding-box,
    linear-gradient(135deg, #a8645a, #80433f 55%, #bd8060) border-box;
  animation-delay: 250ms;
}

.c-action--chat .c-action__arrow {
  position: absolute;
  right: clamp(12px, 3.2cqw, 18px);
  width: clamp(13px, 3.5cqw, 17px);
  height: clamp(13px, 3.5cqw, 17px);
  color: #f5b197;
  transition: transform .35s var(--ease-out), color .25s ease;
}

.c-action:focus-visible {
  outline: 2px solid #fff6dc;
  outline-offset: 3px;
}

.c-action:active {
  transform: translateY(1px) scale(.988);
  filter: brightness(1.06);
}

@media (hover: hover) and (pointer: fine) {
  .c-action:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgb(255 238 202 / 18%),
      inset 0 -5px 15px rgb(0 0 0 / 22%),
      0 5px 24px rgb(180 22 27 / 20%),
      0 0 23px rgb(229 167 93 / 12%);
  }

  .c-action--signup:hover {
    box-shadow:
      inset 0 1px 0 rgb(255 233 201 / 33%),
      0 5px 28px rgb(220 29 52 / 38%),
      0 0 24px rgb(255 181 113 / 14%);
  }
.c-action:hover .c-action__aura {
    filter: brightness(1.3);
  }
.c-action:hover .c-action__icon {
    color: #fff4dd;
    transform: scale(1.09);
  }
.c-action:hover .c-action__corner {
    filter: drop-shadow(0 0 3px rgb(255 183 108 / 43%));
  }

  .c-action--chat:hover .c-action__arrow {
    transform: translateX(3px);
    color: #ffe2c4;
  }
}

@keyframes action-aura-breathe {
  0%, 100% { opacity: .62; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.06); }
}

@keyframes character-appear {
  from {
    opacity: .15;
    transform: translateY(10px) scale(1.015);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes action-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes streak-drift-left {
  0%,
  100% {
    opacity: .24;
    transform: translate3d(0, 0, 0) scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 8px rgb(146 0 10 / 26%));
  }
  22% {
    opacity: .42;
    transform: translate3d(2.2%, -.4%, 0) scale(1.035) rotate(-.25deg);
    filter: drop-shadow(0 0 16px rgb(211 20 31 / 44%));
  }
  51% {
    opacity: .3;
    transform: translate3d(1.2%, .8%, 0) scale(1.015) rotate(.2deg);
  }
  72% {
    opacity: .48;
    transform: translate3d(3%, -.8%, 0) scale(1.05) rotate(-.45deg);
    filter: drop-shadow(0 0 22px rgb(255 54 70 / 40%));
  }
}

@keyframes streak-drift-right {
  0%,
  100% {
    opacity: .22;
    transform: scaleX(-1) translate3d(0, 0, 0) scale(1) rotate(1deg);
    filter: drop-shadow(0 0 8px rgb(146 0 10 / 26%));
  }
  28% {
    opacity: .44;
    transform: scaleX(-1) translate3d(2.1%, .5%, 0) scale(1.03) rotate(.2deg);
    filter: drop-shadow(0 0 18px rgb(211 20 31 / 44%));
  }
  55% {
    opacity: .28;
    transform: scaleX(-1) translate3d(1.1%, -.8%, 0) scale(1.01) rotate(-.25deg);
  }
  79% {
    opacity: .46;
    transform: scaleX(-1) translate3d(2.9%, .8%, 0) scale(1.048) rotate(.4deg);
    filter: drop-shadow(0 0 22px rgb(255 54 70 / 40%));
  }
}

@media (min-width: 520px) {
  .ambient-scene__original {
    background-image: url("./bg_body_pc.webp?v=wasiat4d2-jjk-amp-stable-v1.0.10");
  }
  .l-main {
    padding-block: 16px 0;
  }
  /* Fit the entire composition at common desktop heights while keeping
     the banner aspect ratio and leaving the actions at touch-safe size. */
  .p-kv,
  .brand-header {
    width: min(100%, 500px, max(275px, calc((100svh - 148px) * 500 / 855)));
  }
}

@media (max-width: 340px) {
  .l-main {
    padding-inline: 9px;
    gap: 9px;
  }
  .brand-header {
    min-height: 40px;
  }
  .c-action {
    letter-spacing: .075em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-kv__visual-character,
  .p-kv__visual-deco--concentrain-left,
  .p-kv__visual-deco--concentrain-right,
  .viewport-flash,
  .c-action,
  .c-action__aura {
    animation: none !important;
  }

  .c-action,
  .c-action__aura,
  .c-action__corner,
  .c-action__icon,
  .c-action__arrow {
    transition: none !important;
  }

  .p-kv__visual-deco--concentrain-left,
  .p-kv__visual-deco--concentrain-right,
  .viewport-flash {
    will-change: auto;
  }
}

/* A single semantic text node outside .l-wrapper — no card, frame or panel. */
.plain-footer {
  position: relative;
  z-index: 9;
  display: block;
  width: 100%;
  flex: none;
  margin: 0;
  padding: 9px 10px max(14px, env(safe-area-inset-bottom));
  border: 0;
  background: none;
  box-shadow: none;
  color: #c7b4ac;
  font: 500 clamp(10px, 2.5vw, 12px)/1.65 var(--font-ui);
  letter-spacing: .055em;
  text-align: center;
}

.toast {
  position: fixed;
  z-index: 10;
  left: 15px;
  right: 15px;
  bottom: max(18px,env(safe-area-inset-bottom));
  width: max-content;
  max-width: min(460px,calc(100vw - 30px));
  margin-inline: auto;
  padding: 12px 15px;
  background: #1d050a;
  color: #fff;
  border: 1px solid var(--bright-red);
  box-shadow: 0 8px 35px rgb(0 0 0 / 70%);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .16s, transform .16s;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .viewport-flash--top {
    transform: scaleY(-1) !important;
  }
}

/* Video respects accessibility and energy-saving modes without affecting the page. */
@media (prefers-reduced-motion: reduce) {
  .ambient-scene__video { display: none !important; transition: none !important; }
  .ambient-scene__original { opacity: 1 !important; transition: none !important; }
  .ambient-scene__shade { opacity: 0 !important; transition: none !important; }
}