/* ==========================================================================
   CSS Variables & Theming
   ========================================================================== */

:root {
  /* Colors */
  --bg-color: #fff;
  --text-color: #333;
  --heading-color: #2c3e50;
  --secondary-color: #7f8c8d;
  --border-color: #e0e0e0;
  
  /* Project Colors */
  --chrome-color: #1a73e8;
  --search-color: #ea4335;
  --multiverse-color: #4D61F4;
  --tessl-color: #54C9B5;
  
  /* Google Brand Colors */
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;

  /* Layout */
  --container-max-width: 1024px;
  --container-padding: 1rem;
  --section-spacing: 4em;
  --element-spacing: 1em;

  /* Typography */
  --body-font: 'Instrument Sans', sans-serif;
  --display-font: 'Instrument Sans', sans-serif;
  --heading-font: 'Redaktion', sans-serif;
  --base-font-size: 1rem;
  --h1-font-size: 2.6em;
  --h2-font-size: 2em;

  /* Animation */
  --transition-speed: 0.3s;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --heading-color: #fff;
  --secondary-color: #a0a0a0;
  --border-color: #4a4a4a;
  
  /* Project Colors - slightly lighter for dark mode */
  --chrome-color: #4285f4;
  --search-color: #ff5a5a;
  --multiverse-color: #6B7FFF;
  --tessl-color: #65E8D1;
}

body {
  font-family: var(--body-font);
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
  transition: background-color var(--transition-speed),
    color var(--transition-speed);
}

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.header {
  margin-bottom: var(--section-spacing);
  padding: 2em var(--container-padding);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8em;
}

.name {
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin: 0;
}

.writing-link {
  font-size: 1.125em;
  text-decoration: none;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.writing-link:hover {
  text-decoration: underline;
}

h1,
h2 {
  font-family: var(--heading-font);
  font-weight: 300;
  color: var(--heading-color);
}

h1 {
  font-size: var(--h1-font-size);
  line-height: 1.2;
  margin-bottom: 0.5em;
  font-family: var(--heading-font);
}

/* Remove font animation styles */
h1[style*="font-family"] {
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--heading-color);
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0;
}

.header p {
  font-size: 1.125em;
  margin-bottom: var(--element-spacing);
}

.content-wrapper {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.client-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  margin: var(--section-spacing) 0;
  gap: 1em 2em;
  padding-bottom: var(--section-spacing);
  border-bottom: 1px solid var(--border-color);
}

.client-logos a {
  display: flex;
  justify-content: center;
  align-items: center;
}

.client-logos img {
  height: 2.25em;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all var(--transition-speed) ease;
  object-fit: contain;
}

.client-logos a:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

.multiverse-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  height: 1.4em;
}

.dark-mode .multiverse-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.freeletics-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  height: 1.7em;
}

.dark-mode .freeletics-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.dark-mode .freeletics-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

.dark-mode .tessl-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.25;
}

.dark-mode .tessl-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

.wb-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  height: 2em;
}

.dark-mode .wb-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.dark-mode .wb-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

/* Microsoft and Copilot logo styles */
.microsoft-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  height: 1.8em;
}

.dark-mode .microsoft-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.dark-mode .microsoft-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

.copilot-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  height: 4em;
  max-width: 100%;
  object-fit: contain;
}

.dark-mode .copilot-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.dark-mode .copilot-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

.mode-toggle {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.875em;
  cursor: pointer;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.mode-toggle:hover {
  background: var(--secondary-color);
  color: var(--bg-color);
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em 0;
  margin-top: var(--section-spacing);
  border-top: 1px solid var(--border-color);
  font-size: 0.875em;
  color: var(--secondary-color);
}

.social-links {
  display: flex;
  gap: var(--element-spacing);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--secondary-color);
  transition: color var(--transition-speed) ease;
}

.social-links a:hover,
.social-links a:focus {
  color: var(--heading-color);
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  padding: 0.3em 0.9em;
  border-radius: 2em;
  font-size: 0.9em;
  text-decoration: none;
  transition: filter 0.3s ease;
}

