/* clauddoors v4: geen rood/oranje bij verkopen, levendiger startscherm, knock knock doet iets */

/* 1. 'Coral' wordt overal een vriendelijk blauw. Rood en oranje schrikken af bij geld en keuzes. */
:root,:root[data-theme="light"],:root[data-theme="dark"]{--coral:#7B8CFF}
.cd-browser-bar span:nth-child(1){background:#7B8CFF}

/* 2. Startscherm: zon, wolkjes en 's nachts sterretjes */
.cd-hero-sky{position:absolute;inset:-40px -30px -20px -40px;pointer-events:none;z-index:0}
.cd-hero-art .cd-browser{position:relative;z-index:1}
.cd-hero-door,.cd-bubble{z-index:3}
.cd-hero-sky>*{position:absolute;display:block}
.cd-hero-sun{right:-6px;top:-8px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#FFE680,#FFD23F 55%,#F7C21E);box-shadow:0 0 0 14px rgba(255,210,63,.18),0 0 60px rgba(255,210,63,.45);animation:cd-sunpulse 6s ease-in-out infinite alternate}
.cd-hero-moon{display:none;right:6px;top:-4px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff,#E6E9F7 60%,#C5CBE6);box-shadow:0 0 50px rgba(220,226,255,.35)}
.cd-hero-sky .hc{width:110px;animation:cd-drift 12s ease-in-out infinite alternate}
.cd-hero-sky .hc svg{display:block;width:100%;height:auto;overflow:visible}
.cd-hero-sky .hc path{fill:#fff;filter:drop-shadow(0 10px 18px rgba(20,33,91,.12))}
.cd-hero-sky .hc.sky path{fill:#8EC9FF;filter:none;opacity:.6}
.cd-hero-sky .c1{left:-8px;top:-18px;width:120px}
.cd-hero-sky .c2{right:-30px;top:44%;width:92px;animation-delay:-4s}
.cd-hero-sky .c3{left:44%;bottom:-6px;width:78px;animation-delay:-8s}
.cd-hero-sky .c4{left:30%;top:-34px;width:58px;animation-delay:-2s}
.cd-hero-sky .st{width:14px;height:14px;opacity:0;transition:opacity .6s}
.cd-hero-sky .st svg{width:100%;height:100%;fill:#FFE680}
.cd-hero-sky .s1{left:12%;top:4%}.cd-hero-sky .s2{left:58%;top:-6%;width:10px;height:10px}.cd-hero-sky .s3{right:22%;top:30%}.cd-hero-sky .s4{left:4%;top:58%;width:10px;height:10px}.cd-hero-sky .s5{right:6%;bottom:6%}
:root[data-theme="dark"] .cd-hero-sun{display:none}
:root[data-theme="dark"] .cd-hero-moon{display:block}
:root[data-theme="dark"] .cd-hero-sky .hc path{fill:#2A3784;filter:none}
:root[data-theme="dark"] .cd-hero-sky .hc.sky path{fill:#3B4AA8;opacity:.8}
:root[data-theme="dark"] .cd-hero-sky .st{opacity:1;animation:cd-twinkle 2.6s ease-in-out infinite}
:root[data-theme="dark"] .cd-hero-sky .s2{animation-delay:.7s}:root[data-theme="dark"] .cd-hero-sky .s3{animation-delay:1.4s}:root[data-theme="dark"] .cd-hero-sky .s4{animation-delay:2s}
@keyframes cd-sunpulse{to{box-shadow:0 0 0 20px rgba(255,210,63,.12),0 0 80px rgba(255,210,63,.5)}}
@keyframes cd-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (max-width:900px){.cd-hero-sun{width:84px;height:84px}.cd-hero-moon{width:70px;height:70px}.cd-hero-sky .c2,.cd-hero-sky .c4{display:none}}
@media (prefers-reduced-motion:reduce){.cd-hero-sun,.cd-hero-sky .hc,.cd-hero-sky .st{animation:none!important}}

/* 3. Knock knock: deur open, wolkje springt eruit, berichtje met knop */
.cd-bubble{cursor:pointer;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cd-bubble:hover{transform:translateY(-3px) rotate(-2deg)}
.cd-bubble a{display:inline-block;margin-left:6px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cd-hero-art.is-open .cd-peek{animation:cd-jump .9s cubic-bezier(.3,1.6,.5,1)}
.cd-hero-art.is-open .cd-bubble{animation:cd-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes cd-jump{0%{transform:translateY(0)}35%{transform:translate(6px,-30px) scale(1.12)}70%{transform:translateY(-6px)}100%{transform:none}}
@keyframes cd-pop{0%{transform:scale(.6)}100%{transform:none}}
.cd-poof{position:absolute;left:84px;bottom:96px;width:26px;z-index:4;pointer-events:none;animation:cd-poof 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.cd-poof svg{display:block;width:100%;height:auto}
@keyframes cd-poof{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r));opacity:0}}