/* Layering Lab: staged analysis, tiered rating, factor meters and style-preserving swaps. */
@property --rating { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
:root { --lt-exceptional: #d9a441; --lt-strong: #2fa37a; --lt-good: #3b82c4; --lt-tuning: #d9822b; --lt-risky: #cf4a55; }

#layer-rating { --tier: var(--accent-color); position: relative; overflow: hidden; padding: 18px; border-radius: 18px; background: linear-gradient(160deg,var(--bg-card),var(--bg-surface)); box-shadow: 0 14px 34px -24px color-mix(in srgb,var(--ink) 45%,transparent); }
#layer-rating[data-tier=exceptional] { --tier: var(--lt-exceptional); }
#layer-rating[data-tier=strong] { --tier: var(--lt-strong); }
#layer-rating[data-tier=good] { --tier: var(--lt-good); }
#layer-rating[data-tier=tuning] { --tier: var(--lt-tuning); }
#layer-rating[data-tier=risky] { --tier: var(--lt-risky); }
#layer-rating .layer-live-dial { flex-basis: 96px; height: 96px; background: radial-gradient(circle,var(--bg-card) 62%,transparent 64%),conic-gradient(var(--tier) var(--rating),color-mix(in srgb,var(--line) 80%,transparent) 0); box-shadow: 0 0 0 1px var(--line),0 10px 26px -12px var(--tier); animation: lt-fill 1.2s cubic-bezier(.2,.8,.2,1) both; animation-delay: 2.9s; }
#layer-rating .layer-live-dial output { font-size: 2.7rem; animation: lt-pop .6s cubic-bezier(.2,1.3,.3,1) both; animation-delay: 3.1s; }
#layer-rating .layer-live-scorecopy h3 { font-size: 1.12rem; color: var(--tier); }
#layer-rating .layer-live-kicker { color: var(--muted); }
@keyframes lt-fill { from { --rating: 0%; } }
@keyframes lt-pop { from { opacity: 0; transform: scale(.55); filter: blur(5px); } }

/* Process strip: five stages light up in turn before the score lands. */
.layer-process { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; padding: 0 0 12px; list-style: none; border-bottom: 1px dashed var(--line); font-size: .6rem; letter-spacing: .04em; color: var(--muted); }
.layer-process li { display: inline-flex; align-items: center; gap: 6px; opacity: .35; animation: lt-step .42s ease forwards; animation-delay: calc(var(--s) * .6s); }
.layer-process li span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); animation: lt-dot .42s ease forwards; animation-delay: calc(var(--s) * .6s); }
@keyframes lt-step { 40% { opacity: 1; color: var(--ink); } to { opacity: .7; color: var(--muted); } }
@keyframes lt-dot { 40% { transform: scale(1.7); background: var(--tier); box-shadow: 0 0 0 5px color-mix(in srgb,var(--tier) 22%,transparent); } to { background: var(--tier); transform: none; box-shadow: none; } }

/* Factor meters */
.layer-live-factors { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 8px; margin-top: 16px; }
.layer-factor { all: unset; box-sizing: border-box; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); cursor: pointer; transition: border-color .2s,transform .2s,box-shadow .2s; opacity: 0; animation: lt-rise .5s ease forwards; animation-delay: calc(3s + var(--i) * .1s); }
.layer-factor:hover, .layer-factor:focus-visible { border-color: var(--tier); transform: translateY(-1px); box-shadow: 0 8px 18px -12px var(--tier); }
.layer-factor:focus-visible { outline: 2px solid var(--tier); outline-offset: 2px; }
.layer-factor-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .68rem; color: var(--ink); }
.layer-factor-top b { font-variant-numeric: tabular-nums; }
.layer-factor-top small { color: var(--muted); font-weight: 400; }
.layer-factor-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb,var(--line) 70%,transparent); overflow: hidden; }
.layer-factor-bar i { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg,color-mix(in srgb,var(--tier) 55%,transparent),var(--tier)); transform-origin: left; animation: lt-grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(3.1s + var(--i) * .1s); }
.layer-factor-detail { display: none; font-size: .62rem; line-height: 1.5; color: var(--muted); }
.layer-factor[aria-expanded=true] .layer-factor-detail { display: block; }
@keyframes lt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lt-grow { from { transform: scaleX(0); } }


