/* KIN ambient visual layer */
.kin-atmosphere{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.kin-bird-flock{position:absolute;left:-14%;top:var(--flock-y,20%);width:18rem;height:7rem;opacity:.58;animation:kin-flock-cross var(--flock-duration,10s) linear forwards}
.kin-bird-flock.from-right{left:auto;right:-14%;animation-name:kin-flock-cross-reverse}
.kin-bird{position:absolute;left:0;top:calc(50% + var(--bird-offset,0px));width:22px;height:8px;opacity:0;transform:scale(var(--bird-scale,1));animation:kin-bird-follow var(--flock-duration,10s) linear var(--bird-delay,0s) forwards}
.kin-bird::before,.kin-bird::after{content:"";position:absolute;top:3px;width:12px;height:5px;border-top:1.6px solid rgba(18,48,58,.78);border-radius:80% 80% 0 0;transform-origin:100% 50%;animation:kin-wing 1.05s ease-in-out infinite}
.kin-bird::before{right:50%;transform:rotate(16deg)}.kin-bird::after{left:50%;transform:scaleX(-1) rotate(16deg)}
.kin-rain{position:absolute;inset:-6% 0 0;opacity:.54;background:linear-gradient(180deg,rgba(205,226,230,.12),rgba(177,211,219,.03) 70%);transition:opacity 1.7s ease}
.kin-rain.is-leaving{opacity:0}.kin-rain i{position:absolute;left:var(--rain-x);top:-8%;width:1px;height:var(--rain-size);border-radius:99px;background:linear-gradient(transparent,rgba(208,231,236,.72));transform:rotate(9deg);opacity:.5;animation:kin-rain-fall var(--rain-duration) linear var(--rain-delay) infinite}
.kin-ripple{position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:18px;height:7px;border:1px solid rgba(217,238,235,.62);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.15);animation:kin-ripple 2.8s ease-out var(--ripple-delay,0s) forwards}
.kin-mote{position:absolute;left:var(--mote-x);top:var(--mote-y);width:5px;height:5px;border-radius:50%;opacity:0;background:rgba(255,236,163,.74);box-shadow:0 0 10px rgba(255,231,134,.52);animation:kin-mote-drift var(--mote-duration) ease-in-out var(--mote-delay) forwards}
.kin-mote--seed{width:8px;height:3px;border-radius:80% 20% 80% 20%;background:rgba(170,196,144,.76);box-shadow:none}
.kin-mist{position:absolute;left:-30%;top:var(--mist-y);width:55%;height:14%;border-radius:50%;opacity:0;background:radial-gradient(ellipse at center,rgba(237,244,238,.42),rgba(237,244,238,0) 70%);filter:blur(18px);animation:kin-mist-cross var(--mist-duration) ease-in-out forwards}
.kin-light-sweep{position:absolute;left:-38%;top:var(--light-y);width:42%;height:28%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,rgba(255,240,181,.38),rgba(255,240,181,0) 70%);filter:blur(12px);mix-blend-mode:screen;animation:kin-light-cross 3.8s ease-in-out forwards}
.kin-wind-active .living-plant,.kin-wind-active .background-growth .living-plant{animation:kin-wind-sway 2.7s ease-in-out both}
.discovery-line{position:relative;display:inline-block;overflow:hidden}.discovery-line::after{content:"";position:absolute;inset:-35% auto -35% -45%;width:30%;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,241,169,.72),transparent);transform:skewX(-16deg);pointer-events:none}.discovery-line.is-illuminated{animation:kin-copy-glow 1.75s ease both}.discovery-line.is-illuminated::after{animation:kin-copy-sweep 1.45s ease-out both}
@keyframes kin-flock-cross{0%{transform:translateX(0);opacity:0}8%{opacity:.58}92%{opacity:.52}100%{transform:translateX(128vw);opacity:0}}
@keyframes kin-flock-cross-reverse{0%{transform:scaleX(-1) translateX(0);opacity:0}8%{opacity:.58}92%{opacity:.52}100%{transform:scaleX(-1) translateX(128vw);opacity:0}}
@keyframes kin-bird-follow{0%{transform:translateX(0) scale(var(--bird-scale,1));opacity:0}9%{opacity:.9}100%{transform:translateX(16rem) scale(var(--bird-scale,1));opacity:.76}}
@keyframes kin-wing{0%,100%{rotate:-7deg}50%{rotate:14deg}}
@keyframes kin-rain-fall{to{transform:translate(28px,115vh) rotate(9deg)}}
@keyframes kin-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}18%{opacity:.62}100%{opacity:0;transform:translate(-50%,-50%) scale(4.8,2.3)}}
@keyframes kin-mote-drift{0%{opacity:0;transform:translate(0,10px) rotate(0)}18%{opacity:.72}70%{opacity:.55}100%{opacity:0;transform:translate(var(--mote-drift),-68px) rotate(160deg)}}
@keyframes kin-mist-cross{0%{opacity:0;transform:translateX(0) scale(.92)}20%{opacity:.42}70%{opacity:.28}100%{opacity:0;transform:translateX(155vw) scale(1.12)}}
@keyframes kin-light-cross{0%{opacity:0;transform:translateX(0) scale(.7)}30%{opacity:.48}70%{opacity:.3}100%{opacity:0;transform:translateX(170vw) scale(1.4)}}
@keyframes kin-wind-sway{0%,100%{transform:translateX(-50%) rotate(var(--plant-lean))}32%{transform:translateX(-50%) rotate(calc(var(--plant-lean) + 8deg))}68%{transform:translateX(-50%) rotate(calc(var(--plant-lean) - 4deg))}}
@keyframes kin-copy-glow{0%,100%{text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 12px rgba(255,253,245,.85)}48%{text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 18px rgba(255,233,142,.95),0 0 34px rgba(255,239,176,.58)}}
@keyframes kin-copy-sweep{0%{left:-45%;opacity:0}18%{opacity:.82}100%{left:118%;opacity:0}}
@media(max-width:680px){.kin-bird-flock{opacity:.46}.kin-rain i:nth-child(n+20){display:none}.kin-light-sweep{width:58%}.discovery-line{max-width:95%}}
@media(prefers-reduced-motion:reduce){.kin-bird-flock,.kin-rain,.kin-ripple,.kin-mote,.kin-mist,.kin-light-sweep,.discovery-line::after{display:none!important}.kin-wind-active .living-plant,.kin-wind-active .background-growth .living-plant,.discovery-line.is-illuminated{animation:none!important}}

/* More living detail at the edges */
.kin-edge-animal{
  position:absolute;
  left:-8.5rem;
  bottom:var(--animal-y,9%);
  width:7.6rem;
  height:4.6rem;
  opacity:0;
  filter:drop-shadow(0 7px 8px rgba(22,49,44,.15));
  animation:kin-animal-visit 8.8s ease-in-out forwards;
}
.kin-edge-animal.from-right{
  left:auto;
  right:-8.5rem;
  transform:scaleX(-1);
  animation-name:kin-animal-visit-right;
}
.kin-edge-animal__body,
.kin-edge-animal__head{
  position:absolute;
  display:block;
  background:rgba(48,70,58,.68);
}
.kin-edge-animal__body{
  left:1.4rem;
  bottom:.7rem;
  width:4.6rem;
  height:1.7rem;
  border-radius:55% 50% 42% 48%;
}
.kin-edge-animal__head{
  left:5.3rem;
  bottom:1.85rem;
  width:1.35rem;
  height:1.35rem;
  border-radius:55% 45% 50% 42%;
  transform:rotate(-12deg);
}
.kin-edge-animal__body::before,
.kin-edge-animal__body::after{
  content:"";
  position:absolute;
  bottom:-1.1rem;
  width:.18rem;
  height:1.4rem;
  border-radius:99px;
  background:rgba(48,70,58,.65);
}
.kin-edge-animal__body::before{left:1rem}
.kin-edge-animal__body::after{right:1rem}
.kin-edge-animal__head::before,
.kin-edge-animal__head::after{
  content:"";
  position:absolute;
  top:-.55rem;
  width:.38rem;
  height:.8rem;
  border-radius:90% 10% 90% 10%;
  background:inherit;
}
.kin-edge-animal__head::before{left:.08rem;transform:rotate(-18deg)}
.kin-edge-animal__head::after{right:.08rem;transform:scaleX(-1) rotate(-18deg)}

.kin-edge-animal--fox .kin-edge-animal__body,
.kin-edge-animal--fox .kin-edge-animal__head{background:rgba(128,82,49,.72)}
.kin-edge-animal--fox .kin-edge-animal__body::after{
  width:2.8rem;height:.8rem;right:-2.2rem;bottom:.2rem;border-radius:80% 20% 80% 20%;transform:rotate(-15deg);background:rgba(128,82,49,.68)
}
.kin-edge-animal--deer{width:8.5rem;height:5.4rem}
.kin-edge-animal--deer .kin-edge-animal__head{bottom:2.6rem}
.kin-edge-animal--deer .kin-edge-animal__head::before,
.kin-edge-animal--deer .kin-edge-animal__head::after{
  top:-1rem;width:.12rem;height:1.1rem;border-radius:99px;background:rgba(48,70,58,.66)
}
.kin-edge-animal--hare{width:5.2rem;height:4rem}
.kin-edge-animal--hare .kin-edge-animal__body{width:3rem;height:1.5rem}
.kin-edge-animal--hare .kin-edge-animal__head{left:3.8rem;bottom:1.8rem;width:1rem;height:1rem}
.kin-edge-animal--hare .kin-edge-animal__head::before,
.kin-edge-animal--hare .kin-edge-animal__head::after{top:-1.25rem;width:.26rem;height:1.4rem;border-radius:99px}

.kin-butterfly{
  position:absolute;
  left:var(--butterfly-x);
  top:var(--butterfly-y);
  width:12px;
  height:9px;
  opacity:0;
  animation:kin-butterfly-flight var(--butterfly-duration) ease-in-out var(--butterfly-delay) forwards;
}
.kin-butterfly::before,
.kin-butterfly::after{
  content:"";
  position:absolute;
  top:1px;
  width:7px;
  height:8px;
  border-radius:70% 30% 70% 30%;
  background:rgba(231,198,116,.74);
  transform-origin:100% 50%;
  animation:kin-butterfly-wing .44s ease-in-out infinite alternate;
}
.kin-butterfly::before{right:50%}
.kin-butterfly::after{left:50%;transform:scaleX(-1);transform-origin:0 50%}

.kin-sunbreak{
  position:absolute;
  right:7%;
  top:-7rem;
  width:16rem;
  height:16rem;
  border-radius:50%;
  opacity:0;
  background:radial-gradient(circle,rgba(255,249,216,.95) 0 12%,rgba(255,237,168,.44) 28%,rgba(255,230,150,.12) 48%,transparent 72%);
  filter:blur(1px);
  mix-blend-mode:screen;
  animation:kin-sunbreak 6.6s ease-in-out forwards;
}

/* White vertical shimmer over the discovery sentence */
.discovery-line::after{
  inset:-55% -8% auto -8% !important;
  width:116% !important;
  height:38% !important;
  opacity:0;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.35) 16%,rgba(255,255,255,1) 50%,rgba(255,255,255,.55) 78%,transparent 100%) !important;
  transform:none !important;
  filter:blur(1.5px);
  mix-blend-mode:screen;
}
.discovery-line.is-illuminated{
  animation:kin-copy-glow-white 1.9s ease both !important;
}
.discovery-line.is-illuminated::after{
  animation:kin-copy-sweep-down 1.55s ease-in-out both !important;
}

