/* --- Core Entry --- */
:root {
  /* Layout Bounds */
  --aw-container-max: 1440px;
  --aw-section-pad: clamp(4rem, 10vw, 12rem);

  /* Fonts */
  --aw-font-display: "Clash Display", "Oswald", system-ui, sans-serif;
  --aw-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --aw-font-mono: "Space Mono", monospace;

  /* Typographic Scale (Fluid using clamp) */
  --text-xs: clamp(0.75rem, 0.7vw + 0.6rem, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8vw + 0.7rem, 1rem);
  --text-base: clamp(1rem, 0.9vw + 0.8rem, 1.125rem);
  --text-lg: clamp(1.125rem, 1.2vw + 0.9rem, 1.35rem);
  --text-xl: clamp(1.35rem, 1.8vw + 1.1rem, 1.75rem);
  --text-2xl: clamp(1.75rem, 2.5vw + 1.25rem, 2.25rem);
  --text-3xl: clamp(2.25rem, 4vw + 1.5rem, 3rem);
  --text-4xl: clamp(3rem, 6vw + 2rem, 4.5rem);
  --text-5xl: clamp(4rem, 8vw + 2rem, 6.5rem);
  --text-display: clamp(5rem, 12vw + 2rem, 10rem); /* Over-sized heroic typography */

  /* Golden Spacing Scale (Base-8, clamp supported for flow) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Custom Easings (The Secret to Awwwards motion) */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-golden: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --trans-fast: 0.3s var(--ease-expo);
  --trans-slow: 0.8s var(--ease-expo);
  --trans-page: 1.2s var(--ease-in-out-circ);

  /* FX Base Variables */
  --blur-md: blur(12px);
  --blur-xl: blur(24px);
}
:root, .theme-dark {
  --color-bg: #070707;
  --color-fg: #f3f3f3;
  --color-neutral: #1a1a1a;
  --color-border: rgba(255, 255, 255, 0.08);
  
  /* Accents */
  --color-accent: #ffffff;
  --color-glow: rgba(255, 255, 255, 0.2);
  --gradient-main: linear-gradient(135deg, #fff 0%, #666 100%);
  --gradient-accent: linear-gradient(135deg, #7000FF 0%, #00F0FF 100%);
  
  --glass-bg: rgba(10, 10, 10, 0.65);
  --shadow-main: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}
.theme-light {
  --color-bg: #FAFAFA;
  --color-fg: #0a0a0a;
  --color-neutral: #eaeaea;
  --color-border: rgba(0, 0, 0, 0.06);

  --color-accent: #000000;
  --color-glow: rgba(0, 0, 0, 0.1);
  --gradient-main: linear-gradient(135deg, #000 0%, #999 100%);
  
  --glass-bg: rgba(250, 250, 250, 0.7);
  --shadow-main: 0 24px 48px -12px rgba(0, 0, 0, 0.1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { 
  font-family: var(--aw-font-sans); 
  background-color: var(--color-bg); 
  color: var(--color-fg); 
  line-height: 1.5; 
  overflow-x: hidden; 
}
::-moz-selection { background-color: var(--color-accent); color: var(--color-bg); }
::selection { background-color: var(--color-accent); color: var(--color-bg); }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, .font-display { font-family: var(--aw-font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
p, .font-sans { font-family: var(--aw-font-sans); }
.font-mono { font-family: var(--aw-font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
/* Scale */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); line-height: 1.3; }
.text-xl { font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em;}
.text-2xl { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.02em; }
.text-3xl { font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.text-4xl { font-size: var(--text-4xl); line-height: 1; letter-spacing: -0.03em; }
.text-5xl { font-size: var(--text-5xl); line-height: 0.95; letter-spacing: -0.04em; }
.text-display { font-size: var(--text-display); line-height: 0.9; letter-spacing: -0.05em; font-weight: 600; }
/* --- High-End Typography FX --- */
.aw-text-stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-fg);
}
.aw-text-stroke:hover {
  color: var(--color-fg);
  -webkit-text-stroke: 1px transparent;
  transition: all var(--trans-fast);
}
.aw-uppercase-tracked {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}
.aw-text-fluid {
  font-size: clamp(2rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-family: var(--aw-font-display);
}
/* --- Glitch Typography --- */
.aw-glitch {
  position: relative;
  display: inline-block;
  color: var(--color-fg);
  font-family: var(--aw-font-display);
}
.aw-glitch::before, .aw-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg); /* Covers the original text */
}
.aw-glitch::before {
  left: 3px;
  text-shadow: -2px 0 #ff003c;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitchAnim 2.5s infinite linear alternate-reverse;
}
.aw-glitch::after {
  left: -3px;
  text-shadow: -2px 0 #00e6f6;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitchAnim2 3s infinite linear alternate-reverse;
}
@keyframes glitchAnim {
  0% { clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%); transform: translate(0); }
  20% { clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%); transform: translate(-2px, 1px); }
  40% { clip-path: polygon(0 10%, 100% 10%, 100% 30%, 0 30%); transform: translate(2px, -1px); }
  100% { clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); transform: translate(0); }
}
@keyframes glitchAnim2 {
  0% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); transform: translate(0); }
  20% { clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); transform: translate(2px, -2px); }
  40% { clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%); transform: translate(-2px, 2px); }
  100% { clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); transform: translate(0); }
}
/* --- Scroll-Linked Text Fill --- */
.aw-scroll-fill {
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  background: linear-gradient(to right, var(--color-fg) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0; /* Starts completely transparent */
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (animation-timeline: view()) {
  .aw-scroll-fill {
    animation: fillTextOnScroll linear forwards;
    animation-timeline: view();
    animation-range: entry 20% cover 80%;
  }
}
@keyframes fillTextOnScroll {
  to { background-position: 0% 0; }
}
/* --- Liquid/Wave Rise Text Fill --- */
.aw-liquid-fill { position: relative; color: transparent; -webkit-text-stroke: 1px var(--color-border); display: inline-block; overflow: hidden; padding-bottom: 0.1em; line-height: 1; }
.aw-liquid-fill::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: var(--color-fg); -webkit-text-stroke: 0; transform: translateY(100%); transition: transform 0.6s var(--ease-bounce-soft); }
.aw-liquid-fill:hover::after { transform: translateY(0); }
/* --- Slot Machine Roller Text --- */
.aw-roller { display: inline-flex; flex-direction: column; overflow: hidden; height: 1em; vertical-align: top; }
.aw-roller-inner { transition: transform 0.6s var(--ease-expo); display: flex; flex-direction: column; }
.aw-roller:hover .aw-roller-inner { transform: translateY(-50%); }
.aw-roller-text { line-height: 1; }
/* --- Inline Hover Image Reveal --- */
.aw-inline-reveal-wrap { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.aw-inline-reveal-img { width: 0; opacity: 0; transition: width 0.6s var(--ease-expo), opacity 0.6s, margin 0.6s; border-radius: 99px; -o-object-fit: cover; object-fit: cover; height: 0.9em; margin: 0; }
.aw-inline-reveal-wrap:hover .aw-inline-reveal-img { width: 2em; opacity: 1; margin: 0 0.15em; }
/* --- 1. Premium Sweep Shine Text --- */
.aw-text-shine {
  background: linear-gradient(
    110deg,
    var(--color-fg) 20%,
    var(--color-accent) 40%,
    var(--color-accent) 60%,
    var(--color-fg) 80%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shineText 4s linear infinite;
}
@keyframes shineText {
  to { background-position: 200% center; }
}
/* --- 11. Kinetic Sliced Typography --- */
.aw-text-kinetic-slice {
  position: relative; display: inline-block;
  color: transparent; font-family: var(--aw-font-display);
}
.aw-text-kinetic-slice::before,
.aw-text-kinetic-slice::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  color: var(--color-fg); transition: transform 0.6s var(--ease-expo);
}
/* Top half */
.aw-text-kinetic-slice::before {
  clip-path: inset(0 0 50% 0);
}
/* Bottom half */
.aw-text-kinetic-slice::after {
  clip-path: inset(50% 0 0 0);
}
.aw-text-kinetic-slice:hover::before { transform: translate(-4px, -2px) skewX(-5deg); color: var(--color-accent); }
.aw-text-kinetic-slice:hover::after { transform: translate(4px, 2px) skewX(-5deg); }
/* --- 12. Breathing Stroke Fill --- */
.aw-text-pulse-stroke {
  -webkit-text-stroke: 1px var(--color-fg);
  background: var(--gradient-accent);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pulseFill 4s ease-in-out infinite alternate;
}
@keyframes pulseFill {
  0% { background-position: 0% 50%; opacity: 0.2; }
  100% { background-position: 100% 50%; opacity: 1; -webkit-text-stroke: 1px transparent; }
}
/* --- 21. Cinematic Blur Scroll Reveal --- */
.aw-text-blur-reveal {
  filter: blur(20px); opacity: 0; transform: translateY(40px);
  will-change: filter, opacity, transform;
}
@supports (animation-timeline: view()) {
  .aw-text-blur-reveal {
    animation: blurReveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
  }
}
@keyframes blurReveal {
  to { filter: blur(0px); opacity: 1; transform: translateY(0); }
}
/* --- 22. Crisp Stroke-to-Solid Wipe --- */
.aw-text-stroke-wipe {
  position: relative; display: inline-block;
  -webkit-text-stroke: 1px var(--color-fg); color: transparent;
}
.aw-text-stroke-wipe::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  color: var(--color-accent); -webkit-text-stroke: 0px transparent;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.8s var(--ease-expo);
}
.aw-text-stroke-wipe:hover::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* --- 31. Kinetic Text Echo --- */
.aw-text-echo {
  transition: text-shadow 0.6s var(--ease-bounce-soft), transform 0.6s;
}
.aw-text-echo:hover {
  transform: translate(-4px, -4px);
  text-shadow: 4px 4px 0px rgba(0, 240, 255, 0.5), 8px 8px 0px rgba(112, 0, 255, 0.3);
}
/* --- 32. Angled Mask Reveal --- */
.aw-text-reveal-mask {
  position: relative; overflow: hidden; display: inline-block;
}
.aw-text-reveal-mask::after {
  content: ""; position: absolute; inset: 0; background: var(--color-fg);
  transform-origin: right; transform: skewX(-20deg) translateX(120%);
  transition: transform 0.8s var(--ease-expo);
}
.aw-text-reveal-mask:hover::after { transform: skewX(-20deg) translateX(-120%); }
/* --- 33. Exclusion Blend Text --- */
.aw-text-blend-exclusion {
  color: #fff; mix-blend-mode: exclusion;
  font-family: var(--aw-font-display);
}
/* --- 34. Cyber Glitch Clip --- */
.aw-text-glitch-clip {
  position: relative; color: var(--color-fg);
}
.aw-text-glitch-clip:hover {
  animation: clipGlitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: var(--color-accent);
}
@keyframes clipGlitch {
  0% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); }
  50% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); }
  100% { clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); }
}
/* --- 35. 3D Stagger Split --- */
.aw-text-stagger-split {
  display: flex; overflow: hidden; perspective: 500px;
}
.aw-text-stagger-split span {
  display: inline-block; transform-origin: bottom;
  transition: transform 0.6s var(--ease-bounce-soft);
}
.aw-text-stagger-split:hover span {
  transform: rotateX(360deg);
}
.aw-text-stagger-split span:nth-child(even) { transition-delay: 0.1s; }
/* --- 76. Cinematic Smoke Reveal --- */
.aw-text-smoke { filter: blur(15px); opacity: 0; transform: translateY(20px); transition: filter 1.2s var(--ease-expo), opacity 1.2s, transform 1.2s; }
.aw-text-smoke.is-visible, .aw-text-smoke:hover { filter: blur(0px); opacity: 1; transform: translateY(0); }
/* --- 77. RGB Glitch Split Hover --- */
.aw-text-rgb-split { position: relative; display: inline-block; transition: text-shadow 0.3s var(--ease-bounce-soft); }
.aw-text-rgb-split:hover { text-shadow: -4px 0px 0px #FF007A, 4px 0px 0px #00F0FF; color: transparent; }
/* --- 78. 3D Hinge Fold Drop --- */
.aw-text-hinge { display: inline-block; transform-origin: top left; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.aw-text-hinge:hover { transform: rotateX(-90deg) skewX(15deg); opacity: 0.5; }
/* --- 79. Hover Kinetic Marquee --- */
.aw-text-marquee-hover { display: inline-flex; overflow: hidden; white-space: nowrap; max-width: 100%; position: relative; }
.aw-text-marquee-hover span { display: inline-block; transition: transform 0.4s var(--ease-expo); }
.aw-text-marquee-hover::after { content: attr(data-text); position: absolute; left: 100%; padding-left: 1rem; }
.aw-text-marquee-hover:hover span { transform: translateX(-100%); padding-right: 1rem; }
.aw-text-marquee-hover:hover::after { animation: slideMarquee 2s linear infinite; }
@keyframes slideMarquee { 100% { transform: translateX(-100%); } }
/* --- 80. Perspective Shadow Cast --- */
.aw-text-perspective-cast { transition: text-shadow 0.6s var(--ease-expo), transform 0.6s; transform-origin: bottom center; }
.aw-text-perspective-cast:hover { transform: scaleY(1.1); text-shadow: 0px 40px 10px rgba(0,0,0,0.5); }
/* --- Utilities --- */
/* Core Structural Padding/Margin Maps */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-8 { padding: var(--space-8); }
.pt-section { padding-top: var(--aw-section-pad); }
.pb-section { padding-bottom: var(--aw-section-pad); }
.py-section { padding-block: var(--aw-section-pad); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); }
.container {
  width: 100%;
  max-width: var(--aw-container-max);
  margin-inline: auto;
  padding-inline: max(5vw, 1rem);
}
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; height: 100dvh; }
/* PWA Native supported */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Golden Ratio split usually seen in Agency websites */
.grid-split-golden { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .grid-split-golden { grid-template-columns: 1.618fr 1fr; }
}
/* ... Keep existing flex/grid rules ... */
/* Modern Awwwards Bento Box Grid */
.aw-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  grid-auto-rows: 350px;
}
.aw-bento-wide { grid-column: span 1; }
.aw-bento-tall { grid-row: span 1; }
@media (min-width: 1024px) {
  .aw-bento-wide { grid-column: span 2; }
  .aw-bento-tall { grid-row: span 2; }
  .aw-bento { grid-auto-rows: 400px; gap: var(--space-6); }
}
/* Modern Awwwards Filters */
.aw-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--color-border);
}
.aw-glass-intense {
  background: transparent;
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
}
.aw-text-gradient {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aw-text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Background Blurs */
.aw-blur-orb {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: var(--color-accent); filter: blur(120px); opacity: 0.15;
  pointer-events: none; z-index: -1;
}
/* Base64 Noise - Premium Overlay effect */
.aw-noise-overlay::before {
  content: "";
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.04; pointer-events: none; z-index: 999; 
  mix-blend-mode: difference;
}
/* ... Keep existing rules ... */
/* Animated Grain Layer */
.aw-noise-animated::before {
  content: "";
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05; pointer-events: none; z-index: 50; 
  animation: noise 2s steps(2) infinite;
}
@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  30% { transform: translate(5%, -5%); }
  50% { transform: translate(-5%, 5%); }
  70% { transform: translate(5%, 5%); }
  90% { transform: translate(-5%, -5%); }
}
/* Advanced Mix Blend Hover Images */
.aw-blend-reveal { position: relative; overflow: hidden; background: var(--color-bg); }
.aw-blend-reveal img { 
  mix-blend-mode: luminosity; opacity: 0.5; filter: grayscale(100%); transition: all var(--trans-slow); 
}
.aw-blend-reveal:hover img { 
  mix-blend-mode: normal; opacity: 1; filter: grayscale(0%); transform: scale(1.05); 
}
/* Liquid/Mesh Gradient Background (CSS Math via Radial Gradients) */
.aw-mesh-bg {
  background-color: var(--color-bg);
  background-image: 
    radial-gradient(at 0% 0%, rgba(112, 0, 255, 0.25) 0px, transparent 40%),
    radial-gradient(at 100% 0%, rgba(0, 240, 255, 0.25) 0px, transparent 40%),
    radial-gradient(at 50% 100%, rgba(255, 255, 255, 0.1) 0px, transparent 60%);
  background-attachment: fixed;
}
/* 
  Ultra-Premium Glowing Border Button & Box Container. 
  Calculated beautifully with nested transparent linear-gradients clipping! 
*/
.aw-border-glow {
  position: relative;
  background: linear-gradient(var(--color-neutral), var(--color-neutral)) padding-box,
              var(--gradient-accent) border-box;
  border: 1px solid transparent;
  border-radius: 12px;
}
/* Text with Media (Image/Video Clip Mapping - Extremely popular for Heros!) */
.aw-text-media {
  background: url("https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2000&auto=format&fit=crop") center/cover no-repeat;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* --- Aurora Animated Background --- */
.aw-aurora-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
  z-index: 0;
}
.aw-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px); /* Massive blur creates the aurora effect */
  opacity: 0.5;
  animation: auroraWander 15s infinite alternate var(--ease-in-out-circ);
  z-index: -1;
}
.aw-aurora-1 {
  width: 50vw; height: 50vw;
  background: #7000FF;
  top: -10%; left: -10%;
}
.aw-aurora-2 {
  width: 45vw; height: 45vw;
  background: #00F0FF;
  bottom: -20%; right: -10%;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}