.ai-badge:hover,
.ai-badge:focus {
  filter: brightness(1.1);
}

.ai-badge .sparkle {
  margin-right: 0.3em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--bg-color);
  color: var(--text-color);
  z-index: 9999;
  text-decoration: none;
}

/* Ensure focusable elements have visible focus */
a:focus,
button:focus,
select:focus {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}

/* Ensure keyboard focus is visible even with custom styles */
.theme-select:focus {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}

.projects {
  margin: 6em 0;
  padding: 0 var(--container-padding);
}

.project {
  display: flex;
  flex-direction: column;
  margin-bottom: 8em;
}

.project:last-child {
  margin-bottom: 0;
}

.project-content {
  display: grid;
  grid-template-columns: minmax(300px, 3fr) 2fr;
  gap: 3em;
  margin-bottom: 4em;
  max-width: 60rem;
}

.project-content-left {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding-top: 0.4em;
}

.project-logo {
  height: 2em;
  width: auto;
  margin-bottom: 0.5em;
  object-fit: contain;
  align-self: flex-start;
}

/* Specific styles for Tessl logo */
.project-logo[src*="tessl-logo-lg"] {
  filter: grayscale(100%) invert(0);
  opacity: 0.5;
  transition: all var(--transition-speed) ease;
}

.project-logo[src*="tessl-logo-lg"]:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.dark-mode .project-logo[src*="tessl-logo-lg"] {
  filter: grayscale(100%) invert(1);
  opacity: 0.3;
}

.dark-mode .project-logo[src*="tessl-logo-lg"]:hover {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}

.project-content img[src*="multiverse-logo-lg"] {
  height: 1.6em;
}

.project-description {
  color: var(--text-color);
  font-size: 1em;
  line-height: 1.6;
  margin: 4.5em 0 0;
}

.project-description p {
  margin: 0 0 1em;
}

.project-description p:last-child {
  margin-bottom: 0;
}

