react-season-effects
Version:
Uma biblioteca React/TypeScript com efeitos visuais sazonais automáticos
564 lines (527 loc) • 53 kB
JavaScript
(function(_,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react"),require("canvas-confetti")):typeof define=="function"&&define.amd?define(["exports","react","canvas-confetti"],y):(_=typeof globalThis<"u"?globalThis:_||self,y(_.SeasonEffects={},_.React,_.confetti))})(this,function(_,y,J){"use strict";var $t=Object.defineProperty;var Gt=(_,y,J)=>y in _?$t(_,y,{enumerable:!0,configurable:!0,writable:!0,value:J}):_[y]=J;var d=(_,y,J)=>Gt(_,typeof y!="symbol"?y+"":y,J);var xe={exports:{}},ne={};/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Fe;function ht(){if(Fe)return ne;Fe=1;var f=y,t=Symbol.for("react.element"),r=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,u=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function h(s,l,o){var p,g={},C=null,k=null;o!==void 0&&(C=""+o),l.key!==void 0&&(C=""+l.key),l.ref!==void 0&&(k=l.ref);for(p in l)a.call(l,p)&&!i.hasOwnProperty(p)&&(g[p]=l[p]);if(s&&s.defaultProps)for(p in l=s.defaultProps,l)g[p]===void 0&&(g[p]=l[p]);return{$$typeof:t,type:s,key:C,ref:k,props:g,_owner:u.current}}return ne.Fragment=r,ne.jsx=h,ne.jsxs=h,ne}var ae={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var Le;function pt(){return Le||(Le=1,process.env.NODE_ENV!=="production"&&function(){var f=y,t=Symbol.for("react.element"),r=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),u=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),h=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),o=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),g=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),k=Symbol.for("react.offscreen"),E=Symbol.iterator,S="@@iterator";function F(e){if(e===null||typeof e!="object")return null;var n=E&&e[E]||e[S];return typeof n=="function"?n:null}var v=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function w(e){{for(var n=arguments.length,c=new Array(n>1?n-1:0),m=1;m<n;m++)c[m-1]=arguments[m];Y("error",e,c)}}function Y(e,n,c){{var m=v.ReactDebugCurrentFrame,T=m.getStackAddendum();T!==""&&(n+="%s",c=c.concat([T]));var M=c.map(function(R){return String(R)});M.unshift("Warning: "+n),Function.prototype.apply.call(console[e],console,M)}}var L=!1,se=!1,Q=!1,ue=!1,le=!1,de;de=Symbol.for("react.module.reference");function ke(e){return!!(typeof e=="string"||typeof e=="function"||e===a||e===i||le||e===u||e===o||e===p||ue||e===k||L||se||Q||typeof e=="object"&&e!==null&&(e.$$typeof===C||e.$$typeof===g||e.$$typeof===h||e.$$typeof===s||e.$$typeof===l||e.$$typeof===de||e.getModuleId!==void 0))}function $(e,n,c){var m=e.displayName;if(m)return m;var T=n.displayName||n.name||"";return T!==""?c+"("+T+")":c}function Te(e){return e.displayName||"Context"}function W(e){if(e==null)return null;if(typeof e.tag=="number"&&w("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case a:return"Fragment";case r:return"Portal";case i:return"Profiler";case u:return"StrictMode";case o:return"Suspense";case p:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case s:var n=e;return Te(n)+".Consumer";case h:var c=e;return Te(c._context)+".Provider";case l:return $(e,e.render,"ForwardRef");case g:var m=e.displayName||null;return m!==null?m:W(e.type)||"Memo";case C:{var T=e,M=T._payload,R=T._init;try{return W(R(M))}catch{return null}}}return null}var z=Object.assign,G=0,he,pe,Me,ee,U,me,ge;function Je(){}Je.__reactDisabledLog=!0;function wt(){{if(G===0){he=console.log,pe=console.info,Me=console.warn,ee=console.error,U=console.group,me=console.groupCollapsed,ge=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Je,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}G++}}function xt(){{if(G--,G===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:z({},e,{value:he}),info:z({},e,{value:pe}),warn:z({},e,{value:Me}),error:z({},e,{value:ee}),group:z({},e,{value:U}),groupCollapsed:z({},e,{value:me}),groupEnd:z({},e,{value:ge})})}G<0&&w("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var _e=v.ReactCurrentDispatcher,Pe;function ve(e,n,c){{if(Pe===void 0)try{throw Error()}catch(T){var m=T.stack.trim().match(/\n( *(at )?)/);Pe=m&&m[1]||""}return`
`+Pe+e}}var je=!1,ye;{var Ct=typeof WeakMap=="function"?WeakMap:Map;ye=new Ct}function Ke(e,n){if(!e||je)return"";{var c=ye.get(e);if(c!==void 0)return c}var m;je=!0;var T=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var M;M=_e.current,_e.current=null,wt();try{if(n){var R=function(){throw Error()};if(Object.defineProperty(R.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(R,[])}catch(A){m=A}Reflect.construct(e,[],R)}else{try{R.call()}catch(A){m=A}e.call(R.prototype)}}else{try{throw Error()}catch(A){m=A}e()}}catch(A){if(A&&m&&typeof A.stack=="string"){for(var x=A.stack.split(`
`),O=m.stack.split(`
`),P=x.length-1,j=O.length-1;P>=1&&j>=0&&x[P]!==O[j];)j--;for(;P>=1&&j>=0;P--,j--)if(x[P]!==O[j]){if(P!==1||j!==1)do if(P--,j--,j<0||x[P]!==O[j]){var I=`
`+x[P].replace(" at new "," at ");return e.displayName&&I.includes("<anonymous>")&&(I=I.replace("<anonymous>",e.displayName)),typeof e=="function"&&ye.set(e,I),I}while(P>=1&&j>=0);break}}}finally{je=!1,_e.current=M,xt(),Error.prepareStackTrace=T}var re=e?e.displayName||e.name:"",q=re?ve(re):"";return typeof e=="function"&&ye.set(e,q),q}function Et(e,n,c){return Ke(e,!1)}function Rt(e){var n=e.prototype;return!!(n&&n.isReactComponent)}function be(e,n,c){if(e==null)return"";if(typeof e=="function")return Ke(e,Rt(e));if(typeof e=="string")return ve(e);switch(e){case o:return ve("Suspense");case p:return ve("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case l:return Et(e.render);case g:return be(e.type,n,c);case C:{var m=e,T=m._payload,M=m._init;try{return be(M(T),n,c)}catch{}}}return""}var ce=Object.prototype.hasOwnProperty,Qe={},et=v.ReactDebugCurrentFrame;function we(e){if(e){var n=e._owner,c=be(e.type,e._source,n?n.type:null);et.setExtraStackFrame(c)}else et.setExtraStackFrame(null)}function kt(e,n,c,m,T){{var M=Function.call.bind(ce);for(var R in e)if(M(e,R)){var x=void 0;try{if(typeof e[R]!="function"){var O=Error((m||"React class")+": "+c+" type `"+R+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[R]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw O.name="Invariant Violation",O}x=e[R](n,R,m,c,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(P){x=P}x&&!(x instanceof Error)&&(we(T),w("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",m||"React class",c,R,typeof x),we(null)),x instanceof Error&&!(x.message in Qe)&&(Qe[x.message]=!0,we(T),w("Failed %s type: %s",c,x.message),we(null))}}}var Tt=Array.isArray;function Se(e){return Tt(e)}function Mt(e){{var n=typeof Symbol=="function"&&Symbol.toStringTag,c=n&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c}}function _t(e){try{return tt(e),!1}catch{return!0}}function tt(e){return""+e}function rt(e){if(_t(e))return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Mt(e)),tt(e)}var nt=v.ReactCurrentOwner,Pt={key:!0,ref:!0,__self:!0,__source:!0},at,it;function jt(e){if(ce.call(e,"ref")){var n=Object.getOwnPropertyDescriptor(e,"ref").get;if(n&&n.isReactWarning)return!1}return e.ref!==void 0}function St(e){if(ce.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function Yt(e,n){typeof e.ref=="string"&&nt.current}function Ot(e,n){{var c=function(){at||(at=!0,w("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",n))};c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}}function Xt(e,n){{var c=function(){it||(it=!0,w("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",n))};c.isReactWarning=!0,Object.defineProperty(e,"ref",{get:c,configurable:!0})}}var At=function(e,n,c,m,T,M,R){var x={$$typeof:t,type:e,key:n,ref:c,props:R,_owner:M};return x._store={},Object.defineProperty(x._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(x,"_self",{configurable:!1,enumerable:!1,writable:!1,value:m}),Object.defineProperty(x,"_source",{configurable:!1,enumerable:!1,writable:!1,value:T}),Object.freeze&&(Object.freeze(x.props),Object.freeze(x)),x};function Ft(e,n,c,m,T){{var M,R={},x=null,O=null;c!==void 0&&(rt(c),x=""+c),St(n)&&(rt(n.key),x=""+n.key),jt(n)&&(O=n.ref,Yt(n,T));for(M in n)ce.call(n,M)&&!Pt.hasOwnProperty(M)&&(R[M]=n[M]);if(e&&e.defaultProps){var P=e.defaultProps;for(M in P)R[M]===void 0&&(R[M]=P[M])}if(x||O){var j=typeof e=="function"?e.displayName||e.name||"Unknown":e;x&&Ot(R,j),O&&Xt(R,j)}return At(e,x,O,T,m,nt.current,R)}}var Ye=v.ReactCurrentOwner,ot=v.ReactDebugCurrentFrame;function te(e){if(e){var n=e._owner,c=be(e.type,e._source,n?n.type:null);ot.setExtraStackFrame(c)}else ot.setExtraStackFrame(null)}var Oe;Oe=!1;function Xe(e){return typeof e=="object"&&e!==null&&e.$$typeof===t}function st(){{if(Ye.current){var e=W(Ye.current.type);if(e)return`
Check the render method of \``+e+"`."}return""}}function Lt(e){return""}var lt={};function It(e){{var n=st();if(!n){var c=typeof e=="string"?e:e.displayName||e.name;c&&(n=`
Check the top-level render call using <`+c+">.")}return n}}function dt(e,n){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var c=It(n);if(lt[c])return;lt[c]=!0;var m="";e&&e._owner&&e._owner!==Ye.current&&(m=" It was passed a child from "+W(e._owner.type)+"."),te(e),w('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',c,m),te(null)}}function ct(e,n){{if(typeof e!="object")return;if(Se(e))for(var c=0;c<e.length;c++){var m=e[c];Xe(m)&&dt(m,n)}else if(Xe(e))e._store&&(e._store.validated=!0);else if(e){var T=F(e);if(typeof T=="function"&&T!==e.entries)for(var M=T.call(e),R;!(R=M.next()).done;)Xe(R.value)&&dt(R.value,n)}}}function Nt(e){{var n=e.type;if(n==null||typeof n=="string")return;var c;if(typeof n=="function")c=n.propTypes;else if(typeof n=="object"&&(n.$$typeof===l||n.$$typeof===g))c=n.propTypes;else return;if(c){var m=W(n);kt(c,e.props,"prop",m,e)}else if(n.PropTypes!==void 0&&!Oe){Oe=!0;var T=W(n);w("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",T||"Unknown")}typeof n.getDefaultProps=="function"&&!n.getDefaultProps.isReactClassApproved&&w("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Dt(e){{for(var n=Object.keys(e.props),c=0;c<n.length;c++){var m=n[c];if(m!=="children"&&m!=="key"){te(e),w("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",m),te(null);break}}e.ref!==null&&(te(e),w("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}}var ft={};function ut(e,n,c,m,T,M){{var R=ke(e);if(!R){var x="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(x+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var O=Lt();O?x+=O:x+=st();var P;e===null?P="null":Se(e)?P="array":e!==void 0&&e.$$typeof===t?(P="<"+(W(e.type)||"Unknown")+" />",x=" Did you accidentally export a JSX literal instead of a component?"):P=typeof e,w("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",P,x)}var j=Ft(e,n,c,T,M);if(j==null)return j;if(R){var I=n.children;if(I!==void 0)if(m)if(Se(I)){for(var re=0;re<I.length;re++)ct(I[re],e);Object.freeze&&Object.freeze(I)}else w("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else ct(I,e)}if(ce.call(n,"key")){var q=W(e),A=Object.keys(n).filter(function(Bt){return Bt!=="key"}),Ae=A.length>0?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}";if(!ft[q+Ae]){var Zt=A.length>0?"{"+A.join(": ..., ")+": ...}":"{}";w(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,Ae,q,Zt,q),ft[q+Ae]=!0}}return e===a?Dt(j):Nt(j),j}}function Wt(e,n,c){return ut(e,n,c,!0)}function zt(e,n,c){return ut(e,n,c,!1)}var Ht=zt,Vt=Wt;ae.Fragment=a,ae.jsx=Ht,ae.jsxs=Vt}()),ae}process.env.NODE_ENV==="production"?xe.exports=ht():xe.exports=pt();var b=xe.exports;const Ie=()=>{const f=new Date,t=f.getMonth(),r=f.getDate();return t===9&&r===10?"birthday":t===11&&r>=20&&r<=22?"aurora":t===11&&r>=31||t===0&&r<=1?"newYear":t===8&&r>=23||t===9||t===10||t===11&&r<=19?"autumn":t===2&&r>=20||t===3||t===4||t===5&&r<=20?"spring":t===3&&r>=13&&r<=27?"easter":t===5&&r>=21||t===6||t===7||t===8&&r<=22?"summer":t===9&&r>=25?"halloween":t===11&&r>=23||t===0||t===1||t===2&&r<=19?"winter":null},Ne=()=>{const f=y.useRef(null),t=y.useRef(null);return y.useEffect(()=>{const r=document.createElement("style");r.innerHTML=`
.aurora-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: linear-gradient(to top, #38578d 0%, #112247 80%, #0c0f1e 100%);
overflow: hidden;
z-index: 1;
}
.aurora {
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
}
.whisp {
display: block;
background-color: var(--bg-color);
position: absolute;
bottom: 0;
left: var(--left-ini);
height: var(--height);
width: var(--width);
opacity: var(--opacity);
border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
filter: blur(var(--blur));
will-change: height, width, opacity, filter, transform;
mix-blend-mode: color-dodge;
}
.scene {
height: 100vh;
width: 100vw;
background-position: center bottom;
background-size: cover;
position: absolute;
z-index: 200;
}
.snowflake {
--size: calc(var(--z-index) * 0.2px);
left: var(--left);
filter: blur(calc(var(--inverse-z) * 0.7px));
width: var(--size);
height: var(--size);
background: white;
border-radius: 50%;
position: absolute;
top: -5vh;
animation: snowfall var(--fall-duration) linear infinite;
animation-delay: var(--fall-delay);
z-index: var(--z-index);
will-change: top, left, transform;
}
@keyframes snowfall {
0% {
transform: translate3d(var(--left-ini), -20vh, 0);
}
100% {
transform: translate3d(var(--left-end), 110vh, 0);
}
}
`,document.head.appendChild(r);const a=f.current,u=["#14e81e","#00ea8d","#017ed5","#b53dff","#8d00c4"];function i(l,o){const p=Math.ceil(l),g=Math.floor(o);return Math.floor(Math.random()*(g-p+1))+p}if(a){for(let l=0;l<12;l++){const o=document.createElement("div");o.classList.add("whisp"),o.setAttribute("style",`
--z-index: ${i(1,10)};
--opacity: ${Math.random()*.3};
--blur: ${i(30,60)}px;
--width: ${i(5,20)}vw;
--height: ${i(50,120)}vh;
--left-ini: ${i(-20,100)}vw;
--bg-color: ${u[i(0,4)]};
transform: skew(${i(-30,-50)}deg);
`),a.appendChild(o)}setTimeout(()=>{const l=a.querySelectorAll(".whisp");for(const o of l){const p=o;p.animate&&(p.animate({opacity:[Math.random()*.3,Math.random()*.6]},{duration:i(4,10)*1e3,iterations:1/0,direction:"alternate",easing:"ease-in-out"}),p.animate({transform:[`translate(${i(-20,20)}vw, 0) skew(${i(-30,-50)}deg)`,`translate(${i(-20,20)}vw, 0) skew(${i(-30,-50)}deg)`]},{duration:i(20,40)*1e3,iterations:1/0,direction:"alternate",easing:"ease-in-out"}),p.animate({height:[`${i(20,120)}vh`,`${i(20,120)}vh`]},{duration:i(10,20)*1e3,iterations:1/0,direction:"alternate",easing:"ease-in-out"}),p.animate({width:[`${i(2,20)}vw`,`${i(2,20)}vw`]},{duration:i(5,40)*1e3,iterations:1/0,direction:"alternate",easing:"ease-in-out"}))}},100)}const h=t.current;function s(l){return Math.floor(Math.random()*l)}if(h)for(let l=0;l<100;l++){const o=document.createElement("div");o.classList.add("snowflake");const p=s(10)+1,g=(p*-1+10)*.5;o.setAttribute("style",`
--z-index: ${p};
--inverse-z: ${g};
--fall-duration: ${s(10)+7}s;
--rotation-x: ${s(5)};
--rotation-y: ${s(5)};
--rotation-z: ${s(5)};
--fall-delay: ${s(20)-11}s;
--left: ${s(100)}vw;
--left-ini: ${s(20)-10}vw;
--left-end: ${s(20)-10}vw;
`),h.appendChild(o)}return()=>{r.parentNode&&document.head.removeChild(r),a&&(a.innerHTML=""),h&&(h.innerHTML="")}},[]),b.jsx("div",{className:"aurora-container",children:b.jsxs("div",{className:"aurora",ref:f,children:[b.jsx("div",{className:"trees"}),b.jsx("div",{className:"scene",ref:t})]})})};function De(){const f=y.useRef(null),t=()=>{if(f.current){const r=f.current.getBoundingClientRect(),a=r.left+r.width/2,u=r.top+r.height/2;J({particleCount:100,spread:90,origin:{x:a/window.innerWidth,y:u/window.innerHeight}})}};return b.jsx("div",{style:{position:"fixed",top:0,left:0,width:"100vw",height:"100vh",background:"#121212"},children:b.jsx("button",{ref:f,onClick:t,"aria-label":"Happy Birthday",style:{position:"absolute",top:"80%",left:"60%",transform:"translate(-50%, -50%)",background:"transparent",border:"none",cursor:"pointer",fontSize:"64px",color:"#fff",padding:0,outlineOffset:"4px",transition:"transform 0.2s ease"},onMouseEnter:r=>{r.currentTarget.style.transform="translate(-50%, -50%) scale(1.2)"},onMouseLeave:r=>{r.currentTarget.style.transform="translate(-50%, -50%) scale(1)"},children:"🎉"})})}const We=()=>(y.useEffect(()=>{const f=["#1d9bf0","#0ea5e9","#3b82f6","#8b5cf6","#a855f7","#dc2626","#ef4444","#b91c1c","#7c3aed","#2563eb"],t=[{left:"#1d9bf0",right:"#8b5cf6"},{left:"#dc2626",right:"#1d9bf0"},{left:"#a855f7",right:"#ef4444"},{left:"#7c3aed",right:"#0ea5e9"}],r=[];for(let i=0;i<6;i++){const h=Math.random()<.005;r.push({random:Math.random(),isRare:h,colors:h?t[Math.floor(Math.random()*t.length)]:{solid:f[Math.floor(Math.random()*f.length)]}})}const a=document.createElement("div");a.className="butterfly-scene",a.style.cssText=`
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 10;
perspective: 800px;
overflow: hidden;
`;const u=document.createElement("style");return u.innerHTML=`
.butterfly-scene * {
transform-style: preserve-3d;
position: absolute;
}
.butterfly {
position: absolute;
animation: butterfly-fly calc(16s + var(--random) * 8s) calc(var(--random) * -100s) infinite linear;
}
.butterfly::before,
.butterfly::after {
box-shadow: 0 0 15px #0007 inset;
content: '';
position: absolute;
width: 30px;
height: 53px;
background-color: var(--wing-color);
clip-path: path('m0 24.949c 2.6262-5.4316 9.7782-15.554 16.428-20.546 4.798-3.6021 12.572-6.3892 12.572 2.4795 0 1.7712-1.0155 14.879-1.6111 17.007-2.0703 7.3984-9.6144 9.2854-16.325 8.1433 11.73 1.9964 14.714 8.6092 8.2697 15.222-12.239 12.559-17.591-3.1511-18.963-7.1766-.2514-.73797-.36904-1.0832-.37077-.78964z');
transform-origin: left;
}
.butterfly::before {
animation: butterfly-flapB calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
background-color: var(--wing-left-color);
}
.butterfly::after {
animation: butterfly-flapA calc(0.2s + var(--random) * 0.1s) infinite alternate ease-in-out;
background-color: var(--wing-right-color);
}
@keyframes butterfly-fly {
0% {
transform:
translateX(calc(var(--start-x) * 1px))
translateY(calc(var(--start-y) * 1px))
rotateX(90deg)
rotate(calc(var(--random) * 360deg))
translateX(200px)
translateZ(-70vh);
}
25% {
transform:
translateX(calc(var(--mid1-x) * 1px))
translateY(calc(var(--mid1-y) * 1px))
rotateX(90deg)
rotate(calc(var(--random) * 360deg - 180deg))
translateX(200px)
translateZ(0vh);
}
50% {
transform:
translateX(calc(var(--mid2-x) * 1px))
translateY(calc(var(--mid2-y) * 1px))
rotateX(90deg)
rotate(calc(var(--random) * 360deg - 360deg))
translateX(200px)
translateZ(70vh);
}
75% {
transform:
translateX(calc(var(--mid3-x) * 1px))
translateY(calc(var(--mid3-y) * 1px))
rotateX(90deg)
rotate(calc(var(--random) * 360deg - 540deg))
translateX(200px)
translateZ(0vh);
}
100% {
transform:
translateX(calc(var(--start-x) * 1px))
translateY(calc(var(--start-y) * 1px))
rotateX(90deg)
rotate(calc(var(--random) * 360deg - 720deg))
translateX(200px)
translateZ(-70vh);
}
}
@keyframes butterfly-flapB {
from { rotate: y 15deg; }
to { rotate: y -30deg; }
}
@keyframes butterfly-flapA {
from { rotate: y 165deg; }
to { rotate: y 210deg; }
}
/* Efeito especial para borboletas raras */
.butterfly.rare::before,
.butterfly.rare::after {
box-shadow:
0 0 15px #0007 inset,
0 0 20px var(--wing-color);
}
`,document.head.appendChild(u),r.forEach((i,h)=>{const s=document.createElement("div");s.className=i.isRare?"butterfly rare":"butterfly";const l=Math.random()*window.innerWidth,o=Math.random()*window.innerHeight,p=Math.random()*window.innerWidth,g=Math.random()*window.innerHeight,C=Math.random()*window.innerWidth,k=Math.random()*window.innerHeight,E=Math.random()*window.innerWidth,S=Math.random()*window.innerHeight;s.style.setProperty("--random",i.random.toString()),s.style.setProperty("--start-x",l.toString()),s.style.setProperty("--start-y",o.toString()),s.style.setProperty("--mid1-x",p.toString()),s.style.setProperty("--mid1-y",g.toString()),s.style.setProperty("--mid2-x",C.toString()),s.style.setProperty("--mid2-y",k.toString()),s.style.setProperty("--mid3-x",E.toString()),s.style.setProperty("--mid3-y",S.toString()),i.isRare?(s.style.setProperty("--wing-left-color",i.colors.left),s.style.setProperty("--wing-right-color",i.colors.right),s.style.setProperty("--wing-color",i.colors.left)):(s.style.setProperty("--wing-left-color",i.colors.solid),s.style.setProperty("--wing-right-color",i.colors.solid),s.style.setProperty("--wing-color",i.colors.solid)),a.appendChild(s)}),document.body.appendChild(a),()=>{a.parentNode&&document.body.removeChild(a),u.parentNode&&document.head.removeChild(u)}},[]),null),ze=()=>(y.useEffect(()=>{const f=[{primary:"#db9e3a",secondary:"#ffc257",tertiary:"#ffe972"},{primary:"#e67e22",secondary:"#f39c12",tertiary:"#f1c40f"},{primary:"#d68910",secondary:"#f4d03f",tertiary:"#fff5b7"},{primary:"#e8979a",secondary:"#fc9eaf",tertiary:"#e8d0d9"},{primary:"#e74c3c",secondary:"#ec7063",tertiary:"#fadbd8"},{primary:"#c0392b",secondary:"#e74c3c",tertiary:"#f1948a"},{primary:"#73c2df",secondary:"#97e4ff",tertiary:"#b2c1ff"},{primary:"#3498db",secondary:"#5dade2",tertiary:"#aed6f1"},{primary:"#1d9bf0",secondary:"#5dbaff",tertiary:"#a8d8ff"},{primary:"#ffff4c",secondary:"#ffdea3",tertiary:"#fff5be"},{primary:"#f1c40f",secondary:"#f7dc6f",tertiary:"#fcf3cf"},{primary:"#2ecc71",secondary:"#58d68d",tertiary:"#a9dfbf"},{primary:"#9b59b6",secondary:"#bb8fce",tertiary:"#d7bde2"},{primary:"#8e44ad",secondary:"#a569bd",tertiary:"#c39bd3"}],t=document.createElement("div");t.className="easter-eggs-container",t.style.cssText=`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
`;const r=document.createElement("style");r.innerHTML=`
.easter-egg {
width: 30px;
height: 42px;
border-radius: 50%/60% 60% 40% 40%;
position: absolute;
cursor: pointer;
pointer-events: auto;
transition: transform 0.2s ease;
z-index: 1;
}
.easter-egg:hover {
transform: scale(1.1);
}
@keyframes egg-spawn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes egg-collect {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
@keyframes egg-disappear {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
`,document.head.appendChild(r);const a=()=>{const i=document.createElement("div");i.className="easter-egg";const h=f[Math.floor(Math.random()*f.length)];i.style.background=`linear-gradient(20deg, ${h.primary} 31%, ${h.secondary} 66%, ${h.tertiary} 83%)`;const s=window.innerWidth*.5,l=window.innerWidth-50,o=Math.random()*(l-s)+s,p=Math.random()*(window.innerHeight-200)+100;i.style.left=`${o}px`,i.style.top=`${p}px`,i.style.animation="egg-spawn 0.6s ease-out",i.addEventListener("click",()=>{i.style.animation="egg-collect 0.4s ease-out",i.style.pointerEvents="none",setTimeout(()=>{i.parentNode&&t.removeChild(i)},400)}),setTimeout(()=>{i.parentNode&&i.style.pointerEvents!=="none"&&(i.style.animation="egg-disappear 1s ease-out",setTimeout(()=>{i.parentNode&&t.removeChild(i)},1e3))},15e3),t.appendChild(i)},u=setInterval(()=>{t.children.length<3&&a()},8e3);return setTimeout(a,2e3),document.body.appendChild(t),()=>{clearInterval(u),t.parentNode&&document.body.removeChild(t),r.parentNode&&document.head.removeChild(r)}},[]),null),ie={Red:"#ff0043",Green:"#14fc56",Blue:"#1e7fff",Purple:"#e60aff",Gold:"#ffbf36",White:"#ffffff"},fe=Object.keys(ie).map(f=>ie[f]),Ce="_INVISIBLE_",He=[...fe,Ce],Ee=.9,H=Math.PI*2,mt=Math.PI*.5,D=(f,t)=>Math.random()*(t-f)+f,Re=(f,t)=>Math.floor(D(f,t)),gt=()=>fe[Re(0,fe.length)],Ve=(f,t,r=0,a=H)=>{const i=2*(.5*Math.sqrt(f/Math.PI))*Math.PI,h=i/2;for(let s=0;s<=h;s++){const l=s/h*mt,o=Math.cos(l),p=i*o,g=p*(a/H),C=H/p,k=Math.random()*C+r,E=C*.33;for(let S=0;S<g;S++){const F=Math.random()*E,v=C*S+k+F;t(v,o)}}},Ze=()=>{const f={};return He.forEach(t=>{f[t]=[]}),f},X=class X{constructor(t,r,a,u,i,h,s=0,l=0){d(this,"x");d(this,"y");d(this,"prevX");d(this,"prevY");d(this,"speedX");d(this,"speedY");d(this,"life");d(this,"fullLife");d(this,"color");d(this,"sparkFreq");d(this,"sparkTimer");d(this,"sparkColor");d(this,"sparkSpeed");d(this,"sparkLife");d(this,"sparkLifeVariation");d(this,"visible");d(this,"heavy");d(this,"strobe");d(this,"strobeFreq");d(this,"transitionTime");d(this,"secondColor");d(this,"colorChanged");d(this,"spinAngle");d(this,"spinSpeed");d(this,"spinRadius");d(this,"updateFrame");d(this,"onDeath");this.x=t,this.y=r,this.prevX=t,this.prevY=r,this.speedX=Math.sin(u)*i+s,this.speedY=Math.cos(u)*i+l,this.life=h,this.fullLife=h,this.color=a,this.sparkFreq=0,this.sparkTimer=0,this.sparkColor=a,this.sparkSpeed=1,this.sparkLife=750,this.sparkLifeVariation=.25,this.visible=!0,this.heavy=!1,this.strobe=!1,this.strobeFreq=60,this.transitionTime=0,this.colorChanged=!1,this.spinAngle=Math.random()*H,this.spinSpeed=.8,this.spinRadius=0,this.updateFrame=0}static add(t,r,a,u,i,h,s=0,l=0){const o=X._pool.pop()||new X(t,r,a,u,i,h,s,l);return o.x=t,o.y=r,o.prevX=t,o.prevY=r,o.color=a,o.speedX=Math.sin(u)*i+s,o.speedY=Math.cos(u)*i+l,o.life=h,o.fullLife=h,o.visible=!0,o.heavy=!1,o.sparkFreq=0,o.sparkTimer=0,o.sparkColor=a,o.sparkSpeed=1,o.sparkLife=750,o.sparkLifeVariation=.25,o.strobe=!1,o.transitionTime=0,o.secondColor=void 0,o.colorChanged=!1,o.spinAngle=Math.random()*H,o.spinRadius=0,o.onDeath=void 0,X.active[a].push(o),o}static returnInstance(t){var r;(r=t.onDeath)==null||r.call(t,t),t.onDeath=void 0,t.secondColor=void 0,X._pool.push(t)}update(t,r){if(this.life-=t,this.life<=0)return!1;const a=(this.life/this.fullLife)**.5,u=1-a;this.prevX=this.x,this.prevY=this.y,this.x+=this.speedX*(t/16),this.y+=this.speedY*(t/16);const i=this.heavy?.992:.98;if(this.speedX*=i**(t/16),this.speedY*=i**(t/16),this.speedY+=Ee*t/1e3,this.spinRadius>0&&(this.spinAngle+=this.spinSpeed*t/16,this.x+=Math.sin(this.spinAngle)*this.spinRadius*t/16,this.y+=Math.cos(this.spinAngle)*this.spinRadius*t/16),this.sparkFreq>0)for(this.sparkTimer-=t;this.sparkTimer<0;)this.sparkTimer+=this.sparkFreq*.75+this.sparkFreq*u*4,r.push(new B(this.x,this.y,this.sparkColor,Math.random()*H,Math.random()*this.sparkSpeed*a,this.sparkLife*.8+Math.random()*this.sparkLife*this.sparkLifeVariation));if(this.life<this.transitionTime){if(this.secondColor&&!this.colorChanged){this.colorChanged=!0;const h=X.active[this.color],s=h.indexOf(this);s>-1&&(h.splice(s,1),this.color=this.secondColor,X.active[this.secondColor].push(this),this.secondColor===Ce&&(this.sparkFreq=0))}this.strobe&&(this.visible=Math.floor(this.life/this.strobeFreq)%3===0)}return!0}draw(t){this.visible&&(t.strokeStyle=this.color,t.lineWidth=X.drawWidth,t.lineCap="round",t.beginPath(),t.moveTo(this.x,this.y),t.lineTo(this.prevX,this.prevY),t.stroke())}};d(X,"drawWidth",4.4),d(X,"airDrag",.98),d(X,"airDragHeavy",.992),d(X,"active",Ze()),d(X,"_pool",[]);let V=X;const N=class N{constructor(t,r,a,u,i,h){d(this,"x");d(this,"y");d(this,"prevX");d(this,"prevY");d(this,"speedX");d(this,"speedY");d(this,"life");d(this,"fullLife");d(this,"color");this.x=t,this.y=r,this.prevX=t,this.prevY=r,this.speedX=Math.sin(u)*i,this.speedY=Math.cos(u)*i,this.life=h,this.fullLife=h,this.color=a}static add(t,r,a,u,i,h){const s=N._pool.pop()||new N(t,r,a,u,i,h);return s.x=t,s.y=r,s.prevX=t,s.prevY=r,s.speedX=Math.sin(u)*i,s.speedY=Math.cos(u)*i,s.life=h,s.fullLife=h,s.color=a,N.active[a].push(s),s}static returnInstance(t){N._pool.push(t)}update(t){return this.life-=t,this.life<=0?!1:(this.prevX=this.x,this.prevY=this.y,this.x+=this.speedX*(t/16),this.y+=this.speedY*(t/16),this.speedX*=.9**(t/16),this.speedY*=.9**(t/16),this.speedY+=Ee*t/1e3,!0)}draw(t){const r=this.life/this.fullLife;t.globalAlpha=r,t.strokeStyle=this.color,t.lineWidth=N.drawWidth,t.lineCap="round",t.beginPath(),t.moveTo(this.x,this.y),t.lineTo(this.prevX,this.prevY),t.stroke(),t.globalAlpha=1}};d(N,"drawWidth",1),d(N,"airDrag",.9),d(N,"active",Ze()),d(N,"_pool",[]);let B=N;const Z=class Z{constructor(t,r,a){d(this,"x");d(this,"y");d(this,"radius");this.x=t,this.y=r,this.radius=a}static add(t,r,a){const u=Z._pool.pop()||new Z(t,r,a);return u.x=t,u.y=r,u.radius=a,Z.active.push(u),u}static returnInstance(t){Z._pool.push(t)}};d(Z,"active",[]),d(Z,"_pool",[]);let K=Z;class vt{constructor(t,r,a){d(this,"x");d(this,"y");d(this,"targetX");d(this,"targetY");d(this,"speedX");d(this,"speedY");d(this,"life");d(this,"color");d(this,"size");d(this,"type");d(this,"exploded");d(this,"comet");this.x=t,this.y=window.innerHeight,this.targetX=r,this.targetY=a;const u=Math.sqrt((r-t)**2+(a-this.y)**2),i=(u*.021)**.64;this.speedX=(r-t)/u*i*.3,this.speedY=-i*.8,this.life=i*300,this.color=gt(),this.size=D(1,1.2),this.type=this.getRandomType(),this.exploded=!1}getRandomType(){const t=["chrysanthemum","palm"];return t[Re(0,t.length)]}update(t){return!(this.exploded||(this.life-=t,this.x+=this.speedX*(t/16),this.y+=this.speedY*(t/16),this.speedY+=Ee*t/1e3,Math.sqrt((this.targetX-this.x)**2+(this.targetY-this.y)**2)<15||this.life<=0||this.speedY>0))}launch(){this.comet=V.add(this.x,this.y,this.color,Math.PI,Math.abs(this.speedY)*1.5,this.life),this.comet.heavy=!0,this.comet.spinRadius=D(.65,.4),this.comet.sparkFreq=32,this.comet.sparkLife=320,this.comet.sparkLifeVariation=3,this.comet.sparkSpeed=.5,this.comet.sparkColor=this.color}draw(t){this.exploded||(t.strokeStyle=this.color,t.lineWidth=3,t.lineCap="round",t.beginPath(),t.moveTo(this.x,this.y),t.lineTo(this.x-this.speedX*3,this.y-this.speedY*3),t.stroke(),t.fillStyle=this.color,t.beginPath(),t.arc(this.x,this.y,2,0,H),t.fill())}explode(t,r){this.exploded=!0;const a=60+Re(0,40),u=3+this.size;switch(this.type){case"chrysanthemum":this.createChrysanthemum(t,r,a,u);break;case"palm":this.createPalm(t,r,a,u);break}this.createBurstFlash(r)}createChrysanthemum(t,r,a,u){Ve(a,(i,h)=>{const s=V.add(this.x,this.y,this.color,i,h*u,900+D(-200,200));Math.random()<.3&&(s.sparkFreq=200,s.sparkColor=ie.Gold,s.sparkSpeed=.5,s.sparkLife=400),t.push(s)})}createPalm(t,r,a,u){Ve(Math.floor(a*.4),(i,h)=>{const s=V.add(this.x,this.y,this.color,i,h*u,1800+D(-300,300));s.sparkFreq=80,s.sparkColor=ie.Gold,s.sparkSpeed=.8,s.sparkLife=1400,s.sparkLifeVariation=2,t.push(s)})}createBurstFlash(t){K.add(this.x,this.y,40+this.size*10);for(let r=0;r<30;r++)t.push(new B(this.x,this.y,ie.White,Math.random()*H,D(.5,3),150+D(-30,30)))}}const Be=()=>{const f=y.useRef(null),t=y.useRef(null),r=y.useRef(),a=y.useRef(0),u=y.useRef([]),i=y.useRef([]),h=y.useRef([]),s=y.useRef(0),l=y.useCallback(()=>{const g=f.current,C=t.current;if(!g||!C)return;const k=window.innerWidth,E=window.innerHeight;g.width=k,g.height=E,C.width=k,C.height=E,document.body.style.overflow="hidden",document.body.style.margin="0",document.body.style.padding="0"},[]),o=y.useCallback(()=>{const g=window.innerWidth,C=window.innerHeight,k=120,E=D(k,g-k),S=D(k,g-k),F=D(C*.35,C*.45),v=new vt(E,S,F);v.launch(),u.current.push(v)},[]),p=y.useCallback(g=>{const C=f.current,k=t.current;if(!C||!k)return;const E=C.getContext("2d"),S=k.getContext("2d");if(!E||!S)return;const F=g-a.current||16;for(a.current=g,g-s.current>1500&&(o(),s.current=g),S.clearRect(0,0,k.width,k.height),E.globalCompositeOperation="source-over",E.fillStyle="rgba(0, 0, 0, 0.15)",E.fillRect(0,0,C.width,C.height);K.active.length>0;){const v=K.active.pop(),w=E.createRadialGradient(v.x,v.y,0,v.x,v.y,v.radius);w.addColorStop(.024,"rgba(255, 255, 255, 1)"),w.addColorStop(.125,"rgba(255, 160, 20, 0.2)"),w.addColorStop(.32,"rgba(255, 140, 20, 0.11)"),w.addColorStop(1,"rgba(255, 120, 20, 0)"),E.fillStyle=w,E.fillRect(v.x-v.radius,v.y-v.radius,v.radius*2,v.radius*2),K.returnInstance(v)}E.globalCompositeOperation="lighten";for(let v=u.current.length-1;v>=0;v--){const w=u.current[v];w.draw(S),w.update(F)||(w.explode(i.current,h.current),u.current.splice(v,1))}He.forEach(v=>{const w=V.active[v];E.strokeStyle=v,E.lineWidth=V.drawWidth,E.lineCap="round";for(let Y=w.length-1;Y>=0;Y--){const L=w[Y];v!==Ce&&L.draw(E),L.update(F,h.current)||(w.splice(Y,1),V.returnInstance(L))}}),fe.forEach(v=>{const w=B.active[v];E.strokeStyle=v,E.lineWidth=B.drawWidth,E.lineCap="round";for(let Y=w.length-1;Y>=0;Y--){const L=w[Y];L.draw(E),L.update(F)||(w.splice(Y,1),B.returnInstance(L))}}),r.current=requestAnimationFrame(p)},[o]);return y.useEffect(()=>(l(),window.addEventListener("resize",l),r.current=requestAnimationFrame(p),()=>{window.removeEventListener("resize",l),r.current&&cancelAnimationFrame(r.current)}),[l,p]),b.jsxs("div",{className:"fixed inset-0 pointer-events-none",style:{width:"100vw",height:"100vh",margin:0,padding:0,overflow:"hidden"},children:[b.jsx("canvas",{ref:f,className:"absolute inset-0",style:{mixBlendMode:"lighten",width:"100vw",height:"100vh",display:"block"}}),b.jsx("canvas",{ref:t,className:"absolute inset-0",style:{mixBlendMode:"lighten",width:"100vw",height:"100vh",display:"block"}})]})},yt={pumpkin1:"/assets/pumpkin1.png",pumpkin2:"/assets/pumpkin2.png",leaf:"/assets/leaf.png",leaf1:"/assets/leaf1.png",leaf2:"/assets/leaf2.png",leaff:"/assets/leaff.png"},oe=f=>yt[f],$e=()=>(y.useEffect(()=>{const f=document.createElement("div");f.id="halloween-container",f.style.cssText=`
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 10;
overflow: hidden;
`;const t=document.createElement("style");t.innerHTML=`
.ghost {
position: absolute;
z-index: 15;
transform-origin: center;
width: 50px;
margin: 20px 0 0 -25px;
transition: opacity 0.5s ease;
}
.ghost__eyes,
.ghost__mouth {
position: absolute;
z-index: 1;
width: 8px;
height: 8px;
top: 20px;
left: 50%;
transform: translate(-50%);
border-radius: 50px;
background: #161616;
margin-left: -12px;
transform-origin: center;
}
.ghost__eyes {
box-shadow: 24px 0 0 #161616;
}
.ghost__mouth {
margin: 0;
top: 34px;
transform: scale(0.8);
border-radius: 12px 12px 8px 8px;
width: 12px;
transform-origin: center bottom;
overflow: hidden;
margin-left: 0;
left: 50%;
transform: translateX(-50%) scale(0.8);
}
.ghost__tail {
position: absolute;
z-index: -1;
top: 47px;
height: 32px;
width: 100%;
filter: url(#goo);
}
.ghost__tail:before {
content: '';
background: #fff;
position: absolute;
bottom: 20px;
left: 0;
height: 60px;
width: 100%;
border-radius: 24px 24px 3px 3px;
}
.ghost__rip {
width: 8px;
height: 16px;
background: #fff;
position: absolute;
top: 8px;
left: 0;
box-shadow: -36px 0 0 #fff, -18px 0 0 #fff, 18px 0 0 #fff, 36px 0 0 #fff, 54px 0 0 #fff;
border-radius: 50%;
animation: ghost-rips 1s linear infinite;
}
@keyframes ghost-rips {
0% {
left: 0;
top: 7px;
}
50% {
left: 18px;
top: 12px;
}
100% {
left: 36px;
top: 7px;
}
}
@keyframes ghost-float {
0%, 100% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-12px) scale(1.05);
}
}
@keyframes ghost-move {
0% {
transform: translate(var(--start-x), var(--start-y));
}
25% {
transform: translate(var(--mid1-x), var(--mid1-y));
}
50% {
transform: translate(var(--mid2-x), var(--mid2-y));
}
75% {
transform: translate(var(--mid3-x), var(--mid3-y));
}
100% {
transform: translate(var(--start-x), var(--start-y));
}
}
.ghost-floating {
animation: ghost-float 3s ease-in-out infinite, ghost-move 20s linear infinite;
}
.ghost-disappearing {
opacity: 0;
}
.pumpkin {
position: absolute;
font-size: 2.5rem;
z-index: 1;
pointer-events: none;
opacity: 0.9;
}
`,document.head.appendChild(t);const r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("xmlns","http://www.w3.org/2000/svg"),r.setAttribute("version","1.1"),r.style.position="absolute",r.style.width="0",r.style.height="0",r.innerHTML=`
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="ghost-blur" />
<feColorMatrix in="ghost-blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 16 -7" result="ghost-gooey" />
</filter>
</defs>
`;const a=document.createElement("div");a.className="ghost ghost-floating",a.innerHTML=`
<div class="ghost__head">
<div class="ghost__eyes"></div>
<div class="ghost__mouth"></div>
</div>
<div class="ghost__tail">
<div class="ghost__rip"></div>
</div>
`;const u=()=>{const l=Math.random()*(window.innerWidth-100),o=Math.random()*(window.innerHeight-100),p=Math.random()*(window.innerWidth-100),g=Math.random()*(window.innerHeight-100),C=Math.random()*(window.innerWidth-100),k=Math.random()*(window.innerHeight-100),E=Math.random()*(window.innerWidth-100),S=Math.random()*(window.innerHeight-100);a.style.setProperty("--start-x",`${l}px`),a.style.setProperty("--start-y",`${o}px`),a.style.setProperty("--mid1-x",`${p}px`),a.style.setProperty("--mid1-y",`${g}px`),a.style.setProperty("--mid2-x",`${C}px`),a.style.setProperty("--mid2-y",`${k}px`),a.style.setProperty("--mid3-x",`${E}px`),a.style.setProperty("--mid3-y",`${S}px`)};u();const i=()=>{const l=Math.random()*8e3+5e3,o=Math.random()*4e3+2e3;setTimeout(()=>{a.classList.add("ghost-disappearing"),setTimeout(()=>{a.classList.remove("ghost-disappearing"),u(),i()},o)},l)};i();const h=[{image:oe("pumpkin1"),position:{top:"200px",left:"49%"}},{image:oe("pumpkin1"),position:{top:"500px",left:"85%"}},{image:oe("pumpkin2"),position:{top:"800px",left:"70%"}},{image:oe("pumpkin2"),position:{top:"870px",left:"85%"}}],s=document.createElement("div");return s.style.cssText=`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 5;
`,h.forEach((l,o)=>{const p=document.createElement("div");p.className="pumpkin";const g=document.createElement("img");g.src=l.image,g.style.width="60px",g.style.height="60px",g.style.objectFit="contain",p.appendChild(g),Object.entries(l.position).forEach(([C,k])=>{p.style[C]=k}),p.style.animationDelay=`${o*.8}s`,s.appendChild(p)}),document.body.appendChild(s),f.appendChild(r),f.appendChild(a),document.body.appendChild(f),()=>{f.parentNode&&document.body.removeChild(f),s.parentNode&&document.body.removeChild(s),t.parentNode&&document.head.removeChild(t),r.parentNode&&r.parentNode.removeChild(r)}},[]),null),Ge=()=>{const f=y.useRef(null);return y.useEffect(()=>{const t=f.current;if(!t)return;const r=t.getContext("2d");if(!r)return;const a=()=>{t.width=window.innerWidth,t.height=window.innerHeight};window.addEventListener("resize",a),a();class u{constructor(){d(this,"x");d(this,"y");d(this,"radius");d(this,"speed");d(this,"wind");d(this,"opacity");this.x=Math.random()*((t==null?void 0:t.width)||window.innerWidth),this.y=Math.random()*-((t==null?void 0:t.height)||window.innerHeight),this.radius=Math.random()*3+1,this.speed=Math.random()*3+1,this.wind=Math.random()*.5-.25,this.opacity=Math.random()*.5+.5}update(){this.y+=this.speed,this.x+=this.wind,this.x+=Math.sin(this.y*.01)*.5,this.y>((t==null?void 0:t.height)||window.innerHeight)&&(this.y=Math.random()*-100,this.x=Math.random()*((t==null?void 0:t.width)||window.innerWidth)),this.x<0&&(this.x=(t==null?void 0:t.width)||window.innerWidth),this.x>((t==null?void 0:t.width)||window.innerWidth)&&(this.x=0)}draw(o){o.beginPath(),o.arc(this.x,this.y,this.radius,0,Math.PI*2),o.fillStyle=`rgba(255, 255, 255, ${this.opacity})`,o.fill()}}const i=[],h=Math.min(100,Math.floor(window.innerWidth/15));for(let l=0;l<h;l++)i.push(new u);const s=()=>{t&&(r.clearRect(0,0,t.width,t.height),i.forEach(l=>{l.update(),l.draw(r)}),requestAnimationFrame(s))};return requestAnimationFrame(s),()=>window.removeEventListener("resize",a)},[]),b.jsx("canvas",{ref:f,className:"fixed top-0 left-0 w-full h-full pointer-events-none z-10"})},Ue=()=>(y.useEffect(()=>{const f=document.createElement("style");return f.innerHTML=`
.summer-hat-container {
position: absolute; /* Alterado de fixed para absolute */
top: 800px; /* Define a posição vertical */
left: 580px; /* Define a posição horizontal */
width: 200px;
height: 200px;
pointer-events: none;
z-index: 15;
}
.summer-umbrella-wrapper {
margin-top: -50px;
margin-right: -25px;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(70deg) rotateY(-15deg);
position: relative;
}
.umbrella-pole {
position: absolute;
width: 5px;
height: 150px;
top: 100px;
left: 100px;
background: #888;
transform-origin: 50% 0;
transform: translateZ(-3px) rotateX(-90deg);
border-radius: 2px;
z-index: 1;
}
.umbrella {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: umbrella-rotate 5s linear infinite;
z-index: 2;
}
.umbrella-triangle {
position: absolute;
top: 100px;
left: 75px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 24px 100px 25px;
border-color: transparent transparent #fff transparent;
transform-origin: 50% 0;
z-index: 2;
}
.umbrella-triangle-1 {
transform: rotateZ(0deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-2 {
transform: rotateZ(30deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
.umbrella-triangle-3 {
transform: rotateZ(60deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-4 {
transform: rotateZ(90deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
.umbrella-triangle-5 {
transform: rotateZ(120deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-6 {
transform: rotateZ(150deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
.umbrella-triangle-7 {
transform: rotateZ(180deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-8 {
transform: rotateZ(210deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
.umbrella-triangle-9 {
transform: rotateZ(240deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-10 {
transform: rotateZ(270deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
.umbrella-triangle-11 {
transform: rotateZ(300deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #d70606 transparent;
}
.umbrella-triangle-12 {
transform: rotateZ(330deg) rotateX(-24deg) translateY(-1px);
border-color: transparent transparent #fff transparent;
}
@keyframes umbrella-rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
`,document.head.appendChild(f),()=>{f.parentNode&&document.head.removeChild(f)}},[]),b.jsx("div",{className:"summer-hat-container",children:b.jsxs("div",{className:"summer-umbrella-wrapper",children:[b.jsx("div",{className:"umbrella-pole"}),b.jsxs("div",{className:"umbrella",children:[b.jsx("div",{className:"umbrella-triangle umbrella-triangle-1"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-2"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-3"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-4"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-5"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-6"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-7"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-8"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-9"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-10"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-11"}),b.jsx("div",{className:"umbrella-triangle umbrella-triangle-12"})]})]})})),qe=()=>(y.useEffect(()=>{const f=[oe("leaff")],t=document.createElement("div");t.id="autumn-leaves-container",t.style.cssText=`
position: