/* A second layer of Kittcat: small living scenes, depth, and a hidden workshop. */
.kc-cat-runway { max-width: 400px; margin-top: 26px; }
.kc-play-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; font-size: 9px; line-height: 1.5; letter-spacing: .05em; }
.kc-cat-runway .kc-play-caption { color: #b6b8aa; }
.kc-cat-runway .kc-play-caption > span:first-child { color: var(--kc-lime); }
.kc-touch-hint { display: none; }
.kc-rat-field { position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.kc-rat-field canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.kc-play-cursor { position: absolute; z-index: 5; width: 56px; height: 56px; left: var(--pointer-x,50%); top: var(--pointer-y,50%); translate: -50% -50%; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.kc-rat-field.cursor-ready.pointer-here .kc-play-cursor { opacity: 1; }
.kc-rat-field--cat { height: 120px; border-block: 1px solid rgba(200,255,61,.26); background: linear-gradient(180deg,transparent,rgba(200,255,61,.035)); }
.kc-rat-field::before, .kc-rat-field::after { position: absolute; z-index: -1; inset: 0; pointer-events: none; content: ''; }
.kc-rat-field--cat::before { background-image: linear-gradient(90deg,rgba(200,255,61,.055) 1px,transparent 1px); background-size: 40px 100%; }
.kc-field-coordinate { position: absolute; right: 10px; bottom: 8px; font-size: 8px; opacity: .4; pointer-events: none; }
.kc-cheese-runway { width: min(1380px,100%); margin: 44px auto 0; }
.kc-cheese-runway .kc-play-caption { color: #53564c; }
.kc-rat-field--cheese { height: 170px; border: 1px solid #15170b; background: var(--kc-lime); color: var(--kc-ink); }
.kc-rat-field--cheese::before { background: repeating-linear-gradient(135deg,transparent 0 29px,rgba(8,8,8,.07) 30px,transparent 31px); }
.kc-cheese-stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -5deg; pointer-events: none; font: 600 56px/.8 var(--display); letter-spacing: -.07em; color: rgba(8,8,8,.13); }
.kc-project-grid { margin-top: 44px; }
@media (hover: hover) and (pointer: fine) {
  .kc-rat-field--cat { cursor: url('/assets/cursor-cat.svg') 28 28, crosshair; }
  .kc-rat-field--cheese { cursor: url('/assets/cursor-cheese.svg') 26 31, crosshair; }
  .kc-rat-field.cursor-ready.pointer-here { cursor: none; }
  .kc-hero-stage { transform: perspective(1100px) rotateX(var(--stage-rx,0deg)) rotateY(var(--stage-ry,0deg)); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
  .kc-project { position: relative; isolation: isolate; }
  .kc-project::after { content: ''; position: absolute; inset: -10px; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--shine-x,50%) var(--shine-y,20%),rgba(255,255,255,.24),transparent 72%); mix-blend-mode: soft-light; transition: opacity .25s; }
  .kc-project:hover::after { opacity: 1; }
  .kc-project-go { translate: var(--go-x,0px) var(--go-y,0px); transition: translate .3s; }
}

.kc-secret-wrap { position: relative; z-index: 2; width: min(1380px,100%); margin: 78px auto 15px; }
.kc-secret-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 24px; }
.kc-secret-heading .mono { font-size: 9px; letter-spacing: .09em; color: #5d6055; }
.kc-secret-heading h3 { margin: 10px 0 0; font: 500 clamp(27px,3.4vw,44px)/1.05 var(--display); letter-spacing: -.06em; }
.kc-secret-heading p { margin: 0; max-width: 28ch; color: #3b3f34; font-size: 13px; line-height: 1.5; }
.kc-secret { --look-x: 69%; --look-y: 46%; --look-radius: 118px; position: relative; height: 530px; overflow: hidden; isolation: isolate; background: #11130e; color: var(--kc-paper); border: 1px solid #191d11; }
.kc-secret-back, .kc-secret-front { position: absolute; inset: 0; overflow: hidden; }
.kc-secret-back { background: #181037; }
.kc-secret-grid { position: absolute; inset: -60%; background-image: linear-gradient(rgba(200,255,61,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,61,.17) 1px,transparent 1px); background-size: 70px 70px; transform: perspective(500px) rotateX(55deg) rotateZ(-22deg); }
.kc-secret-halo { position: absolute; width: 470px; height: 470px; border: 55px solid var(--kc-lime); border-radius: 50%; top: 28%; left: 35%; opacity: .88; transform: translate(var(--room-x,0px),var(--room-y,0px)); }
.kc-room-title { position: absolute; z-index: 3; top: 38px; left: 38px; color: var(--kc-paper); text-shadow: 0 2px 0 #080808; }
.kc-room-title > span { font-size: 9px; letter-spacing: .15em; color: var(--kc-lime); }
.kc-room-title strong { display: block; margin-top: 18px; font: 600 clamp(54px,7.6vw,108px)/.79 var(--display); letter-spacing: -.08em; }
.kc-room-window { position: absolute; width: 33%; padding: 8px; background: #090a0a; border: 1px solid rgba(241,239,232,.55); box-shadow: 18px 24px 0 rgba(8,8,8,.4); transform: translate(var(--room-x,0px),var(--room-y,0px)) rotate(-8deg); }
.kc-room-window > span { display: block; margin: 3px 2px 9px; color: var(--kc-lime); font-size: 8px; }
.kc-room-window img { display: block; width: 100%; aspect-ratio: 1.85; object-fit: cover; }
.kc-room-window--voice { left: 7%; bottom: 57px; z-index: 4; }
.kc-room-window--race { right: -2%; top: 35px; z-index: 2; transform: translate(calc(var(--room-x,0px) * -1),calc(var(--room-y,0px) * -1)) rotate(9deg); }
.kc-room-rat { position: absolute; height: 95%; width: 54%; object-fit: contain; top: 10%; right: 9%; filter: drop-shadow(13px 20px 0 rgba(8,8,8,.4)); transform: translate(calc(var(--room-x,0px) * -1),calc(var(--room-y,0px) * -1)) rotate(-8deg); }
.kc-room-note { position: absolute; bottom: 19px; right: 23px; z-index: 4; background: var(--kc-lime); color: var(--kc-ink); padding: 10px 14px; font-size: 10px; rotate: -2deg; }
.kc-secret-front { display: none; z-index: 5; padding: 30px; background: #10120e; background-image: repeating-linear-gradient(0deg,transparent 0 44px,rgba(241,239,232,.05) 45px,transparent 46px); }
.play-ready .kc-secret-front { display: block; mask-image: radial-gradient(circle var(--look-radius) at var(--look-x) var(--look-y),transparent calc(100% - 1px),#000 100%); }
.kc-secret-no { color: #8b917f; font-size: 10px; letter-spacing: .12em; }
.kc-secret-front > strong { position: absolute; left: 38px; top: 24%; font: 600 clamp(56px,8.5vw,126px)/.8 var(--display); letter-spacing: -.08em; color: var(--kc-paper); }
.kc-secret-whisper { position: absolute; bottom: 25px; left: 30px; font-size: 9px; color: #c4c8ba; }
.kc-secret-eyes { position: absolute; right: 16%; top: 23%; width: 130px; display: flex; justify-content: space-between; rotate: -6deg; }
.kc-secret-eyes i { width: 50px; height: 18px; background: var(--kc-lime); border-radius: 65% 10% 70% 20%; box-shadow: 0 0 24px rgba(200,255,61,.1); }
.kc-secret-eyes i::after { content: ''; display: block; width: 5px; height: 18px; margin-left: 25px; background: #10120e; transform: translateX(var(--eye-x,0px)); }
.kc-secret-eyes i:last-child { scale: -1 1; }
.kc-peek-ring { display: none; position: absolute; z-index: 6; width: calc(var(--look-radius) * 2); height: calc(var(--look-radius) * 2); left: var(--look-x); top: var(--look-y); translate: -50% -50%; border: 1px solid var(--kc-lime); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 7px rgba(8,8,8,.45),0 0 0 8px rgba(200,255,61,.25); }
.play-ready .kc-peek-ring { display: block; }
.kc-peek-ring > span { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: var(--kc-paper); font: 28px var(--mono); opacity: .55; }
.kc-peek-ring i, .kc-peek-ring b { position: absolute; left: calc(50% - 3px); top: -3px; width: 6px; height: 6px; background: var(--kc-lime); }
.kc-peek-ring b { top: auto; bottom: -3px; }
.kc-secret.is-open .kc-secret-front, .kc-secret.is-open .kc-peek-ring { opacity: 0; }
.kc-secret-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 19px; }
.kc-secret-controls > span { font-size: 9px; letter-spacing: .04em; color: #44483b; }
.kc-secret-controls button { min-height: 44px; border: 1px solid #303526; border-radius: 99px; padding: 12px 18px; background: #10120e; color: var(--kc-lime); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.kc-secret-controls button:hover { background: var(--kc-lime); color: var(--kc-ink); }
.kc-home .kc-secret-controls button:focus-visible { outline-color: #080808; }
.kc-secret-front, .kc-peek-ring { transition: opacity .35s; }
@media (hover: hover) and (pointer: fine) { .kc-secret.play-ready:not(.is-open) { cursor: crosshair; } }
@media (hover: none), (pointer: coarse) { .kc-pointer-hint { display: none; } .kc-touch-hint { display: inline; } }
@media (max-width: 760px) {
  .kc-cat-runway { max-width: none; margin-top: 24px; }
  .kc-rat-field--cat { height: 110px; }
  .kc-play-caption { font-size: 8px; gap: 12px; }
  .kc-cheese-runway { margin-top: 32px; }
  .kc-rat-field--cheese { height: 150px; }
  .kc-cheese-stamp { font-size: 45px; }
  .kc-secret-wrap { margin-top: 52px; }
  .kc-secret-heading { display: block; margin-bottom: 21px; }
  .kc-secret-heading h3 { font-size: 31px; }
  .kc-secret-heading p { margin-top: 14px; }
  .kc-secret { height: 420px; --look-x: 72%; --look-y: 60%; --look-radius: 78px; }
  .kc-secret-front { padding: 20px; }
  .kc-secret-no { font-size: 8px; }
  .kc-secret-front > strong { left: 20px; top: 23%; font-size: 58px; }
  .kc-secret-eyes { top: 19%; right: 14%; width: 80px; }
  .kc-secret-eyes i { width: 32px; height: 13px; }
  .kc-secret-eyes i::after { height: 13px; margin-left: 16px; width: 4px; }
  .kc-secret-whisper { display: none; }
  .kc-room-title { left: 20px; top: 29px; }
  .kc-room-title strong { font-size: 52px; }
  .kc-room-title > span { font-size: 8px; }
  .kc-secret-halo { width: 320px; height: 320px; border-width: 38px; top: 38%; left: 5%; }
  .kc-room-rat { width: 81%; height: 70%; right: -8%; top: 31%; }
  .kc-room-window { width: 53%; padding: 5px; }
  .kc-room-window--voice { left: -3%; bottom: 51px; }
  .kc-room-window--race { right: -17%; top: 36px; rotate: 5deg; }
  .kc-room-window > span { font-size: 6px; }
  .kc-room-note { font-size: 7px; padding: 8px; right: 9px; bottom: 15px; }
  .kc-secret-controls { align-items: start; gap: 12px; }
  .kc-secret-controls > span { max-width: 19ch; font-size: 8px; line-height: 1.5; }
  .kc-secret-controls button { font-size: 8px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-hero-stage { transform: none !important; }
  .kc-rat-field { cursor: auto; }
  .kc-rat-field.cursor-ready.pointer-here { cursor: auto; }
  .kc-play-cursor { display: none; }
  .kc-project::after { display: none; }
  .kc-project-go, .kc-room-rat, .kc-room-window, .kc-secret-halo { translate: none; }
}