/* ZenZoo landing — base styles from the Claude Design export.
   Section-level styling lives inline in index.html (as designed);
   this file holds globals, keyframes and generated hover classes. */

/* The design's width:100% + padding patterns assume border-box
   (provided by the Claude Design preview shell) */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
    body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#111111;background:#F7FDFF;-webkit-font-smoothing:antialiased;overflow-x:clip}
    a{color:#226698;text-decoration:none}
    a:hover{color:#3A9BBE}
    summary{list-style:none}
    summary::-webkit-details-marker{display:none}
    ::selection{background:rgba(104,199,191,.4)}
    @keyframes zzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
    @keyframes zzFloatSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
    @keyframes zzDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
    @keyframes zzSparkle{0%,100%{opacity:.45;transform:scale(.88) rotate(-6deg)}50%{opacity:1;transform:scale(1.1) rotate(6deg)}}
    @keyframes zzGlow{0%,100%{box-shadow:0 6px 16px rgba(246,165,58,.22)}50%{box-shadow:0 10px 26px rgba(246,165,58,.45)}}

/* Hover states (generated from the design's style-hover attributes) */
.zz-hv-1:hover{color:#DDF7F4;}
.zz-hv-2:hover{color:#226698;}
.zz-hv-3:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(58,155,190,.36); color:#FFFFFF;}
.zz-hv-4:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(58,155,190,.38), 0 4px 10px rgba(34,102,152,.16); color:#FFFFFF;}
.zz-hv-5:hover{transform:translateY(-2px); border-color:#68C7BF; color:#1F6CA4;}
.zz-hv-6:hover{transform:translateY(-5px); box-shadow:0 4px 10px rgba(34,102,152,.07), 0 18px 34px rgba(34,102,152,.13);}
.zz-hv-7:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(58,155,190,.38); color:#FFFFFF;}
.zz-hv-8:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(18,60,88,.3); color:#1F6CA4;}
.zz-hv-9:hover{background:rgba(255,255,255,.12); color:#FFFFFF;}

/* Accessibility: stop decorative floating for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){[data-float]{animation:none !important}}