/* Kip's Feeling Friends — styles. Loads after gamekit.css. Three level skins swap CSS custom properties on . */ /* ── skins ─────────────────────────────────────────────── */ body { /* Level 1 — golden-hour meadow (default) */ --sky-top: #9ED2F2; --sky-mid: #C8E8FA; --sky-bot: #FFE9C4; --hill-far: #C4DD8F; --hill-mid: #A8CF6B; --hill-nr: #8DC63F; --ground: #7CB518; --ground-2: #6BA412; --tree: #5E9432; --tray-bg: #FFF3DC; --tray-slat:#EED9AC; --tray-edge:#D9B98C; --word-glow: rgba(255, 255, 255, 0.9); } body.skin-2 { /* Level 2 — rainy-day pond */ --sky-top: #8FA6D9; --sky-mid: #B8C9EE; --sky-bot: #DCE9F8; --hill-far: #9DBFA6; --hill-mid: #85B091; --hill-nr: #6E9E7C; --ground: #629070; --ground-2: #527E60; --tree: #4E7E5C; } body.skin-3 { /* Level 3 — starry campout */ --sky-top: #3A2D66; --sky-mid: #4A3B7C; --sky-bot: #8B6BB5; --hill-far: #5C4E8C; --hill-mid: #45566B; --hill-nr: #3C5240; --ground: #46603F; --ground-2: #3A5234; --tree: #2F4630; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #app { position: fixed; inset: 0; overflow: hidden; background: var(--sky-mid); } #app > section { position: absolute; inset: 0; overflow: hidden; } /* ── shared scenery (parallax layers) ──────────────────── */ .scenery-slot { position: absolute; inset: 0; pointer-events: none; } .scenery { position: absolute; inset: 0; overflow: hidden; } .layer { position: absolute; left: 0; right: 0; } .layer.sky { top: 0; bottom: 0; background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-bot) 100%); } .sky-deco { position: absolute; inset: 0; width: 100%; height: 100%; } .sun-wrap { position: absolute; top: 4%; right: 9%; width: clamp(70px, 12vw, 130px); } .sun-wrap svg { width: 100%; height: auto; display: block; } .sun-rays { animation: ff-spin 70s linear infinite; transform-origin: center; transform-box: fill-box; } .cloud { position: absolute; width: clamp(90px, 15vw, 190px); opacity: 0.95; animation: ff-drift linear infinite; } .cloud svg { width: 100%; height: auto; display: block; } .cloud.c1 { top: 7%; animation-duration: 85s; } .cloud.c2 { top: 20%; width: clamp(70px, 11vw, 140px); opacity: 0.8; animation-duration: 62s; animation-delay: -30s; } .cloud.c3 { top: 2%; width: clamp(60px, 9vw, 110px); opacity: 0.7; animation-duration: 110s; animation-delay: -70s; } @keyframes ff-drift { from { transform: translateX(-25vw); } to { transform: translateX(110vw); } } @keyframes ff-spin { to { transform: rotate(1turn); } } .star-dot { animation: gk-twinkle 2.6s ease-in-out infinite; transform-origin: center; } .firefly { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #FFF9C4 0%, rgba(255, 224, 102, 0.55) 45%, rgba(255, 224, 102, 0) 75%); animation: ff-firefly 9s ease-in-out infinite; } @keyframes ff-firefly { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; } 25% { transform: translate(26px, -20px) scale(0.7); opacity: 0.4; } 50% { transform: translate(-14px, -34px) scale(1.1); opacity: 1; } 75% { transform: translate(-30px, -8px) scale(0.6); opacity: 0.35; } } .layer.hills { bottom: 0; height: 62%; } .layer.hills svg { position: absolute; bottom: 0; width: 100%; height: 100%; } .treeline { animation: ff-sway 20s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; } @keyframes ff-sway { 0%, 100% { transform: rotate(-0.7deg); } 50% { transform: rotate(0.7deg); } } .layer.ground { bottom: 0; height: 26%; background: linear-gradient(to bottom, var(--ground) 0%, var(--ground-2) 100%); border-radius: 50% 50% 0 0 / 26px 26px 0 0; } .layer.ground svg { position: absolute; bottom: 0; width: 100%; height: 100%; } /* rain (skin 2) */ .rain { position: absolute; inset: -10% 0 0 0; background: repeating-linear-gradient( 112deg, transparent 0 26px, rgba(235, 245, 255, 0.38) 26px 28px, transparent 28px 54px); animation: ff-rainfall 0.9s linear infinite; opacity: 0.55; } @keyframes ff-rainfall { from { transform: translateY(-56px); } to { transform: translateY(0); } } /* campfire glow (skin 3) */ .camp-glow { position: absolute; bottom: 4%; left: 8%; width: clamp(120px, 22vw, 260px); height: clamp(80px, 14vw, 170px); background: radial-gradient(ellipse at 50% 80%, rgba(252, 191, 73, 0.5) 0%, rgba(252, 191, 73, 0) 70%); animation: ff-glowpulse 2.8s ease-in-out infinite; } @keyframes ff-glowpulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .campfire { position: absolute; bottom: 5%; left: 10%; width: clamp(52px, 8vw, 90px); } .campfire svg { width: 100%; height: auto; display: block; } .campfire .flame { animation: ff-flame 0.6s ease-in-out infinite alternate; transform-origin: center bottom; transform-box: fill-box; } @keyframes ff-flame { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(0.86, 1.12) rotate(2deg); } } /* foreground framing grass */ .fore-grass { position: absolute; bottom: -6px; width: clamp(150px, 24vw, 300px); filter: blur(1.6px); pointer-events: none; z-index: 40; } .fore-grass svg { width: 100%; height: auto; display: block; } .fore-grass.fg-l { left: -32px; } .fore-grass.fg-r { right: -32px; transform: scaleX(-1); } .fore-grass .blade-grp { animation: ff-sway 6s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; } .vignette { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(58, 46, 92, 0.16) 0%, rgba(58, 46, 92, 0) 18%); pointer-events: none; z-index: 45; } /* ── START screen ──────────────────────────────────────── */ #start-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 18px); padding: 12px; z-index: 20; } #title-arch { width: min(88vw, 560px); } #title-arch svg { width: 100%; height: auto; display: block; } #garland { display: flex; gap: clamp(4px, 1vw, 10px); align-items: center; } .garland-chip { width: clamp(34px, 5.4vw, 52px); height: clamp(34px, 5.4vw, 52px); animation: gk-bob 2.8s ease-in-out infinite; } .garland-chip svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(74, 59, 92, 0.25)); } #btn-play { min-height: 88px; min-width: min(64vw, 320px); font-size: clamp(1.6rem, 5vw, 2.2rem); animation: ff-breathe 2.2s ease-in-out infinite; z-index: 21; } @keyframes ff-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } #postcards { display: flex; gap: clamp(10px, 2vw, 22px); margin-top: clamp(2px, 1vh, 10px); } .postcard { position: relative; width: clamp(128px, 18vw, 176px); height: clamp(112px, 16vw, 148px); border: none; border-radius: 18px; background: var(--gk-cream); box-shadow: 0 8px 18px rgba(74, 59, 92, 0.28), inset 0 0 0 5px #FFFFFF; cursor: pointer; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; transition: transform 0.18s; transform: rotate(-1.5deg); } .postcard:nth-child(2) { transform: rotate(1.2deg); } .postcard:nth-child(3) { transform: rotate(-0.8deg); } .postcard:hover:not(.locked) { transform: translateY(-5px) scale(1.05); } .postcard .pc-art { width: 100%; height: 52%; border-radius: 12px; overflow: hidden; position: relative; box-shadow: inset 0 0 0 2px rgba(74, 59, 92, 0.08); } .postcard .pc-art svg { width: 100%; height: 100%; display: block; } .postcard .pc-name { font-size: clamp(0.72rem, 1.5vw, 0.95rem); font-weight: bold; color: var(--gk-text); line-height: 1.15; margin-top: 3px; } .postcard .pc-stars { font-size: clamp(0.85rem, 1.8vw, 1.1rem); letter-spacing: 1px; min-height: 1.2em; } .postcard .pc-stars .dim { filter: grayscale(1) opacity(0.3); } .postcard .pc-lock { position: absolute; inset: 0; border-radius: 18px; background: rgba(242, 237, 250, 0.5); display: none; align-items: flex-start; justify-content: center; padding-top: 12%; font-size: clamp(1.7rem, 4vw, 2.4rem); filter: drop-shadow(0 2px 3px rgba(74, 59, 92, 0.35)); } .postcard.locked .pc-lock { display: flex; } .postcard.locked .pc-name, .postcard.locked .pc-stars { position: relative; z-index: 2; } .postcard.locked .pc-name { color: #7B6C8C; } .postcard.locked { cursor: pointer; } .postcard.wiggle { animation: ff-nope 0.5s ease-in-out; } @keyframes ff-nope { 0%, 100% { transform: rotate(-1.5deg) translateX(0); } 25% { transform: rotate(-1.5deg) translateX(-7px); } 50% { transform: rotate(-1.5deg) translateX(6px); } 75% { transform: rotate(-1.5deg) translateX(-4px); } } .postcard.sparkle-reveal { animation: ff-reveal 0.9s cubic-bezier(0.2, 1.5, 0.4, 1); } @keyframes ff-reveal { 0% { transform: scale(0.7) rotate(-8deg); } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: scale(1) rotate(-1.5deg); } } #start-kip { position: absolute; left: clamp(4px, 4vw, 70px); bottom: clamp(6px, 3vh, 34px); width: clamp(150px, 21vw, 250px); z-index: 18; } #start-kip svg { width: 100%; height: auto; display: block; } #start-kip .kip-rig { animation: gk-bob 3.4s ease-in-out infinite; } #screen-start .kip-tail-fill { animation: ff-tail-rainbow 16s linear infinite; } @keyframes ff-tail-rainbow { 0%, 100% { fill: #FCBF49; } 14% { fill: #FF7BAC; } 28% { fill: #E63946; } 42% { fill: #B565D8; } 57% { fill: #00B4D8; } 71% { fill: #7CB518; } 85% { fill: #FFD9A0; } } #info-btn { position: absolute; left: 14px; bottom: 14px; width: 60px; height: 60px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 12px rgba(90, 60, 130, 0.3); font-size: 1.7rem; cursor: pointer; z-index: 30; transition: transform 0.15s; } #info-btn:hover { transform: scale(1.1); } /* ── PLAY: stage ───────────────────────────────────────── */ #stage { position: absolute; top: 0; left: 0; right: 0; height: 58%; overflow: hidden; } #actors { position: absolute; inset: 0; z-index: 20; transition: transform 0.55s ease-in, opacity 0.55s; } #actors.slide-out { transform: translateX(-110%); opacity: 0; } #actors.slide-in { animation: ff-slidein 0.55s ease-out; } @keyframes ff-slidein { from { transform: translateX(110%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } } #friend { position: absolute; left: 54%; bottom: 3%; width: clamp(150px, 36vh, 270px); } #friend svg { width: 100%; height: auto; display: block; } #friend.finale { left: 0; right: 0; top: 0; bottom: 0; width: auto; } #prop { position: absolute; left: 30%; bottom: 4%; width: clamp(90px, 22vh, 170px); z-index: 21; } #prop svg { width: 100%; height: auto; display: block; overflow: visible; } /* per-scene placement tweaks */ #stage.sc-hammock #prop { left: 42%; bottom: 2%; width: clamp(200px, 48vh, 400px); z-index: 19; } #stage.sc-hammock #friend { left: 51%; bottom: 9%; width: clamp(130px, 30vh, 225px); } #stage.sc-dive #prop { left: 47%; bottom: 1%; width: clamp(180px, 42vh, 330px); z-index: 19; } #stage.sc-dive #friend { left: 52%; bottom: 26%; width: clamp(115px, 26vh, 200px); } #stage.sc-raincloud #prop { left: 48%; bottom: 42%; z-index: 25; } #stage.sc-thunder #prop { left: 22%; bottom: 46%; z-index: 25; } #stage.sc-fireflies #prop { left: 50%; bottom: 28%; z-index: 25; } #stage.sc-balloon #prop { left: 34%; bottom: 14%; } #stage.sc-party #prop { left: 24%; bottom: 3%; width: clamp(150px, 34vh, 260px); } #kip-guide { position: absolute; left: 2%; bottom: 2%; width: clamp(96px, 20vh, 160px); z-index: 30; transition: transform 0.9s ease-in-out; } #kip-guide svg { width: 100%; height: auto; display: block; } #kip-guide.trot { transform: translateX(26vw) scale(0.96); } #stage-fore { position: absolute; inset: 0; pointer-events: none; z-index: 40; } /* hearts meter */ #hearts { position: absolute; top: 12px; left: 14px; display: flex; gap: 7px; background: rgba(255, 255, 255, 0.55); border-radius: 30px; padding: 7px 13px; z-index: 60; backdrop-filter: blur(2px); } #hearts .hh { width: clamp(24px, 3.6vh, 34px); height: clamp(24px, 3.6vh, 34px); } #hearts .hh svg { width: 100%; height: 100%; display: block; } #hearts .hh .fill { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; transition: transform 0.4s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.2s; } #hearts .hh.filled .fill { opacity: 1; transform: scale(1); } #hearts.pulse { animation: ff-meterpulse 0.7s ease-in-out; } @keyframes ff-meterpulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } } /* big feeling word */ #feeling-word { position: absolute; top: 16%; left: 0; right: 0; text-align: center; font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: bold; letter-spacing: 2px; z-index: 55; pointer-events: none; opacity: 0; text-shadow: -3px -3px 0 var(--word-glow), 3px -3px 0 var(--word-glow), -3px 3px 0 var(--word-glow), 3px 3px 0 var(--word-glow), 0 8px 18px rgba(74, 59, 92, 0.35); } #feeling-word.show { animation: ff-wordpop 2.4s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; } #feeling-word.grad { background: linear-gradient(100deg, #E63946, #FF7BAC); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)) drop-shadow(0 6px 12px rgba(74, 59, 92, 0.3)); } @keyframes ff-wordpop { 0% { opacity: 0; transform: scale(0.3) rotate(-6deg); } 12% { opacity: 1; transform: scale(1.15) rotate(2deg); } 20% { transform: scale(1) rotate(0); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.92) translateY(-14px); } } /* Kip caption bubble */ #caption { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); max-width: min(64vw, 520px); background: rgba(255, 252, 244, 0.94); border-radius: 18px; padding: 8px 16px; font-size: clamp(0.85rem, 2vw, 1.05rem); font-weight: bold; color: var(--gk-text); box-shadow: 0 4px 14px rgba(74, 59, 92, 0.22); z-index: 58; opacity: 0; transition: opacity 0.35s; pointer-events: none; text-align: center; } #caption.show { opacity: 1; } #caption::before { content: "🦊 "; } /* talk-together bubble */ #talk-bubble { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); background: #FFFDF6; border-radius: 26px; padding: 18px 26px; box-shadow: 0 12px 30px rgba(74, 59, 92, 0.3); z-index: 62; text-align: center; max-width: min(74vw, 460px); animation: ff-bubblein 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); } #talk-bubble::after { content: ""; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); border: 10px solid transparent; border-top: 12px solid #FFFDF6; border-bottom: 0; } #talk-bubble .tb-icon { font-size: clamp(1.8rem, 4.5vw, 2.6rem); animation: gk-bob 2s ease-in-out infinite; } #talk-bubble .tb-text { font-size: clamp(1.05rem, 2.6vw, 1.4rem); font-weight: bold; color: var(--gk-text); margin-top: 4px; } #talk-bubble .tb-hint { font-size: 0.8rem; opacity: 0.55; margin-top: 6px; } @keyframes ff-bubblein { from { opacity: 0; transform: translateX(-50%) scale(0.6) translateY(18px); } to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); } } /* thunder flash */ #flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; z-index: 65; } #flash.go { animation: ff-flash 1s ease-out; } @keyframes ff-flash { 0% { opacity: 0; } 6% { opacity: 0.75; } 14% { opacity: 0.05; } 22% { opacity: 0.5; } 40%, 100% { opacity: 0; } } /* floating fx */ #fx { position: absolute; inset: 0; pointer-events: none; z-index: 70; } .fx-heart { position: absolute; font-size: clamp(1.4rem, 3.6vh, 2.2rem); animation: ff-floatup 1.9s ease-out forwards; } .fx-note { position: absolute; font-size: clamp(1.2rem, 3vh, 1.8rem); animation: ff-floatup 2.2s ease-out forwards; } @keyframes ff-floatup { 0% { opacity: 0; transform: translateY(6px) scale(0.5); } 14% { opacity: 1; transform: translateY(-8px) scale(1.05) rotate(-6deg); } 100% { opacity: 0; transform: translateY(-19vh) scale(1) rotate(8deg); } } .fx-fly { position: fixed; z-index: 930; pointer-events: none; transition: transform 0.8s cubic-bezier(0.5, -0.1, 0.3, 1), opacity 0.3s 0.62s; } /* ── PLAY: tray ────────────────────────────────────────── */ #tray { position: absolute; bottom: 0; left: 0; right: 0; height: 42%; z-index: 50; } #tray-board { position: absolute; inset: 8px 10px 10px; background: repeating-linear-gradient(to bottom, rgba(160, 120, 60, 0.06) 0 3px, transparent 3px 26px), url(""); background-color: var(--tray-bg); background-image: repeating-linear-gradient(to right, transparent 0 23%, rgba(178, 138, 82, 0.14) 23% calc(23% + 3px), transparent calc(23% + 3px) 46%), linear-gradient(to bottom, #FFF9EB, var(--tray-slat)); border-radius: 26px; border: 5px solid var(--tray-edge); box-shadow: 0 -8px 24px rgba(74, 59, 92, 0.18), inset 0 4px 0 rgba(255, 255, 255, 0.75), inset 0 -8px 16px rgba(178, 138, 82, 0.18); display: flex; align-items: center; justify-content: center; } /* little sign nails */ #tray-board::before, #tray-board::after { content: ""; position: absolute; top: 10px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E8CFA0, #B28A52); box-shadow: inset 0 -2px 3px rgba(90, 60, 20, 0.4); } #tray-board::before { left: 16px; } #tray-board::after { right: 16px; } #tray-items { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 34px); flex-wrap: wrap; padding: 6px 70px; width: 100%; } /* emotion badge coins */ button.badge { position: relative; width: clamp(104px, 15vw, 138px); height: clamp(118px, 17vw, 154px); border: none; background: transparent; cursor: pointer; padding: 0; opacity: 0; transform: scale(0.2); -webkit-tap-highlight-color: transparent; } button.badge.in { animation: ff-badgein 0.45s cubic-bezier(0.2, 1.55, 0.4, 1) forwards; } @keyframes ff-badgein { from { opacity: 0; transform: scale(0.2) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } button.badge.idle .badge-inner { animation: gk-bob 2.6s ease-in-out infinite; } button.badge .badge-inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; } button.badge svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(74, 59, 92, 0.28)); } button.badge:active .badge-inner { transform: scale(0.93); } button.badge.wiggle { animation: ff-shrug 0.7s ease-in-out; opacity: 1; transform: scale(1); } @keyframes ff-shrug { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg) translateY(-4px); } 45% { transform: rotate(8deg) translateY(-6px); } 70% { transform: rotate(-5deg); } } button.badge.glow-hint .badge-inner { animation: ff-hintglow 1.1s ease-in-out infinite; border-radius: 50%; } @keyframes ff-hintglow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 236, 150, 0.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 22px rgba(255, 220, 90, 1)); transform: scale(1.08); } } button.badge:disabled { cursor: default; } button.badge.dim { opacity: 0.35; transition: opacity 0.4s; } /* kindness cards */ button.card { width: clamp(140px, 20vw, 196px); height: clamp(120px, 17vw, 158px); border: none; border-radius: 22px; background: linear-gradient(to bottom, #FFFFFF, #FDF3FF); box-shadow: 0 8px 0 #E3CBEE, 0 12px 22px rgba(74, 59, 92, 0.25), inset 0 0 0 4px #F3E3FA; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; opacity: 0; transform: scale(0.2); transition: transform 0.15s; } button.card.in { animation: ff-badgein 0.45s cubic-bezier(0.2, 1.55, 0.4, 1) forwards; } button.card.idle { animation: ff-badgein 0.45s cubic-bezier(0.2, 1.55, 0.4, 1) forwards; } button.card:active { transform: scale(0.94); } button.card .card-pic { width: clamp(64px, 9vw, 86px); height: clamp(64px, 9vw, 86px); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #FFF6D9, #FFE3A8); box-shadow: inset 0 -4px 8px rgba(200, 150, 60, 0.25); display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 4.6vw, 2.8rem); } button.card .card-label { font-size: clamp(0.82rem, 1.8vw, 1.02rem); font-weight: bold; color: var(--gk-text); line-height: 1.1; text-align: center; } button.card.wiggle { animation: ff-shrug 0.7s ease-in-out; opacity: 1; transform: scale(1); } button.card.glow-hint { animation: ff-hintglow 1.1s ease-in-out infinite; opacity: 1; transform: scale(1); } button.card:disabled { cursor: default; } #btn-again { position: absolute; right: 22px; bottom: 20px; width: 64px; height: 64px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 14px rgba(90, 60, 130, 0.3), inset 0 0 0 3px #EAD9F5; font-size: 1.7rem; cursor: pointer; z-index: 55; transition: transform 0.15s; } #btn-again:hover { transform: scale(1.1) rotate(-20deg); } #btn-again:active { transform: scale(0.9); } /* ── characters ────────────────────────────────────────── */ .frig .bob { animation: ff-idle 3.2s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; } @keyframes ff-idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.008, 0.992); } } .f-lid { transform: scaleY(0); transform-origin: center top; transform-box: fill-box; animation: ff-blink 4.2s infinite; } .kip-lid { transform: scaleY(0); transform-origin: center top; transform-box: fill-box; animation: ff-blink 3.6s infinite 0.9s; } @keyframes ff-blink { 0%, 92%, 100% { transform: scaleY(0); } 94%, 97% { transform: scaleY(1); } } .ear-l, .ear-r { transform-box: fill-box; transition: transform 0.5s ease; } .ear-l { transform-origin: center bottom; } .ear-r { transform-origin: center bottom; } .friend.emo-sad .ear-l { transform: rotate(-16deg) translateY(5px); } .friend.emo-sad .ear-r { transform: rotate(16deg) translateY(5px); } .friend.emo-scared .ear-l { transform: rotate(-11deg) translateY(3px); } .friend.emo-scared .ear-r { transform: rotate(11deg) translateY(3px); } .f-headgrp { transform-box: fill-box; transition: transform 0.5s ease; } .friend.f-tino.emo-scared .f-headgrp { transform: translateY(30px) scale(0.82); transform-origin: center bottom; } .f-tear { animation: ff-teardrip 2.2s ease-in infinite; transform-box: fill-box; } @keyframes ff-teardrip { 0%, 55% { transform: translateY(0); opacity: 0; } 65% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } } .f-sparkle { animation: gk-twinkle 1.4s ease-in-out infinite; } /* one-shot reactions (JS adds .react-*) */ .friend.react-bounce .bob { animation: ff-rbounce 0.8s cubic-bezier(0.3, 1.6, 0.4, 1) 2; } @keyframes ff-rbounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-22px) scale(0.96, 1.05); } 70% { transform: translateY(0) scale(1.05, 0.94); } } .friend.react-droop .bob { animation: ff-rdroop 1.4s ease-in-out; } @keyframes ff-rdroop { 0% { transform: translateY(0); } 40%, 70% { transform: translateY(9px) scale(1.02, 0.97); } 100% { transform: translateY(0); } } .friend.react-stomp .bob { animation: ff-rstomp 0.9s ease-in-out; } @keyframes ff-rstomp { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-6px, -8px) rotate(-3deg); } 30% { transform: translate(0, 0); } 45% { transform: translate(6px, -8px) rotate(3deg); } 60% { transform: translate(0, 0); } 75% { transform: translate(-4px, -5px) rotate(-2deg); } } .friend.react-shiver .bob { animation: ff-rshiver 0.9s linear 2; } @keyframes ff-rshiver { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) rotate(-1.4deg); } 40% { transform: translateX(4px) rotate(1.4deg); } 60% { transform: translateX(-4px) rotate(-1.4deg); } 80% { transform: translateX(4px) rotate(1.4deg); } } .friend.react-sway .bob { animation: ff-rsway 3.2s ease-in-out infinite; } @keyframes ff-rsway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } } .friend.react-jump .bob { animation: ff-rjump 0.7s cubic-bezier(0.3, 1.7, 0.4, 1); } @keyframes ff-rjump { 0% { transform: translateY(0); } 30% { transform: translateY(-26px) scale(0.97, 1.06); } 60% { transform: translateY(2px) scale(1.05, 0.94); } 100% { transform: translateY(0); } } .f-facepos .boing { animation: ff-boing 0.5s cubic-bezier(0.2, 1.8, 0.4, 1); transform-origin: center; transform-box: fill-box; } @keyframes ff-boing { 0% { transform: scale(0.55); } 100% { transform: scale(1); } } /* Kip */ .kip-tail-fill { fill: var(--tailc, #DCEBF7); } .kip-tailgrp circle { transition: fill 0.7s ease; } .kip-rig .kip-tailgrp { transform-box: fill-box; transform-origin: left center; } .kip-wag .kip-tailgrp { animation: ff-wag 0.5s ease-in-out 3; } @keyframes ff-wag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } } .kip-hop .kip-rig { animation: ff-rjump 0.7s cubic-bezier(0.3, 1.7, 0.4, 1) 2; transform-origin: center bottom; transform-box: fill-box; } .kip-mouth-o, .kip-mouth-sad { display: none; } .kip-gasp .kip-mouth-o { display: block; } .kip-gasp .kip-mouth-smile { display: none; } .kip-sad .kip-mouth-sad { display: block; } .kip-sad .kip-mouth-smile { display: none; } #kip-guide .kip-rig { animation: ff-idle 3.4s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; } /* ── props ─────────────────────────────────────────────── */ .prp { overflow: visible; } /* ice cream */ .scoop { transform-box: fill-box; transform-origin: center; } .acted .scoop { animation: ff-plop 1.1s cubic-bezier(0.5, 0, 0.8, 0.4) forwards; } @keyframes ff-plop { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(3px, -6px) rotate(9deg); } 45% { transform: translate(-2px, -3px) rotate(-11deg); } 100% { transform: translate(14px, 96px) rotate(30deg) scale(1.06, 0.82); } } .splat { opacity: 0; } .acted .splat { animation: ff-appear 0.3s 1.05s forwards; } @keyframes ff-appear { to { opacity: 1; } } /* present */ .lid { transform-box: fill-box; transform-origin: center bottom; } .acted .lid { animation: ff-lidpop 0.9s cubic-bezier(0.3, 1.5, 0.4, 1) 0.5s forwards; } @keyframes ff-lidpop { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(26px, -52px) rotate(24deg); } } .burst { opacity: 0; transform-box: fill-box; transform-origin: center; } .acted .burst { animation: ff-burst 0.9s 0.68s forwards; } @keyframes ff-burst { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) translateY(-14px); } } /* tower + ball */ .t-ball { transform-box: fill-box; } .acted .t-ball { animation: ff-ballroll 0.9s cubic-bezier(0.4, 0, 0.7, 1) forwards; } @keyframes ff-ballroll { 0% { transform: translateX(-170px) rotate(0turn); } 100% { transform: translateX(0) rotate(2turn); } } .blk { transform-box: fill-box; transform-origin: center; transition: transform 0.55s cubic-bezier(0.4, 0, 0.6, 1); } .acted .blk1 { transform: translate(-44px, 66px) rotate(-72deg); transition-delay: 0.82s; } .acted .blk2 { transform: translate(38px, 44px) rotate(58deg); transition-delay: 0.86s; } .acted .blk3 { transform: translate(-28px, 24px) rotate(-38deg); transition-delay: 0.92s; } .acted .blk4 { transform: translate(30px, 12px) rotate(24deg); transition-delay: 0.98s; } .rebuilt .blk { transform: none !important; transition-delay: 0s !important; transition-duration: 0.7s; } /* balloon */ .bl-grp { transform-box: fill-box; transform-origin: center bottom; animation: ff-sway 4s ease-in-out infinite; } .acted .bl-grp { animation: ff-flyaway 2.6s ease-in 0.4s forwards; } @keyframes ff-flyaway { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(60px, -46vh) rotate(14deg); opacity: 0; } } .gift-balloon { opacity: 0; transform-box: fill-box; transform-origin: center bottom; } .paid .gift-balloon { animation: ff-giftin 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; } @keyframes ff-giftin { from { opacity: 0; transform: scale(0.2) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* rain cloud + umbrella */ .rc-drops line { stroke-dasharray: 10 18; animation: ff-dropfall 0.7s linear infinite; } @keyframes ff-dropfall { to { stroke-dashoffset: -28; } } .umb { opacity: 0; transform-box: fill-box; transform-origin: center bottom; } .paid .umb { animation: ff-giftin 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; } .paid .rc-drops { opacity: 0.35; transition: opacity 0.6s; } /* thunder */ .bolt { opacity: 0; transform-box: fill-box; transform-origin: center top; } .acted .bolt { animation: ff-bolt 1.1s ease-out 0.15s; } @keyframes ff-bolt { 0% { opacity: 0; } 8% { opacity: 1; transform: scaleY(1); } 20% { opacity: 0.2; } 30% { opacity: 1; } 55%, 100% { opacity: 0; } } /* dog */ .dog-grp { transform-box: fill-box; transform-origin: center bottom; } .acted .dog-grp { animation: ff-dogbark 0.55s ease-in-out 3; } @keyframes ff-dogbark { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px) rotate(-2deg); } } .bark { opacity: 0; } .acted .bark { animation: gk-twinkle 0.55s ease-in-out 3; } .owner { opacity: 0; transform-box: fill-box; } .paid .owner { animation: ff-giftin 0.8s ease-out forwards; } .owner .o-arm { transform-box: fill-box; transform-origin: bottom center; animation: ff-wave 0.9s ease-in-out infinite; } @keyframes ff-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(26deg); } } /* mushroom */ .shroom { transform-box: fill-box; transform-origin: center bottom; } .acted .shroom { animation: ff-grow 1.2s cubic-bezier(0.3, 1.5, 0.4, 1) 0.3s both; } @keyframes ff-grow { from { transform: scale(0.25); } to { transform: scale(1); } } /* party friends */ .pp-head { transform-box: fill-box; transform-origin: center bottom; transform: translateY(74px) scale(0.6); opacity: 0; } .acted .pp-head { animation: ff-ppjump 0.8s cubic-bezier(0.3, 1.6, 0.4, 1) forwards; } .acted .pp-head.p2 { animation-delay: 0.12s; } .acted .pp-head.p3 { animation-delay: 0.24s; } @keyframes ff-ppjump { from { transform: translateY(74px) scale(0.6); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* cake */ .flame { animation: ff-flame 0.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; } /* hammock sway */ .ham-grp { transform-box: fill-box; transform-origin: center top; animation: ff-hamsway 5s ease-in-out infinite; } @keyframes ff-hamsway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } /* teddy */ .teddy-grp { transform-box: fill-box; transform-origin: center bottom; } .acted .teddy-grp { animation: ff-rjump 0.8s cubic-bezier(0.3, 1.6, 0.4, 1) 0.4s; } /* pond ripple (dive) */ .ripple { transform-box: fill-box; transform-origin: center; animation: ff-ripple 3s ease-out infinite; } @keyframes ff-ripple { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } } /* firefly prop dots */ .ffly { transform-box: fill-box; animation: ff-firefly 6s ease-in-out infinite; } .ffly.f2 { animation-delay: -2s; } .ffly.f3 { animation-delay: -4s; } /* ── HOW-TO overlay hint ───────────────────────────────── */ #caption.big { font-size: clamp(1rem, 2.6vw, 1.3rem); padding: 12px 22px; } /* ── grown-ups overlay ─────────────────────────────────── */ #info-overlay { position: fixed; inset: 0; background: rgba(74, 59, 92, 0.5); z-index: 920; display: flex; align-items: center; justify-content: center; animation: gk-fade-in 0.25s ease-out; } #info-card { position: relative; max-width: min(92vw, 560px); max-height: 86vh; overflow-y: auto; padding: 26px 30px 22px; animation: gk-pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } #info-card h2 { color: var(--gk-purple); margin-bottom: 10px; font-size: 1.4rem; } #info-card p { font-size: 0.98rem; line-height: 1.45; margin-bottom: 10px; } #info-card .turns { background: #F6EDFC; border-radius: 14px; padding: 10px 14px; } #legend { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; margin: 12px 0 14px; } .legend-chip { display: flex; flex-direction: column; align-items: center; width: 58px; font-size: 0.68rem; font-weight: bold; } .legend-chip svg { width: 44px; height: 44px; } #info-close { position: sticky; bottom: 0; display: block; margin: 10px auto 0; width: 100%; min-height: 64px; border: none; border-radius: 20px; background: linear-gradient(135deg, var(--gk-pink), var(--gk-purple)); color: #fff; font-size: 1.5rem; font-weight: bold; cursor: pointer; box-shadow: 0 6px 16px rgba(181, 101, 216, 0.45); } /* ── reduced motion ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cloud, .sun-rays, .treeline, .fore-grass .blade-grp, .frig .bob, .firefly, .star-dot, .camp-glow, .campfire .flame, .flame, #btn-play, .garland-chip, button.badge.idle .badge-inner, .ham-grp, .bl-grp, .rain, #start-kip .kip-rig, #kip-guide .kip-rig, #screen-start .kip-tail-fill, .ffly { animation: none !important; } } /* ── responsive nudges ─────────────────────────────────── */ @media (max-width: 860px) { #start-kip { width: clamp(120px, 19vw, 170px); } #tray-items { padding: 6px 8px 60px; } #btn-again { bottom: 12px; right: 14px; } } @media (max-height: 820px) and (orientation: landscape) { #postcards { margin-top: 0; } }