﻿/* Animated cut-corner borders adapted from the supplied kleenpulse treatment. */
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button){--button-border:linear-gradient(-45deg,var(--color-brand-green),var(--color-brand-gold),var(--color-hex-f2db96),var(--color-brand-green));--button-bg:var(--color-surface);--button-text:var(--color-brand-green);--border-width:1.5px;--curve-size:8px;position:relative!important;isolation:isolate;overflow:hidden;z-index:1;background:var(--color-transparent)!important;border:0!important;border-radius:0!important;color:var(--button-text)!important;clip-path:polygon(0 var(--curve-size),var(--curve-size) 0,100% 0,100% calc(100% - var(--curve-size)),calc(100% - var(--curve-size)) 100%,0 100%);box-shadow:none!important;transition:color 250ms!important}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::before,:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::after{content:'';position:absolute;inset:0;width:auto;height:auto;border:0;transform:none;pointer-events:none}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::before{background:var(--button-border);background-size:300% 300%;animation:partner-border-flow 5s ease infinite;z-index:-2}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::after{background:var(--button-bg);z-index:-1;clip-path:polygon(var(--border-width) calc(var(--curve-size) + var(--border-width)*.5),calc(var(--curve-size) + var(--border-width)*.5) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - (var(--curve-size) + var(--border-width)*.5)),calc(100% - (var(--curve-size) + var(--border-width)*.5)) calc(100% - var(--border-width)),var(--border-width) calc(100% - var(--border-width)));transition:clip-path 500ms}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button):where(:hover,:focus-visible){color:var(--color-surface)!important}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button):where(:hover,:focus-visible)::after{clip-path:polygon(calc(100% - var(--border-width)) calc(100% - (var(--curve-size) + var(--border-width)*.5)),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) var(--border-width),calc(100% - var(--border-width)) calc(100% - (var(--curve-size) + var(--border-width)*.5)),calc(100% - (var(--curve-size) + var(--border-width)*.5)) calc(100% - var(--border-width)),calc(100% - (var(--curve-size) + var(--border-width)*.5)) calc(100% - var(--border-width)));transition:clip-path 200ms}
:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button):focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--color-gold-ink))}
.partner-invite .button-gold{--button-bg:var(--color-forest);--button-text:var(--color-hex-f1d493)}
:is(.project-filters button[aria-pressed=true],.tracking-tabs button[aria-selected=true]){--button-bg:var(--color-brand-green);--button-text:var(--color-surface)}
.partner-submit span,.button-gold span,.button-outline span{color:inherit;position:relative;z-index:1}
@keyframes partner-border-flow{0%,100%{background-position:31% 0}50%{background-position:70% 100%}}
/* Badge belongs to the heading composition, without taking a separate row. */
.portal-section>.section-intro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22%;align-items:center;min-height:175px}
.portal-section .section-intro>.section-badge{position:absolute;left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);margin:0;width:110px;height:110px;max-width:none;z-index:2}
.portal-section .section-badge .circular-badge{width:110px;height:110px}.portal-section .section-badge .badge-core{inset:31px;font-size:22px}
.scroll-image-frame{overflow:hidden}.scroll-zoom-image{translate:none;opacity:1;transform:scale(1.08);transition:none!important;will-change:transform,clip-path}
@media(max-width:700px){.portal-section>.section-intro{display:block;min-height:0}.portal-section .section-intro>.section-badge{left:auto;right:0;top:22px;transform:none;width:80px;height:80px}.portal-section .section-badge .circular-badge{width:80px;height:80px}.portal-section .section-badge .badge-core{inset:23px;font-size:17px}.portal-section .section-intro>div:not(.section-badge){padding-right:90px}.portal-section .section-intro>p{margin-top:25px}}
@media(prefers-reduced-motion:reduce){:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::before{animation:none}:is(.hero-content .partner-submit,.partner-submit,.button-gold,.button-outline,.project-filters button,.tracking-tabs button)::after{transition:none}.scroll-zoom-image{transform:none;clip-path:none;will-change:auto}}

/* Section 07 uses the section 05 button construction, reversed for emerald. */
#progress .tracking-tabs{gap:14px;border-bottom:0;flex-wrap:wrap}
#progress .tracking-tabs button{--button-border:linear-gradient(-45deg,var(--color-brand-gold),var(--color-hex-f2db96),var(--color-brand-green),var(--color-brand-gold));--button-bg:var(--color-forest);--button-text:var(--color-hex-eed18d);padding:14px 23px;font-size:12px;min-width:140px;line-height:1.4}
#progress .tracking-tabs button span{color:inherit;opacity:.7;margin-left:18px}
#progress .tracking-tabs button[aria-selected=true]{--button-bg:var(--color-brand-gold);--button-text:var(--color-forest)}
#progress .tracking-tabs button:where(:hover,:focus-visible){color:var(--color-forest)!important;--button-border:linear-gradient(-45deg,var(--color-brand-gold),var(--color-hex-f2db96),var(--color-hex-ad852e))}
#progress .tracking-tabs button::after{height:auto;bottom:0}
@media(max-width:700px){#progress .tracking-tabs{gap:8px}#progress .tracking-tabs button{padding:12px 14px;min-width:0;flex:1;font-size:10px}#progress .tracking-tabs button span{margin-left:7px}}
