body[data-theme="hub"], .scene.theme-hub, .site-header[data-active-theme="hub"] {
  --page: #111217;
  --text: #f7f2e9;
  --muted: #c4c3cc;
  --accent: #ffd08a;
  --line: #46464f;
  --panel: #1a1b1f;
  --header: #111217f2;
  --button-text: #111217;
  --display: "Inter", "Segoe UI", Arial, sans-serif;
  --heading-weight: 600;
  --heading-spacing: -.065em;
  --glow: #4d83cd;
}

.portfolio-project.theme-hub {
  --accent: #ffd08a;
  --display: "Inter", "Segoe UI", Arial, sans-serif;
}

body[data-theme="tech"], .scene.theme-tech, .site-header[data-active-theme="tech"] {
  --page: #0b1824;
  --text: #eef7ff;
  --muted: #b1cadc;
  --accent: #9bd4ff;
  --line: #37566e;
  --panel: #14212d;
  --header: #0b1824f2;
  --button-text: #0b1824;
  --display: "Rajdhani", "Arial Narrow", Impact, sans-serif;
  --heading-weight: 600;
  --heading-spacing: -.035em;
  --glow: #206ccf;
}

.portfolio-project.theme-tech {
  --accent: #9bd4ff;
  --display: "Rajdhani", "Arial Narrow", Impact, sans-serif;
}

body[data-theme="studio"], .scene.theme-studio, .site-header[data-active-theme="studio"] {
  --page: #231b33;
  --text: #f3ecff;
  --muted: #d3c4e8;
  --accent: #d3b1ff;
  --line: #695381;
  --panel: #2b233b;
  --header: #231b33f2;
  --button-text: #231b33;
  --display: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
  --heading-weight: 500;
  --heading-spacing: -.065em;
  --glow: #6773ff;
}

.portfolio-project.theme-studio {
  --accent: #d3b1ff;
  --display: "Space Grotesk", "Trebuchet MS", Arial, sans-serif;
}

body[data-theme="doces"], .scene.theme-doces, .site-header[data-active-theme="doces"] {
  --page: #f3ebdd;
  --text: #4b2f23;
  --muted: #735241;
  --accent: #73402a;
  --line: #b89a81;
  --panel: #faf5ed;
  --header: #f3ebddf2;
  --button-text: #f3ebdd;
  --display: "Cormorant Garamond", Georgia, serif;
  --heading-weight: 600;
  --heading-spacing: -.045em;
  --glow: #d7a069;
}

.portfolio-project.theme-doces {
  --accent: #73402a;
  --display: "Cormorant Garamond", Georgia, serif;
}

body[data-theme="dev"], .scene.theme-dev, .site-header[data-active-theme="dev"] {
  --page: #14112b;
  --text: #eeedff;
  --muted: #c9c2e3;
  --accent: #94f3de;
  --line: #514369;
  --panel: #1d1a33;
  --header: #14112bf2;
  --button-text: #14112b;
  --display: "JetBrains Mono", "Courier New", monospace;
  --heading-weight: 700;
  --heading-spacing: -.065em;
  --glow: #8161ff;
}

.portfolio-project.theme-dev {
  --accent: #94f3de;
  --display: "JetBrains Mono", "Courier New", monospace;
}

body[data-theme="gutz"], .scene.theme-gutz, .site-header[data-active-theme="gutz"] {
  --page: #25101f;
  --text: #fff0f7;
  --muted: #e6bbd2;
  --accent: #ffa4d4;
  --line: #794665;
  --panel: #2e1928;
  --header: #25101ff2;
  --button-text: #25101f;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --heading-weight: 400;
  --heading-spacing: -.035em;
  --glow: #62c9ed;
}

.portfolio-project.theme-gutz {
  --accent: #ffa4d4;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
}

:root {
  --page: #111217;
  --text: #f7f2e9;
  --muted: #c4c3cc;
  --accent: #ffd08a;
  --line: #46464f;
  --panel: #1a1b20;
  --header: #111217f2;
  --button-text: #111217;
  --display: "Inter", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Segoe UI", Arial, sans-serif;
  --heading-weight: 600;
  --heading-spacing: -.065em;
  --glow: #4d83cd;
}

h1, h2 {
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-spacing);
}

h1 em, h2 em {
  font-style: normal;
}

body[data-kind="hub"] .hero-copy h1 {
  font-size: clamp(50px, 7.7vw, 108px);
  line-height: .99;
}

body:not([data-kind="hub"]) .hero-copy h1 {
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: .99;
}

.signature {
  font-weight: 600;
}

.signature span {
  color: var(--accent);
}

.site-header {
  color: var(--text);
  transition: background-color .6s ease, color .6s ease, border-color .6s ease;
}

.brand-signature {
  font-family: var(--display);
  font-weight: var(--heading-weight);
}

body[data-theme="doces"] {
  color-scheme: light;
}

body[data-kind="hub"] .ambient {
  display: none;
}