/* Keep my style, improve it */
.layer-fix { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); }
.layer-fix[data-low=true][data-state=idle] { border-color: color-mix(in srgb,var(--lt-tuning) 55%,var(--line)); background: linear-gradient(135deg,color-mix(in srgb,var(--lt-tuning) 9%,var(--bg-card)),var(--bg-card)); }
.layer-fix-pitch { display: flex; gap: 12px; align-items: flex-start; }
.layer-fix-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb,var(--accent-color) 14%,transparent); color: var(--accent-color); }
.layer-fix-icon svg, .layer-fix-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.layer-fix h4 { margin: 0 0 3px; font: 600 .95rem/1.3 system-ui,sans-serif; color: var(--ink); }
.layer-fix p { margin: 0; font-size: .68rem; line-height: 1.55; color: var(--muted); }
.layer-fix-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 18px; border-radius: 99px; position: relative; overflow: hidden; }
.layer-fix[data-low=true] .layer-fix-go { animation: lt-nudge 2.6s ease-in-out infinite; }
.layer-fix-go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 30%,rgb(255 255 255 / .35) 50%,transparent 70%); transform: translateX(-120%); animation: lt-sheen 3.4s ease-in-out infinite; pointer-events: none; }
@keyframes lt-nudge { 50% { box-shadow: 0 0 0 7px color-mix(in srgb,var(--accent-color) 16%,transparent); } }
@keyframes lt-sheen { 60%, 100% { transform: translateX(120%); } }
.layer-fix-applied { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb,var(--lt-strong) 12%,transparent); }
.layer-fix-applied span { color: var(--lt-strong); font-weight: 600; }

.layer-fix-working { display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; }
@keyframes lt-bar { from { width: 0; } to { width: 100%; } }
.layer-fix-working { position: relative; padding-bottom: 14px; }
.layer-fix-progress { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg,var(--accent-color),var(--lt-strong)); animation: lt-bar 3s linear forwards; }
.layer-fix-orbit { position: relative; width: 74px; height: 74px; animation: lt-spin 3s linear infinite; }
.layer-fix-orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-color); top: 0; left: 31px; transform-origin: 6px 37px; }
.layer-fix-orbit i:nth-child(2) { transform: rotate(120deg); opacity: .7; }
.layer-fix-orbit i:nth-child(3) { transform: rotate(240deg); opacity: .45; }
.layer-fix-working ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .7rem; color: var(--muted); }
.layer-fix-working li { display: flex; align-items: center; gap: 8px; opacity: .3; animation: lt-step .5s ease forwards; animation-delay: calc(var(--s) * .6s); }
.layer-fix-working li span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); }
@keyframes lt-spin { to { transform: rotate(360deg); } }

.layer-fix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.layer-fix-intro { margin: 6px 0 12px; }
.layer-fix-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; }
.layer-fix-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-surface); opacity: 0; animation: lt-rise .5s ease forwards; animation-delay: calc(var(--i) * .12s); transition: border-color .2s,transform .2s; }
.layer-fix-card:hover { border-color: var(--accent-color); transform: translateY(-2px); }
.layer-fix-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.layer-fix-label { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-color); font-weight: 600; }
.layer-fix-gain { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.layer-fix-gain svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.layer-fix-gain b { color: var(--lt-strong); font-size: 1.05rem; }
.layer-fix-gain em { font-style: normal; font-size: .62rem; padding: 2px 7px; border-radius: 99px; background: color-mix(in srgb,var(--lt-strong) 15%,transparent); color: var(--lt-strong); }
.layer-fix-swap { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: center; }
.layer-fix-side { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-card); }
.layer-fix-side[data-side=out] { opacity: .72; }
.layer-fix-side[data-side=in] { border-color: color-mix(in srgb,var(--lt-strong) 55%,var(--line)); }
.layer-fix-side > span:last-child { display: grid; min-width: 0; }
.layer-fix-side small { font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.layer-fix-side strong { font-size: .72rem; color: var(--ink); overflow-wrap: anywhere; }
.layer-fix-side i { font-style: normal; font-size: .58rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-fix-photo { flex: 0 0 34px; height: 42px; display: grid; place-items: center; }
.layer-fix-photo img { width: 34px; height: 42px; object-fit: contain; }
.layer-fix-photo svg { width: 22px; height: 22px; }
.layer-fix-link { color: var(--accent-color); justify-self: center; transform: rotate(90deg); line-height: 0; }
.layer-fix-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.layer-fix-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .58rem; color: var(--muted); }
.layer-fix-kept span { margin-right: 2px; }
.layer-fix-kept em { font-style: normal; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink); text-transform: capitalize; }
.layer-fix-kept small { margin-left: auto; color: var(--lt-strong); font-weight: 600; }
.layer-fix-apply { justify-self: start; border-radius: 99px; }

