/* Web Kai — cinematic / game-industry polish (no content changes) */

:root {
  --wk-cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wk-cine-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --wk-scroll-progress: 0;
}

/* HUD scroll progress */
.wk-cine-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10002;
  height: 2px;
  width: calc(var(--wk-scroll-progress) * 100%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(34, 245, 208, 0.2), rgba(34, 245, 208, 0.95) 40%, rgba(74, 143, 212, 0.85));
  box-shadow: 0 0 12px rgba(34, 245, 208, 0.55);
  transform-origin: left center;
  transition: width 0.12s linear;
}

/* Global vignette pulse on chapter change */
body.wk-cine-pulse::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 68% at 50% 45%, transparent 42%, rgba(0, 4, 8, 0.55) 100%);
  animation: wkCineVignette 0.65s ease-out forwards;
}

@keyframes wkCineVignette {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Screen juice */
body.wk-cine-shake .site-scroll {
  animation: wkCineShake 0.42s var(--wk-cine-ease) both;
}

@keyframes wkCineShake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  18% {
    transform: translate3d(-4px, 2px, 0);
  }
  36% {
    transform: translate3d(3px, -2px, 0);
  }
  54% {
    transform: translate3d(-2px, 1px, 0);
  }
  72% {
    transform: translate3d(2px, 0, 0);
  }
}

/* Section enter / leave — cyber scan + glitch (no soft blur) */
.section {
  position: relative;
}

.section.wk-cine-enter::before,
.section.is-leaving::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

.section.wk-cine-enter::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34, 245, 208, 0.05) 42%,
    rgba(34, 245, 208, 0.45) 49.5%,
    rgba(212, 255, 92, 0.35) 50.5%,
    rgba(74, 143, 212, 0.25) 52%,
    transparent 58%
  );
  animation: wkCyberBeamIn 0.72s var(--wk-cine-ease) both;
}

.section.is-leaving::before {
  background: none;
  animation: wkCyberStaticOut 0.42s steps(5, end) forwards;
}

.section.wk-cine-enter .section-inner {
  animation: wkCyberSectionIn 1.05s var(--wk-cine-ease) both;
  transition: none !important;
}

.section.is-leaving .section-inner {
  animation: wkCyberSectionOut 0.48s steps(8, end) both;
  transition: none !important;
}

@keyframes wkCyberBeamIn {
  0% {
    opacity: 0;
    transform: translate3d(-105%, 0, 0) skewX(-8deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(105%, 0, 0) skewX(-8deg);
  }
}

@keyframes wkCyberStaticOut {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@keyframes wkCyberSectionIn {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translate3d(0, 0, 0) skewX(-1.5deg);
    filter: brightness(2.2) contrast(1.15) saturate(1.2);
  }
  12% {
    opacity: 0.85;
    clip-path: polygon(0 0, 18% 0, 14% 100%, 0 100%);
    transform: translate3d(-5px, 0, 0);
    filter: brightness(1.6) drop-shadow(4px 0 rgba(74, 143, 212, 0.55)) drop-shadow(-4px 0 rgba(34, 245, 208, 0.5));
  }
  22% {
    clip-path: polygon(0 0, 48% 0, 44% 100%, 0 100%);
    transform: translate3d(3px, 0, 0);
    filter: brightness(1.3) drop-shadow(-3px 0 rgba(34, 245, 208, 0.4)) drop-shadow(3px 0 rgba(74, 143, 212, 0.35));
  }
  38% {
    clip-path: polygon(0 0, 78% 0, 74% 100%, 0 100%);
    opacity: 1;
    transform: translate3d(-2px, 0, 0);
  }
  52% {
    clip-path: inset(0 0 0 0);
    transform: translate3d(1px, 0, 0);
    filter: brightness(1.15);
  }
  68% {
    transform: translate3d(0, 0, 0);
    filter: brightness(1.05);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}

@keyframes wkCyberSectionOut {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  18% {
    opacity: 0.92;
    transform: translate3d(5px, 0, 0) skewX(0.8deg);
    filter: drop-shadow(-5px 0 rgba(34, 245, 208, 0.45)) drop-shadow(5px 0 rgba(74, 143, 212, 0.4)) brightness(1.25);
  }
  32% {
    opacity: 0.7;
    clip-path: polygon(0 0, 88% 0, 84% 100%, 0 100%);
    transform: translate3d(-4px, 0, 0);
  }
  48% {
    opacity: 0.45;
    clip-path: polygon(0 0, 52% 0, 48% 100%, 0 100%);
    filter: brightness(0.85) contrast(1.1) hue-rotate(8deg);
  }
  65% {
    opacity: 0.22;
    clip-path: polygon(0 0, 22% 0, 18% 100%, 0 100%);
    transform: translate3d(6px, 0, 0);
  }
  82% {
    opacity: 0.08;
    clip-path: polygon(0 0, 6% 0, 4% 100%, 0 100%);
    filter: brightness(0.5);
  }
  100% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translate3d(10px, 0, 0);
    filter: brightness(0.35) saturate(0.8);
  }
}

/* HUD frame on panels */
.section.is-active .cyber-panel,
.section.is-active.section--service-intro .intro-copy,
.section--contact.is-active .contact-panel {
  position: relative;
}

.section.is-active .cyber-panel::after,
.section.is-active.section--service-intro .intro-copy::after,
.section--contact.is-active .contact-panel::after {
  display: none !important;
  content: none !important;
}

@keyframes wkHudFrame {
  to {
    opacity: 1;
  }
}

/* Corner brackets removed */
.section.is-active .cyber-panel::before,
.section.is-active.section--service-intro .intro-copy::before,
.section--contact.is-active .contact-panel::before {
  display: none !important;
  content: none !important;
}

@keyframes wkHudCorners {
  to {
    opacity: 1;
  }
}

/* Title: game wipe reveal */
.section.is-active .mask-title.is-shown > span {
  animation: wkTitleGameIn 0.88s var(--wk-cine-ease) both;
}

.section--hero.is-active .catchcopy .mask-title.is-shown > span {
  animation: wkTitleGameIn 1s var(--wk-cine-ease) both;
}

@keyframes wkTitleGameIn {
  0% {
    opacity: 0;
    transform: translate3d(-12px, 110%, 0) skewX(-4deg);
    clip-path: inset(100% 0 0 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0);
    clip-path: inset(0 0 0 0);
  }
}

/* Staggered UI lines */
.section.is-active .reveal-item.is-shown {
  animation: wkLineIn 0.72s var(--wk-cine-ease) both;
}

@keyframes wkLineIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* Service menu — mission select */
.service-menu.is-shown .service-menu__item {
  animation: wkMissionIn 0.65s var(--wk-cine-ease) both;
}

.service-menu.is-shown .service-menu__item:nth-child(1) {
  animation-delay: 0.08s;
}

.service-menu.is-shown .service-menu__item:nth-child(2) {
  animation-delay: 0.16s;
}

.service-menu.is-shown .service-menu__item:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes wkMissionIn {
  0% {
    opacity: 0;
    transform: translate3d(-24px, 0, 0) scale(0.96);
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 0 0 0);
  }
}

