:root {
  --ink: #211a24;
  --ink-soft: rgba(33, 26, 36, 0.76);
  --white: #ffffff;
  --header-h: 78px;
  --river-h: clamp(56px, 8vh, 84px);
  --walk-h: clamp(24px, 3.4vh, 38px);
  --shadow: 0 12px 30px rgba(0,0,0,0.16);
}

* { box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #6298d8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body.is-paused *, body.is-paused *::before, body.is-paused *::after {
  animation-play-state: paused !important;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #2f84d4;
}

.photo-stage,
.cloud-layer,
.site-header,
.promenade,
.river,
.petal-canvas {
  position: absolute;
  inset: 0;
}

.photo-stage {
  z-index: 1;
  inset: 0 0 calc(var(--river-h) + var(--walk-h)) 0;
  background-image: url("../images/fuji-sakura.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: none;
}


.cloud-layer {
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  display: block;
  border-radius: 999px;
  opacity: 0.56;
  filter: blur(18px);
  background:
    radial-gradient(circle at 18% 58%, rgba(255,255,255,0.92) 0 16%, transparent 17%),
    radial-gradient(circle at 32% 40%, rgba(255,255,255,0.98) 0 18%, transparent 19%),
    radial-gradient(circle at 49% 53%, rgba(255,255,255,0.96) 0 22%, transparent 23%),
    radial-gradient(circle at 65% 42%, rgba(255,255,255,0.94) 0 18%, transparent 19%),
    radial-gradient(circle at 81% 55%, rgba(255,255,255,0.88) 0 15%, transparent 16%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  box-shadow: 0 10px 40px rgba(136, 178, 224, 0.12);
}
.cloud::after {
  content: "";
  position: absolute;
  inset: 22% 8% 18% 8%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 65%);
}
.cloud-a { width: min(34vw, 450px); height: min(10vw, 140px); top: 9%;  left: -22%; animation: cloudDriftA 180s linear infinite; }
.cloud-b { width: min(28vw, 380px); height: min(9vw, 120px);  top: 19%; left: 20%; opacity: 0.42; animation: cloudDriftB 220s linear infinite; }
.cloud-c { width: min(24vw, 320px); height: min(8vw, 100px);  top: 10%; left: 58%; opacity: 0.34; animation: cloudDriftC 200s linear infinite; }
.cloud-d { width: min(18vw, 240px); height: min(6vw, 80px);   top: 27%; left: 76%; opacity: 0.28; animation: cloudDriftD 240s linear infinite; }

.site-header {
  z-index: 6;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: var(--header-h);
  padding: 16px clamp(16px, 3vw, 36px);
  pointer-events: none;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.01) 78%, transparent);
  pointer-events: none;
}
.brand,
.header-tools {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,0.34);
}
.brand-copy strong {
  display: block;
  font-size: clamp(1rem, 1.7vw, 1.16rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.brand-copy small {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,248,252,0.95), rgba(255,182,214,0.96));
  box-shadow: 0 10px 24px rgba(102, 39, 78, 0.28);
}
.brand-mark span {
  position: absolute;
  width: 11px;
  height: 20px;
  border-radius: 70% 70% 62% 62%;
  background: linear-gradient(180deg, #fff, #ff95c5);
  transform-origin: 50% 86%;
}
.brand-mark span:nth-child(1) { transform: rotate(0deg) translateY(-8px); }
.brand-mark span:nth-child(2) { transform: rotate(72deg) translateY(-8px); }
.brand-mark span:nth-child(3) { transform: rotate(144deg) translateY(-8px); }
.brand-mark span:nth-child(4) { transform: rotate(216deg) translateY(-8px); }
.brand-mark span:nth-child(5) { transform: rotate(288deg) translateY(-8px); }
.brand-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd56e;
  z-index: 1;
}
.header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,0.34);
}
.wip-label {
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.motion-toggle {
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(10, 22, 46, 0.18);
  color: var(--white);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.motion-toggle:hover,
.motion-toggle:focus-visible {
  outline: none;
  background: rgba(10, 22, 46, 0.32);
}

.petal-canvas {
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.promenade {
  z-index: 4;
  inset: auto 0 var(--river-h) 0;
  height: var(--walk-h);
  background:
    linear-gradient(180deg, rgba(255, 235, 243, 0.96) 0%, rgba(249, 203, 223, 0.98) 52%, rgba(230, 167, 196, 0.98) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.20) 0 3%, rgba(255,220,234,0.06) 3% 6%, rgba(255,255,255,0.12) 6% 9%, rgba(0,0,0,0) 9% 100%);
  border-top: 1px solid rgba(255,255,255,0.46);
  border-bottom: 1px solid rgba(137, 73, 102, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(149, 90, 118, 0.16);
  overflow: hidden;
}

.samurai {
  position: absolute;
  bottom: 1px;
  width: clamp(28px, 2.7vw, 42px);
  height: calc(var(--walk-h) - 4px);
  opacity: 0.99;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}
.samurai::before {
  content: "";
  position: absolute;
  inset: 0 -24% 0 -24%;
  background-image: url("../images/samurai-walk-transparent.gif");
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
  filter: var(--samurai-filter, none);
  will-change: transform;
}
.samurai.dir-ltr::before { transform: scaleX(1); }
.samurai.dir-rtl::before { transform: scaleX(-1); }
.samurai.variant-red { --samurai-filter: none; }
.samurai.variant-blue { --samurai-filter: hue-rotate(185deg) saturate(1.15) brightness(0.95); }
.samurai.variant-gold { --samurai-filter: hue-rotate(42deg) saturate(1.18) brightness(1.02); }
.samurai.variant-purple { --samurai-filter: hue-rotate(278deg) saturate(1.12) brightness(0.96); }
.samurai.variant-teal { --samurai-filter: hue-rotate(130deg) saturate(1.08) brightness(0.96); }
.samurai.variant-green { --samurai-filter: hue-rotate(95deg) saturate(1.10) brightness(0.94); }
.samurai.variant-blackred { --samurai-filter: saturate(0.95) brightness(0.82) contrast(1.05); }
.s1 { left: -8%; animation: walkLtr1 38s linear infinite; }
.s2 { right: -10%; animation: walkRtl2 42s linear infinite -7s; }
.s3 { left: -28%; animation: walkLtr3 50s linear infinite -15s; }
.s4 { right: -34%; animation: walkRtl4 56s linear infinite -22s; }
.s5 { left: -48%; animation: walkLtr5 62s linear infinite -27s; }
.s6 { right: -58%; animation: walkRtl6 68s linear infinite -34s; }

.howl {
  position: absolute;
  bottom: 1px;
  width: clamp(28px, 2.7vw, 42px);
  height: calc(var(--walk-h) - 4px);
  opacity: 0.99;
  pointer-events: none;
  will-change: transform;
  z-index: 3;
  visibility: hidden;
}
.howl::before {
  content: "";
  position: absolute;
  inset: 0 -18% 0 -18%;
  background-image: url("../images/howl-walk-transparent.gif");
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
}
.howl.is-active { visibility: visible; }
.howl.dir-rtl::before { transform: scaleX(-1); }

.chihiro {
  position: absolute;
  bottom: 1px;
  width: clamp(34px, 3.5vw, 54px);
  height: calc(var(--walk-h) - 4px);
  opacity: 0.99;
  pointer-events: none;
  will-change: transform;
  z-index: 4;
  visibility: hidden;
}
.chihiro::before {
  content: "";
  position: absolute;
  inset: 0 -42% 0 -42%;
  background-image: url("../images/chihiro-run-transparent.gif");
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
}
.chihiro.is-active { visibility: visible; }


.river {
  z-index: 3;
  inset: auto 0 0 0;
  height: var(--river-h);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(190, 221, 238, 0.52) 0%, rgba(118, 165, 195, 0.62) 16%, rgba(77, 123, 160, 0.84) 48%, rgba(54, 92, 128, 0.96) 100%),
    repeating-linear-gradient(102deg, rgba(255,255,255,0.12) 0 8px, rgba(255,255,255,0.02) 8px 24px, rgba(255,255,255,0.10) 24px 34px, rgba(255,255,255,0.02) 34px 56px),
    linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 32%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.02) 78%, rgba(255,255,255,0.08) 100%);
  border-top: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 10px 18px rgba(255,255,255,0.10), inset 0 -12px 18px rgba(18,43,70,0.14);
}
.river::before,
.river::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 32%, rgba(255,255,255,0.16), transparent 38%),
    radial-gradient(ellipse at 48% 68%, rgba(255,255,255,0.10), transparent 30%),
    radial-gradient(ellipse at 78% 28%, rgba(255,255,255,0.14), transparent 34%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 22%, transparent 45%, rgba(255,255,255,0.08) 72%, transparent 100%);
  transform: translateX(-100%);
  animation: waterSheen 22s linear infinite;
  opacity: 0.90;
}
.river::after {
  animation-duration: 30s;
  animation-delay: -8s;
  opacity: 0.55;
}
.river-glint {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  opacity: 0.45;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}
.glint-a { top: 26%; }
.glint-b { top: 58%; }
.boat {
  position: absolute;
  width: clamp(84px, 11vw, 136px);
  height: clamp(28px, 3.6vh, 42px);
  background: center center / contain no-repeat url("../images/boat-japanese.svg");
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22));
}
.b1 { left: -24%; bottom: 8px; z-index: 2; animation: boatConvoy1 72s linear infinite; }
.b2 { left: -88%; bottom: 30px; z-index: 1; transform: scale(0.82); opacity: 0.90; animation: boatConvoy2 72s linear infinite; }

