/* ===== wiglyboo landing — styles ===== */ :root{ --bg:#0b0612; --bg-2:#120a20; --panel:rgba(255,255,255,.04); --panel-bd:rgba(255,255,255,.09); --ink:#f7eefb; --muted:#b9a7cf; --purple:#9146ff; --purple-soft:#b07bff; --pink:#ff5ca8; --pink-soft:#ff8fc7; --blush:#ffd6e8; --cyan:#46e6ff; --gold:#ffc24b; --covert:#eb4b4b; --classified:#d32ce6; --contraband:#e4ae39; --knife:#ffd24a; --r:20px; --maxw:1180px; --shadow:0 24px 60px -20px rgba(0,0,0,.7); font-synthesis:none; } *{box-sizing:border-box;margin:0;padding:0} /* base dark on so zoom-out / overscroll never reveals a white frame */ html{scroll-behavior:smooth;background:var(--bg);min-height:100%} body{ background: radial-gradient(1200px 700px at 80% -10%, rgba(145,70,255,.22), transparent 60%), radial-gradient(900px 600px at 0% 10%, rgba(255,92,168,.18), transparent 55%), linear-gradient(180deg,var(--bg),var(--bg-2)); background-color:var(--bg); color:var(--ink); font-family:"Outfit",system-ui,sans-serif; line-height:1.55; overflow-x:hidden; min-height:100vh; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3{font-family:"Chakra Petch",sans-serif;line-height:1.05;letter-spacing:.5px} .grad-text{background:linear-gradient(90deg,var(--pink),var(--purple-soft));-webkit-background-clip:text;background-clip:text;color:transparent} .grad-text2{background:linear-gradient(90deg,var(--cyan),var(--purple-soft));-webkit-background-clip:text;background-clip:text;color:transparent} /* canvas layers */ #petals{position:fixed;inset:0;z-index:1;pointer-events:none} #confetti{position:fixed;inset:0;z-index:90;pointer-events:none;display:none} .cursor-glow{position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%; background:radial-gradient(circle,rgba(145,70,255,.16),transparent 65%); transform:translate(-50%,-50%);pointer-events:none;z-index:0;transition:opacity .3s;mix-blend-mode:screen} /* ===== buttons ===== */ .btn{ --c:var(--purple); display:inline-flex;align-items:center;gap:.5rem; padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:.98rem; border:1px solid transparent;cursor:pointer;position:relative; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s; white-space:nowrap; } .btn:active{transform:translateY(1px) scale(.99)} .btn--primary{background:linear-gradient(95deg,var(--purple),var(--pink));color:#fff;box-shadow:0 12px 30px -10px rgba(145,70,255,.7)} .btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px -10px rgba(255,92,168,.7)} .btn--gold{background:linear-gradient(95deg,#ffb13b,#ffe08a);color:#3a2400;box-shadow:0 12px 30px -10px rgba(255,194,75,.7)} .btn--gold:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px rgba(255,194,75,.85)} .btn--ghost{background:var(--panel);border-color:var(--panel-bd);color:var(--ink);backdrop-filter:blur(8px)} .btn--ghost:hover{transform:translateY(-3px);border-color:var(--pink-soft);background:rgba(255,255,255,.07)} .btn--live{background:rgba(255,92,168,.12);border:1px solid rgba(255,92,168,.4);color:var(--pink-soft);font-size:.85rem;padding:.55rem 1rem} .btn--live:hover{background:rgba(255,92,168,.2)} .dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(255,92,168,.7);animation:pulse 1.8s infinite} .dot--big{width:16px;height:16px;margin:0 auto} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,92,168,.6)}70%{box-shadow:0 0 0 12px rgba(255,92,168,0)}100%{box-shadow:0 0 0 0 rgba(255,92,168,0)}} /* ===== nav ===== */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.2rem; padding:1rem clamp(1rem,4vw,2.4rem);transition:background .3s,backdrop-filter .3s,padding .3s,border-color .3s; border-bottom:1px solid transparent} .nav.scrolled{background:rgba(12,7,22,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--panel-bd);padding-top:.7rem;padding-bottom:.7rem} .nav__brand{display:flex;align-items:center;gap:.3rem;font-family:"Chakra Petch";font-weight:700;font-size:1.25rem;margin-right:auto} .nav__logo{background:linear-gradient(90deg,var(--pink-soft),var(--purple-soft));-webkit-background-clip:text;background-clip:text;color:transparent} .nav__flower{animation:spin 9s linear infinite;display:inline-block} .nav__links{display:flex;gap:1.5rem;font-size:.95rem;font-weight:500} .nav__links a{color:var(--muted);position:relative;padding:.2rem 0;transition:color .2s} .nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(90deg,var(--pink),var(--purple-soft));transition:width .25s} .nav__links a:hover{color:var(--ink)} .nav__links a:hover::after{width:100%} .nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.3rem} .nav__burger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s} /* ===== hero ===== */ .hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:7rem 1.2rem 4rem;z-index:2} .hero__bg{position:absolute;inset:0;z-index:-2; background:radial-gradient(700px 500px at 50% 25%,rgba(145,70,255,.28),transparent 60%); animation:bgFloat 12s ease-in-out infinite} .hero__grid{position:absolute;inset:0;z-index:-2;opacity:.25;mask-image:radial-gradient(circle at 50% 35%,#000 0%,transparent 70%); background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:46px 46px} @keyframes bgFloat{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.08) translateY(-14px)}} .hero__inner{max-width:760px;display:flex;flex-direction:column;align-items:center;gap:1.1rem} .hero__pills{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap} .pill{font-family:"Chakra Petch";font-size:.72rem;letter-spacing:.12em;font-weight:600;padding:.34rem .85rem;border-radius:999px; border:1px solid var(--panel-bd);background:rgba(255,255,255,.05);color:var(--ink);backdrop-filter:blur(6px); transition:transform .25s,box-shadow .25s,border-color .25s} .pill:hover{transform:translateY(-2px)} .pill--cs2{border-color:rgba(176,123,255,.5);color:#cbb0ff;box-shadow:0 6px 18px -10px rgba(145,70,255,.85)} .pill--irl{border-color:rgba(255,143,199,.5);color:var(--pink-soft);box-shadow:0 6px 18px -10px rgba(255,92,168,.85)} .pill--ow2{border-color:rgba(255,165,75,.5);color:#ffb968;box-shadow:0 6px 18px -10px rgba(255,140,40,.85)} .pill--jc{border-color:rgba(70,230,255,.5);color:#8be9ff;box-shadow:0 6px 18px -10px rgba(70,230,255,.85)} .hero__avatar-wrap{position:relative;width:190px;height:190px;display:grid;place-items:center;margin:.4rem 0} .hero__avatar{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85); box-shadow:0 0 50px rgba(255,92,168,.5);position:relative;z-index:2} .hero__ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(145,70,255,.6);animation:spin 16s linear infinite} .hero__ring--2{inset:14px;border:2px dotted rgba(255,92,168,.55);animation:spin 11s linear infinite reverse} .hero__sticker{position:absolute;bottom:8px;right:6px;font-size:2rem;z-index:3;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));animation:bob 3s ease-in-out infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-7px) rotate(8deg)}} .hero__title{font-size:clamp(3.2rem,11vw,6.5rem);font-weight:700; background:linear-gradient(120deg,#fff 10%,var(--pink-soft) 45%,var(--purple-soft) 90%); -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(145,70,255,.35)} .hero__tag{font-size:clamp(1rem,2.6vw,1.35rem);color:var(--ink);font-weight:500} .flower-spin{display:inline-block;animation:spin 6s linear infinite} .hero__rotator{color:var(--muted);font-size:1.05rem;font-weight:500} .hero__rotator .grad-text{font-family:"Chakra Petch";font-weight:700} .hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem} .hero__socials{display:flex;gap:.7rem;align-items:center;color:var(--muted);font-size:.95rem;font-weight:500;margin-top:.4rem} .hero__socials a{transition:color .2s,transform .2s} .hero__socials a:hover{color:var(--pink-soft);transform:translateY(-2px)} .hero__scroll{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:14px;z-index:3} .hero__scroll span{position:absolute;top:7px;left:50%;width:4px;height:8px;background:var(--pink-soft);border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.6s infinite} @keyframes scrollDot{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:24px}100%{opacity:0}} /* ===== prize stat ===== */ .prize-stat{display:inline-flex;align-items:baseline;gap:.55rem;margin-top:1.5rem; background:var(--panel);border:1px solid var(--panel-bd);border-radius:999px;padding:.55rem 1.5rem;backdrop-filter:blur(10px); box-shadow:0 12px 34px -16px rgba(255,194,75,.45)} .prize-stat__num{font-family:"Chakra Petch";font-size:2rem;font-weight:700;line-height:1; background:linear-gradient(90deg,var(--gold),var(--pink-soft));-webkit-background-clip:text;background-clip:text;color:transparent} .prize-stat__label{color:var(--muted);font-size:.95rem;font-weight:500} /* ===== sections ===== */ .section{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,9vw,7rem) 1.2rem} .section__head{text-align:center;max-width:680px;margin:0 auto 3rem} .eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--pink-soft);margin-bottom:.7rem} .section__head h2{font-size:clamp(2rem,5.5vw,3.2rem);font-weight:700} .section__sub{color:var(--muted);margin-top:.8rem;font-size:1.05rem} /* ===== watch ===== */ .watch__frame{max-width:980px;margin:0 auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--panel-bd); box-shadow:var(--shadow);background:#000} .watch__player{position:relative;width:100%;aspect-ratio:16/9} .watch__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .watch__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.5rem; background:radial-gradient(600px 300px at 50% 30%,rgba(145,70,255,.25),transparent),#0c0716;color:var(--muted)} .watch__placeholder small{font-size:.78rem;opacity:.7} /* ===== giveaways ===== */ .give__row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:stretch} .give-card{position:relative;background:var(--panel);border:1px solid var(--panel-bd);border-radius:24px;padding:1.8rem;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center} .give-card--daily{box-shadow:inset 0 0 0 1px rgba(235,75,75,.18)} .give-card--monthly{background:linear-gradient(180deg,rgba(255,194,75,.08),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,194,75,.3),0 30px 70px -30px rgba(255,194,75,.35)} .give-card__tag{align-self:flex-start;font-size:.72rem;letter-spacing:.16em;font-weight:700;padding:.4rem .8rem;border-radius:999px; background:rgba(235,75,75,.14);color:#ff8d8d;border:1px solid rgba(235,75,75,.35);margin-bottom:.6rem} .give-card__tag--gold{background:rgba(255,194,75,.16);color:var(--gold);border-color:rgba(255,194,75,.45)} .give-card__media{position:relative;width:100%;max-width:360px;aspect-ratio:4/3;margin:.4rem auto 1rem} .give-card__skin{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2; opacity:0;transition:opacity .5s ease;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))} .give-card__skin.is-active{opacity:1} .give-card__skin--knife{filter:drop-shadow(0 0 26px rgba(255,210,74,.5)) drop-shadow(0 18px 30px rgba(0,0,0,.55))} .floaty{animation:floaty 5s ease-in-out infinite} @keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}} .rarity{position:absolute;inset:0;margin:auto;width:78%;height:78%;border-radius:50%;filter:blur(34px);z-index:1;opacity:.75} .rarity--covert{background:radial-gradient(circle,var(--covert),transparent 70%)} .rarity--classified{background:radial-gradient(circle,var(--classified),transparent 70%)} .rarity--contraband{background:radial-gradient(circle,var(--contraband),transparent 70%)} .rarity--knife{background:radial-gradient(circle,var(--knife),transparent 70%);animation:pulseGlow 3s ease-in-out infinite} @keyframes pulseGlow{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:.9;transform:scale(1.08)}} .give-card h3{font-size:1.05rem;color:var(--muted);font-weight:500;font-family:"Outfit"} .give-card__item{font-family:"Chakra Petch";font-weight:700;font-size:1.35rem;margin:.2rem 0 .25rem} .give-card__rotname{font-size:.98rem;font-weight:600;color:var(--pink-soft);margin-bottom:.55rem;min-height:1.3em;font-variant-numeric:tabular-nums} .give-card__rotname--gold{color:var(--gold)} .give-card__desc{color:var(--muted);font-size:.92rem;max-width:380px;margin-bottom:1.2rem} .give-card__enter{margin-top:auto} /* steps */ .steps{margin-top:2.4rem;background:var(--panel);border:1px solid var(--panel-bd);border-radius:24px;padding:2rem;text-align:center} .steps__title{font-size:1.4rem;margin-bottom:.5rem} .steps__lead{color:var(--muted);max-width:560px;margin:0 auto 1.7rem;font-size:1rem} .steps__lead strong{color:var(--pink-soft);font-weight:600} .steps__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;max-width:840px;margin:0 auto 1.8rem;text-align:left} .steps__list li{display:flex;gap:.85rem;align-items:center;background:rgba(0,0,0,.22);border:1px solid var(--panel-bd);border-radius:14px;padding:1rem 1.1rem} .steps__n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:"Chakra Petch";font-weight:700; background:linear-gradient(120deg,var(--purple),var(--pink));color:#fff;font-size:1rem} .steps__txt{display:flex;flex-direction:column;gap:.12rem;line-height:1.3} .steps__txt strong{color:var(--ink);font-weight:600;font-size:.98rem} .steps__txt em{color:var(--muted);font-style:normal;font-size:.82rem} .steps__cta{margin-bottom:.5rem} .entry__note{color:var(--muted);font-size:.78rem;margin-top:1rem;opacity:.85} /* ===== socials ===== */ .social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .social{display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--panel-bd);border-radius:18px;padding:1.2rem 1.3rem; transition:transform .25s,border-color .25s,box-shadow .25s;transform-style:preserve-3d} .social__icon{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06)} .social__icon svg{width:24px;height:24px} .social__txt strong{display:block;font-family:"Chakra Petch";font-size:1.05rem} .social__txt span{font-size:.85rem;color:var(--muted)} .social__arrow{margin-left:auto;font-size:1.2rem;color:var(--muted);transition:transform .25s} .social:hover{transform:translateY(-5px)} .social:hover .social__arrow{transform:translate(3px,-3px);color:var(--ink)} .social--twitch:hover{border-color:#9146ff;box-shadow:0 16px 36px -14px rgba(145,70,255,.6)} .social--twitch .social__icon{color:#b07bff} .social--tiktok:hover,.social--tiktok2:hover{border-color:#ff5ca8;box-shadow:0 16px 36px -14px rgba(255,92,168,.55)} .social--tiktok .social__icon,.social--tiktok2 .social__icon{color:#ff8fc7} .social--ig:hover{border-color:#e1306c;box-shadow:0 16px 36px -14px rgba(225,48,108,.55)} .social--ig .social__icon{color:#ff7eb3} .social--yt:hover{border-color:#ff3d3d;box-shadow:0 16px 36px -14px rgba(255,61,61,.5)} .social--yt .social__icon{color:#ff6b6b} .social--discord:hover{border-color:#5865f2;box-shadow:0 16px 36px -14px rgba(88,101,242,.6)} .social--discord .social__icon{color:#7d88ff} .linktree{text-align:center;margin-top:1.8rem} /* ===== footer ===== */ .footer{position:relative;z-index:2;text-align:center;padding:3.5rem 1.2rem 2.5rem;border-top:1px solid var(--panel-bd);margin-top:2rem} .footer__brand{font-family:"Chakra Petch";font-weight:700;font-size:1.5rem;background:linear-gradient(90deg,var(--pink-soft),var(--purple-soft));-webkit-background-clip:text;background-clip:text;color:transparent} .footer__brand span{-webkit-text-fill-color:initial} .footer__line{color:var(--muted);margin:.4rem 0 1rem} .footer__socials{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem} .footer__socials a{color:var(--muted);font-weight:500;transition:color .2s} .footer__socials a:hover{color:var(--pink-soft)} .footer__fine{color:var(--muted);font-size:.74rem;max-width:620px;margin:0 auto;opacity:.7;line-height:1.5} .footer__copy{color:var(--muted);font-size:.82rem;margin-top:1rem;opacity:.85} /* ===== toast ===== */ .toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,140%);z-index:100; background:linear-gradient(95deg,var(--purple),var(--pink));color:#fff;font-weight:600; padding:.9rem 1.4rem;border-radius:999px;box-shadow:0 16px 40px -12px rgba(255,92,168,.7);transition:transform .4s cubic-bezier(.2,.9,.2,1);max-width:90vw;text-align:center} .toast.show{transform:translate(-50%,0)} /* ===== reveal ===== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} /* ===== responsive ===== */ @media(max-width:1000px){ .social-grid{grid-template-columns:repeat(2,1fr)} .steps__list{grid-template-columns:1fr;max-width:480px} } @media(max-width:820px){ .nav__links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;background:rgba(12,7,22,.97);backdrop-filter:blur(16px); padding:5.5rem 2rem 2.5rem;gap:1.4rem;transform:translateY(-120%);transition:transform .4s;font-size:1.2rem;border-bottom:1px solid var(--panel-bd)} .nav__links.open{transform:none} .nav__burger{display:flex;order:3} .btn--live{order:2} .give__row{grid-template-columns:1fr} } @media(max-width:560px){ .social-grid,.steps__list{grid-template-columns:1fr} .give-card{padding:1.4rem 1.2rem} /* ---- condensed mobile hero (keeps base 100svh so content stays vertically centered) ---- */ .hero{padding:5rem 1.1rem 3rem} .hero__inner{gap:.6rem;max-width:100%} .hero__scroll{display:none} /* was overlapping the social row */ .hero__pills{gap:.4rem} .pill{font-size:.66rem;padding:.3rem .7rem;letter-spacing:.08em} .hero__avatar-wrap{width:128px;height:128px;margin:.1rem 0} .hero__avatar{width:100px;height:100px;border-width:2px} .hero__sticker{font-size:1.45rem;bottom:2px;right:0} .hero__title{font-size:clamp(2.4rem,13.5vw,3rem)} .hero__tag{font-size:.98rem;line-height:1.35} .hero__rotator{font-size:.92rem;margin-top:-.1rem} .hero__cta{flex-direction:column;align-items:center;gap:.55rem;width:100%;margin-top:.4rem} .hero__cta .btn{width:100%;max-width:300px;justify-content:center} .hero__socials{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.3rem;font-size:.9rem} /* ---- nav tightening ---- */ .nav{gap:.6rem;padding:.85rem 1rem} .btn--live{font-size:.78rem;padding:.5rem .8rem} /* ---- sections: less vertical padding, tighter heads ---- */ .section{padding:3.2rem 1.1rem} .section__head{margin-bottom:2rem} .prize-stat{padding:.5rem 1.1rem} .prize-stat__num{font-size:1.6rem} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.1ms!important;scroll-behavior:auto} .reveal{opacity:1;transform:none} }