:root {
  color-scheme: dark;
  --deep-sea: #03152d;
  --abyss: #010814;
  --aqua: #8deaff;
  --aqua-soft: rgba(141, 234, 255, 0.72);
  --pearl: #eefbff;
  --sacred: #dffcff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--abyss);
  color: var(--pearl);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

.aokanayou-intro {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(90, 203, 232, 0.18), transparent 32%),
    linear-gradient(180deg, #073765 0%, var(--deep-sea) 42%, var(--abyss) 100%);
}

/* === aokana intro effect: remove aokana.html, aokana_script.js, and aokana_styles.css to delete this feature === */
.sea-background {
  position: absolute;
  inset: -4%;
  z-index: -6;
  background-image:
    linear-gradient(180deg, rgba(3, 21, 45, 0.18), rgba(1, 8, 20, 0.72)),
    url("./item/sea_view.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) brightness(0.62) contrast(1.08);
  transform: scale(1.04);
  animation: slowDrift 26s ease-in-out infinite alternate;
}

.sea-vignette {
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at center, transparent 0 38%, rgba(0, 4, 14, 0.2) 62%, rgba(0, 2, 9, 0.82) 100%),
    linear-gradient(180deg, rgba(211, 250, 255, 0.08), transparent 32%, rgba(0, 0, 0, 0.28));
}

.light-shafts {
  position: absolute;
  inset: -20% -10%;
  z-index: -4;
  background:
    linear-gradient(105deg, transparent 6%, rgba(191, 246, 255, 0.1) 11%, transparent 20%),
    linear-gradient(82deg, transparent 28%, rgba(172, 235, 255, 0.08) 35%, transparent 48%),
    linear-gradient(124deg, transparent 58%, rgba(208, 250, 255, 0.08) 64%, transparent 74%);
  filter: blur(18px);
  opacity: 0.78;
  transform-origin: top center;
  animation: lightSway 18s ease-in-out infinite alternate;
}

.particle-field,
.bubble-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.particle-field {
  z-index: -3;
  background-image:
    radial-gradient(circle, rgba(226, 252, 255, 0.52) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(141, 234, 255, 0.32) 0 1px, transparent 1.8px);
  background-position: 0 0, 48px 64px;
  background-size: 120px 140px, 170px 190px;
  mask-image: linear-gradient(180deg, transparent, black 12%, black 88%, transparent);
  opacity: 0.34;
  animation: particlesRise 32s linear infinite;
}

.bubble-field {
  z-index: -2;
}

.ambient-bubble {
  position: absolute;
  bottom: -8vh;
  width: var(--size);
  height: var(--size);
  left: var(--left);
  border: 1px solid rgba(199, 247, 255, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.72), transparent 0.12rem),
    radial-gradient(circle at 50% 60%, rgba(141, 234, 255, 0.12), transparent 60%);
  box-shadow: inset 0 0 0.75rem rgba(184, 246, 255, 0.14);
  opacity: 0;
  animation: ambientBubbleRise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.memory-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92vw, 1040px);
  height: min(74vh, 680px);
  padding: 2rem;
}

.memory-line {
  position: absolute;
  left: var(--line-left, 50%);
  top: var(--line-top, 50%);
  width: max-content;
  max-width: none;
  margin: 0;
  color: rgba(239, 253, 255, 0.94);
  font-size: clamp(0.94rem, 1.85vw, 1.46rem);
  line-height: 1.9;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    0 0 0.65rem rgba(141, 234, 255, 0.72),
    0 0 1.8rem rgba(63, 192, 224, 0.42);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(1.25rem) scale(var(--line-scale, 1));
  transform-origin: center;
  filter: blur(0.16rem);
}

.memory-line.is-visible {
  animation: memoryBubble var(--line-duration, 7000ms) ease-in-out forwards;
}

.memory-line::before,
.memory-line::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(213, 250, 255, 0.32);
  opacity: 0;
  pointer-events: none;
}

.memory-line::before {
  width: 1.1rem;
  height: 1.1rem;
  left: 8%;
  top: -1.2rem;
}

.memory-line::after {
  width: 0.62rem;
  height: 0.62rem;
  right: 13%;
  bottom: -1rem;
}

.memory-line.is-visible::before,
.memory-line.is-visible::after {
  animation: lineBubble var(--line-duration, 7000ms) ease-in-out forwards;
}

.final-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 96vw;
  margin: 0;
  color: var(--sacred);
  font-size: clamp(2rem, 9vw, 6.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    0 0 0.24rem #ffffff,
    0 0 0.85rem rgba(210, 255, 255, 0.98),
    0 0 2.2rem rgba(94, 221, 255, 0.92),
    0 0 4.4rem rgba(50, 156, 255, 0.62);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(1.6rem) scale(0.9);
  filter: blur(0.3rem);
}

.final-line.is-visible {
  animation: finalInvocation 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.aokanayou-intro.is-climax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(238, 255, 255, 0.3), transparent 20%),
    radial-gradient(circle at center, transparent 0 30%, rgba(0, 7, 22, 0.68) 76%);
  opacity: 0;
  animation: holyPressure 4s ease-out forwards;
}

.skip-button {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0.68rem 1rem;
  border: 1px solid rgba(213, 250, 255, 0.42);
  border-radius: 999px;
  color: rgba(239, 253, 255, 0.94);
  background: rgba(1, 12, 27, 0.42);
  box-shadow:
    0 0 1rem rgba(141, 234, 255, 0.18),
    0 0.75rem 2.3rem rgba(0, 0, 0, 0.2);
  font: 600 0.94rem/1 "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.skip-button:hover {
  transform: translateY(-0.1rem);
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(7, 32, 57, 0.58);
}

.skip-button:focus-visible {
  outline: 2px solid rgba(225, 253, 255, 0.9);
  outline-offset: 4px;
}

@keyframes slowDrift {
  from {
    transform: scale(1.04) translate3d(-0.8%, -0.6%, 0);
  }

  to {
    transform: scale(1.09) translate3d(0.8%, 0.7%, 0);
  }
}

@keyframes lightSway {
  from {
    transform: rotate(-2deg) translateX(-2%);
  }

  to {
    transform: rotate(2deg) translateX(2%);
  }
}

@keyframes particlesRise {
  from {
    background-position: 0 0, 48px 64px;
  }

  to {
    background-position: 0 -520px, 48px -640px;
  }
}

@keyframes ambientBubbleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.72);
  }

  12%,
  72% {
    opacity: var(--opacity);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--sway), -112vh, 0) scale(1.18);
  }
}

@keyframes memoryBubble {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(1.35rem) scale(var(--line-scale-start, 0.96));
    filter: blur(0.18rem);
  }

  18% {
    opacity: 1;
    filter: blur(0);
  }

  64% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-3.4rem) scale(var(--line-scale-end, 1.04));
    filter: blur(0.26rem);
  }
}

@keyframes lineBubble {
  0%,
  10% {
    opacity: 0;
    transform: translateY(0) scale(0.7);
  }

  24%,
  68% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translateY(-2.6rem) scale(1.38);
  }
}

@keyframes finalInvocation {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(1.6rem) scale(0.9);
    filter: blur(0.3rem);
  }

  42% {
    opacity: 0.82;
    transform: translate(-50%, -50%) translateY(0.35rem) scale(0.98);
    filter: blur(0.08rem);
  }

  72% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1.035);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes holyPressure {
  0% {
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0.72;
  }
}

@media (max-width: 680px) {
  .memory-stage {
    width: 100vw;
    height: 78vh;
    padding: 1rem;
  }

  .memory-line {
    font-size: clamp(0.8rem, 3.7vw, 1.08rem);
    line-height: 1.78;
  }

  .final-line {
    font-size: clamp(1.8rem, 10.8vw, 3.8rem);
    max-width: 98vw;
  }

  .skip-button {
    right: 0.75rem;
    bottom: 0.75rem;
    min-width: 5rem;
    min-height: 2.55rem;
    padding: 0.62rem 0.88rem;
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sea-background,
  .light-shafts,
  .particle-field,
  .ambient-bubble,
  .memory-line.is-visible,
  .memory-line.is-visible::before,
  .memory-line.is-visible::after,
  .final-line.is-visible,
  .aokanayou-intro.is-climax::after {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}