.brand { display: inline-flex; align-items: center; }
.seasonal-brand { --season: #dca277; --season-secondary: #af714f; display: block; width: 214px; }
.seasonal-brand svg { display: block; width: 100%; height: auto; overflow: visible; }
.seasonal-brand[data-season="spring"] { --season: #bddb9a; --season-secondary: #e4b8c6; }
.seasonal-brand[data-season="summer"] { --season: #efd38c; --season-secondary: #e8ab65; }
.seasonal-brand[data-season="winter"] { --season: #b9dce9; --season-secondary: #e0edf5; }
.brand-gradient-stop { stop-color: var(--season); }
.brand-shadow { fill: var(--season); opacity: .09; transform-origin: 39px 68px; animation: brand-ground 8s ease-in-out infinite; }
.brand-layer { transform-origin: 39px 35px; animation: brand-stack-back 8s ease-in-out infinite; }
.brand-layer-middle { animation-name: brand-stack-middle; }
.brand-layer-front { animation-name: brand-stack-front; }
.brand-plane { fill: url(#brand-glass); stroke: var(--season); stroke-width: .85; stroke-linejoin: round; }
.brand-layer-back { opacity: .46; }.brand-layer-middle { opacity: .7; }
.brand-circuit { stroke: var(--season); stroke-width: .7; opacity: .65; }
.brand-node { fill: var(--season-secondary); }
.brand-letter { stroke: #f1f3e4; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-trace { stroke: #fff2d6; stroke-width: 1.4; stroke-dasharray: .14 .86; animation: brand-trace 5s linear infinite; }
.brand-word { font: 800 34px 'Inter', sans-serif; letter-spacing: -1.8px; }
.brand-descriptor { fill: #a8bcb1; font: 400 7.8px 'Inter', sans-serif; letter-spacing: 1.18px; }
.brand-word-rule { stroke: var(--season); opacity: .22; stroke-width: .6; }
.brand-word-signal { fill: var(--season); animation: brand-signal 8s ease-in-out infinite; }
.season-atmosphere { display: none; pointer-events: none; }
[data-season="autumn"] .brand-autumn, [data-season="spring"] .brand-spring,
[data-season="summer"] .brand-summer, [data-season="winter"] .brand-winter { display: block; }
.brand-leaf { fill: var(--season); animation: brand-leaf 7s ease-in-out calc(var(--seed) * -1.7s) infinite; }
.brand-leaf .leaf-vein { fill: none; stroke: #795540; stroke-width: .6; }
.brand-bloom { fill: var(--season-secondary); animation: brand-bloom 7s ease-in-out calc(var(--seed) * -2s) infinite; }
.brand-bloom circle { fill: #f6ebcb; }
.brand-snow { stroke: var(--season-secondary); stroke-width: .8; animation: brand-snow 7s linear calc(var(--seed) * -1.15s) infinite; }
.brand-sun { stroke: var(--season); stroke-width: .65; opacity: .2; animation: brand-sun 8s ease-in-out infinite; transform-origin: 39px 32px; }
.brand-rays { stroke: var(--season); opacity: .65; transform-origin: 39px 32px; animation: brand-rays 40s linear infinite; }
.seasonal-brand[data-paused="true"] * { animation-play-state: paused; }
@keyframes brand-stack-front { 0%,100% { transform: translateY(0); } 40%,60% { transform: translateY(10px); } 80% { transform: translateY(-2px); } }
@keyframes brand-stack-middle { 0%,100% { transform: translateY(0); } 40%,60% { transform: translateY(2px); } 80% { transform: translateY(-1px); } }
@keyframes brand-stack-back { 0%,100% { transform: translateY(0); } 40%,60% { transform: translateY(-6px); } }
@keyframes brand-ground { 40%,60% { transform: scaleX(.7); opacity: .16; } }
@keyframes brand-trace { to { stroke-dashoffset: -1; } }
@keyframes brand-signal { 0%,12% { transform: translateX(0); opacity: 0; } 20% { opacity: .9; } 80% { opacity: .9; } 95%,100% { transform: translateX(143px); opacity: 0; } }
@keyframes brand-leaf { 0% { transform: translate(-3px,-12px) rotate(-30deg) scale(.65); opacity: 0; } 20% { opacity: .85; } 55% { transform: translate(4px,0) rotate(20deg) scale(.8); opacity: .9; } 100% { transform: translate(-2px,17px) rotate(85deg) scale(.55); opacity: 0; } }
@keyframes brand-bloom { 0%,100% { transform: rotate(-20deg) scale(.3); opacity: .1; } 40%,65% { transform: rotate(20deg) scale(.65); opacity: .9; } }
@keyframes brand-snow { 0% { transform: translate(-2px,-12px); opacity: 0; } 20%,70% { opacity: .8; } 100% { transform: translate(4px,16px); opacity: 0; } }
@keyframes brand-sun { 50% { transform: scale(1.15); opacity: .5; } }
@keyframes brand-rays { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .seasonal-brand { width: 170px; } }
@media (prefers-reduced-motion: reduce) { .seasonal-brand * { animation: none !important; } .brand-word-signal { opacity: 0; } .brand-leaf, .brand-bloom { transform: scale(.6); } }