@keyframes kin-animal-visit{
  0%{opacity:0;transform:translateX(0) translateY(4px)}
  18%{opacity:.72;transform:translateX(7rem) translateY(0)}
  68%{opacity:.7;transform:translateX(8.5rem) translateY(-2px)}
  100%{opacity:0;transform:translateX(11rem) translateY(3px)}
}
@keyframes kin-animal-visit-right{
  0%{opacity:0;transform:scaleX(-1) translateX(0) translateY(4px)}
  18%{opacity:.72;transform:scaleX(-1) translateX(7rem) translateY(0)}
  68%{opacity:.7;transform:scaleX(-1) translateX(8.5rem) translateY(-2px)}
  100%{opacity:0;transform:scaleX(-1) translateX(11rem) translateY(3px)}
}
@keyframes kin-butterfly-flight{
  0%{opacity:0;transform:translate(0,10px) rotate(-5deg)}
  15%{opacity:.8}
  40%{transform:translate(28px,-22px) rotate(8deg)}
  72%{transform:translate(-16px,-44px) rotate(-4deg);opacity:.68}
  100%{opacity:0;transform:translate(38px,-72px) rotate(10deg)}
}
@keyframes kin-butterfly-wing{
  from{scale:.45 1}
  to{scale:1 1}
}
@keyframes kin-sunbreak{
  0%{opacity:0;transform:translateY(-1rem) scale(.86)}
  24%{opacity:.75}
  58%{opacity:.52;transform:translateY(2.5rem) scale(1.05)}
  100%{opacity:0;transform:translateY(4rem) scale(1.12)}
}
@keyframes kin-copy-glow-white{
  0%,100%{text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 12px rgba(255,253,245,.85)}
  45%,60%{text-shadow:0 1px 0 #fff,0 0 18px rgba(255,255,255,1),0 0 34px rgba(255,255,255,.9)}
}
@keyframes kin-copy-sweep-down{
  0%{top:-58%;opacity:0}
  16%{opacity:1}
  58%{opacity:.98}
  100%{top:120%;opacity:0}
}

@media(max-width:680px){
  .kin-edge-animal{opacity:.86}
  .kin-sunbreak{right:-2rem;width:12rem;height:12rem}
}
@media(prefers-reduced-motion:reduce){
  .kin-edge-animal,.kin-butterfly,.kin-sunbreak{display:none!important}
}


/* Atmosphere v3: whole-scene weather, stronger light and recognisable wildlife */
.world__painting,
.world__wash {
  transition: filter 1.15s ease, opacity 1.15s ease, background 1.15s ease;
}

.discovery,
.topbar {
  position: relative;
  z-index: 5;
}

.kin-global-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.world.kin-weather-sunny .world__painting {
  filter: brightness(1.22) saturate(1.18) contrast(1.03);
}
.world.kin-weather-sunny .world__wash {
  background:
    radial-gradient(circle at 78% 13%, rgba(255,250,211,.62) 0 8%, rgba(255,229,135,.24) 19%, transparent 43%),
    linear-gradient(180deg, rgba(255,248,210,.15), rgba(255,221,132,.08));
}

.world.kin-weather-rain .world__painting {
  filter: brightness(.82) saturate(.88) contrast(1.04);
}
.world.kin-weather-rain .world__wash {
  background: linear-gradient(180deg, rgba(87,117,128,.18), rgba(20,55,68,.18));
}

.world.kin-weather-fog .world__painting {
  filter: brightness(.96) saturate(.72) contrast(.88);
}
.world.kin-weather-fog .world__wash {
  background: linear-gradient(180deg, rgba(237,245,241,.34), rgba(214,229,224,.27));
}

.world.kin-weather-storm .world__painting {
  filter: brightness(.52) saturate(.66) contrast(1.14);
}
.world.kin-weather-storm .world__wash {
  background:
    radial-gradient(circle at 42% 15%, rgba(93,116,131,.22), transparent 42%),
    linear-gradient(180deg, rgba(12,31,43,.38), rgba(20,43,55,.29));
}

.kin-global-rain {
  position: absolute;
  inset: -10% -4% 0;
  opacity: .78;
  background: linear-gradient(180deg, rgba(157,189,199,.10), rgba(90,132,148,.08));
  transition: opacity 1.2s ease;
}
.kin-global-rain--storm {
  opacity: .96;
  background: linear-gradient(180deg, rgba(90,117,131,.20), rgba(26,61,76,.16));
}
.kin-global-rain.is-leaving { opacity: 0; }
.kin-global-rain i {
  position: absolute;
  left: var(--x);
  top: -12%;
  width: 1.5px;
  height: var(--len);
  border-radius: 99px;
  background: linear-gradient(transparent, rgba(231,246,250,.96));
  box-shadow: 0 0 3px rgba(221,242,247,.42);
  transform: rotate(10deg);
  animation: kin-global-rain-fall var(--duration) linear var(--delay) infinite;
}

.kin-global-fog {
  position: absolute;
  left: -45%;
  top: var(--fog-top);
  width: 85%;
  height: 25%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(248,252,250,.74), rgba(230,240,237,.44) 38%, rgba(230,240,237,0) 72%);
  filter: blur(24px);
  animation: kin-global-fog-pass var(--fog-duration) ease-in-out var(--fog-delay) forwards;
}

.kin-global-sun {
  position: absolute;
  right: 6%;
  top: -11rem;
  width: 27rem;
  height: 27rem;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,255,241,1) 0 8%, rgba(255,239,170,.78) 18%, rgba(255,218,113,.32) 38%, transparent 69%);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: kin-global-sunrise 7.4s ease-in-out forwards;
}
.kin-sun-rays {
  position: absolute;
  right: -6%;
  top: -12%;
  width: 60%;
  height: 95%;
  opacity: 0;
  transform: rotate(-13deg);
  background:
    linear-gradient(108deg, transparent 0 28%, rgba(255,251,223,.38) 36%, transparent 43%),
    linear-gradient(111deg, transparent 0 45%, rgba(255,237,171,.30) 53%, transparent 61%),
    linear-gradient(114deg, transparent 0 61%, rgba(255,250,221,.25) 68%, transparent 75%);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: kin-sun-rays 7.2s ease-in-out forwards;
}

.kin-lightning-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 54% 9%, rgba(255,255,255,.98), rgba(221,238,255,.50) 24%, transparent 52%),
    linear-gradient(180deg, rgba(240,248,255,.82), transparent 72%);
  mix-blend-mode: screen;
  animation: kin-lightning 1s steps(1,end) forwards;
  transform: scale(var(--flash-strength,1));
}

/* A larger, more recognisable crane crossing the whole landscape */
.kin-crane {
  position: absolute;
  left: -12rem;
  top: 17%;
  width: 10rem;
  height: 6rem;
  opacity: 0;
  animation: kin-crane-cross 11.5s linear forwards;
}
.kin-crane.from-right {
  left: auto;
  right: -12rem;
  transform: scaleX(-1);
  animation-name: kin-crane-cross-right;
}
.kin-crane::before {
  content: "";
  position: absolute;
  left: 3.4rem;
  top: 2.25rem;
  width: 3.2rem;
  height: 1.05rem;
  border-radius: 55% 60% 48% 52%;
  background: rgba(30,52,56,.78);
  box-shadow:
    2.7rem -.45rem 0 -.33rem rgba(30,52,56,.78),
    -2.4rem .2rem 0 -.46rem rgba(30,52,56,.68);
}
.kin-crane::after {
  content: "";
  position: absolute;
  left: 4rem;
  top: .45rem;
  width: 5.1rem;
  height: 4.2rem;
  border-top: .32rem solid rgba(30,52,56,.74);
  border-radius: 52% 100% 0 0;
  transform: rotate(-7deg);
  box-shadow: -2.1rem 1.35rem 0 -1.75rem rgba(30,52,56,.66);
}

/* Water birds glide across the lower landscape */
.kin-water-birds {
  position: absolute;
  left: -9rem;
  top: 72%;
  display: flex;
  gap: 1.4rem;
  opacity: .75;
  animation: kin-ducks-cross 10.5s linear forwards;
}
.kin-water-birds.from-right {
  left: auto;
  right: -9rem;
  transform: scaleX(-1);
  animation-name: kin-ducks-cross-right;
}
.kin-water-bird {
  position: relative;
  width: 2.5rem;
  height: 1.05rem;
  border-radius: 60% 48% 52% 58%;
  background: rgba(43,68,64,.72);
  animation: kin-duck-bob 1.9s ease-in-out var(--duck-delay) infinite;
}
.kin-water-bird::before {
  content: "";
  position: absolute;
  right: -.42rem;
  top: -.48rem;
  width: .72rem;
  height: .72rem;
  border-radius: 50%;
  background: inherit;
}
.kin-water-bird::after {
  content: "";
  position: absolute;
  left: -.35rem;
  top: .1rem;
  border-right: .72rem solid rgba(43,68,64,.72);
  border-top: .28rem solid transparent;
  border-bottom: .28rem solid transparent;
}

/* Wildlife is larger and more visible when it enters at the far edges */
.kin-edge-animal {
  z-index: 2;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 10px rgba(18,43,39,.25));
}
.kin-edge-animal__body,
.kin-edge-animal__head {
  opacity: .92;
}
.kin-edge-animal--deer .kin-edge-animal__body {
  width: 5.2rem;
  height: 1.9rem;
}
.kin-edge-animal--deer .kin-edge-animal__head {
  width: 1.25rem;
  height: 1.55rem;
}
.kin-edge-animal--fox .kin-edge-animal__head {
  border-radius: 70% 30% 55% 40%;
}
.kin-edge-animal--hare .kin-edge-animal__body {
  border-radius: 60% 55% 50% 62%;
}

/* Much stronger white light, moving vertically over the discovery sentence */
.discovery-line {
  position: relative;
  display: inline-block;
  overflow: hidden;
  isolation: isolate;
}
.discovery-line::after {
  content: "";
  position: absolute !important;
  z-index: 3;
  left: -14% !important;
  right: auto !important;
  top: -78%;
  width: 128% !important;
  height: 62% !important;
  opacity: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.62) 17%,
      rgba(255,255,255,1) 43%,
      rgba(255,255,255,1) 58%,
      rgba(255,255,255,.58) 79%,
      rgba(255,255,255,0) 100%) !important;
  box-shadow:
    0 0 18px 8px rgba(255,255,255,.90),
    0 0 42px 14px rgba(255,255,255,.60);
  filter: blur(.2px);
  mix-blend-mode: screen;
  transform: none !important;
  pointer-events: none;
}
.discovery-line.is-illuminated {
  animation: kin-copy-glow-v3 1.65s ease both !important;
}
.discovery-line.is-illuminated::after {
  animation: kin-copy-sweep-v3 1.45s cubic-bezier(.32,.02,.28,1) both !important;
}