.project-image {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.project-image img {
  width: 100%;
  height: auto;
  display: block;
}

.video-overlay {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Portrait videos (Chrome and Search) */
.video-overlay.portrait-video {
  width: 294px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Widescreen video (Tessl) */
.video-overlay.widescreen-video {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  transform: none;
}

.video-overlay video,
.video-overlay img {
  width: 100%;
  height: auto;
  display: block;
}

.video-overlay canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

.project-image .desktop-splash {
  display: block;
}

.project-image .mobile-splash {
  display: none;
}

.theme-select {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 1em;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color var(--transition-speed),
    color var(--transition-speed);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  min-width: 140px;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
}

.theme-select:hover {
  background-color: var(--secondary-color);
  color: var(--bg-color);
}

.dark-mode .theme-select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 854px) {
  .video-overlay.portrait-video {
    width: 34.5%;
  }
}

@media (max-width: 768px) {
  .header-top {
    align-items: flex-start;
    gap: var(--element-spacing);
  }

  .project {
    margin-bottom: var(--section-spacing);
  }

  .project-content {
    grid-template-columns: 1fr;
    gap: 1.5em;
    margin-bottom: 3em;
  }

  .project-description {
    margin: 1em 0 0;
  }

  .project-content-left {
    padding-top: 0;
  }

  .announcement-chips {
    margin-top: 0.25em;
  }
  
  .announcement-chip {
    font-size: 0.8125em;
  }

  .client-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5em 1.5em;
  }
}

@media (max-width: 420px) {
  .writing-text {
    display: none;
  }
}

@media (max-width: 520px) {
  .project-image .desktop-splash[src*="chrome-splash"],
  .project-image .desktop-splash[src*="search-splash"] {
    display: none;
  }

  .project-image .mobile-splash[src*="chrome-splash"],
  .project-image .mobile-splash[src*="search-splash"] {
    display: block;
  }

  .video-overlay.portrait-video {
    width: 72%;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 768px) {
  :root {
    --h1-font-size: 3.5em;
  }

  .header p {
    font-size: 1.25em;
  }
}

@media (min-width: 1024px) {
  :root {
    --h1-font-size: 4.5em;
  }
}

/* Line break control for h1 */
.desktop-break {
    display: none;
}

@media (min-width: 768px) {
    .desktop-break {
        display: inline;
    }
}

/* Call to Action Section */
.cta {
    margin: var(--section-spacing) 0;
    padding: var(--section-spacing) var(--container-padding) 0;
}

.cta h1 {
    margin-bottom: 1.5em;
    font-size: var(--h1-font-size);
    cursor: default;
}

.work-models {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-bottom: 4em;
    max-width: 60rem;
}

.work-model {
    padding: 1.5em;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all var(--transition-speed) ease;
}

.work-model:hover {
    border-color: var(--heading-color);
    transform: translateY(-2px);
}

.work-model h2 {
    font-size: 1.25em;
    margin-bottom: 0.75em;
    color: var(--heading-color);
}

.work-model p {
    font-size: 1em;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0;
}

@media (max-width: 768px) {
    .work-models {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}

.cta-content {
    max-width: 60rem;
}

.cta-content p {
    font-size: 1.125em;
    line-height: 1.6;
    margin-bottom: 1.5em;
    color: var(--text-color);
}

.cta-content p:last-child {
    margin-bottom: 0;
}

.cta-content a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.cta-content a:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    .cta-content p {
        font-size: 1.25em;
    }
}

/* ==========================================================================
   Font Definitions - Keep at bottom for better readability of main styles
   ========================================================================== */

/* Instrument Sans Regular (400) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentsans/v1/pxiHypAnZvqmxXFhRXGPJ597RT5u2DM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Instrument Sans Semi-Bold (600) */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/instrumentsans/v1/pxiHypAnZvqmxXFhRXGPJ597RT5u2DM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Redaktion Regular (400) */
@font-face {
  font-family: 'Redaktion';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction-Regular.woff2') format('woff2');
}

/* Redaktion Font Variations */
@font-face {
  font-family: 'Redaktion-10';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_10-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Redaktion-20';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_20-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Redaktion-35';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_35-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Redaktion-50';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_50-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Redaktion-70';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_70-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Redaktion-100';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Redaction_100-Regular.woff2') format('woff2');
}

/* Remove font variation classes and animation keyframes */
/* Font variation classes */
h1.redaktion-10 { font-family: var(--heading-font); }
h1.redaktion-20 { font-family: var(--heading-font); }
h1.redaktion-35 { font-family: var(--heading-font); }
h1.redaktion-50 { font-family: var(--heading-font); }
h1.redaktion-70 { font-family: var(--heading-font); }
h1.redaktion-100 { font-family: var(--heading-font); }

/* Remove font animation keyframes */
@keyframes fontDegradation {
    0% { font-family: var(--heading-font); }
    100% { font-family: var(--heading-font); }
}

h1:hover {
    animation: none;
}

/* Remove hover transition */
h1:not(:hover) {
    animation: none;
    transition: none;
}

.announcement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
}

.announcement-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.8em;
  background-color: var(--bg-color);
  border: 1.5px solid var(--border-color);
  border-radius: 100px;
  font-size: 0.8125em;
  color: var(--text-color);
  text-decoration: none;
  transition: all var(--transition-speed) ease;
}

.announcement-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.announcement-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0.85;
}

.announcement-chip .emoji {
  font-size: 1em;
}

@media (max-width: 480px) {
  .client-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
  }
}

.tessl-logo img {
  filter: grayscale(100%) invert(0);
  opacity: 0.4;
  height: 1.8em;
  transition: all var(--transition-speed) ease;
}

.dark-mode .tessl-logo img {
  filter: grayscale(100%) invert(1);
  opacity: 0.25;
}

.dark-mode .tessl-logo:hover img {
  filter: grayscale(0%) invert(1);
  opacity: 1;
}