.aw-aurora-3 {
  width: 40vw; height: 40vw;
  background: #FF007A;
  top: 30%; left: 40%;
  animation-delay: -10s;
}
@keyframes auroraWander {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(5%, 10%) scale(1.1) rotate(45deg); }
  100% { transform: translate(-10%, 5%) scale(0.9) rotate(-20deg); }
}
/* --- Curtain Reveal --- */
.aw-curtain-reveal {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.aw-curtain-reveal img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: inset(45% 0 45% 0); /* Only shows the middle 10% initially */
  transition: clip-path 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
  transform: scale(1.1);
}
.aw-curtain-reveal:hover img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}
/* --- Dot Matrix / Halftone Hover --- */
.aw-halftone-hover {
  -webkit-mask-image: radial-gradient(black 40%, transparent 40%);
  mask-image: radial-gradient(black 40%, transparent 40%);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-position: center;
  mask-position: center;
  transition: -webkit-mask-size 0.8s var(--ease-expo), filter 0.8s;
  filter: grayscale(100%);
  cursor: crosshair;
}
.aw-halftone-hover:hover {
  -webkit-mask-size: 2000px 2000px; /* Blows the dots up so they merge */
  mask-size: 2000px 2000px;
  filter: grayscale(0%);
}
/* --- Expanding Circle Reveal --- */
.aw-circle-reveal {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32) 0;
}
.aw-circle-reveal-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent); /* Or use an image */
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1);
  z-index: 0;
}
.aw-circle-reveal:hover .aw-circle-reveal-bg {
  clip-path: circle(150% at 50% 50%); /* Expands far beyond corners */
}
.aw-circle-reveal-content {
  position: relative;
  z-index: 1;
  color: var(--color-fg);
  transition: color 1.2s;
}
.aw-circle-reveal:hover .aw-circle-reveal-content {
  color: var(--color-bg); /* Invert text color when background expands */
}
.aw-grid-floor { position: absolute; bottom: 0; left: 0; width: 100%; height: 40vh; perspective: 1000px; z-index: 0; overflow: hidden; mask-image: linear-gradient(to top, black, transparent); -webkit-mask-image: linear-gradient(to top, black, transparent); pointer-events: none;}
.aw-grid-floor-inner { position: absolute; width: 200%; height: 200%; left: -50%; top: 0; transform: rotateX(80deg); background-size: 80px 80px; background-image: linear-gradient(to right, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border) 1px, transparent 1px); animation: floorMove 3s linear infinite; }
@keyframes floorMove { 0% { transform: rotateX(80deg) translateY(0); } 100% { transform: rotateX(80deg) translateY(80px); } }
/* --- X-Ray Mask Cursor Reveal --- */
.aw-mask-reveal-container { position: relative; overflow: hidden; cursor: crosshair; }
.aw-mask-reveal-layer { position: absolute; inset: 0; background: var(--color-fg); color: var(--color-bg); z-index: 10;
-webkit-mask-image: radial-gradient(circle 200px at var(--mouse-x, -50%) var(--mouse-y, -50%), black 0%, transparent 100%);
mask-image: radial-gradient(circle 200px at var(--mouse-x, -50%) var(--mouse-y, -50%), black 0%, transparent 100%); pointer-events: none; }
/* --- Organic Morphing Blob Mask --- */
.aw-blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transition: border-radius 1.2s ease-in-out; overflow: hidden; width: 100%; height: 100%; }
.aw-blob:hover { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
/* --- Diagonal Slice Image Reveal --- */
.aw-diagonal-reveal img { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1.2s var(--ease-expo); }
.aw-diagonal-reveal:hover img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
/* --- 8. Premium Skeleton Loading Shimmer --- */
.aw-skeleton-premium {
  background: linear-gradient(
    90deg,
    var(--color-neutral) 0%,
    var(--color-border) 50%,
    var(--color-neutral) 100%
  );
  background-size: 200% 100%;
  border-radius: 8px;
  animation: shimmerPremium 2s infinite linear;
  color: transparent !important;
  pointer-events: none;
}
@keyframes shimmerPremium {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* --- 19. Pure CSS Liquid Gooey Filter --- */
.aw-gooey-wrapper {
  /* Creates a high-contrast rendering context */
  filter: contrast(20); background: var(--color-bg);
  mix-blend-mode: screen; /* Blends cleanly onto dark backgrounds */
  overflow: hidden; padding: var(--space-4);
}
.aw-gooey-item {
  /* The blur combined with parent contrast creates the liquid web effect */
  filter: blur(10px);
  background: var(--color-fg);
  border-radius: 50%;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* If elements touch, they will merge like water droplets natively */
/* --- 25. Architectural Ribbed/Fluted Glass --- */
.aw-ribbed-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(12px) contrast(1.1);
  -webkit-backdrop-filter: blur(12px) contrast(1.1);
  /* Creates the physical ridges of the glass */
  mask-image: repeating-linear-gradient(
    to right,
    black 0px, black 8px, 
    rgba(0,0,0,0.8) 9px, transparent 10px
  );
  -webkit-mask-image: repeating-linear-gradient(
    to right,
    black 0px, black 8px, 
    rgba(0,0,0,0.8) 9px, transparent 10px
  );
  border: 1px solid var(--color-border);
}
/* --- 26. Spotlight Flashlight Text --- */
.aw-spotlight-text {
  /* Requires JS --mouse-x/y tracking to move the center */
  background: radial-gradient(
    circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    var(--color-fg) 0%, 
    var(--color-neutral) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* --- 61. Dark Vignette Edge Filter --- */
.aw-vignette-dark {
  box-shadow: inset 0 0 150px rgba(0,0,0,0.9); pointer-events: none;
}
/* --- 62. Heavy CRT Scanline Noise --- */
.aw-noise-crt::before {
  content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 999; background-size: 100% 2px, 3px 100%; pointer-events: none;
}
/* --- 63. Animated Fluid Mesh Gradient --- */
.aw-gradient-mesh-anim {
  background: radial-gradient(circle at 0% 0%, var(--color-accent) 0, transparent 50%),
              radial-gradient(circle at 100% 100%, #FF007A 0, transparent 50%);
  background-size: 200% 200%;
  animation: meshMove 8s ease-in-out infinite alternate;
}
@keyframes meshMove { 100% { background-position: 100% 100%; } }
/* --- 64. Glow Orb Mouse Follower --- */
.aw-glow-orb-follow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: var(--color-accent); filter: blur(100px); opacity: 0.3;
  transform: translate(calc(var(--mouse-x, 0) * 1px - 50%), calc(var(--mouse-y, 0) * 1px - 50%));
  transition: transform 0.1s linear; pointer-events: none; z-index: 0;
}
/* --- 65. Chromatic Aberration Hover --- */
.aw-chromatic-aberration { transition: text-shadow 0.3s; }
.aw-chromatic-aberration:hover {
  text-shadow: -3px 0 0 rgba(255,0,0,0.7), 3px 0 0 rgba(0,255,255,0.7);
}
/* --- 106. Chrome Liquid Metal --- */
.aw-fx-liquid-metal { background: linear-gradient(135deg, #eee 0%, #999 25%, #fff 50%, #666 75%, #ccc 100%); background-size: 200% 200%; animation: metalShine 4s infinite linear alternate; -webkit-background-clip: text; color: transparent; }
@keyframes metalShine { 100% { background-position: 100% 100%; } }
/* --- 107. Sweeping Holo Glare --- */
.aw-fx-holo-glare { position: relative; overflow: hidden; }
.aw-fx-holo-glare::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); transform: skewX(-20deg); animation: holoGlare 3s infinite; }
@keyframes holoGlare { 100% { left: 200%; } }
/* --- 108. Cracked Glass Overlay --- */
.aw-fx-glass-crack { position: relative; }
.aw-fx-glass-crack::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.1); clip-path: polygon(0 0, 30% 40%, 10% 100%, 0 100%); backdrop-filter: blur(2px); z-index: 10; border-right: 1px solid rgba(255,255,255,0.4); }
/* --- 109. Topography Line Grid --- */
.aw-fx-topography { background: repeating-radial-gradient(circle at 50% 50%, transparent, transparent 10px, rgba(255,255,255,0.05) 11px, rgba(255,255,255,0.05) 12px); }
/* --- 110. Fast CRT Scanline --- */
.aw-fx-scanline-fast { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5) 51%); background-size: 100% 4px; z-index: 99; pointer-events: none; animation: scanFast 10s linear infinite; }
@keyframes scanFast { 100% { background-position: 0 100vh; } }
/* Custom View-Timeline CSS Reveal (Cutting Edge CSS natively handling Intersection) */
@supports (animation-timeline: view()) {
  .aw-reveal-scroll {
    animation: linear revealBlock both;
    animation-timeline: view();
    animation-range: entry 10% cover 25%;
  }
}
/* Core pure keyframes for fallback or normal class hooks */
@keyframes slideUpClip {
  0% { transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  100% { transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes fadeScale {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
.aw-fade-up { animation: fadeScale var(--trans-slow) forwards; }
.aw-stagger-1 { animation-delay: 0.1s; }
.aw-stagger-2 { animation-delay: 0.2s; }
.aw-stagger-3 { animation-delay: 0.3s; }
/* Image Distort/Scale Hover wrapper */
.aw-img-mask {
  overflow: hidden; 
  position: relative;
  border-radius: 4px; /* Optional slight curvature */
}
.aw-img-mask img {
  transition: transform var(--trans-slow);
  transform: scale(1.02);
}
.aw-img-mask:hover img {
  transform: scale(1.12); /* Typical agency image zoom inside masked box */
}
/* Magnetic effect logic placeholder (pure CSS attempts a transition smooth-back, magnetic requires js mapping mouse-coords to custom prop, here we support the CSS hook) */
.aw-magnetic {
  transition: transform var(--ease-expo) 0.3s;
  will-change: transform;
}
/* Stack Cards Scroll Parallax Sequence - Only renders strictly in capable DOM structures natively! */
@supports (animation-timeline: view()) {
  .aw-card-stack-item {
    position: sticky; top: var(--space-32); margin-bottom: var(--space-8);
    transform-origin: top center; animation: stackParallax linear both; animation-timeline: view();
    animation-range: entry 100% cover 150%; 
  }

  @keyframes stackParallax {
    to { transform: scale(0.9); opacity: 0; filter: var(--blur-md); }
  }
}
/* --- View-Timeline Text Highlighter --- */
.aw-highlight-scroll {
  background: linear-gradient(120deg, rgba(112,0,255,0.4) 0%, rgba(0,240,255,0.4) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0% 100%;
  display: inline;
  padding: 0 0.2em;
  border-radius: 4px;
}
@supports (animation-timeline: view()) {
  .aw-highlight-scroll {
    animation: drawHighlight linear forwards;
    animation-timeline: view();
    animation-range: entry 50% cover 50%; /* Starts half-way up the screen */
  }
}
@keyframes drawHighlight {
  to { background-size: 100% 100%; }
}
/* --- Organic Levitation --- */
.aw-float-organic {
  animation: organicFloat 6s ease-in-out infinite;
  will-change: transform;
}
.aw-float-delay {
  animation-delay: -3s; /* Desync multiple objects */
}
@keyframes organicFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(2deg); }
  66% { transform: translateY(10px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
/* --- Components --- */
.aw-btn {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 1rem 2.5rem;
  font-family: var(--aw-font-sans); font-size: var(--text-base); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 99px; /* Pill */
  cursor: pointer; overflow: hidden; border: none;
  background-color: var(--color-accent);
  color: var(--color-bg);
  transition: transform 0.4s var(--ease-golden);
  will-change: transform;
}
.aw-btn:hover { transform: scale(1.05); }
/* Overflow span sliding up trick */
.aw-btn-text-mask { position: relative; display: block; overflow: hidden; height: 1em; }
.aw-btn-text-mask span {
  display: block; transition: transform 0.4s var(--ease-golden);
}
.aw-btn-text-mask::before {
  content: attr(data-hover);
  position: absolute; left: 0; top: 100%; width: 100%; display: block;
  transform: translateY(0);
  transition: transform 0.4s var(--ease-golden);
}
.aw-btn:hover .aw-btn-text-mask span { transform: translateY(-100%); }
.aw-btn:hover .aw-btn-text-mask::before { transform: translateY(-100%); }
/* Outlined Modern */
.aw-btn-outline {
  background: transparent; color: var(--color-fg);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 0 0 0 var(--color-accent);
  transition: background 0.4s var(--ease-expo), color 0.4s;
}
.aw-btn-outline:hover { background: var(--color-accent); color: var(--color-bg); }
/* --- 3D Flip Link --- */
.aw-flip-link {
  display: inline-block;
  perspective: 1000px;
  text-transform: uppercase;
  font-family: var(--aw-font-display);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.aw-flip-link-inner {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-expo);
}
.aw-flip-link-front, .aw-flip-link-back {
  display: block;
  backface-visibility: hidden;
}
.aw-flip-link-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--color-accent);
  transform: rotateX(-90deg) translateY(100%);
  transform-origin: bottom center;
}
.aw-flip-link-front {
  transform-origin: bottom center;
}
.aw-flip-link:hover .aw-flip-link-inner {
  transform: rotateX(90deg) translateY(-50%);
}
.aw-tracing-border { position: relative; border-radius: 16px; padding: 1px; overflow: hidden; background: var(--color-border); }
.aw-tracing-border::before { content: ""; position: absolute; inset: -100%; background: conic-gradient(from 0deg, transparent 70%, var(--color-accent) 100%); animation: spinTrace 4s linear infinite; }
.aw-tracing-border-inner { position: relative; background: var(--color-bg); border-radius: 15px; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
@keyframes spinTrace { 100% { transform: rotate(360deg); } }
/* --- 2. Marquee Hover Button --- */
.aw-btn-marquee {
  display: inline-flex; overflow: hidden; white-space: nowrap;
}
.aw-btn-marquee span {
  display: inline-block; padding: 0 var(--space-2);
  transition: transform var(--trans-slow);
}
.aw-btn-marquee:hover span {
  animation: marqueeBtn 2s linear infinite;
}
@keyframes marqueeBtn {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
/* --- 3. Liquid Blob Reveal Button --- */
.aw-btn-blob {
  position: relative; z-index: 1; overflow: hidden;
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-fg);
}
.aw-btn-blob::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 150%; aspect-ratio: 1/1; background: var(--color-accent);
  border-radius: 50%; z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1);
}
.aw-btn-blob:hover { color: var(--color-bg); }
.aw-btn-blob:hover::before { transform: translate(-50%, -50%) scale(1); }
/* --- 13. Brutalist Glitch Offset Button --- */
.aw-btn-brutal-glitch {
  background: var(--color-neutral); color: var(--color-fg);
  border: 2px solid var(--color-fg); border-radius: 0;
  text-transform: uppercase; font-weight: bold;
  box-shadow: 0px 0px 0px 0px #00F0FF, 0px 0px 0px 0px #FF007A;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
}
.aw-btn-brutal-glitch:hover {
  transform: translate(-4px, -4px);
  /* Hard offset cyan and magenta shadows */
  box-shadow: 6px 6px 0px 0px #00F0FF, -2px -2px 0px 0px #FF007A;
}
.aw-btn-brutal-glitch:active { transform: translate(0, 0); box-shadow: 0 0 0 0 transparent; }
/* --- 14. Liquid Mask Swipe Button --- */
.aw-btn-liquid-swipe {
  position: relative; background: transparent; color: var(--color-fg);
  border: 1px solid var(--color-border); z-index: 1;
}
.aw-btn-liquid-swipe::after {
  content: ""; position: absolute; inset: 0;
  background: var(--color-fg); z-index: -1;
  /* Start as a tiny dot on the left */
  clip-path: circle(0% at 0% 50%);
  transition: clip-path 0.6s var(--ease-expo);
}
.aw-btn-liquid-swipe:hover { color: var(--color-bg); border-color: transparent; }
.aw-btn-liquid-swipe:hover::after {
  /* Expand fluidly to cover the button */
  clip-path: circle(150% at 50% 50%);
}
/* --- 23. Cyberpunk Frame Button --- */
.aw-btn-cyber-frame {
  position: relative; background: transparent; color: var(--color-fg);
  border: 1px solid transparent; padding: 1rem 2.5rem; 
  text-transform: uppercase; font-family: var(--aw-font-mono); font-weight: bold;
}
.aw-btn-cyber-frame::before, .aw-btn-cyber-frame::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  transition: all 0.5s var(--ease-expo); border: 2px solid var(--color-accent);
}
.aw-btn-cyber-frame::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.aw-btn-cyber-frame::after { bottom: 0; right: 0; border-left: none; border-top: none; }
.aw-btn-cyber-frame:hover::before, .aw-btn-cyber-frame:hover::after {
  width: 100%; height: 100%; opacity: 0.3;
}
/* --- 24. Hyper-Charge Ring Button --- */
.aw-btn-charge {
  position: relative; color: var(--color-fg);
  overflow: hidden; border-radius: 99px; z-index: 1; 
  padding: 1rem 2.5rem; border: none; background: transparent;
}
.aw-btn-charge::before {
  content: ""; position: absolute; inset: -5px; z-index: -2;
  background: conic-gradient(from 0deg, transparent 70%, var(--color-accent) 100%);
  animation: spinCharge 3s linear infinite; opacity: 0; transition: opacity 0.4s;
}
.aw-btn-charge::after {
  content: ""; position: absolute; inset: 2px; background: var(--color-neutral);
  border-radius: 99px; z-index: -1; transition: background 0.4s;
}
.aw-btn-charge:hover::before { opacity: 1; animation: spinCharge 0.5s linear infinite; }
.aw-btn-charge:hover::after { background: var(--color-bg); }
@keyframes spinCharge { to { transform: rotate(360deg); } }
/* --- 36. Continuous Sonar Ping Button --- */
.aw-btn-sonar {
  position: relative; background: var(--color-accent); color: var(--color-bg);
  border-radius: 99px; z-index: 1; border: none; padding: 1rem 2.5rem;
}
.aw-btn-sonar::before {
  content: ""; position: absolute; inset: 0; border-radius: 99px;
  border: 1px solid var(--color-accent); z-index: -1;
  animation: sonarPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sonarPing {
  100% { transform: scale(1.5); opacity: 0; }
}
/* --- 37. Magnetic Hover Hook --- */
.aw-btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  /* Translate maps to JS mouse coordinates */
  transform: translate(calc(var(--mouse-x, 0) * 0.2px), calc(var(--mouse-y, 0) * 0.2px));
}
/* --- 38. Deep Neo-Brutal Push --- */
.aw-btn-neo-push {
  background: var(--color-bg); color: var(--color-fg);
  border: 2px solid var(--color-fg); border-radius: 8px;
  box-shadow: 6px 6px 0px 0px var(--color-fg);
  transition: all 0.15s ease-out; font-weight: bold; text-transform: uppercase;
}
.aw-btn-neo-push:active {
  transform: translate(6px, 6px); box-shadow: 0px 0px 0px 0px transparent;
}
/* --- 39. Liquid Wave Fill --- */
.aw-btn-liquid-wave {
  position: relative; overflow: hidden; border: 1px solid var(--color-fg);
  background: transparent; z-index: 1;
}
.aw-btn-liquid-wave::before {
  content: ""; position: absolute; left: -50%; top: 100%;
  width: 200%; height: 200%; background: var(--color-fg);
  border-radius: 40%; z-index: -1; transition: top 0.8s var(--ease-expo);
  animation: liquidRotate 4s linear infinite;
}
.aw-btn-liquid-wave:hover { color: var(--color-bg); }
.aw-btn-liquid-wave:hover::before { top: -20%; }
@keyframes liquidRotate { 100% { transform: rotate(360deg); } }
/* --- 40. Core Fill Expand --- */
.aw-btn-fill-expand {
  position: relative; box-shadow: inset 0 0 0 1px var(--color-border);
  background: transparent; overflow: hidden; z-index: 1;
}
.aw-btn-fill-expand::after {
  content: ""; position: absolute; inset: 0; background: var(--color-fg);
  transform: scaleY(0); transform-origin: bottom; z-index: -1;
  transition: transform 0.5s var(--ease-expo);
}
.aw-btn-fill-expand:hover { color: var(--color-bg); }
.aw-btn-fill-expand:hover::after { transform: scaleY(1); }
/* --- 81. Dimension Portal Reveal --- */
.aw-btn-portal { position: relative; z-index: 1; overflow: hidden; background: var(--color-bg); color: var(--color-fg); border: 1px solid var(--color-border); }
.aw-btn-portal::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1/1; background: var(--color-fg); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.8s var(--ease-expo); z-index: -1; }
.aw-btn-portal:hover { color: var(--color-bg); }
.aw-btn-portal:hover::after { transform: translate(-50%, -50%) scale(1); }
/* --- 82. Organic Fluid Blob Border --- */
.aw-btn-organic { border: 2px solid var(--color-accent); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: fluidBorder 6s linear infinite; background: transparent; color: var(--color-fg); }
@keyframes fluidBorder { 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); } }
/* --- 83. Laser Swipe Border --- */
.aw-btn-laser { position: relative; background: transparent; border: none; }
.aw-btn-laser::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--color-border); }
.aw-btn-laser::after { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 2px; background: #00F0FF; box-shadow: 0 0 10px #00F0FF; transition: width 0.4s var(--ease-expo); }
.aw-btn-laser:hover::after { width: 100%; }
/* --- 84. Barcode Scanline --- */
.aw-btn-barcode { position: relative; overflow: hidden; }
.aw-btn-barcode::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent, transparent 4px, rgba(255,255,255,0.1) 4px, rgba(255,255,255,0.1) 8px); transform: translateY(-100%); transition: transform 0.4s; }
.aw-btn-barcode:hover::before { transform: translateY(0); }
/* --- 85. 3D Isometric Key Push --- */
.aw-btn-iso-push { background: var(--color-neutral); border: 1px solid var(--color-border); box-shadow: -6px 6px 0px var(--color-accent); transform: translate(6px, -6px); transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.aw-btn-iso-push:hover { box-shadow: -2px 2px 0px var(--color-accent); transform: translate(2px, -2px); }
.aw-card {
  position: relative;
  background-color: var(--color-neutral);
  border-radius: 12px;
  padding: var(--space-8);
  border: 1px solid transparent;
  transition: all var(--trans-slow);
}
/* 3D Float Hover commonly used for Case Studies */
.aw-card-interactive { cursor: pointer; transform-style: preserve-3d; perspective: 1000px; }
.aw-card-interactive:hover {
  transform: translateY(-8px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-main);
}
.aw-card-interactive::after {
  /* Subtle glow follow border mapping trick fallback */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; box-shadow: 0 0 20px 0 var(--color-glow); opacity: 0;
  transition: opacity var(--trans-fast);
}
.aw-card-interactive:hover::after { opacity: 1; }
/* --- Sticky Stack Cards --- */
.aw-stack-container {
  position: relative;
  width: 100%;
  padding-bottom: var(--space-32);
}
.aw-stack-card {
  position: sticky;
  top: var(--space-16);
  height: 70vh;
  width: 100%;
  background: var(--color-neutral);
  border-radius: 24px;
  padding: var(--space-8);
  box-shadow: 0 -20px 40px rgba(0,0,0,0.4);
  transform-origin: top center;
  border: 1px solid var(--color-border);
  overflow: hidden;
  margin-bottom: var(--space-8);
}
/* Modern Native Scroll Parallax Scale */
@supports (animation-timeline: view()) {
  .aw-stack-card {
    animation: scaleStackDown linear both;
    animation-timeline: view();
    animation-range: exit-crossing 0% exit 100%;
  }
}
@keyframes scaleStackDown {
  to { transform: scale(0.9); filter: brightness(0.4); }
}
/* --- Spotlight Glow Cards --- */
.aw-spotlight-group {
  display: grid;
  gap: var(--space-4);
}
.aw-spotlight-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
/* The invisible spotlight that tracks the mouse */
.aw-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--trans-fast);
  /* Uses CSS variables mapped via a tiny JS snippet */
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255, 255, 255, 0.08), 
    transparent 40%
  );
  z-index: 0;
  pointer-events: none;
}
.aw-spotlight-card:hover::before {
  opacity: 1;
}
.aw-spotlight-content {
  position: relative;
  z-index: 1; /* Keeps content above the glow */
}
/* --- Neo-Brutalist Card --- */
.aw-neo-card {
  background: var(--color-bg);
  border: 3px solid var(--color-fg);
  border-radius: 0px; /* Brutalism uses sharp corners */
  box-shadow: 12px 12px 0px var(--color-accent);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
  cursor: pointer;
  padding: var(--space-8);
}
.aw-neo-card:hover {
  transform: translate(4px, 4px);
  box-shadow: 8px 8px 0px var(--color-accent);
}
.aw-neo-card:active {
  transform: translate(12px, 12px);
  box-shadow: 0px 0px 0px var(--color-accent); /* Presses into the page */
}
/* --- Layered Parallax Glass Panes --- */
.aw-layered-glass { position: relative; perspective: 1000px; transform-style: preserve-3d; width: 100%; height: 100%; cursor: pointer;}
.aw-layered-pane { position: absolute; inset: 0; border: 1px solid var(--color-border); border-radius: 16px; transition: transform 0.8s var(--ease-expo); background: var(--glass-bg); backdrop-filter: var(--blur-md); box-shadow: var(--shadow-main); }
.aw-layered-glass:hover .aw-layered-pane:nth-child(1) { transform: translateZ(-40px) translateX(-20px) translateY(-20px); opacity: 0.5;}
.aw-layered-glass:hover .aw-layered-pane:nth-child(2) { transform: translateZ(0px); }
.aw-layered-glass:hover .aw-layered-pane:nth-child(3) { transform: translateZ(40px) translateX(20px) translateY(20px); }
/* --- 4. 3D Isometric Card Grid --- */
.aw-isometric-grid {
  display: grid; gap: var(--space-8);
  transform: rotateX(60deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  perspective: 1000px;
}
.aw-isometric-card {
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px; padding: var(--space-8);
  transition: transform var(--trans-slow), box-shadow var(--trans-slow);
}
.aw-isometric-card:hover {
  transform: translateZ(40px) translateX(-10px) translateY(-10px);
  box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.3);
  border-color: var(--color-accent);
}
/* --- 15. Holographic Foil Card --- */
.aw-holo-card {
  position: relative; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--color-border);
  border-radius: 16px; padding: var(--space-8);
  transform-style: preserve-3d; perspective: 1000px;
  transition: transform var(--trans-slow);
}
.aw-holo-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    115deg, transparent 20%, rgba(0, 240, 255, 0.4) 30%, 
    rgba(112, 0, 255, 0.4) 50%, rgba(255, 0, 122, 0.4) 70%, transparent 80%
  );
  background-size: 300% 300%;
  background-position: 100% 100%;
  mix-blend-mode: color-dodge; opacity: 0; pointer-events: none;
  transition: background-position 1s var(--ease-expo), opacity 0.4s;
}
.aw-holo-card:hover { transform: rotateX(10deg) rotateY(-10deg) scale(1.02); }
.aw-holo-card:hover::before {
  opacity: 1; background-position: 0% 0%;
}
/* --- 27. 3D Unfolding Paper Card --- */
.aw-card-fold {
  position: relative; perspective: 1200px; transform-style: preserve-3d;
}
.aw-card-fold-top {
  background: var(--color-neutral); padding: var(--space-8); 
  border-radius: 12px; transform-origin: bottom center; 
  z-index: 2; position: relative; border: 1px solid var(--color-border);
}
.aw-card-fold-bottom {
  background: var(--color-bg); padding: var(--space-8); 
  border-radius: 0 0 12px 12px; border: 1px solid var(--color-border);
  border-top: none;
  /* Start folded up backwards */
  transform-origin: top center; transform: rotateX(-120deg);
  transition: transform 0.8s var(--ease-bounce-soft), opacity 0.8s;
  position: absolute; top: 100%; left: 0; width: 100%;
  filter: brightness(0.2); opacity: 0; z-index: 1;
}
.aw-card-fold:hover .aw-card-fold-bottom {
  transform: rotateX(0deg); filter: brightness(1); opacity: 1;
}
.aw-card-fold:hover .aw-card-fold-top {
  border-radius: 12px 12px 0 0; /* Snap corners sharp on unfold */
}
/* --- 41. Glass Reflection Sweep --- */
.aw-card-glass-reflect {
  position: relative; overflow: hidden; background: var(--glass-bg);
  backdrop-filter: var(--blur-md); border-radius: 16px; border: 1px solid var(--color-border);
}
.aw-card-glass-reflect::after {
  content: ""; position: absolute; top: -50%; left: -50%; width: 50%; height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
  transform: rotate(45deg) translateX(-150%); transition: transform 0.8s var(--ease-expo);
}
.aw-card-glass-reflect:hover::after { transform: rotate(45deg) translateX(300%); }
/* --- 42. Deck Spread Fan --- */
.aw-card-stack-spread { position: relative; width: 300px; height: 400px; }
.aw-card-stack-spread > div {
  position: absolute; inset: 0; border-radius: 16px; background: var(--color-neutral);
  border: 1px solid var(--color-border); transition: transform 0.6s var(--ease-bounce-soft);
  transform-origin: bottom center;
}
.aw-card-stack-spread:hover > div:nth-child(1) { transform: rotate(-15deg) translateX(-60px); }
.aw-card-stack-spread:hover > div:nth-child(2) { transform: rotate(0deg) translateY(-20px); z-index: 2; }
.aw-card-stack-spread:hover > div:nth-child(3) { transform: rotate(15deg) translateX(60px); }
/* --- 43. Neon Wireframe Reveal --- */
.aw-card-neon-wireframe {
  background: transparent; border: 1px solid transparent; border-radius: 12px;
  position: relative; transition: border-color 0.4s; overflow: hidden;
}
.aw-card-neon-wireframe::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px;
  box-shadow: inset 0 0 20px #00F0FF; opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.aw-card-neon-wireframe:hover { border-color: #00F0FF; }