@keyframes kin-global-rain-fall {
  to { transform: translate(3.2rem, 118vh) rotate(10deg); }
}
@keyframes kin-global-fog-pass {
  0% { opacity: 0; transform: translateX(0) scale(.9); }
  18% { opacity: .78; }
  68% { opacity: .64; }
  100% { opacity: 0; transform: translateX(172vw) scale(1.16); }
}
@keyframes kin-global-sunrise {
  0% { opacity: 0; transform: translateY(-2rem) scale(.78); }
  20% { opacity: .82; }
  48% { opacity: 1; transform: translateY(5rem) scale(1.04); }
  78% { opacity: .72; }
  100% { opacity: 0; transform: translateY(8rem) scale(1.12); }
}
@keyframes kin-sun-rays {
  0% { opacity: 0; transform: rotate(-13deg) translateY(-3rem); }
  27% { opacity: .62; }
  64% { opacity: .48; }
  100% { opacity: 0; transform: rotate(-9deg) translateY(4rem); }
}
@keyframes kin-lightning {
  0%, 100% { opacity: 0; }
  12% { opacity: 1; }
  20% { opacity: .08; }
  31% { opacity: .92; }
  42% { opacity: 0; }
}
@keyframes kin-crane-cross {
  0% { opacity: 0; transform: translateX(0) translateY(0) rotate(-2deg); }
  10% { opacity: .88; }
  48% { transform: translateX(58vw) translateY(-2.2rem) rotate(2deg); }
  90% { opacity: .84; }
  100% { opacity: 0; transform: translateX(126vw) translateY(1rem) rotate(-1deg); }
}
@keyframes kin-crane-cross-right {
  0% { opacity: 0; transform: scaleX(-1) translateX(0) translateY(0); }
  10% { opacity: .88; }
  48% { transform: scaleX(-1) translateX(58vw) translateY(-2.2rem); }
  90% { opacity: .84; }
  100% { opacity: 0; transform: scaleX(-1) translateX(126vw) translateY(1rem); }
}
@keyframes kin-ducks-cross {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: .78; }
  90% { opacity: .72; }
  100% { opacity: 0; transform: translateX(124vw); }
}
@keyframes kin-ducks-cross-right {
  0% { opacity: 0; transform: scaleX(-1) translateX(0); }
  12% { opacity: .78; }
  90% { opacity: .72; }
  100% { opacity: 0; transform: scaleX(-1) translateX(124vw); }
}
@keyframes kin-duck-bob {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes kin-copy-glow-v3 {
  0%,100% {
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 12px rgba(255,253,245,.85);
    filter: brightness(1);
  }
  42%,61% {
    color: #153642;
    text-shadow:
      0 0 4px #fff,
      0 0 14px #fff,
      0 0 32px rgba(255,255,255,1),
      0 0 62px rgba(255,255,255,.86);
    filter: brightness(1.7);
  }
}
@keyframes kin-copy-sweep-v3 {
  0% { top: -82%; opacity: 0; }
  12% { opacity: 1; }
  48% { opacity: 1; }
  100% { top: 128%; opacity: 0; }
}

@media (max-width: 680px) {
  .kin-global-sun { right: -7rem; width: 21rem; height: 21rem; }
  .kin-crane { transform: scale(.82); }
  .kin-global-rain i:nth-child(n+58) { display:none; }
  .kin-edge-animal { scale: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .kin-global-atmosphere,
  .kin-global-rain,
  .kin-global-fog,
  .kin-global-sun,
  .kin-sun-rays,
  .kin-lightning-flash,
  .kin-crane,
  .kin-water-birds { display:none !important; }
}


/* Atmosphere v3.1: unmistakable text scan + full-page lightning flash */
.discovery-line::after {
  top: -34px !important;
  left: -8% !important;
  width: 116% !important;
  height: 22px !important;
  opacity: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.98) !important;
  box-shadow:
    0 0 10px 5px rgba(255,255,255,1),
    0 0 28px 13px rgba(255,255,255,.98),
    0 0 58px 24px rgba(255,255,255,.72);
  filter: blur(1px);
  mix-blend-mode: screen;
}
.discovery-line.is-illuminated::after {
  animation: kin-copy-scan-v31 1.55s cubic-bezier(.28,.02,.32,1) both !important;
}
.discovery-line.is-illuminated {
  animation: kin-copy-glow-v31 1.75s ease both !important;
}

.world.kin-lightning-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: rgba(255,255,255,.96);
  mix-blend-mode: screen;
  animation: kin-page-lightning 1.18s steps(1,end) both;
}

@keyframes kin-copy-scan-v31 {
  0% { top: -34px; opacity: 0; }
  10% { opacity: 1; }
  42% { opacity: 1; }
  100% { top: calc(100% + 34px); opacity: 0; }
}
@keyframes kin-copy-glow-v31 {
  0%,100% {
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 0 12px rgba(255,253,245,.85);
    filter: brightness(1);
  }
  36%,62% {
    color: #0d2b35;
    text-shadow:
      0 0 3px #fff,
      0 0 12px #fff,
      0 0 30px #fff,
      0 0 65px rgba(255,255,255,1);
    filter: brightness(2.05);
  }
}
@keyframes kin-page-lightning {
  0%, 100% { opacity: 0; }
  8% { opacity: .96; }
  16% { opacity: .10; }
  29% { opacity: .78; }
  39% { opacity: .04; }
  53% { opacity: .92; }
  67% { opacity: 0; }
}


/* v3.2 — quick single top-to-bottom shimmer, matching the card shine rhythm */
.discovery-line.is-illuminated {
  animation: none !important;
}
.discovery-line.is-illuminated::after {
  animation: kin-copy-scan-v32 .72s cubic-bezier(.22,.61,.36,1) 1 both !important;
}
@keyframes kin-copy-scan-v32 {
  0%   { top: -30px; opacity: 0; }
  12%  { opacity: 1; }
  52%  { opacity: 1; }
  100% { top: calc(100% + 30px); opacity: 0; }
}


/* v3.3 — recognisable birds, calmer ambient baseline */
.kin-bird-flock {
  width: 22rem;
  height: 8rem;
  opacity: .82;
  filter: drop-shadow(0 3px 4px rgba(18,42,46,.12));
}

.kin-bird {
  width: 34px;
  height: 18px;
  opacity: 0;
  transform: scale(var(--bird-scale,1));
  animation: kin-bird-follow var(--flock-duration,10s) linear var(--bird-delay,0s) forwards;
}

.kin-bird::before,
.kin-bird::after {
  content: none !important;
}

.kin-bird__body,
.kin-bird__head,
.kin-bird__wing,
.kin-bird__tail {
  position: absolute;
  display: block;
  background: rgba(33,54,58,.86);
}

.kin-bird__body {
  left: 9px;
  top: 8px;
  width: 16px;
  height: 6px;
  border-radius: 65% 58% 58% 65%;
  transform: rotate(-4deg);
}

.kin-bird__head {
  left: 22px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.kin-bird__head::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 2px;
  width: 6px;
  height: 2px;
  background: inherit;
  clip-path: polygon(0 0,100% 50%,0 100%);
}

.kin-bird__wing {
  left: 10px;
  top: 3px;
  width: 15px;
  height: 9px;
  border-radius: 90% 20% 85% 15%;
  transform-origin: 80% 85%;
  transform: rotate(-18deg);
  animation: kin-bird-wing-real .68s ease-in-out infinite alternate;
}

.kin-bird__tail {
  left: 3px;
  top: 9px;
  width: 9px;
  height: 5px;
  clip-path: polygon(100% 35%,0 0,22% 50%,0 100%,100% 65%);
}

.kin-bird--swallow .kin-bird__body,
.kin-bird--swallow .kin-bird__head,
.kin-bird--swallow .kin-bird__wing,
.kin-bird--swallow .kin-bird__tail {
  background: rgba(22,43,51,.91);
}
.kin-bird--swallow .kin-bird__wing {
  width: 18px;
  height: 8px;
  clip-path: polygon(0 100%,38% 0,100% 35%,73% 100%);
}
.kin-bird--swallow .kin-bird__tail {
  left: 1px;
  width: 12px;
  height: 7px;
  clip-path: polygon(100% 45%,0 0,37% 50%,0 100%,100% 60%);
}

.kin-bird--gull .kin-bird__body,
.kin-bird--gull .kin-bird__head,
.kin-bird--gull .kin-bird__wing,
.kin-bird--gull .kin-bird__tail {
  background: rgba(51,65,68,.82);
}
.kin-bird--gull .kin-bird__wing {
  width: 19px;
  height: 8px;
  border-radius: 100% 10% 80% 15%;
  transform: rotate(-12deg);
}

.kin-bird--cranelet {
  scale: 1.18;
}
.kin-bird--cranelet .kin-bird__body {
  width: 18px;
  height: 5px;
}
.kin-bird--cranelet .kin-bird__head {
  left: 27px;
  top: 4px;
  width: 5px;
  height: 5px;
}
.kin-bird--cranelet .kin-bird__head::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 2px;
  width: 10px;
  height: 2px;
  background: inherit;
  transform: rotate(-8deg);
  transform-origin: 100% 50%;
}
.kin-bird--cranelet .kin-bird__tail {
  width: 13px;
  height: 3px;
  top: 10px;
}

@keyframes kin-bird-wing-real {
  0% { transform: rotate(-30deg) translateY(-1px); }
  100% { transform: rotate(18deg) translateY(2px); }
}

@media (max-width: 680px) {
  .kin-bird-flock { opacity: .74; }
  .kin-bird { scale: .82; }
}


/* v3.4 — calmer garden, precise large bird, subtle animal peeks */

/* Replace the older abstract crane silhouette with a readable bird drawing. */
.kin-crane {
  width: 13.5rem;
  height: 7rem;
  color: rgba(30,52,56,.82);
}
.kin-crane::before,
.kin-crane::after {
  display: none !important;
}
.kin-crane__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 5px 5px rgba(20,42,45,.13));
}
.kin-crane__body,
.kin-crane__wing,
.kin-crane__neck,
.kin-crane__head,
.kin-crane__beak,
.kin-crane__tail {
  fill: currentColor;
}
.kin-crane__leg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.kin-crane__wing--near {
  transform-origin: 98px 58px;
  animation: kin-crane-wing-near 1.35s ease-in-out infinite alternate;
}
.kin-crane__wing--far {
  transform-origin: 80px 58px;
  opacity: .72;
  animation: kin-crane-wing-far 1.35s ease-in-out infinite alternate;
}
@keyframes kin-crane-wing-near {
  from { transform: rotate(-7deg) translateY(1px); }
  to { transform: rotate(9deg) translateY(4px); }
}
@keyframes kin-crane-wing-far {
  from { transform: rotate(6deg) translateY(3px); }
  to { transform: rotate(-8deg) translateY(0); }
}

