.scene-seven { background:radial-gradient(ellipse at 50% 55%,#fffcf1 0%,#f8f0de 69%,#e9e1cc 100%); }
.scene-eight { background:radial-gradient(ellipse at 49% 51%,#fffdf4 0%,#faf2df 64%,#e8e4d1 100%); }
.text-area-seven,.text-area-eight { top:20%;width:min(950px,77vw); }
.text-area-seven .phrase,.text-area-eight .phrase { font-size:clamp(35px,3.65vw,54px); }
.text-area-seven .text-spark,.text-area-eight .text-spark { margin-bottom:13px; }
.text-area-seven .text-underline,.text-area-eight .text-underline { margin-top:17px; }
.paper-board { position:absolute;left:50%;top:39%;width:min(960px,87vw);height:min(43vh,385px);min-height:245px;transform:translateX(-50%); }
.board-halo { position:absolute;inset:3% 8% 0;border-radius:50%;background:radial-gradient(ellipse,#e2c78a50,transparent 72%);filter:blur(20px);opacity:0;transition:opacity 1s ease; }
.scene-seven.has-fourth .board-halo { opacity:1; }
.study-paper { position:absolute;z-index:2;display:block;background:linear-gradient(145deg,#fffdf4,#f1e7d1);border:1px solid #c8b99c;box-shadow:4px 8px 15px #695c4627,inset 0 0 0 5px #fffaf0a8;opacity:0;transition:transform 1s var(--ease),opacity .7s ease,box-shadow .8s ease,border-color .8s ease; }
.study-paper::after { content:"";position:absolute;right:-1px;bottom:-1px;width:20px;height:20px;background:linear-gradient(135deg,#e5d7bb 0 48%,#fffaf1 50%);border-left:1px solid #d2c2a8;border-top:1px solid #d2c2a8;clip-path:polygon(0 100%,100% 0,100% 100%); }
.paper-pin { position:absolute;left:15px;top:12px;width:8px;height:8px;border-radius:50%;background:#d7a18e;box-shadow:0 1px 2px #74482f44; }
.paper-a { left:7%;top:21%;width:29%;height:55%;padding:35px 20px 10px;transform:translate(-24px,22px) rotate(-12deg); }
.paper-b { left:38%;top:9%;width:27%;height:58%;transform:translate(15px,-20px) rotate(11deg); }
.paper-c { left:69%;top:27%;width:23%;height:45%;transform:translate(34px,27px) rotate(-14deg); }
.paper-d { left:44%;top:72%;width:25%;height:24%;padding:25px 19px 8px;transform:translate(-15px,30px) rotate(8deg); }
.scene-seven.is-revealed .study-paper { opacity:1; }
.scene-seven.has-second .paper-b { transform:translate(2px,-4px) rotate(3deg);border-color:#d9a18c;box-shadow:0 7px 20px #bc856447,0 0 0 5px #e9bca24d; }
.scene-seven.has-third .paper-a { transform:rotate(-3deg); }
.scene-seven.has-third .paper-b { transform:rotate(0); }
.scene-seven.has-third .paper-c { transform:rotate(3deg); }
.scene-seven.has-third .paper-d { transform:rotate(-2deg); }
.paper-rule { display:block;width:75%;height:2px;margin:0 0 16px;background:#c0c9b3;border-radius:99px; }
.paper-rule.long { width:91%; }.paper-rule.short { width:47%; }.paper-rule.medium { width:67%; }
.paper-accent { display:block;width:17px;height:17px;margin-left:auto;border:2px solid #dfaaa0;border-radius:50%; }
.paper-b svg { width:100%;height:100%;padding:20px 12px 5px; }
.paper-circle { position:absolute;width:52px;height:52px;left:17%;top:25%;border:2px solid #b2c0a6;border-radius:50%; }
.paper-triangle { position:absolute;width:57px;height:57px;right:14%;top:22%;border:2px solid #e4a998;clip-path:polygon(50% 0,100% 100%,0 100%);background:#e4a99835; }
.paper-dash { position:absolute;width:50%;height:2px;left:23%;bottom:23%;background:#cbbd9d;transform:rotate(-7deg); }
.paper-dot { position:absolute;width:10px;height:10px;left:50%;top:42%;border-radius:50%;background:#cfb473; }
.paper-d .paper-rule { height:1px;margin-bottom:7px; }
.paper-seal { position:absolute;right:14%;top:16%;width:22px;height:22px;border:1px solid #e4a998;border-radius:50%;background:#e4a99855; }
.board-thread { position:absolute;z-index:1;height:2px;background:#99aa91;transform-origin:left center;opacity:0;transition:transform 1.15s var(--ease),opacity .3s ease; }
.thread-a { left:59%;top:49%;width:17%;transform:rotate(17deg) scaleX(0); }
.thread-b { left:32%;top:55%;width:15%;transform:rotate(-11deg) scaleX(0); }
.thread-c { left:58%;top:65%;width:15%;transform:rotate(73deg) scaleX(0); }
.scene-seven.has-second .thread-a,.scene-seven.has-third .board-thread { opacity:.82;transform:rotate(17deg) scaleX(1); }
.scene-seven.has-third .thread-b { transform:rotate(-11deg) scaleX(1); }.scene-seven.has-third .thread-c { transform:rotate(73deg) scaleX(1); }
.board-front { position:absolute;z-index:9;left:0;right:0;bottom:-32px;height:75px;background:radial-gradient(ellipse at 22% 42%,#b8c8a6 0 17%,transparent 22%),radial-gradient(ellipse at 62% 40%,#b3c6a6 0 25%,transparent 32%),radial-gradient(ellipse at 50% 58%,#c8d5b5 0 46%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 31%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 50%,#000 31%,transparent 78%);pointer-events:none; }
.panda-button { position:absolute;z-index:8;right:0;bottom:-4%;width:clamp(125px,18vw,205px);aspect-ratio:473/486;padding:0;border:0;background:transparent;opacity:0;transform:translateY(55%) rotate(-8deg);transition:opacity .7s ease,transform .85s var(--ease); }
.panda-art,.item-art { display:block;width:100%;height:100%;transform-origin:50% 85%; }
.panda-art img,.item-art img { display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(5px 9px 6px #6d56302d); }
.scene-seven.has-fifth .panda-button { opacity:1;transform:translateY(0) rotate(3deg); }
.panda-button.is-reacting .panda-art { animation:panda-nod .7s ease-in-out; }
@keyframes panda-nod { 35% { transform:rotate(-8deg) translateY(-4px); } 70% { transform:rotate(4deg); } }
.discovery .find-mark { top:6%;right:0;width:28px;height:28px;opacity:0; }
.scene-seven.has-fifth .panda-button .find-mark,.scene-eight.has-third .still-item .find-mark { opacity:1; }
.discovery.is-found .find-mark { opacity:.38 !important; }
.discovery-caption { position:absolute;z-index:14;left:50%;bottom:11.5%;width:min(560px,78vw);min-height:33px;margin:0;padding:7px 17px;border:1px solid #cdbd9f;border-radius:99px;background:#fffaf0e9;box-shadow:0 4px 14px #57482d16;color:#584735;font-size:clamp(15px,1.5vw,19px);text-align:center;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .28s ease,transform .3s ease; }
.discovery-caption.is-visible { opacity:1;transform:translate(-50%,0); }
.scene-seven.is-leaving .paper-board,.scene-eight.is-leaving .still-life { opacity:0;transform:translate(-50%,-8px) scale(.96);transition:opacity .65s ease,transform .7s var(--ease); }
.scene-seven.is-leaving .discovery-caption,.scene-eight.is-leaving .discovery-caption { opacity:0; }
.stem-transition { position:absolute;z-index:44;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(ellipse at 50% 52%,#fffaf0dd,#fff9edeb 70%); }
.stem-transition.is-visible { opacity:1; }
.stem-transition i,.garden-stems i { position:absolute;left:50%;bottom:20%;width:2px;height:44%;border-radius:99px;background:#8eaa91;transform-origin:bottom; }
.stem-transition i:nth-child(1),.garden-stems i:nth-child(1) { transform:rotate(-32deg);height:35%; }.stem-transition i:nth-child(2),.garden-stems i:nth-child(2) { transform:rotate(-16deg);height:48%; }.stem-transition i:nth-child(3),.garden-stems i:nth-child(3) { transform:rotate(4deg);height:51%; }.stem-transition i:nth-child(4),.garden-stems i:nth-child(4) { transform:rotate(23deg);height:45%; }.stem-transition i:nth-child(5),.garden-stems i:nth-child(5) { transform:rotate(38deg);height:31%; }
.stem-transition i { bottom:14%;transition:transform .72s var(--ease); }
.stem-transition i:nth-child(1) { transform:rotate(-32deg) scaleY(0); }.stem-transition i:nth-child(2) { transform:rotate(-16deg) scaleY(0); }.stem-transition i:nth-child(3) { transform:rotate(4deg) scaleY(0); }.stem-transition i:nth-child(4) { transform:rotate(23deg) scaleY(0); }.stem-transition i:nth-child(5) { transform:rotate(38deg) scaleY(0); }
.stem-transition.is-visible i:nth-child(1) { transform:rotate(-32deg) scaleY(1); }.stem-transition.is-visible i:nth-child(2) { transform:rotate(-16deg) scaleY(1); }.stem-transition.is-visible i:nth-child(3) { transform:rotate(4deg) scaleY(1); }.stem-transition.is-visible i:nth-child(4) { transform:rotate(23deg) scaleY(1); }.stem-transition.is-visible i:nth-child(5) { transform:rotate(38deg) scaleY(1); }
.still-life { position:absolute;left:50%;top:37%;width:min(1000px,92vw);height:48%;min-height:250px;transform:translateX(-50%);transition:opacity .7s ease,transform .8s var(--ease); }
.still-life-ground { position:absolute;left:5%;right:5%;bottom:3%;height:23%;border-radius:50%;background:radial-gradient(ellipse,#bdcba770,transparent 69%);filter:blur(12px); }
.garden-stems { position:absolute;inset:0;opacity:.6; }
.garden-stems i { bottom:6%;height:63%;width:2px;background:#93aa8b; }
.garden-front { position:absolute;z-index:8;left:-5%;right:-5%;bottom:-10%;height:22%;background:radial-gradient(ellipse at 13% 32%,#b7c9a8 0 12%,transparent 15%),radial-gradient(ellipse at 42% 21%,#a8bf9d 0 15%,transparent 18%),radial-gradient(ellipse at 75% 29%,#b7c9a8 0 17%,transparent 21%),radial-gradient(ellipse at 50% 60%,#c1d0b2 0 55%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 35%,transparent 79%);mask-image:radial-gradient(ellipse at 50% 45%,#000 35%,transparent 79%);pointer-events:none; }
.still-item { position:absolute;z-index:5;padding:0;border:0;background:transparent;opacity:0;transition:opacity .75s ease,transform 1s var(--ease); }
.flower-item { left:5%;bottom:8%;width:clamp(170px,25vw,260px);aspect-ratio:529/494;transform:translate(-18px,22px) rotate(-8deg); }
.tea-item { left:38%;bottom:10%;width:clamp(92px,12vw,135px);aspect-ratio:273/511;transform:translate(0,45px) rotate(8deg); }
.fries-item { left:56%;bottom:6%;width:clamp(125px,17vw,178px);aspect-ratio:326/444;transform:translate(25px,20px) rotate(-7deg); }
.cat-item { right:0;bottom:2%;width:clamp(165px,22vw,220px);aspect-ratio:489/476;transform:translate(8px,43%) rotate(6deg); }
.scene-eight.is-revealed .still-item { opacity:1; }
.scene-eight.has-second .flower-item,.scene-eight.has-second .tea-item,.scene-eight.has-second .fries-item,.scene-eight.has-second .cat-item { transform:none; }
.scene-eight.has-fourth .garden-stems { animation:garden-breathe 2.5s ease-in-out 1; }
@keyframes garden-breathe { 50% { transform:translateY(-5px); } }
.scene-eight.has-third .still-item { cursor:pointer; }
.flower-item.is-reacting .item-art { animation:flower-wave .85s var(--ease); }
.fries-item.is-reacting .item-art { animation:fries-wave .72s ease-in-out; }
.tea-item.is-reacting .item-art { animation:tea-tilt .85s ease-in-out; }
.cat-item.is-reacting .item-art { animation:cat-nod .68s ease-in-out; }
@keyframes flower-wave { 40% { transform:scale(1.09) rotate(-8deg); } 100% { transform:none; } }
@keyframes fries-wave { 30% { transform:rotate(-8deg); } 68% { transform:rotate(5deg); } }
@keyframes tea-tilt { 38% { transform:rotate(10deg); } 75% { transform:rotate(-3deg); } }
@keyframes cat-nod { 40% { transform:rotate(-6deg); } 72% { transform:rotate(3deg); } }
.flower-petals,.tea-circles { position:absolute;inset:0;pointer-events:none; }
.flower-petals i { position:absolute;left:45%;top:29%;width:13px;height:19px;border-radius:75% 12% 70% 20%;background:#e6a090;opacity:0; }
.flower-petals i:nth-child(2) { left:59%;top:38%;width:10px;height:15px; }.flower-petals i:nth-child(3) { left:36%;top:48%;width:9px;height:14px; }
.flower-item.is-reacting .flower-petals i { animation:petal-fall .9s ease-out both; }.flower-item.is-reacting .flower-petals i:nth-child(2) { animation-delay:.12s; }.flower-item.is-reacting .flower-petals i:nth-child(3) { animation-delay:.23s; }
@keyframes petal-fall { 10% { opacity:.9; } 100% { opacity:0;transform:translate(17px,43px) rotate(80deg); } }
.tea-circles i { position:absolute;left:20%;top:33%;width:12px;height:12px;border:1px solid #a9ad92;border-radius:50%;background:#e2c7a58f;opacity:0; }.tea-circles i:nth-child(2) { left:77%;top:45%;width:9px;height:9px; }.tea-circles i:nth-child(3) { left:63%;top:23%;width:7px;height:7px; }
.tea-item.is-reacting .tea-circles i { animation:circle-rise .9s ease-out both; }.tea-item.is-reacting .tea-circles i:nth-child(2) { animation-delay:.12s; }.tea-item.is-reacting .tea-circles i:nth-child(3) { animation-delay:.2s; }
@keyframes circle-rise { 15% { opacity:.75; } 100% { opacity:0;transform:translateY(-38px) scale(1.3); } }
.cat-postcard { z-index:10;right:2%;bottom:-4%;width:116px;height:107px;opacity:0;transform:translateY(15px) rotate(8deg);pointer-events:none; }
.scene-eight.has-third .cat-postcard { opacity:1;transform:rotate(8deg);pointer-events:auto; }
.cat-postcard .folded-postcard-label { font-size:15px; }
body[data-stage="seven"] .bee { left:8%;top:48%;transform:translate(-50%,-50%) scale(.54) rotate(-5deg); }
body[data-stage="seven"] .bee.is-shifted { left:11%;top:44%;transform:translate(-50%,-50%) scale(.54) rotate(4deg); }
body[data-stage="eight"] .bee { left:84%;top:26%;transform:translate(-50%,-50%) scale(.52); }
body[data-stage="eight"] .bee.is-shifted { left:79%;top:29%;transform:translate(-50%,-50%) scale(.52) rotate(5deg); }
.ending-lights { position:absolute;inset:0;pointer-events:none; }
.ending-lights i { position:absolute;width:clamp(36px,8vw,115px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff0bb 0,#f9dca36e 26%,transparent 70%);filter:blur(6px); }
.ending-lights i:nth-child(1) { left:15%;top:32%; }.ending-lights i:nth-child(2) { right:17%;top:24%;width:65px; }.ending-lights i:nth-child(3) { right:29%;bottom:18%;width:85px; }
@media (max-width:700px) {
  .text-area-seven,.text-area-eight { top:21%;width:calc(100% - 30px); }
  .text-area-seven .phrase,.text-area-eight .phrase { font-size:clamp(27px,7.2vw,35px);line-height:1.17; }
  .text-area-seven .text-spark,.text-area-eight .text-spark { margin-bottom:10px; }
  .text-area-seven .text-underline,.text-area-eight .text-underline { margin-top:12px; }
  .paper-board { top:40%;width:calc(100% - 20px);height:40%;min-height:230px; }
  .paper-a { left:0;width:40%;height:49%;padding:32px 12px 8px; }.paper-b { left:39%;top:8%;width:36%;height:49%; }.paper-c { left:70%;top:40%;width:30%;height:38%; }.paper-d { left:23%;top:67%;width:44%;height:27%;padding:22px 12px 5px; }
  .paper-rule { margin-bottom:10px; }.paper-circle { width:30px;height:30px; }.paper-triangle { width:33px;height:33px; }
  .thread-a { left:68%;top:48%;width:13%; }.thread-b { left:36%;top:49%;width:14%; }.thread-c { left:60%;top:59%;width:13%; }
  .panda-button { width:clamp(105px,29vw,145px);right:-3%;bottom:-9%; }
  .still-life { top:37%;width:calc(100% - 10px);height:43%;min-height:245px; }
  .flower-item { left:-1%;bottom:24%;width:clamp(118px,36vw,180px); }.tea-item { left:38%;bottom:24%;width:clamp(70px,21vw,105px); }.fries-item { left:52%;bottom:15%;width:clamp(83px,26vw,125px); }.cat-item { right:0;bottom:-1%;width:clamp(104px,31vw,145px); }
  .cat-postcard { right:31%;bottom:-4%;width:77px;height:82px; }.cat-postcard .folded-postcard-label { font-size:12px; }
  .discovery .find-mark { width:25px;height:25px; }
  .discovery-caption { bottom:12%;width:calc(100% - 45px);font-size:15px; }
  body[data-stage="seven"] .bee { left:9%;top:35%;transform:translate(-50%,-50%) scale(.3); }body[data-stage="seven"] .bee.is-shifted { left:11%;top:36%;transform:translate(-50%,-50%) scale(.3) rotate(4deg); }
  body[data-stage="eight"] .bee { left:13%;top:7%;transform:translate(-50%,-50%) scale(.38); }body[data-stage="eight"] .bee.is-shifted { left:16%;top:8%;transform:translate(-50%,-50%) scale(.38) rotate(5deg); }
}
@media (max-width:375px) and (max-height:640px) {
  .text-area-seven,.text-area-eight { top:19%; }.text-area-seven .phrase,.text-area-eight .phrase { font-size:25px; }
  .paper-board { top:38%;height:40%;min-height:210px; }.still-life { top:35%;height:43%;min-height:215px; }
  .discovery-caption { bottom:12%;font-size:14px; }
  .cat-postcard { right:31%;bottom:-7%;width:69px;height:75px; }
}
@media (prefers-reduced-motion:reduce) {
  .panda-button.is-reacting .panda-art,.still-item.is-reacting .item-art,.flower-item.is-reacting .flower-petals i,.tea-item.is-reacting .tea-circles i,.scene-eight.has-fourth .garden-stems { animation:none; }
}