@media (max-width: 560px) {
  #layer-rating { padding: 14px; }
  #layer-rating .layer-live-dial { flex-basis: 78px; height: 78px; }
  #layer-rating .layer-live-dial output { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { #layer-rating *, .layer-fix *, #layer-animation * { animation-duration: .01s !important; animation-delay: 0s !important; } }
:root[data-motion=off] #layer-rating *, :root[data-motion=off] .layer-fix *, :root[data-motion=off] #layer-animation * { animation-duration: .01s !important; animation-delay: 0s !important; }

/* Bottle scene: a 3 second staged process. Each fragrance is read, the layers blend, the score lands. */
#layer-animation[data-analyzing=true] .layer-mix-channel .layer-mix-stream { opacity: .25; }
#layer-animation[data-stage="0"] [data-channel="0"] .layer-mix-stream, #layer-animation[data-stage="1"] [data-channel="1"] .layer-mix-stream, #layer-animation[data-stage="2"] [data-channel="2"] .layer-mix-stream { opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 6px var(--accent-color)); }
#layer-animation[data-stage="0"] [data-channel="0"] .layer-mix-source, #layer-animation[data-stage="1"] [data-channel="1"] .layer-mix-source, #layer-animation[data-stage="2"] [data-channel="2"] .layer-mix-source { stroke-width: 4; filter: drop-shadow(0 0 7px var(--accent-color)); }
#layer-animation[data-analyzing=true][data-stage="0"] .layer-mix-layer { opacity: .1; }
#layer-animation[data-stage=blend] .layer-mix-orbit { opacity: .9; animation-duration: 1.4s; }
#layer-animation[data-stage=blend] .layer-mix-aura { opacity: 1; transform: scale(1.25); transition: transform 1s, opacity 1s; }
#layer-animation[data-stage=score] .layer-mix-glass { filter: drop-shadow(0 0 14px var(--accent-color)); transition: filter .4s; }
#layer-animation[data-stage=done] .layer-mix-bottle { animation: lt-settle .9s ease-out; }
@keyframes lt-shake { 25% { transform: rotate(-3.5deg); } 75% { transform: rotate(3.5deg); } }
@keyframes lt-twinkle { 50% { opacity: .1; } }
@keyframes lt-settle { 40% { transform: translateY(-6px); } }
.layer-process-bar { position: relative; display: grid; gap: 6px; margin: 6px 4px 0; padding-top: 12px; }
.layer-process-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: color-mix(in srgb,var(--line) 80%,transparent); }
.layer-process-bar i { position: absolute; left: 0; top: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg,var(--mix-one,var(--accent-color)),var(--mix-two,var(--accent-color))); animation: lt-bar 3s linear forwards; box-shadow: 0 0 10px color-mix(in srgb,var(--accent-color) 60%,transparent); }
.layer-process-bar span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
#layer-animation[data-analyzing=true] .layer-process-bar span { color: var(--accent-color); }