/* Small edge surprises: a fox or hedgehog looks in, pauses, then leaves. */
.kin-peek-animal {
  position: absolute;
  left: -3.2rem;
  bottom: 5.5%;
  width: 6.2rem;
  height: 5.4rem;
  opacity: 0;
  transform: translateX(-1.4rem) translateY(1rem) rotate(-4deg);
  transition: transform 1.05s cubic-bezier(.2,.7,.25,1), opacity .9s ease;
  z-index: 2;
}
.kin-peek-animal.from-right {
  left: auto;
  right: -3.2rem;
  transform: scaleX(-1) translateX(-1.4rem) translateY(1rem) rotate(-4deg);
}
.kin-peek-animal.is-looking {
  opacity: .88;
  transform: translateX(2.5rem) translateY(0) rotate(1deg);
}
.kin-peek-animal.from-right.is-looking {
  transform: scaleX(-1) translateX(2.5rem) translateY(0) rotate(1deg);
}
.kin-peek-animal__head {
  position: absolute;
  left: .8rem;
  top: .8rem;
  width: 4.1rem;
  height: 3.9rem;
  border-radius: 52% 52% 48% 48%;
  background: rgba(129,84,49,.88);
  box-shadow: inset 0 -.5rem 0 rgba(87,61,43,.12), 0 .5rem 1rem rgba(22,43,39,.08);
}
.kin-peek-animal__ear {
  position: absolute;
  top: -.75rem;
  width: 1.05rem;
  height: 1.45rem;
  border-radius: 95% 15% 80% 20%;
  background: inherit;
}
.kin-peek-animal__ear--left { left: .35rem; transform: rotate(-22deg); }
.kin-peek-animal__ear--right { right: .35rem; transform: scaleX(-1) rotate(-22deg); }
.kin-peek-animal__eye {
  position: absolute;
  top: 1.45rem;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: rgba(14,28,29,.9);
}
.kin-peek-animal__eye--left { left: 1rem; }
.kin-peek-animal__eye--right { right: 1rem; }
.kin-peek-animal__nose {
  position: absolute;
  left: 50%;
  top: 2.35rem;
  width: .5rem;
  height: .38rem;
  border-radius: 60% 60% 80% 80%;
  background: rgba(22,32,31,.88);
  transform: translateX(-50%);
}
.kin-peek-animal--fox .kin-peek-animal__head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .25rem;
  width: 1.9rem;
  height: 1.1rem;
  border-radius: 48% 48% 58% 58%;
  background: rgba(224,201,164,.72);
  transform: translateX(-50%);
}
.kin-peek-animal--hedgehog {
  bottom: 4%;
  width: 5.4rem;
  height: 4.3rem;
}
.kin-peek-animal--hedgehog .kin-peek-animal__head {
  left: 1rem;
  top: 1rem;
  width: 3.35rem;
  height: 2.65rem;
  border-radius: 70% 38% 55% 45%;
  background: rgba(124,104,76,.9);
}
.kin-peek-animal--hedgehog .kin-peek-animal__head::before {
  content: "";
  position: absolute;
  inset: -.65rem -.25rem .5rem -.9rem;
  z-index: -1;
  background:
    repeating-linear-gradient(110deg,
      rgba(72,65,54,.92) 0 4px,
      transparent 4px 8px);
  clip-path: polygon(0 68%,8% 43%,17% 55%,24% 28%,35% 48%,44% 17%,56% 42%,68% 15%,77% 46%,89% 28%,100% 65%,92% 100%,8% 100%);
}
.kin-peek-animal--hedgehog .kin-peek-animal__ear { display:none; }
.kin-peek-animal--hedgehog .kin-peek-animal__eye--left { left: 1.6rem; top: 1rem; }
.kin-peek-animal--hedgehog .kin-peek-animal__eye--right { display:none; }
.kin-peek-animal--hedgehog .kin-peek-animal__nose {
  left: 3.2rem;
  top: 1.45rem;
  width: .42rem;
  height: .34rem;
}

/* Fast single white flash over the line, like the card shine. */
.discovery-line::after {
  height: 10px !important;
  top: -14px !important;
  background: rgba(255,255,255,1) !important;
  box-shadow:
    0 0 8px 4px rgba(255,255,255,1),
    0 0 20px 8px rgba(255,255,255,.84) !important;
  filter: blur(.4px) !important;
}
.discovery-line.is-illuminated::after {
  animation: kin-copy-scan-v34 .46s cubic-bezier(.18,.66,.3,1) 1 both !important;
}
.discovery-line.is-illuminated {
  animation: none !important;
}
@keyframes kin-copy-scan-v34 {
  0% { top: -14px; opacity: 0; }
  14% { opacity: 1; }
  68% { opacity: 1; }
  100% { top: calc(100% + 14px); opacity: 0; }
}

@media (max-width: 680px) {
  .kin-crane { width: 10.5rem; height: 5.8rem; }
  .kin-peek-animal { scale: .8; }
}


/* v3.5 — painted SVG birds, five-to-six-minute weather, full-line shimmer */
.kin-bird {
  width: 72px !important;
  height: 44px !important;
  filter: drop-shadow(0 4px 5px rgba(21,46,48,.10));
}
.kin-bird-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kin-bird-svg__whole {
  transform-origin: 50% 55%;
}
.kin-bird-svg__wing--a,
.kin-bird-svg__wing--b {
  transform-origin: 46px 32px;
  animation: kin-real-bird-wing .9s ease-in-out infinite alternate;
}
.kin-bird-svg__wing--b {
  animation-direction: alternate-reverse;
}

.kin-bird-svg__gull-body,
.kin-bird-svg__gull-head {
  fill: rgba(246,247,240,.97);
  stroke: rgba(73,91,92,.72);
  stroke-width: 1.1;
}
.kin-bird-svg__gull-wing {
  fill: rgba(220,226,220,.95);
  stroke: rgba(74,91,94,.66);
  stroke-width: 1;
}
.kin-bird-svg__gull-tail {
  fill: rgba(231,235,228,.96);
  stroke: rgba(74,91,94,.62);
  stroke-width: 1;
}
.kin-bird-svg__gull-tip {
  fill: rgba(49,66,71,.90);
}
.kin-bird-svg__gull-beak {
  fill: rgba(209,158,70,.96);
}

.kin-bird-svg__swallow-body,
.kin-bird-svg__swallow-head {
  fill: rgba(38,61,72,.96);
  stroke: rgba(20,41,49,.76);
  stroke-width: 1;
}
.kin-bird-svg__swallow-wing {
  fill: rgba(48,74,88,.95);
  stroke: rgba(24,44,53,.72);
  stroke-width: 1;
}
.kin-bird-svg__swallow-belly {
  fill: rgba(239,232,211,.95);
}
.kin-bird-svg__swallow-tail {
  fill: rgba(31,53,64,.98);
}
.kin-bird-svg__swallow-beak {
  fill: rgba(31,45,48,.96);
}
.kin-bird-svg__swallow-throat {
  fill: rgba(158,81,58,.90);
}

.kin-crane__body {
  fill: rgba(208,214,205,.98) !important;
  stroke: rgba(68,79,75,.62);
  stroke-width: 1.2;
}
.kin-crane__wing--near {
  fill: rgba(112,124,117,.92) !important;
  stroke: rgba(62,75,71,.60);
  stroke-width: 1.1;
}
.kin-crane__wing--far {
  fill: rgba(160,171,163,.86) !important;
  stroke: rgba(67,80,75,.48);
  stroke-width: 1;
}
.kin-crane__neck,
.kin-crane__head {
  fill: rgba(215,219,210,.98) !important;
  stroke: rgba(65,78,75,.60);
  stroke-width: 1;
}
.kin-crane__beak {
  fill: rgba(188,151,85,.96) !important;
}
.kin-crane__tail {
  fill: rgba(66,79,76,.90) !important;
}
.kin-crane__leg {
  stroke: rgba(71,76,67,.82) !important;
}
.kin-crane__head::after {
  content: none;
}

/* One bright horizontal stripe covers the entire sentence width and flashes top-to-bottom once. */
.discovery-line {
  overflow: hidden !important;
}
.discovery-line::after {
  left: -0.5rem !important;
  width: calc(100% + 1rem) !important;
  right: auto !important;
  top: -10px !important;
  height: 7px !important;
  border-radius: 999px !important;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.96) 30%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.96) 70%,
    rgba(255,255,255,0) 100%
  ) !important;
  box-shadow:
    0 0 7px 4px rgba(255,255,255,1),
    0 0 18px 8px rgba(255,255,255,.82) !important;
  filter: blur(.15px) !important;
}
.discovery-line.is-illuminated {
  animation: none !important;
}
.discovery-line.is-illuminated::after {
  animation: kin-full-line-flash-v35 .42s cubic-bezier(.18,.67,.28,1) 1 both !important;
}
@keyframes kin-full-line-flash-v35 {
  0%   { top: -10px; opacity: 0; }
  16%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { top: calc(100% + 10px); opacity: 0; }
}

@keyframes kin-real-bird-wing {
  from { transform: rotate(-10deg) translateY(-1px); }
  to   { transform: rotate(12deg) translateY(3px); }
}

@media (max-width:680px) {
  .kin-bird { width: 58px !important; height: 36px !important; }
}


/* v3.6 — longer full-sentence white sweep */
.discovery-line {
  position: relative;
  display: inline-block;
  overflow: hidden !important;
  isolation: isolate;
}

.discovery-line::after {
  content: "";
  position: absolute !important;
  z-index: 3;
  left: -0.65rem !important;
  right: auto !important;
  width: calc(100% + 1.3rem) !important;
  height: 22px !important;
  top: -28px !important;
  border-radius: 999px !important;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 14%,
      rgba(255,255,255,1) 42%,
      rgba(255,255,255,1) 58%,
      rgba(255,255,255,.55) 86%,
      rgba(255,255,255,0) 100%
    ) !important;
  box-shadow:
    0 0 8px 5px rgba(255,255,255,1),
    0 0 22px 10px rgba(255,255,255,.94),
    0 0 40px 18px rgba(255,255,255,.58) !important;
  filter: blur(.35px) !important;
  mix-blend-mode: screen;
}

.discovery-line.is-illuminated {
  animation: none !important;
}

.discovery-line.is-illuminated::after {
  animation: kin-full-sentence-sweep-v36 1.28s cubic-bezier(.22,.62,.3,1) 1 both !important;
}

@keyframes kin-full-sentence-sweep-v36 {
  0%   { top: -28px; opacity: 0; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { top: calc(100% + 28px); opacity: 0; }
}


/* v3.7 — card-style diagonal shine across the discovery sentence */
.discovery-line {
  position: relative;
  display: inline-block;
  overflow: hidden !important;
  isolation: isolate;
}

.discovery-line::after {
  content: "";
  position: absolute !important;
  z-index: 3;
  inset: -75% -35% !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  border-radius: 0 !important;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255,255,255,.08) 45%,
    rgba(255,255,255,.72) 50%,
    rgba(255,232,165,.18) 55%,
    transparent 62%
  ) !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: screen;
  transform: translateX(-58%) rotate(7deg);
}

.discovery-line.is-illuminated {
  animation: none !important;
}

.discovery-line.is-illuminated::after {
  animation: kin-discovery-card-shine-v37 1.8s ease-in-out 1 both !important;
}

