@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

  :root {
    --paper: #0b0033;      /* dark amethyst — base background (inverted) */
    --ink: #e5d4ed;        /* lavender veil — primary text (inverted) */
    --accent: #6d72c3;     /* slate blue — links, icons, primary accent */
    --accent2: #370031;    /* midnight violet — secondary dark surfaces, gradients */
    --pop: #eaf27c;        /* lime cream — high-contrast highlight, sparingly */
    --muted: #8e7fa3;      /* derived: ink blended into paper — secondary text */
    --hairline: #2c204f;   /* derived: subtle border on paper */
    --tint: #423562;       /* derived: soft card/tile (elevated) background */
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
  }
  .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

  #app {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  /* Sticky stack — each section pins in place while the next scrolls up over
     it; the JS below scales/dims the covered section slightly for depth. */
  .stack-section {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .stack-inner {
    height: 100%;
    width: 100%;
    transform-origin: center top;
    transition: transform .05s linear, opacity .05s linear;
  }

  ::selection { background: var(--accent); color: var(--paper); }

  /* cursor blink (header monogram) */
  @keyframes blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
  .animate-blink { animation: blink 1.1s steps(1) infinite; }

  /* scroll reveal — re-arms every time the element re-enters the viewport */
  [data-reveal] {
    opacity: 0;
    transform: translate(var(--rx, 0px), var(--ry, 18px));
    transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--rd, 0s),
                transform .7s cubic-bezier(.2,.7,.2,1) var(--rd, 0s);
    will-change: opacity, transform;
  }
  [data-reveal].is-visible { opacity: 1; transform: translate(0, 0); }

  /* About — scattered photo collage ("mini galeria") */
  .about-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 4.15;
  }
  .about-gallery .gallery-tile {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid var(--paper);
    outline: 1px solid var(--hairline);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25);
    cursor: pointer;
    opacity: 0;
    transform: scale(.55) rotate(0deg);
    transition: transform .8s cubic-bezier(.16,.9,.2,1) var(--rd, 0s),
                opacity .8s cubic-bezier(.16,.9,.2,1) var(--rd, 0s),
                box-shadow .3s ease;
    will-change: transform, opacity;
  }
  .about-gallery .gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .about-gallery .gallery-tile.is-visible {
    opacity: 1;
    transform: scale(1) rotate(var(--rot, 0deg));
  }
  .about-gallery .gallery-tile:hover {
    transform: scale(1.06) rotate(0deg) !important;
    z-index: 20 !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  }
  .about-gallery .gallery-tile.featured {
    border-color: var(--pop);
    box-shadow: 0 20px 44px -8px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3), 0 0 0 2px var(--pop);
  }
  @media (prefers-reduced-motion: reduce) {
    .about-gallery .gallery-tile { transition: none !important; opacity: 1 !important; transform: rotate(var(--rot,0deg)) !important; }
  }

  /* marquees */
  .marquee-track { animation: marquee 22s linear infinite; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track-rev { animation: marqueeRev 16s linear infinite; }
  @keyframes marqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

  /* client logos — flatten to a single lavender-veil silhouette */
  #logosMarquee svg * { fill: #e5d4ed !important; stroke: none !important; }
  .marquee-wrap {
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee-wrap:hover .marquee-track,
  .marquee-wrap:hover .marquee-track-rev { animation-play-state: paused; }

  /* hero word rotator */
  @keyframes wordIn { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: translateY(0); } }
  .animate-wordIn { animation: wordIn .5s cubic-bezier(.2,.7,.2,1) both; }

  /* status pill pulse */
  @keyframes pillPulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
  .animate-pillPulse { animation: pillPulse 1.8s cubic-bezier(.2,.7,.2,1) infinite; }

  /* project quick-view modal */
  @keyframes modalBg { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .animate-modalBg { animation: modalBg .25s ease both; }
  .animate-modalIn { animation: modalIn .35s cubic-bezier(.2,.7,.2,1) both; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
    .marquee-track, .marquee-track-rev, .animate-blink, .animate-wordIn,
    .animate-pillPulse, .animate-modalBg, .animate-modalIn { animation: none !important; }
    .stack-inner { transition: none !important; transform: none !important; opacity: 1 !important; }
  }

.a{fill:#000e40}