init project files

styles/_mixins.scss

@@ -0,0 +1,61 @@
+@use 'variables' as *;
+
+// Responsive helper
+@mixin respond($bp) {
+  @if $bp == sm  { @media (max-width: #{$bp-sm})  { @content; } }
+  @if $bp == md  { @media (max-width: #{$bp-md})  { @content; } }
+  @if $bp == lg  { @media (max-width: #{$bp-lg})  { @content; } }
+  @if $bp == xl  { @media (max-width: #{$bp-xl})  { @content; } }
+}
+
+// Accent underline on links / headings
+@mixin accent-underline($height: 2px) {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -3px; left: 0;
+    width: 100%; height: $height;
+    background: var(--accent);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease;
+    border-radius: 999px;
+  }
+  &:hover::after, &.active::after { transform: scaleX(1); }
+}
+
+// Frosted glass (dark)
+@mixin glass($alpha: 0.9) {
+  background: rgba(26, 29, 33, $alpha);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+// Container
+@mixin container {
+  width: 100%;
+  max-width: 1100px;
+  margin-inline: auto;
+  padding-inline: clamp(1rem, 5vw, 2.5rem);
+}
+
+// Section spacing (responsive)
+@mixin section {
+  padding-block: clamp(3rem, 8vw, 6rem);
+}
+
+// Flex center
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Card base
+@mixin card {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  transition: border-color var(--transition), transform var(--transition);
+}