@media (hover: hover) {
  .service-menu__link:hover,
  .service-menu__link:focus-visible {
    box-shadow:
      0 0 0 1px rgba(34, 245, 208, 0.35),
      0 0 28px rgba(34, 245, 208, 0.15),
      inset 0 0 20px rgba(34, 245, 208, 0.06) !important;
  }
}

/* Giant number — boss chapter */
.section.is-entering .giant-number,
.section.wk-cine-enter .giant-number {
  animation: wkBossNum 1.1s var(--wk-cine-ease) both;
}

@keyframes wkBossNum {
  0% {
    opacity: 0;
    transform: translate3d(8%, 12%, 0) scale(1.12);
    filter: blur(12px);
    letter-spacing: 0.08em;
  }
  45% {
    opacity: 0.85;
    filter: blur(0);
    letter-spacing: 0.02em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    letter-spacing: 0;
  }
}

/* Hero visual — CRT scan */
.section--hero.is-active .hero-visual__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 245, 208, 0.06) 48%,
    transparent 52%,
    transparent 100%
  );
  background-size: 100% 220%;
  animation: wkHeroScan 4.5s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.5;
}

@keyframes wkHeroScan {
  0% {
    background-position: 0 -120%;
  }
  100% {
    background-position: 0 120%;
  }
}

/* Section flash — impact frame */
.section-flash.is-run {
  animation: wkImpactFlash 0.5s ease-out forwards !important;
}

@keyframes wkImpactFlash {
  0% {
    opacity: 0;
    transform: translate3d(-30%, 0, 0) scaleX(1.2);
  }
  22% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(35%, 0, 0) scaleX(1.1);
  }
}

/* Chapter warp upgrade */
html.wk-chapter-warp::before {
  animation-duration: 0.55s !important;
}

/* Loading — boot sequence */
body.is-intro-active .loading-screen__mark {
  animation: wkBootPulse 1.6s ease-in-out infinite alternate;
}

body.is-intro-active .loading-screen__sweep {
  animation: wkBootSweep 1.4s ease-in-out infinite;
}

@keyframes wkBootPulse {
  from {
    transform: scale(0.96);
    filter: drop-shadow(0 0 0 transparent);
  }
  to {
    transform: scale(1.04);
    filter: drop-shadow(0 0 28px rgba(34, 245, 208, 0.4));
  }
}

@keyframes wkBootSweep {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(-8%);
  }
  50% {
    opacity: 1;
    transform: translateX(8%);
  }
}

/* Ambient particle canvas disabled */
.wk-cine-ambient {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Scroll dock — game UI pulse */
body.is-chapter-changing .scroll-dock__btn--next:not(:disabled) .scroll-dock__arrow--main {
  animation: wkDockNudge 0.5s var(--wk-cine-spring) 2;
}

@keyframes wkDockNudge {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, 6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wk-cine-progress,
  body.wk-cine-pulse::before,
  body.wk-cine-shake .site-scroll,
  .section.wk-cine-enter::before,
  .section.is-leaving::before,
  .section.wk-cine-enter .section-inner,
  .section.is-leaving .section-inner,
  .section.is-active .mask-title.is-shown > span,
  .section.is-active .reveal-item.is-shown,
  .service-menu.is-shown .service-menu__item,
  .section.is-entering .giant-number,
  .section--hero.is-active .hero-visual__panel::after,
  .section-flash.is-run,
  body.is-intro-active .loading-screen__mark,
  body.is-intro-active .loading-screen__sweep {
    animation: none !important;
  }
}