/* Where to look for swaps */
.layer-fix-source { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
.layer-fix-source legend { grid-column: 1 / -1; padding: 0; margin-bottom: 6px; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.layer-fix-source label { position: relative; display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); cursor: pointer; transition: border-color .2s, background .2s; }
.layer-fix-source input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.layer-fix-source label:has(input:checked) { border-color: var(--accent-color); background: color-mix(in srgb,var(--accent-color) 9%,var(--bg-card)); box-shadow: inset 0 0 0 1px var(--accent-color); }
.layer-fix-source label:has(input:focus-visible) { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.layer-fix-source label[data-empty=true] { opacity: .5; cursor: not-allowed; }
.layer-fix-source span { font-size: .75rem; font-weight: 600; color: var(--ink); }
.layer-fix-source small { font-size: .6rem; color: var(--muted); }

/* Recipe book */
#panel-layering .recipe-subhead { margin: 20px 0 10px; font: 600 .7rem/1 system-ui,sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
#panel-layering .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 14px; }
#panel-layering .recipe-card { --tier: var(--accent-color); display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); box-shadow: 0 10px 26px -22px color-mix(in srgb,var(--ink) 50%,transparent); }
#panel-layering .recipe-card[data-tier=exceptional] { --tier: var(--lt-exceptional); }
#panel-layering .recipe-card[data-tier=strong] { --tier: var(--lt-strong); }
#panel-layering .recipe-card[data-tier=good] { --tier: var(--lt-good); }
#panel-layering .recipe-card[data-tier=tuning] { --tier: var(--lt-tuning); }
#panel-layering .recipe-card[data-tier=risky] { --tier: var(--lt-risky); }
.recipe-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.recipe-top > div:first-child { min-width: 0; }
#panel-layering .recipe-card h3 { margin: 4px 0 0; font: 600 1rem/1.25 var(--studio-serif,Georgia,serif); overflow-wrap: anywhere; color: var(--ink); }
.recipe-score { flex: 0 0 auto; display: grid; place-items: center; align-content: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle,var(--bg-card) 62%,transparent 64%),conic-gradient(var(--tier),var(--tier)); box-shadow: 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; line-height: 1; }
.recipe-score strong { font-size: 1.1rem; color: var(--ink); }
.recipe-score small { font-size: .5rem; color: var(--muted); }
.recipe-ratio { display: flex; gap: 3px; height: 6px; }
.recipe-ratio i { border-radius: 99px; background: var(--tier); opacity: calc(1 - var(--k) * .28); }
#panel-layering .recipe-bottles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 8px; margin: 0; }
#panel-layering .recipe-bottles .blend-bottle > div { height: 78px; border-radius: 12px; }
#panel-layering .recipe-bottles .blend-bottle figcaption { font-size: .66rem; }
#panel-layering .recipe-bottles .blend-bottle strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-verdict { margin: 0; font-size: .66rem; font-weight: 600; color: var(--tier); }
#panel-layering .recipe-card .recipe-note { margin: 0; padding: 8px 10px; border-left: 2px solid var(--line); font-size: .68rem; line-height: 1.5; }
#panel-layering .recipe-open { margin-top: auto; align-self: stretch; border-radius: 99px; }
.recipe-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1px dashed var(--line); border-radius: 18px; text-align: center; color: var(--muted); }
.recipe-empty span { display: flex; gap: 5px; margin-bottom: 4px; }
.recipe-empty i { width: 16px; height: 34px; border-radius: 4px 4px 7px 7px; border: 1.5px solid var(--line); }
.recipe-empty i:nth-child(2) { height: 42px; }
.recipe-empty strong { color: var(--ink); font-size: .85rem; }
.recipe-empty p { margin: 0; font-size: .7rem; }
#panel-layering .recipe-reviews { padding-top: 12px; border-top: 1px solid var(--line); font-size: .68rem; }

