/* ATHENO UI — award-baseline design system. Pure CSS, GPU scroll-cinema. */
:root{--au-space:clamp(16px,2.5vw,32px);--au-r:18px;--au-ink:#111;--au-mut:#666;
--au-acc:#6D5EF0;--au-bg:#fff;
--au-fs-1:clamp(2.2rem,6vw,4.4rem);--au-fs-2:clamp(1.4rem,3vw,2.2rem);--au-fs-3:clamp(1.05rem,1.6vw,1.25rem)}
.au-container{width:min(1180px,92vw);margin-inline:auto}
h1,h2,h3{text-wrap:balance;line-height:1.15}
img{max-width:100%;display:block}
.au-img{border-radius:var(--au-r);object-fit:cover;width:100%;height:100%}

/* scroll cinema — zero JS, compositor-driven */
@keyframes au-in{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
.au-reveal{animation:au-in both;animation-timeline:view();animation-range:entry 0% entry 55%}
@keyframes au-in-l{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes au-in-r{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
.au-reveal-l{animation:au-in-l both;animation-timeline:view();animation-range:entry 0% entry 55%}
.au-reveal-r{animation:au-in-r both;animation-timeline:view();animation-range:entry 0% entry 55%}
@keyframes au-zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.au-cinema-img{overflow:hidden;border-radius:var(--au-r)}
.au-cinema-img img{animation:au-zoom both;animation-timeline:view();animation-range:entry 0% cover 45%}

/* animated mesh hero */
@keyframes au-mesh{0%,100%{background-position:0% 0%,100% 100%,50% 50%}50%{background-position:100% 20%,0% 80%,60% 40%}}
.au-mesh{background:
 radial-gradient(42% 52% at 18% 22%,color-mix(in oklab,var(--au-acc) 34%,transparent),transparent 70%),
 radial-gradient(46% 56% at 82% 78%,color-mix(in oklab,var(--au-acc) 22%,transparent),transparent 70%),
 radial-gradient(60% 60% at 55% 45%,color-mix(in oklab,var(--au-acc) 12%,transparent),transparent 75%);
 background-size:180% 180%,180% 180%,160% 160%;animation:au-mesh 16s ease-in-out infinite}

/* bento */
.au-bento{display:grid;gap:14px;grid-template-columns:repeat(6,1fr)}
.au-bento>*{grid-column:span 2}
.au-bento>.big{grid-column:span 4;grid-row:span 2}
.au-bento>.wide{grid-column:span 3}
@media(max-width:820px){.au-bento{grid-template-columns:1fr 1fr}.au-bento>*, .au-bento>.big,.au-bento>.wide{grid-column:span 2}}

/* surfaces */
.au-card{background:var(--au-bg);border-radius:var(--au-r);padding:calc(var(--au-space)*.9);
 box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 40px -18px rgba(0,0,0,.16);transition:.35s cubic-bezier(.2,.7,.2,1)}
.au-card:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 26px 60px -20px rgba(0,0,0,.24)}
.au-glass{background:rgba(255,255,255,.09);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
 border:1px solid rgba(255,255,255,.16);border-radius:var(--au-r)}
.au-btn{display:inline-flex;align-items:center;gap:9px;padding:.9em 1.9em;border-radius:999px;border:0;cursor:pointer;
 background:var(--au-acc);color:#fff;font-weight:700;font-size:1rem;transition:.3s cubic-bezier(.2,.7,.2,1);
 box-shadow:0 10px 26px -10px color-mix(in oklab,var(--au-acc) 70%,transparent)}
.au-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 34px -10px color-mix(in oklab,var(--au-acc) 80%,transparent)}
.au-btn.ghost{background:transparent;color:inherit;border:1.5px solid color-mix(in oklab,currentColor 30%,transparent);box-shadow:none}

/* type effects */
.au-grad-text{background:linear-gradient(100deg,var(--au-acc),color-mix(in oklab,var(--au-acc) 40%,#ff8a65));
 -webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes au-rise{from{opacity:0;transform:translateY(1.1em) rotate(2deg)}to{opacity:1;transform:none}}
.au-kinetic span{display:inline-block;animation:au-rise .9s cubic-bezier(.2,.8,.2,1) both}
.au-kinetic span:nth-child(2){animation-delay:.08s}.au-kinetic span:nth-child(3){animation-delay:.16s}
.au-kinetic span:nth-child(4){animation-delay:.24s}.au-kinetic span:nth-child(5){animation-delay:.32s}
.au-kinetic span:nth-child(n+6){animation-delay:.4s}

/* marquee + noise */
@keyframes au-slide{to{transform:translateX(-50%)}}
[dir=rtl] @keyframes au-slide{to{transform:translateX(50%)}}
.au-marquee{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.au-marquee>div{display:inline-flex;gap:2.5rem;animation:au-slide 26s linear infinite;padding-inline-end:2.5rem}
.au-noise{position:relative}
.au-noise::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){.au-reveal,.au-reveal-l,.au-reveal-r,.au-cinema-img img,.au-kinetic span{animation:none}}