body[data-kind="hub"] .page-hero {
  position: relative;
  isolation: isolate;
}

body[data-kind="hub"] .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 28%, #ffd08a, transparent 58%), radial-gradient(ellipse at 22% 60%, #4d83cd, transparent 62%);
  background-size: 150% 140%, 150% 140%;
  background-repeat: no-repeat;
  background-position: 0% 20%, 100% 70%;
  opacity: .26;
  mask-image: linear-gradient(180deg, transparent, #000 100px, #000 65%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 100px, #000 65%, transparent);
  animation: restored-aurora 16s ease-in-out infinite alternate;
}

.scene {
  --bridge-height: 240px;
  --aura-opacity: .3;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 74px calc(var(--bridge-height) + 32px);
  min-height: 780px;
  background: linear-gradient(180deg, var(--page) 0%, var(--page) calc(100% - var(--bridge-height)), var(--scene-next, var(--page)) 100%);
  color: var(--text);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 78% 28%, var(--accent), transparent 58%), radial-gradient(ellipse at 22% 60%, var(--glow), transparent 62%);
  background-size: 150% 140%, 150% 140%;
  background-repeat: no-repeat;
  background-position: 0% 20%, 100% 70%;
  opacity: var(--aura-opacity);
  mask-image: linear-gradient(180deg, transparent, #000 120px, #000 calc(100% - var(--bridge-height) - 90px), transparent calc(100% - var(--bridge-height) - 5px));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 120px, #000 calc(100% - var(--bridge-height) - 90px), transparent calc(100% - var(--bridge-height) - 5px));
  animation: restored-aurora 16s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.scene.is-in-view::before {
  animation-play-state: running;
}

.scene .universe-title {
  font-family: var(--display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-spacing);
  font-size: clamp(50px, 7.7vw, 108px);
  line-height: .99;
}

.scene.theme-doces {
  --aura-opacity: .14;
}

.scene.theme-doces .universe-title {
  font-style: italic;
  font-size: clamp(60px, 9vw, 128px);
}

.scene.theme-dev .universe-title {
  font-size: clamp(43px, 6.5vw, 86px);
}

.scene.theme-gutz .universe-title {
  text-transform: uppercase;
}

#tech {
  --scene-next: #231b33;
}

#studio {
  --scene-next: #f3ebdd;
}

#doces {
  --scene-next: #14112b;
}

#dev {
  --scene-next: #25101f;
}

#gutz {
  --scene-next: #111217;
}

body[data-kind="hub"] #negocios {
  --bridge-height: 240px;
  padding-bottom: calc(var(--bridge-height) + 32px);
  background: linear-gradient(180deg, #111217 0%, #111217 calc(100% - var(--bridge-height)), #0b1824 100%);
}

.ambient-layer {
  background: radial-gradient(ellipse at 90% 10%, var(--accent), transparent 55%), radial-gradient(ellipse at 10% 80%, var(--glow), transparent 60%);
  background-size: 150% 140%, 150% 140%;
  background-repeat: no-repeat;
  animation: restored-aurora 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.ambient-layer.is-active {
  opacity: .11;
  animation-play-state: running;
}

body[data-theme="doces"] [data-ambient="doces"] {
  background-image: radial-gradient(ellipse at 90% 10%, #73402a, transparent 55%), radial-gradient(ellipse at 10% 80%, #d7a069, transparent 60%);
}

body[data-theme="doces"] h1 {
  font-style: italic;
}

body[data-theme="doces"] .feature h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 29px;
}

.gutz-statement h2 {
  font-family: "Anton", Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
}

@keyframes restored-aurora {
  from {
    background-position: 0% 20%, 100% 70%;
  }
  to {
    background-position: 100% 50%, 0% 20%;
  }
}

@media (max-width: 850px) {
  .scene .universe-title {
    font-size: clamp(50px, 7.7vw, 84px);
  }
  .scene.theme-doces .universe-title {
    font-size: clamp(62px, 9vw, 100px);
  }
}

@media (max-width: 640px) {
  .scene, body[data-kind="hub"] #negocios {
    --bridge-height: 140px;
  }
  .scene {
    min-height: 0;
    padding-block: 45px calc(var(--bridge-height) + 24px);
  }
  .scene .universe-title {
    font-size: clamp(50px, 10.5vw, 80px);
  }
  .scene.theme-doces .universe-title {
    font-size: clamp(60px, 14vw, 95px);
  }
  .scene.theme-dev .universe-title {
    font-size: clamp(39px, 10vw, 65px);
  }
  body[data-kind="hub"] .hero-copy h1 {
    font-size: clamp(46px, 10.5vw, 80px);
  }
  body:not([data-kind="hub"]) .hero-copy h1 {
    font-size: clamp(42px, 10vw, 65px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene::before, .ambient-layer, body[data-kind="hub"] .page-hero::before {
    animation: none;
    transition: none;
  }
  .site-header {
    transition: none;
  }
}