@keyframes cloudDriftA { from { transform: translateX(0); } to { transform: translateX(145vw); } }
@keyframes cloudDriftB { from { transform: translateX(0); } to { transform: translateX(112vw); } }
@keyframes cloudDriftC { from { transform: translateX(0); } to { transform: translateX(-130vw); } }
@keyframes cloudDriftD { from { transform: translateX(0); } to { transform: translateX(-90vw); } }
@keyframes waterSheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes boatConvoy1 {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); }
  25%  { transform: translateX(40vw) translateY(-1px) rotate(.28deg); }
  50%  { transform: translateX(82vw) translateY(1px) rotate(-.20deg); }
  75%  { transform: translateX(122vw) translateY(-1px) rotate(.14deg); }
  100% { transform: translateX(170vw) translateY(0) rotate(0deg); }
}
@keyframes boatConvoy2 {
  0%   { transform: scale(0.82) translateX(0) translateY(0) rotate(0deg); }
  25%  { transform: scale(0.82) translateX(40vw) translateY(-1px) rotate(.24deg); }
  50%  { transform: scale(0.82) translateX(82vw) translateY(1px) rotate(-.18deg); }
  75%  { transform: scale(0.82) translateX(122vw) translateY(-1px) rotate(.12deg); }
  100% { transform: scale(0.82) translateX(170vw) translateY(0) rotate(0deg); }
}
@keyframes walkLtr1 { from { transform: translateX(0); } to { transform: translateX(118vw); } }
@keyframes walkRtl2 { from { transform: translateX(0); } to { transform: translateX(-118vw); } }
@keyframes walkLtr3 { from { transform: translateX(0) scale(0.95); } to { transform: translateX(124vw) scale(0.95); } }
@keyframes walkRtl4 { from { transform: translateX(0) scale(0.90); } to { transform: translateX(-124vw) scale(0.90); } }
@keyframes walkLtr5 { from { transform: translateX(0) scale(0.88); } to { transform: translateX(130vw) scale(0.88); } }
@keyframes walkRtl6 { from { transform: translateX(0) scale(0.84); } to { transform: translateX(-130vw) scale(0.84); } }
@keyframes samuraiStrideLtr {
  0% { transform: translateY(0) rotate(0deg) scaleX(1); }
  25% { transform: translateY(-1px) rotate(0.7deg) scaleX(1); }
  50% { transform: translateY(-2px) rotate(0deg) scaleX(1); }
  75% { transform: translateY(-1px) rotate(-0.7deg) scaleX(1); }
  100% { transform: translateY(0) rotate(0.4deg) scaleX(1); }
}
@keyframes samuraiStrideRtl {
  0% { transform: translateY(0) rotate(0deg) scaleX(-1); }
  25% { transform: translateY(-1px) rotate(-0.7deg) scaleX(-1); }
  50% { transform: translateY(-2px) rotate(0deg) scaleX(-1); }
  75% { transform: translateY(-1px) rotate(0.7deg) scaleX(-1); }
  100% { transform: translateY(0) rotate(-0.4deg) scaleX(-1); }
}

@keyframes howlTraverseLtr { from { transform: translateX(0); } to { transform: translateX(118vw); } }
@keyframes howlTraverseRtl { from { transform: translateX(0); } to { transform: translateX(-118vw); } }
@keyframes chihiroTraverseRtl { from { transform: translateX(0); } to { transform: translateX(-126vw); } }

@media (max-width: 760px) {
  :root {
    --header-h: 70px;
    --river-h: 52px;
    --walk-h: 22px;
  }
  .site-header {
    padding: 12px 12px;
    gap: 10px;
  }
  .brand { gap: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .header-tools { gap: 8px; }
  .wip-label { font-size: .78rem; }
  .motion-toggle { padding: 9px 12px; font-size: .8rem; }
  .cloud-a { width: 44vw; height: 14vw; top: 10%; }
  .cloud-b { width: 36vw; height: 12vw; top: 18%; }
  .cloud-c { width: 28vw; height: 10vw; top: 11%; }
  .cloud-d { width: 24vw; height: 8vw; top: 24%; }
  .s4, .s3 { display: none; }
  .b2 { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud,
  .boat,
  .samurai,
  .howl,
  .chihiro,
  .river::before,
  .river::after { animation: none !important; }
}