/* Layout: results live in the left column under the recipe fields; the scene stays in view on the right. */
#panel-layering .layering-layout { align-items: start; }
#panel-layering .layer-preview-card { position: sticky; top: 84px; }
.layer-results-stack { display: grid; gap: 12px; margin-top: 16px; }
.layer-results-stack #layer-rating, .layer-results-stack .layer-fix, .layer-results-stack #layer-coach { margin: 0; }
@media (max-width: 1000px) { #panel-layering .layer-preview-card { position: static; } }

/* Process scene: droplets travel in, layers fill from the bottom, the mix swirls, a scan line scores it. */
#layer-animation .layer-process-fx { pointer-events: none; }
#layer-animation .layer-drop { fill: var(--accent-color); opacity: 0; offset-distance: 0%; offset-rotate: 0deg; }
#layer-animation [data-drop-ch="0"] { fill: var(--mix-one,var(--accent-color)); }
#layer-animation [data-drop-ch="1"] { fill: var(--mix-two,var(--accent-color)); }
#layer-animation [data-drop-ch="2"] { fill: var(--mix-three,var(--accent-color)); }
#layer-animation[data-stage="0"] [data-drop-ch="0"], #layer-animation[data-stage="1"] [data-drop-ch="1"], #layer-animation[data-stage="2"] [data-drop-ch="2"] { animation: lt-travel .62s cubic-bezier(.5,0,.8,.6) forwards; animation-delay: calc(var(--k) * .07s); filter: drop-shadow(0 0 5px currentColor); }
@keyframes lt-travel { 0% { opacity: 0; offset-distance: 0%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }

#layer-animation[data-analyzing=true] .layer-mix-layer { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .55s cubic-bezier(.3,.9,.3,1); }
#layer-animation[data-analyzing=true][data-stage="0"] [data-liquid="0"],
#layer-animation[data-analyzing=true]:is([data-stage="1"],[data-stage="2"]) :is([data-liquid="0"],[data-liquid="1"]),
#layer-animation[data-analyzing=true][data-stage="2"] [data-liquid="2"],
#layer-animation[data-analyzing=true]:is([data-stage=blend],[data-stage=score]) .layer-mix-layer { transform: scaleY(1); }
#layer-animation[data-analyzing=true][data-stage="0"] [data-liquid="0"] { transition-delay: .4s; }
#layer-animation[data-analyzing=true][data-stage="1"] [data-liquid="1"], #layer-animation[data-analyzing=true][data-stage="2"] [data-liquid="2"] { transition-delay: .4s; }

#layer-animation[data-stage=blend] .layer-mix-bottle { animation: lt-shake .5s ease-in-out 2; transform-origin: 300px 300px; }
#layer-animation[data-stage=blend] .layer-mix-liquid { filter: blur(2.5px) saturate(1.4); transition: filter .5s; }
#layer-animation[data-stage=blend] :is(.layer-mix-wave,.layer-mix-wave-two) { animation-duration: .7s; }
#layer-animation[data-stage=blend] .layer-mix-orbit { opacity: .95; animation-duration: 1.2s; }
#layer-animation[data-stage=blend] .layer-mix-aura { opacity: 1; transform: scale(1.3); transition: transform 1s, opacity 1s; }
#layer-animation .layer-ripple { fill: none; stroke: var(--accent-color); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
#layer-animation[data-stage=blend] .layer-ripple { animation: lt-ripple .9s ease-out 2; }
#layer-animation[data-stage=blend] .layer-ripple-two { animation-delay: .3s; }
@keyframes lt-ripple { 0% { opacity: .85; transform: scale(.5); } 100% { opacity: 0; transform: scale(3.4); } }

#layer-animation .layer-scan { fill: var(--accent-color); opacity: 0; filter: blur(3px); }
#layer-animation[data-stage=score] .layer-scan { animation: lt-scan .7s ease-in-out forwards; }
@keyframes lt-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .85; } 85% { opacity: .85; } 100% { opacity: 0; transform: translateY(185px); } }
#layer-animation[data-stage=score] .layer-mix-glass { filter: drop-shadow(0 0 16px var(--accent-color)); }
#layer-animation[data-stage=score] .layer-mix-sparkles circle { animation: lt-twinkle .5s ease-in-out 2; }
#layer-animation[data-stage=done] .layer-mix-bottle { animation: lt-settle .9s ease-out; }

