/* How are you today? (js/scenes/feelings.js): five weather tiles with faces across the scene, a pastel sky behind.
   The words are the whole width here, so the tiles can be big enough to point at from the back of the room. */
.sc-feelings { --title: #2E2A55; --card-ink: #2E2A55; --accent: #FFC86B; --ink: #2E2A55; --chip: rgba(255,255,255,.55); --chip-line: rgba(46,42,85,.18); background: #FCE8F1; }
.sc-feelings .sc-title { text-shadow: 0 6px 30px rgba(255,255,255,.7); }
.sc-feelings .sc-content { width: auto; right: clamp(20px, 4.5cqw, 80px); min-width: 0; }
.fe-glow { transform-box: fill-box; transform-origin: center; animation: feGlow 9s ease-in-out infinite alternate; }
@keyframes feGlow { to { transform: scale(1.08); opacity: .8; } }
.fe-rainbow { opacity: .16; }
.fe-skycloud { fill: #FFFFFF; opacity: .75; animation: feCloud var(--t) ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes feCloud { from { transform: translate(-130px, -60px); } to { transform: translate(-10px, -60px); } }
.fe-hill { fill: #BFE5C2; } .fe-hill.far { fill: #D7EDD2; }
.fe-stem { stroke: #7CC08A; stroke-width: 3; stroke-linecap: round; }
.fe-flower { transform-box: fill-box; transform-origin: 50% 100%; animation: feFlower 4.6s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes feFlower { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.fe-petals.c0 circle { fill: #FF9EB5; } .fe-petals.c1 circle { fill: #FFFFFF; } .fe-petals.c2 circle { fill: #B9A6F7; } .fe-petals.c3 circle { fill: #FFC86B; }
.fe-petals .fe-mid { fill: #FFD84D; }
.fe-fly { animation: feFlyPath 42s linear infinite; animation-delay: -12s; }
@keyframes feFlyPath { 0% { transform: translate(-60px, 520px); } 25% { transform: translate(400px, 380px); } 50% { transform: translate(820px, 470px); } 75% { transform: translate(1240px, 330px); } 100% { transform: translate(1680px, 420px); } }
.fe-fly-in { animation: feBob 2.2s ease-in-out infinite alternate; }
@keyframes feBob { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
.fe-wing { fill: #FF9EB5; transform-box: fill-box; animation: feFlap .28s ease-in-out infinite alternate; }
.fe-wing.l { transform-origin: 100% 50%; } .fe-wing.r { transform-origin: 0 50%; fill: #FFB8C9; }
@keyframes feFlap { to { transform: scaleX(.25); } }
.fe-body { stroke: #4A3A5A; stroke-width: 3.5; stroke-linecap: round; }

/* the question and the five tiles */
.fe-ask { margin: auto 0 0; max-width: 60ch; padding: clamp(8px, 1.4cqh, 14px) clamp(14px, 2cqw, 24px); border-radius: 999px; align-self: flex-start; background: rgba(255,255,255,.7); color: var(--card-ink); font-weight: 800; font-size: clamp(15px, 2.6cqh, 30px); }
.fe-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.6cqw, 28px); }
.fe-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1cqh, 12px); padding: clamp(10px, 2cqh, 26px) clamp(6px, 1cqw, 16px) clamp(12px, 2.2cqh, 28px); border-radius: clamp(18px, 3cqh, 34px); background: linear-gradient(180deg, var(--tint), rgba(255,255,255,.92) 70%); box-shadow: 0 24px 50px -30px rgba(46,42,85,.55); color: var(--card-ink); cursor: pointer; user-select: none; animation: feIn .7s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--k) * .08s); }
@keyframes feIn { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.fe-tile:focus-visible { outline: 4px solid var(--card-ink); outline-offset: 3px; }
.fe-tile.w0 { --tint: #FFE69A; } .fe-tile.w1 { --tint: #FFF0C6; } .fe-tile.w2 { --tint: #E2EAF4; } .fe-tile.w3 { --tint: #CFE0F6; } .fe-tile.w4 { --tint: #DDD3F2; }
.fe-tile svg { width: 100%; max-height: 26cqh; aspect-ratio: 140 / 124; overflow: visible; }
.fe-word { font-weight: 900; font-size: clamp(14px, 3cqh, 34px); line-height: 1.1; text-align: center; }
.fe-count { position: absolute; top: -10px; right: -6px; min-width: 1.9em; padding: .25em .5em; border-radius: 999px; background: var(--card-ink); color: #FFFFFF; font-size: clamp(14px, 2.6cqh, 28px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.fe-count:not([hidden]) { animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
.fe-tile.is-pop { animation: fePop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes fePop { 40% { transform: translateY(-14px) scale(1.04); } }
.sc-feelings.is-editing .fe-tile { cursor: default; }
.sc-feelings.is-editing [data-field="mood"] { outline-color: rgba(46,42,85,.35); }

/* the weather */
.fe-line { fill: none; stroke: #3A2E4A; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.fe-face circle { fill: #3A2E4A; } .fe-cheek { fill: #FF8E9E; opacity: .5; }
.fe-sunball { fill: #FFC93C; stroke: #F5A623; stroke-width: 3; }
.fe-rays { fill: none; stroke: #FFB830; stroke-width: 7; stroke-linecap: round; transform-box: view-box; transform-origin: 70px 62px; animation: feSpin 30s linear infinite; }
.fe-rays.small { transform-origin: 92px 42px; stroke-width: 6; }
@keyframes feSpin { to { transform: rotate(360deg); } }
.fe-sun { animation: feBob 3s ease-in-out infinite alternate; }
.fe-sun .fe-face { transform-box: fill-box; transform-origin: center; }
.fe-cloud { stroke-width: 3; stroke-linejoin: round; }
.fe-cloud.light { fill: #FFFFFF; stroke: #D3DDEB; } .fe-cloud.mid { fill: #F1F4F9; stroke: #C5D0DF; } .fe-cloud.dark { fill: #B9C8DD; stroke: #93A6C2; } .fe-cloud.storm { fill: #8E89AE; stroke: #6E6893; }
.fe-drift { animation: feDrift 6s ease-in-out infinite alternate; } .fe-drift.slow { animation-duration: 9s; }
@keyframes feDrift { from { transform: translateX(-6px); } to { transform: translateX(8px); } }
.fe-peek { animation: fePeek 6s ease-in-out infinite alternate; }
@keyframes fePeek { from { transform: translate(-4px, 4px); } to { transform: translate(4px, -2px); } }
.fe-sway { animation: feDrift 7s ease-in-out infinite alternate; }
.fe-dropf { fill: #6FA3E6; animation: feDrop 1.4s ease-in infinite; animation-delay: var(--d); }
@keyframes feDrop { 0% { transform: translateY(-14px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.fe-bolt { fill: #FFD84D; stroke: #F5A623; stroke-width: 2; stroke-linejoin: round; opacity: 0; animation: feBolt 4s steps(1) infinite; }
@keyframes feBolt { 0%, 70% { opacity: 0; } 72% { opacity: 1; } 76% { opacity: 0; } 79%, 86% { opacity: 1; } 88%, 100% { opacity: 0; } }
.fe-shake { animation: feShake 4s ease-in-out infinite; }
@keyframes feShake { 0%, 66%, 100% { transform: translate(0); } 70% { transform: translate(-2px, 1px); } 74% { transform: translate(2px, -1px); } 78% { transform: translate(-1px, 0); } }

@container (max-aspect-ratio: 1.15) {
  .sc-feelings .sc-content { right: clamp(16px, 4cqw, 40px); }
  .fe-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fe-tile { grid-column: span 2; } .fe-tile.w3 { grid-column: 2 / span 2; }
  .fe-tile svg { max-height: 14cqh; }
  .fe-word { font-size: clamp(13px, 3.6cqw, 24px); }
  .fe-ask { font-size: clamp(14px, 3.6cqw, 22px); border-radius: 20px; }
}