/* mycelium-cta.css — the shiny "Enter the mycelium" button and its email form.
   ────────────────────────────────────────────────────────────────
   One copy for the static pages: the portal welcome (/community/), the
   Academy's visitor view and /members (its "Unlock signup" button). It was
   pasted inline into two of them. The React site has its own copy in
   src/components/ui/shiny-button.css — keep the button rules in step. */
@property --gradient-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gradient-angle-offset{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gradient-percent{syntax:"<percentage>";initial-value:5%;inherits:false}
@property --gradient-shine{syntax:"<color>";initial-value:white;inherits:false}
.shiny-cta{--shiny-cta-bg:#000;--shiny-cta-bg-subtle:#1a1818;--shiny-cta-fg:#fff;--shiny-cta-highlight:blue;--shiny-cta-highlight-subtle:#8484ff;--animation:gradient-angle linear infinite;--duration:3s;--shadow-size:2px;--transition:800ms cubic-bezier(.25,1,.5,1);isolation:isolate;position:relative;overflow:hidden;cursor:pointer;outline-offset:4px;padding:1.25rem 2.5rem;font-family:"Inter",sans-serif;font-size:1.125rem;line-height:1.2;font-weight:500;border:1px solid transparent;border-radius:360px;color:var(--shiny-cta-fg);background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg)) padding-box,conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),transparent,var(--shiny-cta-highlight) var(--gradient-percent),var(--gradient-shine) calc(var(--gradient-percent) * 2),var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),transparent calc(var(--gradient-percent) * 4)) border-box;box-shadow:inset 0 0 0 1px var(--shiny-cta-bg-subtle);transition:var(--transition);transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine}
.shiny-cta::before,.shiny-cta::after,.shiny-cta span::before{content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1}
.shiny-cta:active{translate:0 1px}
.shiny-cta::before{--size:calc(100% - var(--shadow-size) * 3);--position:2px;--space:calc(var(--position) * 2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--position) var(--position),white calc(var(--position) / 4),transparent 0) padding-box;background-size:var(--space) var(--space);background-repeat:space;mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);border-radius:inherit;opacity:.4;z-index:-1}
.shiny-cta::after{--animation:shimmer linear infinite;width:100%;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--shiny-cta-highlight),transparent);mask-image:radial-gradient(circle at bottom,transparent 40%,black);opacity:.6}
.shiny-cta span{z-index:1}
.shiny-cta span::before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);opacity:0;transition:opacity var(--transition);animation:calc(var(--duration) * 1.5) breathe linear infinite}
.shiny-cta,.shiny-cta::before,.shiny-cta::after{animation:var(--animation) var(--duration),var(--animation) calc(var(--duration) / .4) reverse paused;animation-composition:add}
.shiny-cta:is(:hover,:focus-visible){--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:var(--shiny-cta-highlight-subtle)}
.shiny-cta:is(:hover,:focus-visible),.shiny-cta:is(:hover,:focus-visible)::before,.shiny-cta:is(:hover,:focus-visible)::after{animation-play-state:running}
.shiny-cta:is(:hover,:focus-visible) span::before{opacity:1}
@keyframes gradient-angle{to{--gradient-angle:360deg}}
@keyframes shimmer{to{rotate:360deg}}
@keyframes breathe{from,to{scale:1}50%{scale:1.2}}
@media (prefers-reduced-motion:reduce){.shiny-cta,.shiny-cta::before,.shiny-cta::after,.shiny-cta span::before{animation:none}}

/* Fungai palette on the shiny button: forest ground, gold light. */
.shiny-cta.fa-myc{--shiny-cta-bg:#07110d;--shiny-cta-bg-subtle:#1d2a1f;--shiny-cta-fg:#F1E9D2;--shiny-cta-highlight:#E8B14B;--shiny-cta-highlight-subtle:#F5D689}
/* As a link (the Academy's "Enter the mycelium", 5 Oct 2026): a block box,
   or its padding overlaps the line under it, and no link underline. */
a.shiny-cta{display:inline-block;text-decoration:none}
a.shiny-cta:is(:hover,:focus-visible){text-decoration:none;color:var(--shiny-cta-fg)}

/* The email form the button opens into. */
.myc-form{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:470px;margin:0 auto;animation:mycIn .5s ease both}
.myc-form[hidden]{display:none}
.myc-form input{flex:1 1 240px;min-width:0;padding:14px 20px;border-radius:999px;border:1px solid rgba(232,177,75,.4);background:rgba(7,17,13,.85);color:#F1E9D2;font-size:15px;font-family:inherit}
.myc-form input:focus{outline:none;border-color:#F5D689;box-shadow:0 0 0 3px rgba(232,177,75,.15)}
.myc-form button{padding:14px 22px;border-radius:999px;border:0;background:#E8B14B;color:#0a0c09;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.myc-form button:disabled{opacity:.6;cursor:wait}
.myc-fine{flex-basis:100%;margin-top:10px;font-size:11.5px;color:#8B7E62}
.myc-fine a{color:#C9B894}
.myc-msg{flex-basis:100%;min-height:1.2em;font-size:12.5px;color:#E8A07C}
.myc-done{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:19px;color:#E6D9B5;line-height:1.5;animation:mycIn .5s ease both}
.myc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes mycIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Where it sits: under the first paragraph of the portal welcome and of
   the Academy's visitor view — left-aligned with the text above it. */
.welcome-join,.acp-join{margin-top:30px}
.welcome-join .myc-form,.acp-join .myc-form{justify-content:flex-start;margin:0}
.welcome-join .myc-done,.acp-join .myc-done{max-width:46ch}
@media (max-width:520px){.welcome-join .shiny-cta,.acp-join .shiny-cta{width:100%}}