.aw-card-neon-wireframe:hover::before { opacity: 1; }
/* --- 44. Elevator Door Reveal --- */
.aw-card-elevator { position: relative; overflow: hidden; border-radius: 16px; }
.aw-card-elevator::before, .aw-card-elevator::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 100%;
  background: var(--color-fg); transition: transform 0.8s var(--ease-expo); z-index: 2;
}
.aw-card-elevator::before { left: 0; }
.aw-card-elevator::after { right: 0; }
.aw-card-elevator:hover::before { transform: translateX(-100%); }
.aw-card-elevator:hover::after { transform: translateX(100%); }
/* --- 45. 3D Float Parallax Tilt --- */
.aw-card-float-tilt {
  transform-style: preserve-3d; perspective: 1000px;
  /* Driven by JS mapping --mouse-x/y to degrees */
  transform: rotateX(calc(var(--rot-x, 0) * 1deg)) rotateY(calc(var(--rot-y, 0) * 1deg));
}
.aw-card-float-inner { transform: translateZ(40px); }
/* --- 86. Deep Z-Axis Push (Use with parent :has) --- */
.aw-card-z-push { transition: transform 0.6s var(--ease-expo), filter 0.6s; transform-style: preserve-3d; }
.aw-card-z-push:hover { transform: translateZ(50px) scale(1.05); z-index: 10; }
/* --- 87. Origami Polygon Unfold --- */
.aw-card-origami { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transition: clip-path 0.8s var(--ease-bounce-soft); background: var(--glass-bg); padding: var(--space-8); }
.aw-card-origami:hover, .aw-card-origami.is-active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
/* --- 88. Glass Lens Magnify --- */
.aw-card-lens { backdrop-filter: blur(4px); transition: backdrop-filter 0.4s, transform 0.4s; border-radius: 50%; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2); }
.aw-card-lens:hover { backdrop-filter: blur(16px); transform: scale(1.2); }
/* --- 89. Noise Burn Transition --- */
.aw-card-noise-burn { position: relative; overflow: hidden; }
.aw-card-noise-burn::after { content: ""; position: absolute; inset: 0; background: var(--color-bg); -webkit-mask-image: url('data:image/svg+xml,...'); mask-image: url('data:image/svg+xml,...'); /* Assume base64 noise map here */ -webkit-mask-size: cover; mask-size: cover; transition: -webkit-mask-position 1s; transition: mask-position 1s; transition: mask-position 1s, -webkit-mask-position 1s; z-index: 5; }
.aw-card-noise-burn:hover::after { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; opacity: 0; }
/* --- 90. Glitch Offset Borders --- */
.aw-card-glitch-border { position: relative; border: 1px solid var(--color-border); transition: all 0.2s; }
.aw-card-glitch-border:hover { box-shadow: -4px 0 0 #00F0FF, 4px 0 0 #FF007A; border-color: transparent; }
.aw-nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
  padding: var(--space-6) 0;
  transition: padding var(--trans-fast), background var(--trans-fast);
}
.aw-nav.scrolled {
  padding: var(--space-4) 0;
  background: var(--glass-bg);
  backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border-bottom: 1px solid var(--color-border);
}
.aw-nav-brand { font-family: var(--aw-font-display); font-size: var(--text-2xl); font-weight: 600; text-transform: uppercase; letter-spacing: -0.04em; }
.aw-nav-links a {
  position: relative; display: inline-block; padding: var(--space-2) 0;
  margin-left: var(--space-8); font-size: var(--text-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
}
/* Beautiful Animated Link Underline */
.aw-nav-links a::after {
  content: ''; position: absolute; width: 100%; transform: scaleX(0);
  height: 1px; bottom: 0; left: 0;
  background-color: var(--color-fg);
  transform-origin: bottom right; transition: transform 0.3s var(--ease-golden);
}
.aw-nav-links a:hover::after {
  transform: scaleX(1); transform-origin: bottom left;
}
/* --- 5. Floating Glass Dock (macOS Style) --- */
.aw-glass-dock {
  position: fixed; bottom: var(--space-8); left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-2); padding: var(--space-2);
  background: var(--glass-bg); backdrop-filter: var(--blur-md); -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--color-border); border-radius: 99px; z-index: 100;
}
.aw-dock-item {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-neutral); display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), margin 0.3s; cursor: pointer;
}
/* Scale hovered item */
.aw-dock-item:hover { transform: scale(1.5); margin: 0 var(--space-4); background: var(--color-accent); color: var(--color-bg); }
/* Scale adjacent siblings slightly utilizing modern :has selector */
.aw-glass-dock:has(.aw-dock-item:hover) .aw-dock-item:not(:hover) { opacity: 0.6; }
.aw-dock-item:has(+ .aw-dock-item:hover),
.aw-dock-item:hover + .aw-dock-item {
  transform: scale(1.2); margin: 0 var(--space-2);
}
/* --- 16. Premium Bracket Reveal Link --- */
.aw-link-brackets {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; text-transform: uppercase; font-family: var(--aw-font-mono);
  transition: color var(--trans-fast);
}
.aw-link-brackets::before, .aw-link-brackets::after {
  position: absolute; opacity: 0; color: var(--color-accent);
  transition: transform 0.4s var(--ease-expo), opacity 0.4s;
}
.aw-link-brackets::before { content: "["; left: -15px; transform: translateX(10px); }
.aw-link-brackets::after { content: "]"; right: -15px; transform: translateX(-10px); }
.aw-link-brackets:hover { color: var(--color-accent); }
.aw-link-brackets:hover::before { opacity: 1; transform: translateX(0); }
.aw-link-brackets:hover::after { opacity: 1; transform: translateX(0); }
/* --- 91. Magnetic Background Pill (Native CSS :has trick) --- */
.aw-nav-magnetic-group { display: flex; position: relative; gap: var(--space-4); }
.aw-nav-magnetic-group::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--color-neutral); border-radius: 99px; transition: all 0.4s var(--ease-expo); z-index: -1; }
/* Width calculations require fixed width items natively, or mapped JS variables. Fallback below */
.aw-nav-magnetic-group:hover::before { width: 100px; }
/* --- 92. Blurring Siblings --- */
.aw-nav-blur-group:has(.aw-link-blur:hover) .aw-link-blur:not(:hover) { filter: blur(4px); opacity: 0.3; transform: scale(0.95); }
.aw-link-blur { transition: all 0.4s var(--ease-expo); display: inline-block; }
/* --- 93. Cyber Laser Underline --- */
.aw-link-cyber-line { position: relative; padding-bottom: 4px; }
.aw-link-cyber-line::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, transparent, #00F0FF); box-shadow: 0 0 8px #00F0FF; transition: width 0.4s var(--ease-expo); }
.aw-link-cyber-line:hover::after { width: 100%; }
/* --- 94. Vertical Text Swap --- */
.aw-link-v-swap { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; height: 1.2em; }
.aw-link-v-swap span { transition: transform 0.4s var(--ease-expo); }
.aw-link-v-swap::after { content: attr(data-text); position: absolute; top: 100%; color: var(--color-accent); transition: transform 0.4s var(--ease-expo); }
.aw-link-v-swap:hover span, .aw-link-v-swap:hover::after { transform: translateY(-100%); }
/* --- 95. Mix-Blend Difference Nav --- */
.aw-nav-difference { mix-blend-mode: difference; color: #fff; z-index: 100; isolation: isolate; }
/* High Impact Hero Layouts */
.aw-hero {
  position: relative; width: 100%; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--space-24); overflow: hidden;
}
.aw-hero-split { display: grid; grid-template-columns: 1fr; align-items: center; height: 100%; gap: var(--space-12); }
@media(min-width: 1024px) {
  .aw-hero-split { grid-template-columns: 1.5fr 1fr; }
}
.aw-hero-headline { margin-bottom: var(--space-4); position: relative; display: block; overflow: hidden; }
/* Clip Reveal line by line for text elements */
.aw-text-reveal { display: inline-block; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.aw-text-reveal span { display: block; animation: slideUpClip 1.2s var(--ease-expo) forwards; }
/* Ticker/Marquee */
.aw-marquee-section { padding: var(--space-16) 0; overflow: hidden; white-space: nowrap; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.aw-marquee-track { display: flex; width: -moz-max-content; width: max-content; animation: marqueeSlide 20s linear infinite; gap: var(--space-16); }
@keyframes marqueeSlide {
  to { transform: translateX(calc(-50% - (var(--space-16) / 2))); }
}
.aw-marquee-item {
  font-family: var(--aw-font-display);
  font-size: var(--text-5xl); text-transform: uppercase;
  -webkit-text-stroke: 1px var(--color-border); color: transparent;
  transition: color var(--trans-fast);
}
.aw-marquee-item:hover { color: var(--color-fg); -webkit-text-stroke: 1px transparent; }
/* Parallax Footers / Sections trick via sticky behavior */
.aw-section-sticky {
  position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden;
}
/* Deep Sticky Parallax Footer Module (Awwwards Classic Hook) */
/* The parent main element BEFORE the footer must have a background color (like var(--color-bg)) 
   to natively "hide" this footer beneath it. */
.aw-footer-parallax-wrapper {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 
}
.aw-footer-parallax {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-8);
  background: #000; /* Absolute deep background space depth native. */
  color: var(--color-fg);
}
/* Kinetic Spinning Typographic Badge Vector Loop natively mapping continuous mathematically */
.aw-spin-badge {
  position: absolute; right: 10%; top: -10%; z-index: 50;
  width: 160px; height: 160px;
  animation: badgeRotate 10s linear infinite; pointer-events: none;
}
@keyframes badgeRotate { to { transform: rotate(360deg); } }
/* Awwwards Organic Typography Navigation Lists mapping over siblings flawlessly */
.aw-ghost-menu:hover .aw-ghost-link {
  opacity: 0.2; filter: blur(4px); transform: scale(0.95);
}
.aw-ghost-menu .aw-ghost-link {
  display: block; transition: all 0.4s var(--ease-expo); transform-origin: left center; font-size: var(--text-5xl); font-family: var(--aw-font-display); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border);
}
.aw-ghost-menu .aw-ghost-link:hover {
  opacity: 1; filter: blur(0); transform: scale(1.05); transform-origin: left center; color: var(--color-accent);
}
/* --- Vertical Marquee --- */
.aw-ticker-vertical {
  height: 100vh;
  overflow: hidden;
  writing-mode: vertical-rl; /* Turns text sideways */
  text-orientation: mixed;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.aw-ticker-vertical-track {
  display: flex;
  height: -moz-max-content;
  height: max-content;
  animation: scrollVertical 15s linear infinite;
  gap: var(--space-8);
}
@keyframes scrollVertical {
  to { transform: translateY(calc(-50% - (var(--space-8) / 2))); }
}
/* --- 6. Pure CSS Scroll Progress Bar --- */
.aw-scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--gradient-accent); z-index: 9999;
  transform-origin: 0% 50%;
}
@supports (animation-timeline: scroll()) {
  .aw-scroll-progress {
    animation: scrollProgressFill linear forwards;
    animation-timeline: scroll(root);
  }
}
@keyframes scrollProgressFill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
/* --- 18. Native Scroll Background Zoom --- */
.aw-scroll-zoom-bg {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.aw-scroll-zoom-inner {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover; z-index: -1;
}
@supports (animation-timeline: view()) {
  .aw-scroll-zoom-inner {
    animation: zoomScrollImage linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
}
@keyframes zoomScrollImage {
  0% { transform: scale(1.6); filter: blur(20px) brightness(0.2); }
  50% { transform: scale(1.1); filter: blur(0px) brightness(0.6); }
  100% { transform: scale(1); filter: blur(0px) brightness(1); }
}
/* --- 30. Native Scroll 3D Skew/Pitch --- */
.aw-scroll-skew {
  transform-origin: center;
  will-change: transform, opacity;
}
@supports (animation-timeline: view()) {
  .aw-scroll-skew {
    animation: skewOnScroll linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}
@keyframes skewOnScroll {
  /* Starts leaning backward, flattens in center, leans forward exiting */
  0% { transform: perspective(1200px) rotateX(-25deg) scale(0.85); opacity: 0; filter: blur(10px); }
  40%, 60% { transform: perspective(1200px) rotateX(0deg) scale(1); opacity: 1; filter: blur(0px); }
  100% { transform: perspective(1200px) rotateX(25deg) scale(0.85); opacity: 0; filter: blur(10px); }
}
/* --- 56. Section Scale Up Entry --- */
@supports (animation-timeline: view()) {
  .aw-scroll-scale-up {
    animation: sectionScaleUp linear both; animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes sectionScaleUp {
  0% { transform: scale(0.8); border-radius: 40px; opacity: 0; }
  100% { transform: scale(1); border-radius: 0px; opacity: 1; }
}
/* --- 57. Cinematic Curtain Rise --- */
.aw-scroll-curtain { position: relative; }
.aw-scroll-curtain::after {
  content: ""; position: absolute; inset: 0; background: #000; z-index: 10;
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  .aw-scroll-curtain::after {
    animation: curtainRise linear both; animation-timeline: view();
    animation-range: entry 20% cover 50%;
  }
}
@keyframes curtainRise { to { transform: scaleY(0); } }
/* --- 58. Native Background Parallax --- */
.aw-section-parallax-bg {
  background-attachment: fixed; background-position: center;
  background-repeat: no-repeat; background-size: cover;
}
/* --- 59. Native Y-Axis Snap Container --- */
.aw-scroll-snap-y-container {
  height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.aw-scroll-snap-y-container::-webkit-scrollbar { display: none; }
.aw-scroll-snap-y-item { height: 100vh; scroll-snap-align: start; }
/* --- 60. Native Horizontal Sticky Wrap --- */
.aw-section-sticky-horizontal {
  display: flex; width: -moz-max-content; width: max-content; height: 100vh;
}
.aw-sticky-track {
  position: sticky; top: 0; height: 100vh; overflow-x: hidden;
}
/* --- 101. Curved Horizon Entry --- */
@supports (animation-timeline: view()) {
  .aw-scroll-horizon { animation: horizonBend linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@keyframes horizonBend {
  0% { border-radius: 50% 50% 0 0; transform: translateY(20%); }
  100% { border-radius: 0; transform: translateY(0); }
}
/* --- 102. Massive Zoom-Out Fit --- */
@supports (animation-timeline: view()) {
  .aw-scroll-zoom-out-fit { animation: zoomOutFit linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@keyframes zoomOutFit { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* --- 103. 3D Section Fold Away (Exit Anim) --- */
@supports (animation-timeline: view()) {
  .aw-scroll-fold-away { transform-origin: top center; animation: foldAway linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
@keyframes foldAway { to { transform: rotateX(45deg) scale(0.9); filter: brightness(0.2); } }
/* --- 104. Timeline Color Spectrum Shift --- */
@supports (animation-timeline: view()) {
  .aw-scroll-color-shift { animation: hueShift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes hueShift { to { filter: hue-rotate(360deg); } }
/* --- 105. Strict Section Grain (Base64 wrapper) --- */
.aw-section-grain { position: relative; overflow: hidden; }
.aw-section-grain::after { content: ""; position: absolute; inset: 0; background: url('data:image/svg+xml,...'); opacity: 0.05; pointer-events: none; mix-blend-mode: overlay; animation: noise 1s steps(2) infinite; }
/* Awwwards Minimalist Inputs */
.aw-input-group {
  position: relative; margin-bottom: var(--space-6); width: 100%;
}
.aw-input {
  width: 100%; padding: var(--space-4) 0;
  background: transparent; border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg); font-size: var(--text-base);
  outline: none; transition: border-color var(--trans-fast);
}
.aw-input:focus { border-bottom-color: var(--color-accent); }
/* Floating Label trick */
.aw-label {
  position: absolute; top: var(--space-4); left: 0;
  color: #777; font-size: var(--text-base); pointer-events: none;
  transition: all var(--trans-fast);
}
.aw-input:focus ~ .aw-label,
.aw-input:valid ~ .aw-label {
  top: -12px; font-size: var(--text-xs); color: var(--color-accent);
}
/* --- Add to forms.css --- */
/* --- 66. Radial Glow Border Input --- */
.aw-input-glow-border {
  position: relative; background: var(--color-neutral); border-radius: 8px;
}
.aw-input-glow-border::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 10px;
  background: radial-gradient(80px circle at var(--mouse-x, 0) var(--mouse-y, 0), var(--color-accent), transparent);
}
.aw-input-glow-border input { background: var(--color-neutral); border: none; border-radius: 8px; padding: 1rem; width: 100%; color: var(--color-fg); }
/* --- 67. Elastic Stretch Input Line --- */
.aw-input-elastic {
  border: none; border-bottom: 2px solid var(--color-border); background: transparent;
  padding: 1rem 0; width: 100%; transition: transform 0.2s var(--ease-bounce-soft);
}
.aw-input-elastic:focus {
  border-bottom-color: var(--color-accent); transform: scaleY(1.1); transform-origin: bottom;
}
/* --- 68. Liquid Fill Checkbox --- */
.aw-checkbox-liquid { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 24px; height: 24px; border: 2px solid var(--color-border); border-radius: 6px; position: relative; cursor: pointer; overflow: hidden; }
.aw-checkbox-liquid::before {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%;
  background: var(--color-accent); transition: height 0.4s var(--ease-bounce-soft);
}
.aw-checkbox-liquid:checked::before { height: 100%; }
/* --- Add to accordion.css --- */
/* --- 69. Sibling Glow Accordion Container --- */
.aw-accordion-glow-wrap:has(.aw-accordion:hover) .aw-accordion:not(:hover) {
  opacity: 0.4; filter: blur(2px);
}
.aw-accordion-glow-wrap .aw-accordion { transition: opacity 0.4s, filter 0.4s; }
/* --- 70. Slide-Out Right Accordion --- */
.aw-accordion-slide-out { display: flex; align-items: flex-start; }
.aw-accordion-slide-out summary { width: 300px; flex-shrink: 0; }
.aw-accordion-slide-out .aw-accordion-content {
  grid-template-columns: 0fr; opacity: 0; transition: grid-template-columns 0.6s var(--ease-expo), opacity 0.6s;
}
.aw-accordion-slide-out[open] .aw-accordion-content { grid-template-columns: 1fr; opacity: 1; padding-left: var(--space-8); }
.aw-accordion-slide-out .aw-accordion-content > div { width: -moz-max-content; width: max-content; }
/* Custom Pure CSS Smooth Accordions */
.aw-accordion-container {
  border-top: 1px solid var(--color-border);
  width: 100%;
}
.aw-accordion {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
}
.aw-accordion summary {
  padding: var(--space-8) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--aw-font-display);
  font-size: var(--text-3xl); font-weight: 500;
  cursor: pointer; list-style: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  transition: color var(--trans-fast);
}
/* Remove default summary arrow in Webkit & standard */
.aw-accordion summary::-webkit-details-marker { display: none; }
.aw-accordion summary:hover { color: var(--color-accent); }
/* The Plus/Minus Custom Icon */
.aw-accordion summary::after {
  content: "+";
  font-family: var(--aw-font-mono); font-weight: 300; font-size: var(--text-4xl);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--trans-slow); will-change: transform;
}
.aw-accordion[open] summary::after { transform: rotate(45deg); }
/* Content Reveal Trick (Pure CSS transition height trick utilizing grid!) */
.aw-accordion-content {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--trans-slow), opacity var(--trans-slow), padding var(--trans-slow);
}
.aw-accordion-content > div { overflow: hidden; font-size: var(--text-lg); color: #888; max-width: 800px; }
.aw-accordion[open] .aw-accordion-content {
  grid-template-rows: 1fr; opacity: 1; padding-bottom: var(--space-8);
}
/* --- 20. Magnetic Center-Border Accordion --- */
.aw-accordion-magnetic {
  position: relative; width: 100%; margin-bottom: var(--space-4);
}
/* The animated border */
.aw-accordion-magnetic::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 0%; height: 1px; background: var(--color-accent);
  transition: width 0.6s var(--ease-expo), left 0.6s var(--ease-expo);
}
.aw-accordion-magnetic:hover::after,
.aw-accordion-magnetic[open]::after {
  width: 100%; left: 0%;
}
.aw-accordion-magnetic summary {
  padding: var(--space-6) 0; font-family: var(--aw-font-display);
  font-size: var(--text-2xl); cursor: pointer; list-style: none;
}
.aw-accordion-magnetic summary::-webkit-details-marker { display: none; }
.aw-accordion-magnetic[open] .aw-accordion-content {
  padding-bottom: var(--space-6);
}
/* --- Add to forms.css --- */
/* --- 111. Terminal Blinking Cursor Input --- */
.aw-input-terminal { font-family: var(--aw-font-mono); background: #000; color: #0f0; border: none; outline: none; caret-color: transparent; position: relative; }
.aw-input-terminal:focus { animation: blinkCursor 1s step-end infinite; border-right: 10px solid #0f0; }
@keyframes blinkCursor { 50% { border-right-color: transparent; } }
/* --- 112. Center-Draw Underline --- */
.aw-input-draw-line { border: none; background: transparent; padding: 1rem 0; color: var(--color-fg); position: relative; outline: none; }
.aw-input-draw-wrap { position: relative; }
.aw-input-draw-wrap::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0%; height: 2px; background: var(--color-accent); transition: width 0.4s var(--ease-expo), left 0.4s var(--ease-expo); }
.aw-input-draw-line:focus + ::after, .aw-input-draw-wrap:focus-within::after { width: 100%; left: 0; }
/* --- 113. Oversized Brutal Switch --- */
.aw-checkbox-brutal { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 60px; height: 30px; border: 2px solid var(--color-fg); border-radius: 99px; position: relative; cursor: pointer; outline: none; background: var(--color-bg); transition: background 0.3s; }
.aw-checkbox-brutal::before { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: var(--color-fg); border-radius: 50%; transition: transform 0.3s var(--ease-bounce-soft); }
.aw-checkbox-brutal:checked { background: var(--color-accent); border-color: var(--color-accent); }
.aw-checkbox-brutal:checked::before { transform: translateX(30px); background: var(--color-bg); }
/* --- Add to accordion.css --- */
/* --- 114. Cyber Slicing Accordion --- */
.aw-accordion-cyber { border-left: 2px solid transparent; transition: border-color 0.4s; }
.aw-accordion-cyber[open] { border-left-color: var(--color-accent); }
.aw-accordion-cyber[open] summary { padding-left: var(--space-4); color: var(--color-accent); }
/* --- 115. Marquee Header Accordion --- */
.aw-accordion-marquee summary { overflow: hidden; white-space: nowrap; }
.aw-accordion-marquee[open] summary { animation: marqueeText 4s linear infinite; }
@keyframes marqueeText { 100% { transform: translateX(-50%); } }
/* Scroll-snap container that hides native scrollbars but allows native momentum scrolling */
.aw-gallery {
  display: flex; gap: var(--space-6); overflow-x: auto;
  scroll-snap-type: x mandatory; padding: var(--space-8) 0; width: 100vw; position: relative;
  left: calc(-50vw + 50%); /* Full viewport width breakout hack */
  padding-left: max(5vw, 1rem); /* Matches container padding start */
  padding-right: 5vw;
}
/* Hide scrollbars (Webkit) */
.aw-gallery::-webkit-scrollbar { display: none; }
/* Hide scrollbars (Firefox/Edge) */
.aw-gallery { -ms-overflow-style: none; scrollbar-width: none; }
.aw-gallery-item {
  scroll-snap-align: center; flex: 0 0 70vw; height: 60vh;
  position: relative; overflow: hidden;
  border-radius: 8px; filter: grayscale(50%); transition: all var(--trans-slow);
}
@media (min-width: 1024px) {
  .aw-gallery-item { flex: 0 0 45vw; height: 80vh; scroll-snap-align: start; }
}
.aw-gallery-item:hover { filter: grayscale(0%); }
.aw-gallery-item img {
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1); transition: transform 2s var(--ease-expo);
}
.aw-gallery-item:hover img { transform: scale(1.05); }
/* --- Image Fan Stack --- */
.aw-fan-stack {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3/4;
  cursor: pointer;
  perspective: 1000px;
}
.aw-fan-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-main);
  transition: transform 0.7s var(--ease-bounce-soft), opacity 0.4s;
  transform-origin: bottom center;
}
/* Fan outwards on hover using nth-child */
.aw-fan-stack:hover img:nth-child(1) {
  transform: rotate(-15deg) translateX(-40px) translateY(-10px);
}
.aw-fan-stack:hover img:nth-child(2) {
  transform: rotate(0deg) scale(1.05) translateY(-20px);
  z-index: 10;
}
.aw-fan-stack:hover img:nth-child(3) {
  transform: rotate(15deg) translateX(40px) translateY(-10px);
}
/* --- Split-Screen Expansion Gallery --- */
.aw-split-gallery {
  display: flex;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  gap: 4px;
}
.aw-split-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: flex 0.8s var(--ease-expo);
  cursor: pointer;
}
.aw-split-panel img {
  width: 100vw; /* Keeps image size static so it reveals, not stretches */
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: all 0.8s var(--ease-expo);
}
.aw-split-panel:hover {
  flex: 4; /* Expands heavily on hover */
}
.aw-split-panel:hover img {
  opacity: 1;
  filter: grayscale(0%);
}
/* --- 7. Native View-Timeline Image Parallax --- */
.aw-img-parallax-wrap {
  overflow: hidden; border-radius: 12px; height: 100%; width: 100%;
}
.aw-img-parallax {
  width: 100%; height: 120%; /* Extra height to allow scrolling room */
  -o-object-fit: cover;
     object-fit: cover; transform-origin: center;
}
@supports (animation-timeline: view()) {
  .aw-img-parallax {
    animation: imageParallax linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
}
@keyframes imageParallax {
  0% { transform: translateY(-10%); }
  100% { transform: translateY(10%); }
}
/* --- 17. Diagonal Stack Peel Reveal --- */
.aw-img-stack-peel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 12px; cursor: pointer;
}
.aw-img-stack-peel img {
  position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
}
.aw-img-stack-peel img.aw-peel-top {
  z-index: 2; transform-origin: top left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.8s var(--ease-expo), filter 0.8s;
}
.aw-img-stack-peel:hover img.aw-peel-top {
  /* Peels the top image diagonally to the top-left */
  clip-path: polygon(0 0, 0 0, 0 0, 0 100%);
  filter: blur(4px) brightness(0.5);
}
/* --- 28. 3D Orbiting Ring Gallery --- */
.aw-ring-gallery {
  perspective: 1500px; display: flex; align-items: center; justify-content: center; 
  height: 60vh; overflow: hidden;
}
.aw-ring-inner {
  width: 250px; height: 350px; transform-style: preserve-3d;
  animation: rotateRing 24s infinite linear;
}
.aw-ring-item {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover; border-radius: 12px; border: 2px solid var(--color-border);
}
/* Distribute 5 items mathematically in a circle */
.aw-ring-item:nth-child(1) { transform: rotateY(0deg) translateZ(350px); }
.aw-ring-item:nth-child(2) { transform: rotateY(72deg) translateZ(350px); }
.aw-ring-item:nth-child(3) { transform: rotateY(144deg) translateZ(350px); }
.aw-ring-item:nth-child(4) { transform: rotateY(216deg) translateZ(350px); }
.aw-ring-item:nth-child(5) { transform: rotateY(288deg) translateZ(350px); }
@keyframes rotateRing { to { transform: rotateY(-360deg); } }
/* --- 29. Gradient Mask Image Wipe --- */
.aw-mask-wipe {
  position: relative; overflow: hidden; width: 100%; height: 100%;
}
.aw-mask-wipe img {
  width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, black 45%, transparent 55%);
  mask-image: linear-gradient(to right, black 45%, transparent 55%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.2s var(--ease-expo), filter 1.2s;
  filter: grayscale(100%);
}
.aw-mask-wipe:hover img {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  filter: grayscale(0%);
}
/* --- 51. 3x3 Distort Grid Hover --- */
.aw-img-distort-grid { position: relative; overflow: hidden; }
.aw-img-distort-grid::before, .aw-img-distort-grid::after {
  content: ""; position: absolute; inset: 0; background: inherit;
  transition: transform 0.6s var(--ease-expo); z-index: 2;
}
.aw-img-distort-grid::before { clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); }
.aw-img-distort-grid::after { clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); }
.aw-img-distort-grid:hover::before { transform: translate(-10%, -10%); }
.aw-img-distort-grid:hover::after { transform: translate(10%, 10%); }
/* --- 52. Moving Lens Flare Overlay --- */
.aw-img-lens-flare { position: relative; overflow: hidden; }
.aw-img-lens-flare::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4), transparent 60%);
  transform: translate(-100%, -100%); transition: transform 0.8s ease-in-out;
  mix-blend-mode: screen; pointer-events: none;
}
.aw-img-lens-flare:hover::after { transform: translate(100%, 100%); }
/* --- 53. Cyber Diagonal Slicer --- */
.aw-img-cyber-slice { position: relative; overflow: hidden; }
.aw-img-cyber-slice img { transition: transform 0.5s var(--ease-bounce-soft); }
.aw-img-cyber-slice:hover img {
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 40%, 0 60%, 100% 50%, 100% 100%, 0 100%);
  transform: scale(1.05); filter: contrast(1.2);
}
/* --- 54. Cinematic Ken Burns --- */
.aw-img-ken-burns { overflow: hidden; }
.aw-img-ken-burns img {
  transform: scale(1.2); transition: transform 10s ease-out; -o-object-position: left center; object-position: left center;
}
.aw-img-ken-burns:hover img { transform: scale(1) translate(2%, 2%); }
/* --- 55. Iris Circle Reveal --- */
.aw-img-reveal-circle img {
  clip-path: circle(20% at 50% 50%); transition: clip-path 0.8s var(--ease-expo);
}
.aw-img-reveal-circle:hover img { clip-path: circle(100% at 50% 50%); }
/* --- 96. Camera Shutter Polygon Reveal --- */
.aw-img-shutter { position: relative; overflow: hidden; }
.aw-img-shutter::before, .aw-img-shutter::after { content: ""; position: absolute; inset: 0; background: var(--color-bg); transition: transform 0.6s var(--ease-expo); z-index: 2; }
.aw-img-shutter::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.aw-img-shutter::after { clip-path: polygon(100% 100%, 0 100%, 100% 0); }
.aw-img-shutter:hover::before { transform: translate(-100%, -100%); }
.aw-img-shutter:hover::after { transform: translate(100%, 100%); }
/* --- 97. Cinematic Film Strip Scroll --- */
.aw-img-film-strip { height: 400px; width: 100%; background-image: url('strip.jpg'); background-size: cover; animation: filmRoll 20s linear infinite; }
@keyframes filmRoll { 100% { background-position: 0 -1000px; } }
/* --- 98. RGB Image Split Hover --- */
.aw-img-rgb-hover img { transition: filter 0.3s; }
.aw-img-rgb-hover:hover img { filter: drop-shadow(-4px 0px 0px red) drop-shadow(4px 0px 0px cyan); mix-blend-mode: screen; }
/* --- 99. Pixelate Sharpness Scale --- */
.aw-img-pixelate img { image-rendering: pixelated; filter: blur(2px) contrast(2); transform: scale(1.1); transition: all 0.8s; }
.aw-img-pixelate:hover img { filter: blur(0) contrast(1); transform: scale(1); image-rendering: auto; }
/* --- 100. Parallax Mask Speed Offset --- */
.aw-img-mask-speed { -webkit-mask-image: linear-gradient(black, transparent); -webkit-mask-position: 0 100%; -webkit-mask-size: 100% 200%; transition: -webkit-mask-position 1.2s var(--ease-expo); }
.aw-img-mask-speed:hover { -webkit-mask-position: 0 0; }
/* --- Preloader --- */
.aw-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background-color: var(--color-bg);
  display: flex; justify-content: center; align-items: center;
  animation: hidePreloader 0s var(--ease-expo) 2s forwards;
  overflow: hidden; pointer-events: none;
}
.aw-preloader-text {
  font-family: var(--aw-font-display); font-size: var(--text-display);
  font-weight: 600; text-transform: uppercase; color: var(--color-fg);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  animation: loaderReveal 1.8s var(--ease-expo) forwards;
}
@keyframes hidePreloader { to { opacity: 0; visibility: hidden; z-index: -1; } }
@keyframes loaderReveal {
  0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(50px); }
  30%, 70% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(0); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); transform: translateY(-50px); opacity: 0; }
}
/* --- Kinetic Link Fill Hover --- */
.aw-link-fill {
  position: relative; display: inline-block;
  color: transparent; -webkit-text-stroke: 1px var(--color-border);
  transition: -webkit-text-stroke var(--trans-fast);
}
.aw-link-fill::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 0%; height: 100%;
  color: var(--color-accent); -webkit-text-stroke: 0px transparent;
  overflow: hidden; white-space: nowrap;
  transition: width var(--trans-slow); will-change: width;
}
.aw-link-fill:hover::before { width: 100%; }
.aw-link-fill:hover { -webkit-text-stroke: 1px transparent; }
/* --- 3D Perspective Hover Card --- */
.aw-3d-wrap { perspective: 1000px; transform-style: preserve-3d; }
.aw-3d-card {
  transform: rotateX(0) rotateY(0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform; position: relative;
}
/* For pure CSS 3D illusion without JS math mapping */
.aw-3d-wrap:hover .aw-3d-card { transform: rotateX(8deg) rotateY(-8deg) scale(1.02); }
/* --- Pure CSS Custom Tooltip --- */
.aw-tooltip-trigger { position: relative; display: inline-flex; cursor: pointer; }
.aw-tooltip {
  position: absolute; bottom: calc(100% + var(--space-4)); left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.95);
  background: var(--color-fg); color: var(--color-bg);
  padding: var(--space-2) var(--space-4); border-radius: 6px;
  font-family: var(--aw-font-mono); font-size: var(--text-xs); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: all var(--trans-fast); will-change: transform, opacity;
}
.aw-tooltip-trigger:hover .aw-tooltip {
  opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
}
/* Custom Fluid Cursor Support Box */
.aw-cursor-dot {
  position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-accent); pointer-events: none; mix-blend-mode: difference; z-index: 10000;
  transform: translate(calc(var(--cursor-x, 0px) - 50%), calc(var(--cursor-y, 0px) - 50%));
  transition: transform 0.1s linear, width var(--trans-fast), height var(--trans-fast);
}
.aw-cursor-focus { width: 64px; height: 64px; }
/* --- 3D Kinetic Cylinder Text --- */
.aw-cylinder-wrap { perspective: 1000px; display: flex; justify-content: center; align-items: center; height: 120px; overflow: hidden; }
.aw-cylinder { transform-style: preserve-3d; animation: spinCylinder 8s linear infinite; position: relative; width: 100%; height: 100%; }
.aw-cylinder span { position: absolute; top: 50%; left: 50%; transform-origin: center; white-space: nowrap; font-family: var(--aw-font-display); font-size: 3rem; font-weight: 600; text-transform: uppercase; }
.aw-cylinder span:nth-child(1) { transform: translate(-50%, -50%) rotateX(0deg) translateZ(60px); }
.aw-cylinder span:nth-child(2) { transform: translate(-50%, -50%) rotateX(120deg) translateZ(60px); }
.aw-cylinder span:nth-child(3) { transform: translate(-50%, -50%) rotateX(240deg) translateZ(60px); }
@keyframes spinCylinder { to { transform: rotateX(-360deg); } }
/* --- 9. Organic Status Pulse Badge --- */
.aw-badge-pulse {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 50%;
  background: #00F0FF; /* System green/blue */
}
.aw-badge-pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: inherit;
  animation: radarPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes radarPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0; }
}
/* --- 10. Hover Sliding Pill Tabs --- */
.aw-slide-tabs {
  display: inline-flex; position: relative;
  background: var(--color-neutral); padding: 4px; border-radius: 99px;
  border: 1px solid var(--color-border);
}
.aw-tab {
  position: relative; z-index: 2; padding: 0.5rem 1.5rem;
  font-family: var(--aw-font-mono); font-size: var(--text-xs);
  color: var(--color-fg); cursor: pointer; text-transform: uppercase;
  transition: color var(--trans-fast);
}
/* The background pill that follows hover */
.aw-slide-tabs::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(100% / 3 - 2px); /* Assuming 3 tabs. Adjust via inline style if needed */
  background: var(--color-accent); border-radius: 99px;
  z-index: 1; transition: transform 0.4s var(--ease-expo);
}
/* Mathematical transforms assuming 3 tabs of equal width */
.aw-slide-tabs:has(.aw-tab:nth-child(1):hover)::before { transform: translateX(0%); }
.aw-slide-tabs:has(.aw-tab:nth-child(2):hover)::before { transform: translateX(100%); }
.aw-slide-tabs:has(.aw-tab:nth-child(3):hover)::before { transform: translateX(200%); }
.aw-slide-tabs:has(.aw-tab:hover) .aw-tab:hover { color: var(--color-bg); }
/* --- 71. 3D Ring Ticker (Horizontal Cylinder) --- */
.aw-ticker-3d-wrap { perspective: 1000px; overflow: hidden; height: 200px; display: flex; align-items: center; }
.aw-ticker-3d {
  transform-style: preserve-3d; animation: rotateTicker3D 10s linear infinite; position: relative; width: 100%;
}
.aw-ticker-3d span {
  position: absolute; left: 0; top: 50%; transform-origin: center;
  font-size: 4rem; font-family: var(--aw-font-display); white-space: nowrap;
}
.aw-ticker-3d span:nth-child(1) { transform: translateY(-50%) rotateX(0deg) translateZ(100px); }
.aw-ticker-3d span:nth-child(2) { transform: translateY(-50%) rotateX(120deg) translateZ(100px); }
.aw-ticker-3d span:nth-child(3) { transform: translateY(-50%) rotateX(240deg) translateZ(100px); }
@keyframes rotateTicker3D { to { transform: rotateX(-360deg); } }
/* --- 72. Left/Right Preloader Slice --- */
.aw-preloader-slice {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: flex;
}
.aw-preloader-slice::before, .aw-preloader-slice::after {
  content: ""; width: 50%; height: 100%; background: var(--color-bg);
  animation: sliceOpen 1.5s var(--ease-expo) 1s forwards;
}
.aw-preloader-slice::after { transform-origin: right; }
@keyframes sliceOpen { to { transform: scaleX(0); } }
/* --- 73. Native Mouse Follow Tooltip --- */
.aw-tooltip-follow-wrap { position: relative; cursor: crosshair; }
.aw-tooltip-follow {
  position: absolute; top: 0; left: 0; pointer-events: none;
  background: var(--color-accent); color: var(--color-bg); padding: 4px 8px; border-radius: 4px;
  font-family: var(--aw-font-mono); font-size: 10px; opacity: 0; transition: opacity 0.2s;
  /* Requires JS --mouse-x/y mapping */
  transform: translate(calc(var(--mouse-x, 0) * 1px + 15px), calc(var(--mouse-y, 0) * 1px + 15px));
}
.aw-tooltip-follow-wrap:hover .aw-tooltip-follow { opacity: 1; }
/* --- 74. CSS Difference/Invert Cursor Mask --- */
.aw-cursor-invert {
  mix-blend-mode: difference; background: white; color: black;
  /* Using mix-blend-mode difference, anything white behind it turns black */
}
/* --- 75. Circular Path Text Anim --- */
.aw-text-circular-path svg {
  animation: spinCircleText 10s linear infinite; width: 150px; height: 150px;
}
.aw-text-circular-path text { font-family: var(--aw-font-mono); font-size: 12px; fill: var(--color-fg); text-transform: uppercase; }
@keyframes spinCircleText { to { transform: rotate(360deg); } }
/* --- 116. Radar Sweep Cursor --- */
.aw-cursor-radar { position: fixed; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,240,255,0.5); pointer-events: none; z-index: 9999; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.aw-cursor-radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 70%, rgba(0,240,255,0.8)); animation: spinCharge 2s linear infinite; }
/* --- 117. Hover Grid Trail (Wrap multiple divs inside) --- */
.aw-grid-trail-container { display: grid; grid-template-columns: repeat(10, 1fr); width: 100%; height: 100%; }
.aw-grid-trail-box { border: 1px solid rgba(255,255,255,0.05); transition: background 1s ease-out; }
.aw-grid-trail-box:hover { background: var(--color-accent); transition: background 0s; }
/* --- 118. Wavy Text Ticker --- */
.aw-ticker-wave { display: flex; gap: 4px; }
.aw-ticker-wave span { animation: waveAnim 1s ease-in-out infinite alternate; }
.aw-ticker-wave span:nth-child(2n) { animation-delay: 0.2s; }
.aw-ticker-wave span:nth-child(3n) { animation-delay: 0.4s; }
@keyframes waveAnim { 100% { transform: translateY(-10px); } }
/* --- 119. Multi-Shutter Preloader --- */
.aw-preloader-shutter { position: fixed; inset: 0; display: flex; z-index: 9999; }
.aw-preloader-shutter div { flex: 1; background: var(--color-fg); transform-origin: top; animation: shutterClose 1s var(--ease-expo) forwards; }
.aw-preloader-shutter div:nth-child(1) { animation-delay: 1s; }
.aw-preloader-shutter div:nth-child(2) { animation-delay: 1.1s; }
.aw-preloader-shutter div:nth-child(3) { animation-delay: 1.2s; }
.aw-preloader-shutter div:nth-child(4) { animation-delay: 1.3s; }
@keyframes shutterClose { to { transform: scaleY(0); } }
/* --- 120. Pure CSS 3D Cube --- */
.aw-cube-wrap { perspective: 800px; width: 100px; height: 100px; }
.aw-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spinCube 6s infinite linear; }
.aw-cube-face { position: absolute; width: 100px; height: 100px; border: 2px solid var(--color-accent); background: rgba(0, 240, 255, 0.1); display: flex; align-items: center; justify-content: center; font-family: var(--aw-font-mono); }
.aw-cube-face-front  { transform: rotateY(  0deg) translateZ(50px); }
.aw-cube-face-right  { transform: rotateY( 90deg) translateZ(50px); }
.aw-cube-face-back   { transform: rotateY(180deg) translateZ(50px); }
.aw-cube-face-left   { transform: rotateY(-90deg) translateZ(50px); }
.aw-cube-face-top    { transform: rotateX( 90deg) translateZ(50px); }
.aw-cube-face-bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes spinCube { 100% { transform: rotateX(360deg) rotateY(360deg); } }