@keyframes kin-discovery-card-shine-v37 {
  0%, 10% {
    transform: translateX(-58%) rotate(7deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  76% {
    opacity: 1;
  }
  90%, 100% {
    transform: translateX(58%) rotate(7deg);
    opacity: 0;
  }
}


/* v3.8 — mobile layout consolidated into the final stylesheet */
/* KIN mobile layout — intentional single-column experience */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0;
  }

  .world {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .world__painting,
  .world__wash {
    position: fixed;
    inset: 0;
  }

  .world__painting {
    background-position: 58% center;
    transform: scale(1.03);
  }

  .world__wash {
    background:
      linear-gradient(
        180deg,
        rgba(255,253,245,.92) 0%,
        rgba(255,253,245,.78) 28%,
        rgba(255,253,245,.44) 58%,
        rgba(12,49,61,.12) 100%
      );
  }

  .topbar {
    width: 100%;
    max-width: 100%;
    padding:
      max(.65rem, env(safe-area-inset-top))
      .7rem
      .35rem;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: .55rem;
  }

  .brand {
    min-width: 0;
    gap: .5rem;
    font-size: .72rem;
    letter-spacing: .12em;
  }

  .brand__mark {
    width: 1.85rem;
    height: 1.85rem;
    flex: 0 0 1.85rem;
  }

  .topbar__actions {
    min-width: 0;
    gap: .35rem;
  }

  .topbar .quiet-button {
    display: none !important;
  }

  dialog .quiet-button,
  .founding-share-actions .quiet-button {
    display: inline-flex !important;
  }

  .give-button {
    width: 3.65rem;
    height: 3.65rem;
    flex: 0 0 3.65rem;
    padding: .25rem;
    box-shadow: 0 9px 22px rgba(142,43,37,.25), inset 0 0 0 4px rgba(255,255,255,.1);
  }

  .give-button__label {
    font-size: .42rem;
  }

  .give-button__amount {
    font-size: 1.25rem;
  }

  .discovery {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: .15rem .65rem max(1.5rem, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto auto;
    gap: .75rem;
    align-items: start;
  }

  .intro {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    padding: .75rem .35rem .25rem;
    text-align: center;
    align-self: start;
  }

  .eyebrow {
    max-width: 22rem;
    margin: 0 auto .65rem;
    font-size: .68rem;
    line-height: 1.38;
    letter-spacing: .145em;
  }

  h1 {
    max-width: 22rem;
    margin: 0 auto;
    font-size: clamp(2.3rem, 11.1vw, 3.3rem);
    line-height: .94;
    text-wrap: balance;
  }

  h1 br {
    display: none;
  }

  .intro__copy,
  .discovery-line {
    max-width: min(90vw, 27rem);
    margin: .85rem auto 0;
    padding: 0 !important;
    font-size: 1.02rem;
    line-height: 1.48;
    text-align: center;
  }

  .search-panel {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 2.8rem;
    margin: 0;
    padding: 0 3.7rem 0 0;
    display: block;
  }

  .filters {
    width: 100%;
    max-width: 100%;
    padding: .1rem .05rem .35rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .4rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filter {
    flex: 0 0 auto;
    min-height: 2.45rem;
    padding: .52rem .76rem;
    display: inline-grid;
    place-items: center;
    font-size: .71rem;
  }

  .find-control {
    position: absolute;
    right: 0;
    top: .1rem;
  }

  .find-button {
    min-width: 3.45rem;
    min-height: 2.45rem;
    padding: .5rem .65rem;
  }

  .search-box {
    position: absolute;
    right: 0;
    top: 0;
    width: min(82vw, 18.5rem);
    min-height: 2.55rem;
  }

  .card-stage {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: .15rem 0 0;
    aspect-ratio: auto;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .orbit {
    display: none !important;
  }

  .card-cloud {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem;
    padding: .2rem;
  }

  .business-card,
  .slot-1,
  .slot-2,
  .slot-3,
  .slot-4,
  .slot-5,
  .slot-6,
  .slot-7,
  .slot-8 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .business-card {
    width: 100% !important;
    max-width: none;
    min-width: 0;
    aspect-ratio: 1.62;
    transform: rotate(var(--tilt,0deg)) !important;
    padding: .82rem;
    overflow: hidden;
    animation: card-drift 7s ease-in-out infinite alternate;
  }

  .business-card:hover,
  .business-card:focus-visible {
    transform: rotate(0deg) scale(1.025) !important;
  }

  .business-card__body strong {
    font-size: clamp(.95rem, 4.3vw, 1.08rem);
    line-height: .92;
  }

  .business-card__body em {
    margin-top: .45rem;
    font-size: clamp(.52rem, 2.55vw, .64rem);
    line-height: 1.26;
  }

  .business-card__link {
    font-size: .49rem;
  }

  .business-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - .4rem) !important;
    justify-self: center;
  }

  .stage-center {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    order: 1;
    width: min(78vw, 14rem);
    max-width: 100%;
    aspect-ratio: auto;
    margin: .25rem auto 1rem;
    padding: .15rem !important;
    transform: none !important;
  }

  /* On the first mobile view, place the invitation inside the card field.
     Once a card is revealed, the start state is hidden and this gap vanishes. */
  .card-stage:has(> .stage-center:not([hidden])) {
    container-type: inline-size;
    position: relative;
  }

  .card-stage:has(> .stage-center:not([hidden])) .card-cloud {
    margin-top: -2rem;
    margin-bottom: -1rem;
    row-gap: .3rem;
  }

  .card-stage:has(> .stage-center:not([hidden])) .card-cloud::before {
    content: '';
    grid-column: 1 / -1;
    grid-row: 2;
    height: clamp(5rem, 21cqw, 5.8rem);
  }

  .card-stage:has(> .stage-center:not([hidden])) .card-cloud > .business-card:nth-child(n+3) {
    translate: 0 -1rem;
  }

  .card-stage:has(> .stage-center:not([hidden])) .card-cloud > .business-card:nth-child(3n+3) {
    translate: -.35rem -1.1rem;
    z-index: 2;
  }

  .card-stage > .stage-center:not([hidden]) {
    position: absolute !important;
    left: 50% !important;
    top: clamp(5.25rem, 22cqw, 6.25rem) !important;
    width: min(78vw, 14rem);
    margin: 0;
    transform: translateX(-50%) !important;
    z-index: 8;
  }

  .stage-center p {
    margin: .35rem 0 .7rem;
    font-size: .84rem;
  }

  .shuffle-button {
    min-height: 3.15rem;
    padding: .7rem .9rem;
  }

  .shuffle-button strong {
    font-size: .76rem;
  }

  .shuffle-button small {
    font-size: .61rem;
  }

  .focus-sign {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    order: 1;
    width: 7rem;
    margin: .4rem auto -.25rem;
    transform: none !important;
  }

  .focus-sign__symbol {
    width: 6rem;
    height: 6rem;
  }

  .wisdom-line {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    order: 2;
    width: min(90vw, 22rem) !important;
    min-height: 0;
    margin: .2rem auto .55rem !important;
    padding: 0 .45rem !important;
    transform: none !important;
    font-size: .8rem;
    line-height: 1.45;
    text-align: center;
  }

  .surprise-state {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    order: 3;
    width: min(74vw, 15rem);
    margin: .25rem auto .7rem;
    transform: none !important;
    gap: .6rem;
  }

  .surprise-card {
    width: min(70vw, 14.5rem);
  }

  .card-stage:has(.surprise-state:not([hidden])) .card-cloud {
    display: none !important;
  }

  .card-stage:has(.surprise-state:not([hidden])) {
    min-height: 0;
    padding-top: .15rem;
  }

  .stage-message {
    position: relative;
    inset: auto;
    order: 2;
    min-height: 8rem;
    border-radius: 1rem;
  }

  .nature-sound-toggle {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    order: 4;
    align-self: flex-start;
    margin: .8rem 0 0;
    min-height: 44px;
    padding: .55rem .85rem;
    font-size: .8rem;
    color: #153e38;
    border: 1px solid rgba(28,72,61,.45);
    border-radius: 999px;
  }

  .lower-actions {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    max-width: 100%;
    margin: .2rem 0 0;
    padding: 0 .15rem;
    display: block;
    text-align: center;
  }

  .add-button {
    width: 100%;
    max-width: 25rem;
    min-height: 3.55rem;
    margin: 0 auto;
    padding: .82rem .9rem;
  }

  .modal {
    width: calc(100% - .7rem);
    max-width: calc(100% - .7rem);
    max-height: calc(100dvh - .7rem);
    margin: auto;
  }

  .modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - .7rem);
    padding:
      1.2rem
      1rem
      max(1.25rem, env(safe-area-inset-bottom));
    border-radius: 1rem;
    overflow-x: hidden;
  }

  .modal__close {
    top: .72rem;
    right: .72rem;
    width: 2.65rem;
    height: 2.65rem;
  }

  .modal h2 {
    max-width: calc(100% - 2.9rem);
    padding-right: 0;
    font-size: clamp(2.1rem, 10vw, 2.75rem);
  }

  .form-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .field--wide {
    grid-column: 1;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    max-width: 100%;
    min-height: 2.85rem;
    font-size: 16px;
  }

  .plan-option {
    grid-template-columns: auto minmax(0,1fr) auto;
    min-height: 3.4rem;
    padding: .8rem;
  }

  .plan-option span {
    min-width: 0;
  }

  .allocation,
  .ledger-total,
  .promise-grid {
    max-width: 100%;
  }

  .promise-grid {
    grid-template-columns: 1fr;
  }

  .toast {
    width: calc(100% - 1.25rem);
    max-width: 24rem;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .discovery {
    padding-inline: .5rem;
  }

  .card-cloud {
    gap: .6rem;
    padding-inline: 0;
  }

  .business-card {
    padding: .72rem;
  }

  .business-card__body strong {
    font-size: .94rem;
  }

  .business-card__body em {
    font-size: .53rem;
  }

  .give-button {
    width: 3.45rem;
    height: 3.45rem;
    flex-basis: 3.45rem;
  }
}


/* Quieter nature composition, 2026-10-07. */
.business-card { animation-duration: 12s; }
.business-card:nth-child(3n) { animation-duration: 14s; }
.business-card:nth-child(3n + 1) { animation-duration: 16s; }
@keyframes card-drift { from { translate: 0 -1.5px; } to { translate: 0 2px; } }
.kin-wind-active .living-plant,
.kin-wind-active .background-growth .living-plant {
  animation: kin-wind-sway 6.4s ease-in-out both;
}
@keyframes kin-wind-sway {
  0%, 100% { transform: translateX(-50%) rotate(var(--plant-lean)); }
  32% { transform: translateX(-50%) rotate(calc(var(--plant-lean) + 3deg)); }
  68% { transform: translateX(-50%) rotate(calc(var(--plant-lean) - 2deg)); }
}
@keyframes kin-mote-drift {
  0% { opacity: 0; transform: translate(0, 8px) rotate(0); }
  22% { opacity: .42; }
  70% { opacity: .3; }
  100% { opacity: 0; transform: translate(var(--mote-drift), -42px) rotate(100deg); }
}
.kin-mote { box-shadow: 0 0 6px rgba(255,231,134,.25); }
.kin-light-sweep { background: radial-gradient(ellipse,rgba(255,240,181,.22),rgba(255,240,181,0) 70%); }
/* Match Manage my card with a smaller, fully transparent audio link. */
.nature-links { flex-basis: 100%; display: flex; justify-content: center; width: 100%; margin-top: .1rem; }
.nature-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: .6rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.nature-links a:hover { text-decoration: underline; text-underline-offset: .2em; }
.nature-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 760px) {
  .discovery { grid-template-rows: auto auto auto auto; }
  .card-stage { grid-row: 3; }
  .lower-actions { grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .business-card, .living-plant, .background-growth .living-plant { animation: none !important; }
}

/* A clear, full-width review notice at the foot of the garden. */
.publication-note {
  position: relative;
  z-index: 5;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.15rem 1.25rem 1.3rem;
  border-top: 1px solid rgba(38,76,67,.24);
  background: rgba(239,245,239,.94);
  color: #173e3a;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
}
.publication-note p { margin: 0; }
.publication-note strong { font-weight: 750; }
.publication-note .publication-note__detail { margin-top: .2rem; color: #35534c; font-size: .875rem; }

/* Original painted nature: only transforms and opacity change during motion. */
.kin-checkout-note { padding: .9rem 1rem; border: 1px solid #78968b; border-radius: .75rem; background: #f1f5ef; color: #294b43; font-size: .95rem; line-height: 1.55; }
.kin-checkout-note a { color: #214f44; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.kin-sky-flock { position: absolute; left: 0; top: clamp(88px, 14vh, 130px); width: 150px; height: 72px; z-index: 3; pointer-events: none; opacity: 0; }
.kin-sky-bird { position: absolute; width: 30px; height: 21px; transform-origin: center; }
.kin-sky-bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kin-sky-bird__wings { fill: #657b79; stroke: #4d6867; stroke-width: .7; stroke-linejoin: round; transform-box: view-box; transform-origin: 50% 72%; animation: kin-sky-flap var(--sky-flap) ease-in-out var(--sky-phase) infinite; }
.kin-sky-bird__body { fill: #506a68; }
@keyframes kin-sky-flap { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(.36); } 60%, 82% { transform: scaleY(.8); } }
.kin-pond-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.kin-pond-visit { position: absolute; inset: 0; pointer-events: none; }
.kin-pond-frog { position: absolute; width: 30px; height: 30px; opacity: 0; transform-origin: 50% 85%; filter: drop-shadow(0 1px 1px rgba(248,249,224,.45)); }
.kin-pond-frog--resident { opacity: .68; }
.kin-pond-frog[hidden] { display: none; }
.kin-pond-frog__painting { display: block; width: 100%; height: 100%; object-fit: contain; }
.kin-pond-frog__jump { position: absolute; inset: 0; opacity: 0; }
.kin-pond-frog__jump svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kin-flower-bee { position: absolute; left: 0; top: 0; width: 29px; opacity: 0; transform-origin: 50% 50%; }
.kin-flower-bee__painting { display: block; width: 100%; height: auto; transform-origin: 55% 75%; }
.kin-pond-dragonfly { position: absolute; left: 0; top: 0; width: 26.4px; opacity: 0; pointer-events: none; }
.kin-pond-dragonfly__painting { display: block; width: 100%; height: auto; }
.kin-pond-glimmer { position: absolute; width: 132px; height: 28px; opacity: 0; background: linear-gradient(90deg,transparent,rgba(255,251,211,.8),transparent) 18% 20% / 57% 1px no-repeat, linear-gradient(90deg,transparent,rgba(246,253,244,.75),transparent) 75% 52% / 43% 1px no-repeat, linear-gradient(90deg,transparent,rgba(255,250,209,.7),transparent) 35% 80% / 69% 1px no-repeat; pointer-events: none; }
.kin-recorded-breeze .living-plant, .kin-recorded-breeze .background-growth .living-plant { animation: kin-wind-sway var(--kin-breeze-duration, 7s) ease-in-out both; }
.kin-recorded-breeze .kin-painted-sprig__painting { animation: kin-painted-breeze var(--kin-breeze-duration, 7s) ease-in-out both; }
.kin-illustrated-garden {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  contain: style;
}
.kin-illustrated-garden.is-ready { opacity: 1; }
.kin-grounded-foliage { position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.kin-grounded-foliage.is-ready { opacity: 1; }
.kin-painted-perch {
  position: absolute;
  left: 1rem;
  bottom: 1.2rem;
  z-index: 6;
  pointer-events: none;
  width: clamp(175px, 15vw, 200px);
  aspect-ratio: 1;
}
.kin-painted-robin { display: block; width: 100%; height: 100%; overflow: visible; }
.kin-painted-robin__body { transform-origin: 51% 71%; transform-box: view-box; animation: kin-painted-breathe 5.7s ease-in-out infinite; }
.kin-painted-robin__head { transform-origin: 65% 33.5%; transform-box: view-box; }
.kin-painted-robin__wing { transform-origin: 48.5% 30.5%; transform-box: view-box; }
.is-looking .kin-painted-robin__head { animation: kin-painted-look 4.6s cubic-bezier(.37,0,.25,1) both; }
.is-wing-stretch .kin-painted-robin__wing { animation: kin-painted-stretch 3.5s cubic-bezier(.37,0,.25,1) both; }
.kin-painted-robin__eyelid { transform-box: view-box; transform-origin: 67% 17.7%; transform: scaleY(0); }
.is-looking .kin-painted-robin__eyelid { animation: kin-painted-blink 4.6s linear both; }
.kin-painted-sprig { position: absolute; width: 170px; height: var(--kin-sprig-height, 320px); opacity: .83; }
.kin-painted-sprig--left { left: -4rem; top: calc(100% - 155px + 2.5rem); width: 155px; transform: rotate(-22deg); transform-origin: 50% 77.5px; opacity: .7; }
.kin-painted-sprig--right { right: -2rem; top: calc(100% - 185px + 3rem); width: 185px; transform: scaleX(-1) rotate(-15deg); transform-origin: 50% 92.5px; }
.kin-painted-sprig__painting { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 20% 100%; animation: kin-painted-leaves 13s ease-in-out infinite; }
.kin-painted-sprig--right .kin-painted-sprig__painting { animation-duration: 16s; animation-delay: -4s; }
.is-breezy .kin-painted-sprig__painting { animation: kin-painted-breeze var(--kin-breeze-duration, 7s) ease-in-out both; }
.kin-painted-butterfly { position: absolute; left: 0; top: 0; width: 22.8px; height: 22.8px; opacity: 0; }
.kin-painted-butterfly svg { width: 100%; height: 100%; overflow: visible; }
.kin-painted-butterfly__left,
.kin-painted-butterfly__right { transform-box: view-box; transform-origin: 50% 50%; animation: kin-painted-flap .34s ease-in-out infinite alternate; }
.kin-painted-butterfly__right { animation-delay: -.025s; }
.kin-illustrated-garden.is-paused *, .kin-painted-perch.is-paused *, .kin-grounded-foliage.is-paused * { animation-play-state: paused !important; }
/* Older geometric wildlife no longer participates in the painted scene. */
.kin-water-birds, .kin-edge-animal, .kin-peek-animal, .kin-butterfly { display: none !important; }
@keyframes kin-painted-breathe {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.004, 1.006); }
}
@keyframes kin-painted-look {
  0%, 100% { transform: rotate(0deg); }
  24%, 39% { transform: rotate(-5.2deg); }
  52% { transform: rotate(-.8deg); }
  67%, 81% { transform: rotate(4deg); }
  91% { transform: rotate(1deg); }
}
@keyframes kin-painted-stretch {
  0%, 100% { transform: rotate(0deg); }
  32%, 48% { transform: rotate(-6deg) translateY(-3px); }
  72% { transform: rotate(1.5deg); }
}
@keyframes kin-painted-blink {
  0%, 38%, 44%, 100% { transform: scaleY(0); }
  40%, 42% { transform: scaleY(1); }
}
@keyframes kin-painted-leaves {
  0%, 100% { transform: rotate(calc(var(--kin-leaf-sway, 1.2deg) * -.58)); }
  45% { transform: rotate(var(--kin-leaf-sway, 1.2deg)); }
  74% { transform: rotate(calc(var(--kin-leaf-sway, 1.2deg) * .17)); }
}
@keyframes kin-painted-breeze {
  0%, 100% { transform: rotate(0deg); }
  27% { transform: rotate(calc(var(--kin-breeze-angle, 3.2deg) * var(--kin-wind-direction,1))); }
  60% { transform: rotate(calc(var(--kin-breeze-angle, 3.2deg) * var(--kin-wind-direction,1) * -.56)); }
  83% { transform: rotate(calc(var(--kin-breeze-angle, 3.2deg) * var(--kin-wind-direction,1) * .25)); }
}
@keyframes kin-painted-flap { from { transform: scaleX(.32); } to { transform: scaleX(1); } }
@media (max-width: 1080px) and (min-width: 761px) {
  .discovery { grid-template-rows: auto auto auto auto auto; }
  .kin-painted-perch { position: relative; grid-column: 1; grid-row: 4; justify-self: start; left: .4rem; bottom: auto; width: 164px; margin-top: .2rem; }
  .lower-actions { grid-row: 5; }
  .kin-painted-sprig--left { display: none; }
}
@media (max-width: 760px) {
  .kin-pond-frog { width: 24px; height: 24px; }
  .kin-flower-bee { width: 25px; }
  .kin-pond-dragonfly { width: 21px; }
  .kin-illustrated-garden { position: relative; inset: auto; order: 3; flex: 0 0 124px; width: 100%; height: 124px; margin-top: .35rem; overflow: hidden; }
  .kin-painted-perch { position: absolute; width: 154px; left: .1rem; bottom: -1.5rem; }
  .kin-painted-sprig--left { display: none; }
  .kin-painted-sprig--right { width: 123px; right: -.65rem; top: calc(100% - 123px + 1.5rem); transform-origin: 50% 61.5px; opacity: .83; }
  .kin-painted-butterfly { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kin-sky-flock, .kin-pond-visit, .kin-pond-glimmer { display: none; }
  .kin-illustrated-garden, .kin-grounded-foliage { transition: none; }
  .kin-illustrated-garden *, .kin-grounded-foliage *, .kin-painted-perch * { animation: none !important; }
  .kin-painted-butterfly { display: none; }
}

/* Fine pond motion stays below the interface and follows the shared wind. */
.kin-pond-reeds { position: absolute; pointer-events: none; opacity: .98; }
.kin-pond-reeds[hidden] { display: none; }
.kin-pond-reeds__painting { position: relative; display: block; width: 100%; height: 100%; transform-origin: 56% 97%; animation: kin-pond-grass-idle 8.5s ease-in-out infinite; }
.kin-pond-reeds__image { display: block; width: 100%; height: 100%; filter: saturate(1.14) contrast(1.14); }
.kin-recorded-breeze .kin-pond-reeds__painting { animation: kin-pond-grass-breeze var(--kin-breeze-duration,7s) ease-in-out both; }
.kin-pond-layer[data-paused="true"] * { animation-play-state: paused !important; }
.kin-pond-water-ring { position: absolute; width: 28px; height: 6px; border: 1px solid rgba(246,255,232,.85); border-radius: 50%; opacity: 0; }
.kin-pond-cloud-band { position: absolute; left: 0; width: 100%; height: clamp(145px,21vh,205px); overflow: hidden; z-index: 1; pointer-events: none; mask-image: linear-gradient(90deg,#000 0%,#000 17%,transparent 29%,transparent 76%,#000 89%,#000 100%); }
.kin-pond-cloud-shadow { position: absolute; left: 0; top: 0; width: clamp(420px,56vw,840px); height: 100%; pointer-events: none; opacity: 0; filter: blur(12px); background: radial-gradient(ellipse at 32% 45%,rgba(45,68,83,.72),rgba(45,68,83,.4) 35%,transparent 68%), radial-gradient(ellipse at 70% 55%,rgba(52,76,86,.55),transparent 64%); }
.kin-pond-water-lines, .kin-pond-water-lines svg { display: block; width: 100%; height: 100%; }
.kin-pond-water-lines { position: absolute; inset: 0; }
.kin-pond-water-lines path { fill: none; stroke: rgba(251,255,232,.96); stroke-width: 1.35; stroke-linecap: round; filter: drop-shadow(0 1px .5px rgba(38,80,88,.5)); }
@keyframes kin-pond-grass-idle { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.8deg); } }
@keyframes kin-pond-grass-breeze { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 65% { transform: rotate(3.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .kin-pond-cloud-shadow { display: none; }
  .kin-pond-reeds__painting { animation: none !important; }
}

/* Clear participation and a compact, optional sound control. */
.intro__purpose { max-width: 21rem; margin: .8rem 0 0; font-size: .875rem; line-height: 1.5; font-weight: 600; color: #183e3b; text-shadow: 0 1px 2px rgba(255,255,255,.95); }
.card-publication-steps { display: grid; grid-template-columns: repeat(var(--kin-publication-count,4),minmax(0,1fr)); gap: 1.25rem; list-style: none; padding: 1rem .9rem; margin: 1rem 0 1.5rem; border: 1px solid #93b9ad; border-left: 4px solid #1d6455; border-radius: .75rem; background: #e8f2ed; color: #153f35; font-size: 1rem; font-weight: 750; line-height: 1.4; counter-reset: card-step; }
.card-publication-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; counter-increment: card-step; text-align: center; }
.card-publication-steps li::before { content: counter(card-step); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: 50%; background: #1d6455; color: #fff; font-size: .9375rem; font-weight: 800; }
.card-publication-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -1.15rem; top: .1rem; color: #1d6455; font-size: 1.5rem; line-height: 1; font-weight: 800; }
.coming-soon summary { cursor: pointer; color: #345650; font-size: .875rem; line-height: 1.5; }
.coming-soon summary:focus-visible { outline: 2px solid #285d51; outline-offset: 4px; }
.card-stage:has(> .nature-sound-controls) { margin-bottom: 4rem; }
.nature-sound-controls { position: absolute; z-index: 8; right: .8rem; top: calc(100% + .5rem); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .2rem .65rem; max-width: calc(100% - 1.6rem); color: #111; text-shadow: 0 1px 2px rgba(255,255,255,.95); }
.nature-sound-controls .nature-sound-toggle { position: static !important; margin: 0 !important; min-height: 44px; padding: .5rem .2rem; border: 0; font-size: .875rem; color: inherit; background: transparent; }
.nature-sound-level { display: inline-flex; align-items: center; gap: .3rem; font-size: .875rem; }
.nature-sound-level button { min-height: 44px; padding: .4rem .15rem; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer; }
.nature-sound-level button[aria-pressed="true"] { font-weight: 750; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.nature-sound-controls :focus-visible { outline: 2px solid #285d51; outline-offset: 3px; }
.kin-pond-leaf-event { position: absolute; inset: 0; pointer-events: none; }
.kin-pond-falling-leaf { position: absolute; width: 18px; height: 22px; opacity: 0; transform-origin: 50% 65%; }
.kin-pond-falling-leaf svg { display: block; width: 100%; height: 100%; }
.kin-painted-perch.is-singing .kin-painted-robin__head { animation: kin-painted-song var(--kin-song-duration,4.8s) ease-in-out both; }
@keyframes kin-painted-song { 0%,100% { transform: rotate(0); } 18%,44%,70% { transform: rotate(-2.8deg) translateY(-1px); } 29%,56%,83% { transform: rotate(-.8deg); } }
/* Every stem follows the same wind phase and direction. */
.kin-painted-sprig--right { --kin-wind-direction: -1; }
@keyframes kin-pond-grass-breeze { 0%,100% { transform: rotate(0); } 27% { transform: rotate(5deg); } 60% { transform: rotate(-2.8deg); } 83% { transform: rotate(1.25deg); } }
@media (max-width: 1080px) { .intro__purpose { max-width: 32rem; } }
@media (max-width: 760px) {
  .intro__purpose { margin: .65rem auto 0; max-width: 28rem; }
  .nature-sound-controls { position: relative; right: auto; top: auto; bottom: auto; width: 100%; max-width: 100%; margin: .65rem 0 0; justify-content: center; }
  .nature-sound-controls .nature-sound-toggle { border: 0; padding: .5rem .15rem; }
}
@media (max-width: 480px) {
  .card-publication-steps { grid-template-columns: minmax(0,1fr); gap: 1.35rem; padding: .9rem 1rem; }
  .card-publication-steps li { flex-direction: row; gap: .65rem; text-align: left; }
  .card-publication-steps li:not(:last-child)::after { content: "↓"; left: .45rem; right: auto; top: 2rem; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .kin-pond-leaf-event { display: none; } .kin-painted-perch.is-singing .kin-painted-robin__head { animation: none !important; } }

.card-publication-steps li[hidden] { display: none; }

/* Room for each card, including larger real-card collections. */
@media (min-width: 761px) {
  .card-stage { container-type: inline-size; aspect-ratio: auto; height: auto; min-height: 490px; }
  .card-cloud { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 28px; padding: 10px; }
  .card-cloud::before { content: ''; grid-row: 2; grid-column: 2; height: 220px; }
  .card-cloud > .business-card { position: relative; left: auto; top: auto; width: 100%; min-width: 0; align-self: center; transform: rotate(var(--tilt,0deg)); --tilt: -1.2deg; }
  .card-cloud > .business-card:nth-child(2n) { --tilt: 1.2deg; }
  .card-cloud > .business-card:hover, .card-cloud > .business-card:focus-visible { transform: rotate(0deg) scale(1.025); }
  .card-stage > .stage-center, .card-stage > .surprise-state { top: calc(20.576cqw + 127px); width: min(15rem,28%); }
}
.kin-pond-flower { position: absolute; transform-origin: 50% 100%; pointer-events: none; opacity: .96; }
.kin-pond-flower__painting { width: 100%; height: 100%; display: block; }
.kin-pond-fish-event { position: absolute; inset: 0; pointer-events: none; }
.kin-pond-fish { position: absolute; width: 34px; height: auto; opacity: 0; transform-origin: 50% 50%; }
.kin-pond-fish-ring { width: 26px; height: 8px; }
.kin-painted-perch.is-preening .kin-painted-robin__head { animation: kin-painted-preen 2.9s ease-in-out both; }
.kin-painted-perch.is-preening .kin-painted-robin__wing { animation: kin-painted-preen-wing 2.9s ease-in-out both; }
@keyframes kin-painted-preen { 0%,100% { transform: rotate(0); } 25%,42% { transform: rotate(-16deg) translate(-1px,2px); } 55% { transform: rotate(-10deg); } 68%,78% { transform: rotate(-17deg) translate(-1px,2px); } }
@keyframes kin-painted-preen-wing { 0%,100% { transform: rotate(0); } 35%,70% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .kin-painted-perch.is-preening * { animation: none !important; } .kin-pond-fish-event { display: none; } }

/* A world-level painted visitor stays visible above drifting cards. */
.kin-painted-butterfly { z-index: 14; pointer-events: none; }

/* Scale the whole symbol and caption, keeping the arrival animation intact. */
.business-card, .surprise-card { scale: .85; transform-origin: center; }
.focus-sign { scale: .7225; translate: -36px 32px; transform-origin: center; }
@media (max-width: 760px) {
  .focus-sign { translate: -12px 8px; }
}

/* A dedicated quote row above categories and FIND, at every screen width. */
.search-panel { display: block; padding: 0; }
.search-panel > .wisdom-line { position: static !important; inset: auto !important; transform: none !important; width: 100% !important; min-height: 2.5rem; margin: 0 0 .65rem !important; padding: .15rem .5rem !important; }
.search-panel__row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.8rem; }
@media (max-width: 760px) {
  .search-panel__row { display: block; padding-right: 3.7rem; }
  .search-panel > .wisdom-line { font-size: .8rem; }
}

/* Keep the practical introduction above the title and clear of the robin. */
.intro__purpose { margin: 0 0 1rem; }
@media (max-width: 760px) { .intro__purpose { margin: 0 auto .85rem; } }

/* A quiet water glint and small impact rings among the painted pond grasses. */
.kin-pond-droplet-event { position: absolute; inset: 0; pointer-events: none; }
.kin-pond-droplet-glint { position: absolute; width: 3px; height: 5px; border-radius: 50%; background: rgba(229,251,255,.94); box-shadow: 0 0 3px rgba(34,99,113,.55); }
.kin-pond-droplet-ring { width: 24px; height: 7px; }
@media (prefers-reduced-motion: reduce) { .kin-pond-droplet-event { display: none; } }

/* One breeze travels left-to-right through the rooted painted foliage. */
.kin-painted-sprig--left { --kin-wind-lag: 0s; }
.kin-painted-sprig--right { --kin-wind-lag: .4s; }
.kin-recorded-breeze .kin-painted-sprig__painting,
.is-breezy .kin-painted-sprig__painting { animation-delay: var(--kin-wind-lag,0s); }
.kin-recorded-breeze .kin-pond-reeds__painting {
  animation: kin-connected-reed-breeze var(--kin-breeze-duration,7s) ease-in-out .65s both;
}
.kin-recorded-breeze .kin-pond-flower__painting {
  transform-origin: 50% 100%;
  animation: kin-connected-flower-breeze var(--kin-breeze-duration,7s) ease-in-out .8s both;
}
@keyframes kin-painted-breeze {
  0%,100% { transform: rotate(0deg); }
  27% { transform: rotate(calc(var(--kin-breeze-angle,3.2deg) * var(--kin-wind-direction,1) * var(--kin-breeze-direction,1))); }
  60% { transform: rotate(calc(var(--kin-breeze-angle,3.2deg) * var(--kin-wind-direction,1) * var(--kin-breeze-direction,1) * -.56)); }
  83% { transform: rotate(calc(var(--kin-breeze-angle,3.2deg) * var(--kin-wind-direction,1) * var(--kin-breeze-direction,1) * .25)); }
}
@keyframes kin-connected-reed-breeze {
  0%,100% { transform: rotate(0deg); }
  27% { transform: rotate(calc(5deg * var(--kin-breeze-direction,1))); }
  60% { transform: rotate(calc(-2.8deg * var(--kin-breeze-direction,1))); }
  83% { transform: rotate(calc(1.25deg * var(--kin-breeze-direction,1))); }
}
@keyframes kin-connected-flower-breeze {
  0%,100% { transform: rotate(0deg); }
  27% { transform: rotate(calc(2.2deg * var(--kin-breeze-direction,1))); }
  60% { transform: rotate(calc(-1.2deg * var(--kin-breeze-direction,1))); }
  83% { transform: rotate(calc(.55deg * var(--kin-breeze-direction,1))); }
}
/* This layer is inside the original painting, beneath its wash and all UI. */
.kin-landscape-bird, .kin-landscape-bird-plate { position: absolute; display: block; overflow: visible; pointer-events: none; }
.kin-landscape-bird[hidden], .kin-landscape-bird-plate[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kin-landscape-bird, .kin-landscape-bird-plate { display: none; }
  .kin-recorded-breeze .kin-pond-flower__painting { animation: none !important; }
}
/* Local SVG coordinates keep the entire silhouette joined and feet rooted. */
.kin-landscape-bird__pose { transform-box: view-box; transform-origin: 62px 91px; }
.kin-landscape-bird__pose.is-looking { animation: kin-bank-bird-weight 9.6s cubic-bezier(.37,0,.25,1) both; }
.kin-landscape-bird__wing { opacity: 0; transform-box: view-box; transform-origin: 55px 43px; filter: brightness(1.025) saturate(1.035); }
.kin-landscape-bird__pose.is-looking .kin-landscape-bird__wing { animation: kin-bank-bird-wing 9.6s cubic-bezier(.37,0,.25,1) both; }

/* The blue-grey bird painted into the left bank gets one quiet, complete-body
   performance. Feathered overlaps keep the head attached while it turns. */
.kin-painted-tit { position: absolute; z-index: 1; aspect-ratio: 1; pointer-events: none; }
.kin-painted-tit[hidden] { display: none; }
.kin-painted-tit__painting { display: block; width: 100%; height: 100%; overflow: visible; }
.kin-painted-tit__whole { transform-box: view-box; transform-origin: 52% 68%; animation: kin-tit-settle 18s ease-in-out 2.4s infinite; }
.kin-painted-tit__head { transform-box: view-box; transform-origin: 65.5% 31%; animation: kin-tit-look 18s cubic-bezier(.37,0,.25,1) 2.4s infinite; }
.kin-painted-tit__wing { transform-box: view-box; transform-origin: 61% 39%; animation: kin-tit-wing 18s cubic-bezier(.37,0,.25,1) 2.4s infinite; }
.kin-painted-tit__eyelid { transform-box: view-box; transform-origin: 75.4% 21.8%; transform: scaleY(0); animation: kin-tit-blink 18s linear 2.4s infinite; }
.kin-painted-tit.is-paused * { animation-play-state: paused !important; }
@keyframes kin-tit-settle {
  0%,14%,35%,41%,59%,100% { transform: rotate(0); }
  20%,28% { transform: rotate(.42deg) translateY(-.35px); }
  47%,53% { transform: rotate(-.28deg); }
}
@keyframes kin-tit-look {
  0%,14%,35%,62%,100% { transform: rotate(0); }
  19%,27% { transform: rotate(-2.7deg) translate(-.4px,.5px); }
  31% { transform: rotate(-.7deg); }
  68%,74% { transform: rotate(1.5deg); }
  80% { transform: rotate(.35deg); }
}
@keyframes kin-tit-wing {
  0%,41%,58%,100% { transform: rotate(0) translateY(0); }
  44%,50% { transform: rotate(-3.4deg) translateY(-1.4px); }
  47%,53% { transform: rotate(-.6deg) translateY(-.2px); }
  55% { transform: rotate(-2.1deg) translateY(-.8px); }
}
@keyframes kin-tit-blink {
  0%,21%,22.2%,23.3%,68%,69.1%,70.1%,100% { transform: scaleY(0); }
  21.45%,21.85%,68.35%,68.75%,69.45%,69.78% { transform: scaleY(1); }
}
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .kin-painted-tit { display: none !important; }
}

/* The original squirrel is removed from the flat background and returned as
   one intact painted layer. Its nut stays between its paws; the whole animal
   makes a few tiny feeding dips instead of moving detached body parts. */
.kin-painted-squirrel { position: absolute; z-index: 1; aspect-ratio: 1; pointer-events: none; }
.kin-painted-squirrel[hidden] { display: none; }
.kin-painted-squirrel__painting {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 66% 88%;
  animation: kin-squirrel-nibble 17s cubic-bezier(.37,0,.25,1) 3.1s infinite;
  filter: saturate(.9) contrast(.96);
}
.kin-painted-squirrel.is-still .kin-painted-squirrel__painting { animation-play-state: paused; }
@keyframes kin-squirrel-nibble {
  0%,15%,25%,29%,44%,62%,100% { transform: rotate(0) translate(0,0) scale(1); }
  19%,22% { transform: rotate(.45deg) translate(.25px,-.35px) scale(1.002); }
  31%,35%,39% { transform: rotate(-.65deg) translate(-.25px,.75px) scale(.999,1.002); }
  33%,37%,42% { transform: rotate(.12deg) translate(0,-.2px) scale(1.001); }
  67%,72% { transform: rotate(.32deg) translate(.2px,-.25px) scale(1.001); }
  78% { transform: rotate(-.2deg) translate(-.1px,.15px) scale(1); }
}
@media (max-width: 760px) { .kin-painted-squirrel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .kin-painted-squirrel__painting { animation: none !important; } }

/* The complete fawn breathes, shifts its weight and makes one quiet step.
   The leg is clipped from the exact same painting; a clean-background patch
   prevents a doubled hoof while the animal remains visually intact. */
.world__painting.kin-fawn-ready { background-image: url("assets/nature-world-clean-v4.webp"); }
.kin-painted-fawn { position: absolute; z-index: 7; opacity: .9; pointer-events: none; }
.kin-painted-fawn[hidden] { display: none; }
.kin-painted-fawn__ground,
.kin-painted-fawn__underlay { display: none !important; }
.kin-painted-fawn__pose { position: relative; width: 100%; height: 100%; overflow: visible; transform-origin: 55% 98%; animation: kin-fawn-weight-shift 19s ease-in-out infinite; }
.kin-painted-fawn__underlay {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/nature-world-clean-v4.webp"); background-repeat: no-repeat;
  clip-path: polygon(20% 46%,38% 49%,37% 62%,32% 75%,28% 88%,26% 100%,8% 100%,14% 90%,20% 75%,22% 60%);
}
.kin-painted-fawn__painting {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 55% 98%; animation: kin-fawn-breathe 7.8s ease-in-out infinite;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 458 520'%3E%3Cmask id='m'%3E%3Crect width='458' height='520' fill='white'/%3E%3Cpath d='M92 239L174 255L169 322L146 390L128 458L119 520L37 520L64 468L92 390L101 312Z' fill='black'/%3E%3C/mask%3E%3Crect width='458' height='520' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");
  mask-size: 100% 100%; mask-repeat: no-repeat;
}
.kin-painted-fawn__foreleg {
  position: absolute; inset: 0; z-index: 2; transform-origin: 29% 52%;
  animation: kin-fawn-foreleg-step 23s cubic-bezier(.42,0,.28,1) 4.2s infinite;
}
.kin-painted-fawn__foreleg-painting {
  display: block; width: 100%; height: 100%; object-fit: contain;
  clip-path: polygon(20% 46%,38% 49%,37% 62%,32% 75%,28% 88%,26% 100%,8% 100%,14% 90%,20% 75%,22% 60%);
  transform-origin: 55% 98%; animation: kin-fawn-breathe 7.8s ease-in-out infinite;
}
.kin-painted-fawn.is-still .kin-painted-fawn__pose,
.kin-painted-fawn.is-still .kin-painted-fawn__painting,
.kin-painted-fawn.is-still .kin-painted-fawn__foreleg,
.kin-painted-fawn.is-still .kin-painted-fawn__foreleg-painting { animation-play-state: paused; }
@keyframes kin-fawn-breathe { 0%,100% { transform: scale(1); } 48% { transform: scale(1.009,1.006); } }
@keyframes kin-fawn-weight-shift {
  0%,100% { transform: translateX(0) rotate(0deg); }
  24% { transform: translateX(.6px) rotate(.16deg); }
  53% { transform: translateX(-.4px) rotate(-.12deg); }
  78% { transform: translateX(.3px) rotate(.08deg); }
}
@keyframes kin-fawn-foreleg-step {
  0%,32%,50%,100% { transform: translate(0,0) rotate(0deg); }
  36% { transform: translate(-.7%,-.15%) rotate(-.32deg); }
  40%,43% { transform: translate(-1.35%,-.28%) rotate(-.58deg); }
  47% { transform: translate(-.5%,-.08%) rotate(-.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kin-painted-fawn__pose, .kin-painted-fawn__painting,
  .kin-painted-fawn__foreleg, .kin-painted-fawn__foreleg-painting { animation: none !important; }
}

/* Three left foreground flowers remain one rooted watercolor cluster. */
.kin-left-flowers { position: absolute; z-index: 1; aspect-ratio: 2 / 3; pointer-events: none; }
.kin-left-flowers[hidden] { display: none; }
.kin-left-flowers__painting {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 52% 99%;
  animation: kin-left-flowers-sway 13.7s ease-in-out 2.6s infinite;
  filter: saturate(.9) contrast(.96);
}
.kin-left-flowers.is-still .kin-left-flowers__painting { animation-play-state: paused; }
@keyframes kin-left-flowers-sway {
  0%,100% { transform: rotate(-.42deg); }
  24% { transform: rotate(.72deg); }
  48% { transform: rotate(-.18deg); }
  71% { transform: rotate(.48deg); }
  87% { transform: rotate(-.31deg); }
}
@media (max-width: 760px) { .kin-left-flowers { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .kin-left-flowers__painting { animation: none !important; } }

/* Small waterside details, confined to the margin rather than the cards. */
.kin-pond-midges { position: absolute; width: 70px; height: 58px; pointer-events: none; }
.kin-pond-midge { position: absolute; width: 8px; height: 6px; opacity: 0; }
.kin-pond-midge svg { display: block; width: 100%; height: 100%; }
.kin-pond-midge__wings { transform-box: fill-box; transform-origin: center; animation: kin-midge-wings .16s ease-in-out infinite alternate; }
.kin-pond-bank-mist { position: absolute; height: 48px; pointer-events: none; }
.kin-pond-bank-mist__wisp { position: absolute; left: 0; width: 100%; height: 29px; opacity: 0; border-radius: 50%; filter: blur(4px); background: radial-gradient(ellipse at 38% 50%,rgba(243,246,220,.85),rgba(240,246,231,.48) 42%,transparent 72%); }
@keyframes kin-midge-wings { from { transform: scaleY(.48); } to { transform: scaleY(1); } }
@media (max-width: 760px) { .kin-pond-midge { width: 7px; height: 5px; } }
@media (prefers-reduced-motion: reduce) { .kin-pond-midges, .kin-pond-bank-mist { display: none; } }
@keyframes kin-bank-bird-weight {
  0%,100% { transform: rotate(0deg); }
  23%,38% { transform: rotate(-4.3deg) scaleY(.992); }
  58%,73% { transform: rotate(1.9deg) scaleY(1.015); }
  88% { transform: rotate(-.7deg); }
}
@keyframes kin-bank-bird-wing {
  0%,16%,100% { opacity: 0; transform: rotate(0deg) translate(0,0); }
  27%,40% { opacity: .82; transform: rotate(-2.2deg) translate(-.35px,-.45px); }
  52% { opacity: .28; transform: rotate(.35deg) translate(0,.1px); }
  64%,76% { opacity: .68; transform: rotate(-1.15deg) translate(-.15px,-.25px); }
  88% { opacity: .12; transform: rotate(-.25deg) translate(0,0); }
}