/* ignorado.alvind.com — v1.1.0 | responsive, local-file compatible */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17152b;background:#f9f7ff;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
body{min-height:100vh;min-height:100svh}
.scene{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:40px 18px 130px;background:radial-gradient(ellipse at 55% 38%,#fff 0%,#fff 22%,#f7f4ff 68%,#eadbff 100%)}
.glow{position:absolute;z-index:-1;filter:blur(40px);border-radius:50%;pointer-events:none}
.glow-left{background:#dcb4ff70;width:55vw;height:40vh;top:-15vh;left:-24vw}
.glow-right{background:#b4ddff66;width:48vw;height:45vh;top:-14vh;right:-20vw}
.content{position:relative;z-index:2;width:min(100%,800px);text-align:center;animation:enter .9s both}
.symbol{width:clamp(180px,35vw,260px);height:clamp(120px,25vw,190px);position:relative;margin:0 auto clamp(34px,6vh,60px)}
.checks{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 4px #8e90a822)}
.tick{fill:none;stroke:#9295a6;stroke-width:23;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:260;animation:draw .8s ease-out forwards}
.tick-two{animation-delay:.28s}
.ray{position:absolute;width:7px;height:27px;border-radius:99px;background:#ffcd00;animation:spark 1.4s ease-out both}
.ray-1{top:-4px;left:42%;transform:rotate(-24deg);animation-delay:.6s}
.ray-2{top:-14px;left:58%;transform:rotate(7deg);animation-delay:.7s}
.ray-3{top:-2px;left:73%;transform:rotate(32deg);animation-delay:.8s}
.ray-4{top:45%;left:-12px;background:#ff555d;transform:rotate(-65deg);animation-delay:.75s}
.ray-5{top:18%;left:0;background:#ff555d;transform:rotate(-35deg);animation-delay:.85s}
.ray-6{top:53%;right:-14px;transform:rotate(68deg);animation-delay:.9s}
h1{margin:0 auto;font-size:clamp(1.8rem,4.7vw,3.9rem);font-weight:850;line-height:1.25;letter-spacing:-.045em}
mark{color:inherit;background:#ffd400;border-radius:13px;padding:0 .13em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.smile{font-size:clamp(52px,9vw,76px);margin-top:30px;display:inline-block;animation:bounce 3.4s ease-in-out 1.1s infinite}
.wave{position:absolute;bottom:-1px;left:0;width:100%;height:clamp(95px,19vh,220px);z-index:0;pointer-events:none}
.wave svg{display:block;width:100%;height:100%;fill:#ba7af0;opacity:.78}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spark{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@media(max-width:600px){.scene{padding:30px 13px 105px}.symbol{width:min(52vw,240px);height:150px;margin-bottom:36px}h1{font-size:clamp(1.52rem,6.1vw,2.55rem);line-height:1.35}.smile{margin-top:24px}.wave{height:15vh}}
@media(max-width:370px){h1{font-size:clamp(1.35rem,6vw,1.65rem)}.symbol{height:120px;margin-bottom:25px}}


/* v1.2 — celebratory choreography; preserve the approved visual layout */
.symbol{display:block;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.symbol:focus-visible{outline:3px solid #8660e8;outline-offset:8px;border-radius:20px}
.tick{animation:draw .68s cubic-bezier(.2,.85,.2,1) forwards}
.tick-two{animation-delay:.27s}
.symbol{animation:checks-arrive .75s cubic-bezier(.2,1.6,.3,1) both}
.ray{animation:spark-pop .85s cubic-bezier(.1,1.5,.4,1) both}
.ray-1{animation-delay:.73s}.ray-2{animation-delay:.8s}.ray-3{animation-delay:.86s}
.ray-4{animation-delay:.79s}.ray-5{animation-delay:.9s}.ray-6{animation-delay:.83s}
h1{animation:headline-entrance .75s ease-out .92s both}
mark{background:linear-gradient(#ffd400,#ffd400) left center / 0% 100% no-repeat;animation:highlight-swipe .65s cubic-bezier(.16,1,.3,1) 1.4s forwards}
.smile{animation:emoji-arrive .9s cubic-bezier(.2,1.45,.3,1) 1.75s both,emoji-wiggle 4s ease-in-out 2.75s infinite}
.wave svg{animation:wave-breathe 9s ease-in-out infinite;transform-origin:center bottom}
.glow-left{animation:glow-drift 12s ease-in-out infinite alternate}
.glow-right{animation:glow-drift 14s ease-in-out -5s infinite alternate-reverse}
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4}
.confetti-piece{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*1.55);border-radius:2px;background:var(--color);opacity:0;transform:translate(-50%,-50%) rotate(var(--rotation));animation:confetti-fly var(--duration) ease-out forwards}
.symbol.replay{animation:replay-pop .6s cubic-bezier(.2,1.5,.3,1)}
@keyframes checks-arrive{0%{opacity:0;transform:translateY(-24px) scale(.8) rotate(-6deg)}70%{opacity:1;transform:translateY(4px) scale(1.06) rotate(2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes spark-pop{0%{opacity:0;scale:0}45%{opacity:1;scale:1.45}100%{opacity:1;scale:1}}
@keyframes headline-entrance{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes highlight-swipe{to{background-size:100% 100%}}
@keyframes emoji-arrive{0%{opacity:0;transform:translateY(32px) rotate(-25deg) scale(.25)}70%{opacity:1;transform:translateY(-9px) rotate(9deg) scale(1.18)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes emoji-wiggle{0%,82%,100%{transform:rotate(0) translateY(0)}87%{transform:rotate(-12deg) translateY(-6px)}92%{transform:rotate(10deg) translateY(-3px)}96%{transform:rotate(-5deg)}}
@keyframes wave-breathe{0%,100%{transform:scaleX(1) translateY(0)}50%{transform:scaleX(1.08) translateY(8px)}}
@keyframes glow-drift{to{transform:translate(35px,25px) scale(1.12)}}
@keyframes replay-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15) rotate(4deg)}}
@keyframes confetti-fly{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--rotation)) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--rotation) + 600deg)) scale(1)}}