.layer-scene-score { position: absolute; right: 8%; top: 8%; display: flex; align-items: baseline; gap: 2px; padding: 8px 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--accent-color); box-shadow: 0 10px 24px -10px var(--accent-color); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s, transform .3s; }
.layer-scene-score b { font: 2rem/1 var(--studio-serif,Georgia,serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.layer-scene-score small { font-size: .6rem; color: var(--muted); }
#layer-animation:is([data-stage=score],[data-stage=done]) .layer-scene-score { opacity: 1; transform: none; }
#layer-animation .layer-mix-scene { position: relative; }

/* Recipe book: modern tinted cards with a tier ribbon, glow and pills. */
#panel-layering .recipe-card { position: relative; overflow: hidden; padding: 18px 16px 16px; border-color: color-mix(in srgb,var(--tier) 28%,var(--line)); background: radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--tier) 16%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--tier) 6%,var(--bg-card)),var(--bg-card)); box-shadow: 0 18px 34px -26px var(--tier),0 1px 0 color-mix(in srgb,#fff 40%,transparent) inset; transition: transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s; }
#panel-layering .recipe-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg,var(--tier),color-mix(in srgb,var(--tier) 30%,#fff)); }
#panel-layering .recipe-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -24px var(--tier); }
#panel-layering .recipe-card .eyebrow { display: inline-block; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb,var(--tier) 14%,transparent); color: var(--tier); font-size: .56rem; letter-spacing: .1em; }
#panel-layering .recipe-card h3 { margin-top: 8px; font-size: 1.1rem; }
.recipe-score { width: 60px; height: 60px; background: radial-gradient(circle,var(--bg-card) 60%,transparent 62%),conic-gradient(var(--tier) calc(var(--pct,100) * 1%),color-mix(in srgb,var(--line) 70%,transparent) 0); box-shadow: 0 8px 20px -8px var(--tier); }
.recipe-score strong { font-size: 1.25rem; }
.recipe-ratio { height: 8px; padding: 2px; border-radius: 99px; background: color-mix(in srgb,var(--tier) 10%,transparent); }
#panel-layering .recipe-bottles .blend-bottle > div { height: 92px; border-radius: 14px; box-shadow: 0 10px 18px -14px var(--tier); transition: transform .25s; }
#panel-layering .recipe-card:hover .recipe-bottles .blend-bottle > div { transform: translateY(-3px); }
.recipe-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-pills span { padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb,var(--bg-card) 80%,transparent); font-size: .62rem; color: var(--muted); }
.recipe-pills .recipe-verdict { border-color: transparent; background: var(--tier); color: #fff; font-weight: 700; }
#panel-layering .recipe-card .recipe-note { border-left: 3px solid var(--tier); border-radius: 0 10px 10px 0; background: color-mix(in srgb,var(--tier) 7%,transparent); }
#panel-layering .recipe-open { border: 0; background: var(--tier); color: #fff; font-weight: 600; transition: filter .2s,transform .2s; }
#panel-layering .recipe-open:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { #panel-layering .recipe-card, #panel-layering .recipe-card * { transition: none !important; } #panel-layering .recipe-card:hover { transform: none; } }

/* Scene score badge: colour follows the score tier as it counts up. */
.layer-scene-score { --tier: var(--lt-risky); border-color: var(--tier); background: linear-gradient(160deg,color-mix(in srgb,var(--tier) 18%,var(--bg-card)),var(--bg-card)); box-shadow: 0 10px 28px -8px var(--tier),0 0 0 3px color-mix(in srgb,var(--tier) 18%,transparent); transition: opacity .3s,transform .3s,border-color .25s,box-shadow .25s,background .25s; }
.layer-scene-score[data-tier=exceptional] { --tier: var(--lt-exceptional); }
.layer-scene-score[data-tier=strong] { --tier: var(--lt-strong); }
.layer-scene-score[data-tier=good] { --tier: var(--lt-good); }
.layer-scene-score[data-tier=tuning] { --tier: var(--lt-tuning); }
.layer-scene-score[data-tier=risky] { --tier: var(--lt-risky); }
.layer-scene-score b { color: var(--tier); transition: color .25s; }
.layer-scene-score small { color: color-mix(in srgb,var(--tier) 70%,var(--muted)); }