/* Adapted from the user-supplied Uiverse buttons by mahiatlinux, Ashon-G and Allyhere.
   Trades We See You palette, original action labels, campaign-specific SVG icons.
   Confirmation follows the form response, never focus or hover. */
.twsy-action{
 --action-ink:#003f2b;--action-light:#e4f6d9;--action-radius:14px;
 --action-ease:cubic-bezier(.16,1,.3,1);
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 overflow:visible;border:1px solid transparent;border-radius:var(--action-radius);
 min-height:52px;max-width:100%;padding:13px 19px;gap:0;
 font-family:inherit;font-size:13px;font-weight:750;line-height:1.35;
 text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:transform 220ms var(--action-ease),box-shadow 300ms ease,background-position 700ms ease;
}
.twsy-action .action-surface{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.twsy-action .action-content{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0;font-size:inherit;line-height:inherit;pointer-events:none}
.twsy-action .action-label{display:inline;min-width:0;font-size:inherit;line-height:inherit;white-space:nowrap}
.twsy-action .action-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;font-size:20px;transition:transform 350ms var(--action-ease);filter:drop-shadow(0 1px 1px #002a2630)}
.twsy-action .action-icon svg{width:100%;height:100%;overflow:visible;color:inherit;margin:0}
.twsy-action .action-arrow{display:flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px;transition:transform 260ms var(--action-ease)}
.twsy-action .action-arrow svg{width:100%;height:100%}
.twsy-action .action-char{display:inline-block;font-size:inherit;opacity:1;white-space:pre}
.twsy-action:active:not(:disabled){transform:translateY(1px) scale(.985)}
.twsy-action:focus-visible{outline:3px solid #237653;outline-offset:4px}
.hero .twsy-action:focus-visible,.site-header .twsy-action:focus-visible,.story-close.twsy-action:focus-visible{outline-color:#e4f6d9}

/* 01 — a sculpted emerald face, recessed rim and staggered letter response. */
.action-tactile,#enter .action-tactile{
 color:#fff;background:linear-gradient(160deg,#285c44,#002e21);border-color:#72927c70;
 box-shadow:0 1px 1px #00231855,0 5px 8px -4px #002e2866,0 13px 24px -12px #00291c77;
 text-shadow:0 1px 1px #001e2270;--action-radius:14px;
}
.action-tactile::before{content:'';position:absolute;z-index:1;inset:6px 6px 7px;border-radius:10px;pointer-events:none;background:linear-gradient(175deg,#00402c,#17543b);box-shadow:inset 0 1px 2px #001c264a,inset 0 -1px 1px #b7dca12b}
.action-tactile .action-surface::before{content:'';position:absolute;inset:-300%;background:conic-gradient(from 180deg,transparent 60%,#b9e0a6 80%,transparent 100%);opacity:0;animation:action-rim-orbit 2s linear infinite paused;transition:opacity 250ms ease}
.action-tactile:is(:hover,:focus-visible):not(:disabled) .action-surface::before{opacity:.75;animation-play-state:running}
.action-tactile::after{content:'';position:absolute;inset:-1px;z-index:0;border-radius:inherit;padding:2px;background:conic-gradient(from 180deg,transparent 55%,#d6efb7 75%,transparent 96%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;opacity:0;pointer-events:none;transition:opacity 250ms}
.action-tactile:hover:not(:disabled),.action-tactile:focus-visible:not(:disabled){transform:translateY(-1px);box-shadow:0 1px 1px #d4ecc44d,0 9px 12px -6px #002e2866,0 18px 28px -14px #00291c80}
.action-tactile:hover:not(:disabled)::after,.action-tactile:focus-visible:not(:disabled)::after{opacity:1;animation:action-rim-light 1600ms linear infinite}
.action-tactile:is(:hover,:focus-visible):not(:disabled) .action-char{animation:action-letter-wave 580ms both;animation-delay:calc(var(--action-char-index,0)*9ms)}
.action-tactile:is(:hover,:focus-visible):not(:disabled) .action-icon{transform:rotate(-9deg) scale(1.08)}
@keyframes action-letter-wave{0%,100%{transform:translateY(0);filter:blur(0)}35%{transform:translateY(-3px);color:#d1ecae;filter:blur(.25px)}65%{transform:translateY(1px)}}
@keyframes action-rim-light{0%{filter:brightness(.75)}50%{filter:brightness(1.5)}100%{filter:brightness(.75)}}
@keyframes action-rim-orbit{to{transform:rotate(360deg)}}

/* 02 — twelve moving mint/emerald caustics under a polished, luminous shell. */
.action-aura{
 --action-radius:24px;--action-duration:7s;color:#063d2c;
 background:radial-gradient(ellipse at 45% 45%,#e9f6d9,#c3ddaa 78%,#618566);
 border-color:#d8eac59c;
 box-shadow:0 3px 7px -4px #000f1bb3,0 8px 22px -12px #b7e9a8b3,inset 0 2px 3px #ffffffc9,inset 0 -2px 4px #467a4d7a;
 text-shadow:0 1px 0 #ffffff4d;
}
.action-aura::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;box-shadow:inset 0 2px 7px #f4ffddc9,inset 0 -3px 5px #0f533d55}
.action-aura::after{content:'';position:absolute;inset:3px;z-index:3;border:1px solid #f4fff054;border-radius:inherit;pointer-events:none}
.action-aura .action-surface::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#f5ffdfb8,#e4f4d4ba 45%,#f4ffe1a6);pointer-events:none}
.action-aura .action-orb{
 position:absolute;left:calc(var(--action-orb-index,0)*8% - 8%);top:-20%;width:54px;height:54px;
 border-radius:50%;background:#075b43;filter:blur(9px);opacity:.8;
 transform:translate3d(0,0,0);animation:action-orbit-a var(--action-duration) linear infinite;animation-play-state:paused;
 animation-delay:calc(var(--action-orb-index,0)*-.43s);pointer-events:none;
}
.action-aura .action-orb:nth-child(3n){background:#b6dd87;filter:blur(12px);animation-name:action-orbit-b}
.action-aura .action-orb:nth-child(3n + 1){background:#4b9873;top:22%;animation-name:action-orbit-c}
.action-aura .action-orb:nth-child(4n){background:#faf5d8;opacity:.9}
.action-aura.action-in-view .action-orb{animation-play-state:running}
.action-aura:is(:hover,:focus-visible){--action-duration:1800ms;background:radial-gradient(ellipse at 45% 45%,#e9f6d9,#c3ddaa 78%,#618566);box-shadow:0 3px 7px -4px #000f1bb3,0 9px 25px -10px #c6f7a4ad,inset 0 2px 3px #ffffffed,inset 0 -2px 4px #467a4d7a}
.action-aura:is(:hover,:focus-visible) .action-icon{transform:rotate(-7deg) scale(1.08)}
.action-aura:is(:hover,:focus-visible) .action-arrow{transform:translate(2px,-2px)}
@keyframes action-orbit-a{33%{transform:translate3d(22px,26px,0)}66%{transform:translate3d(-16px,-14px,0)}}
@keyframes action-orbit-b{33%{transform:translate3d(-35px,18px,0)}66%{transform:translate3d(23px,-25px,0)}}
@keyframes action-orbit-c{33%{transform:translate3d(18px,-30px,0)}66%{transform:translate3d(-22px,16px,0)}}

/* 03 — a directional emerald satin gradient, with a beveled light-catching edge. */
.action-flow{
 --action-radius:9px;color:#fff;border-color:#b8d7bd66;
 background-color:#003f2b;background-image:linear-gradient(325deg,#003f2b 0%,#237b54 55%,#003f2b 90%);background-size:280% auto;
 box-shadow:0 5px 7px -3px #002b2e55,0 10px 19px -13px #00482d99,inset 3px 3px 6px #c3e4b33d,inset -3px -3px 6px #001b2773;
 transition:background-position 700ms ease,box-shadow 250ms ease,transform 200ms var(--action-ease);
}
.action-flow::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid #ffffff0f;pointer-events:none}
.action-flow::after{display:none}
.action-flow:is(:hover,:focus-visible):not(:disabled){background-image:linear-gradient(325deg,#003f2b 0%,#237b54 55%,#003f2b 90%);background-size:280% auto;background-position:right top;box-shadow:0 5px 8px -3px #002b2e66,0 12px 21px -12px #2d745180,inset 3px 3px 6px #c3e4b34d,inset -3px -3px 6px #001b2773}
.action-flow:is(:hover,:focus-visible) .action-icon{transform:translateY(-2px)}

/* Sizes follow the existing hierarchy, including small-phone navigation. */
.site-header .header-cta.twsy-action{min-height:48px;padding:11px 17px;font-size:12px;gap:0}
.site-header .action-content{gap:8px}
.site-header .action-icon{width:18px;height:18px;flex-basis:18px}
.hero .twsy-action{min-height:54px;padding:13px 17px;font-size:13px}
.hero .twsy-action .action-content{gap:8px}
#enter .form-submit.twsy-action,#enter .share-button.twsy-action{width:100%;min-height:60px;padding:17px 22px;font-size:15px}
#enter .entry-tabs{gap:7px;padding:6px;isolation:isolate}
#enter .entry-tabs::before{display:none}
#enter .entry-tab.twsy-action{min-height:52px;padding:12px 9px;border:1px solid transparent;background:#ffffff6b;background-image:none;box-shadow:inset 0 1px 0 #fff;color:#335e45;font-size:13px;border-radius:8px;text-shadow:none}
#enter .entry-tab.twsy-action .action-content{gap:7px}
#enter .entry-tab.twsy-action .action-icon{width:18px;height:18px;flex-basis:18px}
#enter .entry-tab.twsy-action.is-active{color:#fff;border-color:#558f69;background-image:linear-gradient(325deg,#003f2b 0%,#237b54 55%,#003f2b 90%);background-size:280% auto;box-shadow:0 3px 6px -3px #002e316b,inset 2px 2px 5px #ccebb54d,inset -2px -2px 5px #00302080}
#enter .entry-tab.twsy-action:not(.is-active):hover{background:#f9fff4;border-color:#bbd2ba}
#enter .entry-tab.twsy-action:is(:hover,:focus-visible).is-active{background-position:right top}
#enter .entry-tab.twsy-action .action-label{white-space:normal}

/* The films keep circular play controls; dialog close stays an ordinary close action. */
.story-watch.twsy-action{width:80px;height:80px;min-height:0;padding:0;--action-radius:50%;color:#073e2d;border:1px solid #f2ffe0c7}
.story-watch.twsy-action .action-content{width:100%;height:100%;gap:0}
.story-watch.twsy-action .action-icon{width:29px;height:29px;flex-basis:29px;margin-left:3px}
.story-watch.twsy-action .action-label{display:none}
.story-watch.twsy-action .story-play{display:none}
.story-watch.twsy-action::after{inset:5px;border-color:#ffffff73}
.story-close.twsy-action{min-height:44px;padding:9px 14px;font-size:13px}
.story-close.twsy-action .action-icon{width:16px;height:16px;flex-basis:16px}

/* Real availability and saving state take precedence over decorative motion. */
.twsy-action:disabled,#enter .twsy-action:disabled{
 color:#45604e;background:#dce6da;border-color:#b0c4b1;box-shadow:inset 0 1px 0 #ffffff85;text-shadow:none;
 transform:none;cursor:not-allowed;opacity:1;
}
.twsy-action:disabled::before,.twsy-action:disabled::after,#enter .twsy-action:disabled::before,#enter .twsy-action:disabled::after{display:none}
.twsy-action:disabled .action-surface{opacity:0}
.twsy-action:disabled .action-icon,.twsy-action:disabled .action-char{transform:none;animation:none;filter:none}
.twsy-action[data-action-state="busy"] .action-icon svg{visibility:hidden}
.twsy-action[data-action-state="busy"] .action-icon::after{content:'';position:absolute;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:action-saving 750ms linear infinite}
@keyframes action-saving{to{transform:rotate(360deg)}}
.actions-paused .twsy-action .action-orb,.actions-paused .twsy-action .action-char,.actions-paused .twsy-action::after,.actions-paused .twsy-action .action-surface::before{animation-play-state:paused!important}
@media(max-width:720px){
 .site-header .header-cta.twsy-action{padding:10px 12px;font-size:11px}
 .site-header .header-cta .action-arrow{display:none}
 .hero-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px}
 .hero .twsy-action{min-height:51px;padding:10px 8px;font-size:11px}
 .hero .twsy-action .action-content{gap:6px}
 .hero .twsy-action .action-label{white-space:normal}
 .hero .twsy-action .action-icon{width:17px;height:17px;flex-basis:17px}
 .hero .twsy-action .action-arrow{display:none}
 .story-watch.twsy-action{width:56px;height:56px}
 .story-watch.twsy-action .action-icon{width:23px;height:23px;flex-basis:23px}
 #enter .entry-tab.twsy-action{font-size:11px;padding:11px 5px}
 #enter .entry-tab.twsy-action .action-content{gap:5px}
 #enter .form-submit.twsy-action,#enter .share-button.twsy-action{font-size:14px;padding:15px 13px;min-height:56px}
}
@media(max-width:360px){
 .site-header .header-cta.twsy-action{padding-inline:9px;font-size:10px}
 .site-header .header-cta .action-icon{display:none}
 .hero-actions{grid-template-columns:1fr}
 .hero .twsy-action{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .twsy-action,.twsy-action .action-icon,.twsy-action .action-arrow{transition:none!important}
 .twsy-action,.twsy-action::after,.twsy-action .action-char,.twsy-action .action-orb,.twsy-action .action-icon::after,.twsy-action .action-surface::before{animation:none!important}
 .twsy-action:is(:hover,:focus-visible,:active),.twsy-action:is(:hover,:focus-visible) .action-icon,.twsy-action:is(:hover,:focus-visible) .action-arrow{transform:none!important}
}
@media(forced-colors:active){
 .twsy-action,#enter .twsy-action{color:ButtonText;background:ButtonFace;border:2px solid ButtonText;box-shadow:none;text-shadow:none}
 .twsy-action .action-surface,.twsy-action::before,.twsy-action::after{display:none}
 #enter .entry-tab.twsy-action.is-active{color:HighlightText;background:Highlight;border-color:Highlight;forced-color-adjust:none}
 .twsy-action:focus-visible{outline:3px solid Highlight}
}