/* haga-sys theme — base + keyframes
   (ほとんどのスタイルは各テンプレートのインラインに記述。ここは共通リセットとアニメーションのみ) */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#07090c;}
::selection{background:rgba(255,94,135,.28);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#07090c;}
::-webkit-scrollbar-thumb{background:#1a2128;border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#2a333c;}

img{max-width:100%;}

@keyframes hsBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hsGlow{0%,100%{opacity:.45}50%{opacity:.9}}
@keyframes hsBootIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hsRingSpin{to{transform:rotate(360deg)}}
@keyframes hsEmber{0%{transform:translateY(20px);opacity:0}12%{opacity:.75}86%{opacity:.4}100%{transform:translateY(-88vh);opacity:0}}
@keyframes hsTextGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,94,135,.15))}50%{filter:drop-shadow(0 0 26px rgba(255,94,135,.55))}}

/* hover states (inline styles can't carry :hover, so the few interactive ones live here) */
#hsnav a[href$="#services"]:hover,
#hsnav a[href$="#works"]:hover,
#hsnav a[href$="#about"]:hover{color:#fff !important;}
#hscontent a[href="#works"]:hover{box-shadow:0 0 44px rgba(var(--accent-rgb),.7) !important;}
#hscontent a[href$="/contact/"]:hover{border-color:rgba(255,255,255,.4) !important;background:rgba(255,255,255,.08) !important;}
#services [data-reveal]:hover,
#works [data-reveal]:hover{border-color:rgba(var(--accent-rgb),.4);}
#contact a[href$="/contact/"]:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(var(--accent-rgb),.7) !important;}
#contact a[href^="http"]:not([href$="/contact/"]):hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important;}