/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* Landing page chrome, backdrop, and hero. The :has() scope keeps these
   deliberate dark-theme overrides off ordinary documentation pages. */

html:has(.gemma-teaser),
body:has(.gemma-teaser),
body:has(.gemma-teaser) .md-container,
body:has(.gemma-teaser) .md-main {
  height: 100%;
  max-height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color: var(--gemma-home-bg);
  scrollbar-width: none;
}

body:has(.gemma-teaser) * { scrollbar-width: none; }

body:has(.gemma-teaser) *::-webkit-scrollbar,
html:has(.gemma-teaser)::-webkit-scrollbar {
  display: none;
}

body:has(.gemma-teaser) .md-header,
body:has(.gemma-teaser) .md-tabs {
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--gemma-white) !important;
  --md-default-fg-color: color-mix(in srgb, var(--gemma-white) 82%, transparent);
  --md-default-fg-color--light: color-mix(in srgb, var(--gemma-white) 56%, transparent);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--gemma-white) 32%, transparent);
  --md-default-fg-color--lightest: color-mix(in srgb, var(--gemma-white) 12%, transparent);
  --md-default-bg-color: var(--gemma-ink);
  --md-typeset-color: var(--gemma-white);
  --md-typeset-a-color: var(--gemma-blue-light);
  --md-primary-fg-color: var(--gemma-blue-deep);
  --md-primary-bg-color: var(--gemma-white);
  --md-accent-fg-color: var(--gemma-blue-light);
}

body:has(.gemma-teaser) .md-header {
  border-bottom: 0 !important;
}

body:has(.gemma-teaser) .md-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--gemma-white) 8%, transparent) !important;
}

body:has(.gemma-teaser) [data-md-component="palette"],
body:has(.gemma-teaser) .md-footer,
body:has(.gemma-teaser) [data-md-component="footer"] {
  display: none !important;
}

body:has(.gemma-teaser) :is(
  .md-header__title,
  .md-header__topic,
  .md-header__button,
  .md-header__source,
  .md-tabs__link
) {
  color: color-mix(in srgb, var(--gemma-white) 85%, transparent) !important;
}

body:has(.gemma-teaser) :is(
  .md-header__title,
  .md-tabs__link--active,
  .md-tabs__link:hover,
  .md-header__button:hover
) {
  color: var(--gemma-white) !important;
  opacity: 1 !important;
}

body:has(.gemma-teaser) :is(.md-header__button, .md-tabs__link) :is(svg, .md-icon),
body:has(.gemma-teaser) .md-search :is(svg, .md-icon, .md-search__icon, .md-search__options) {
  color: var(--gemma-white) !important;
  fill: none !important;
  stroke: currentColor !important;
}

body:has(.gemma-teaser) .md-header .md-search :is(.md-search__button, .md-search__form) {
  color: color-mix(in srgb, var(--gemma-white) 85%, transparent) !important;
  background-color: color-mix(in srgb, var(--gemma-white) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--gemma-white) 20%, transparent) !important;
}

body:has(.gemma-teaser) .md-header .md-search :is(.md-search__button, .md-search__form):hover {
  color: var(--gemma-white) !important;
  background-color: color-mix(in srgb, var(--gemma-white) 25%, transparent) !important;
  border-color: color-mix(in srgb, var(--gemma-white) 35%, transparent) !important;
}

body:has(.gemma-teaser) .md-header .md-search__input {
  color: var(--gemma-white) !important;
  background-color: transparent !important;
}

body:has(.gemma-teaser) .md-header .md-search__input::placeholder {
  color: color-mix(in srgb, var(--gemma-white) 70%, transparent) !important;
}

.gemma-bg {
  position: absolute;
  inset: 0;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 35%,
    var(--gemma-home-bg-raised) 0%,
    var(--gemma-home-bg-mid) 55%,
    var(--gemma-home-bg-deep) 100%
  );
}

.gemma-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gemma-teaser {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(90%, 60rem);
  text-align: center;
  transform: translate(-50%, -50%);
}

.gemma-name {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  width: 100%;
  margin: 0 auto -0.15em;
  color: var(--gemma-white);
  font-size: clamp(2.4rem, 6.8vw, 6.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  user-select: none;
}

.gemma-prefix-slot,
.gemma-suffix-slot {
  display: flex;
  align-items: center;
  height: 1.15em;
  overflow: hidden;
}

.gemma-prefix-slot {
  justify-self: end;
  justify-content: flex-end;
}

.gemma-suffix-slot {
  justify-self: start;
  justify-content: flex-start;
  white-space: pre;
}

.gemma-cycling {
  display: inline-block;
  color: var(--gemma-white);
  will-change: transform, opacity;
}

.gemma-static {
  color: transparent;
  background: linear-gradient(
    135deg,
    var(--gemma-blue-light),
    var(--gemma-blue) 48%,
    var(--gemma-blue-strong)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.gemma-tagline {
  max-width: 44rem;
  margin: 0 auto 2.8rem;
  color: color-mix(in srgb, var(--gemma-white) 65%, transparent);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.gemma-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.gemma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.8rem;
  color: var(--gemma-white) !important;
  background-color: var(--gemma-accent-fill);
  border: 1px solid color-mix(in srgb, var(--gemma-white) 15%, transparent);
  border-radius: var(--gemma-radius-md);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--gemma-accent-fill) 40%, transparent);
  font-size: 1.22rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background-color 250ms, border-color 250ms, box-shadow 250ms, transform 250ms;
}

.gemma-btn:hover {
  background-color: var(--gemma-blue-hover);
  border-color: var(--gemma-white);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--gemma-accent-fill) 60%, transparent);
  transform: translateY(-2px);
}

/* Secondary hero action: white, so the blue primary stays the dominant call. */
.gemma-btn--ghost { color: var(--gemma-ink) !important; background-color: var(--gemma-white); box-shadow: 0 6px 24px color-mix(in srgb, var(--gemma-ink) 30%, transparent); }
.gemma-btn--ghost:hover { background-color: var(--gemma-white); border-color: var(--gemma-white); box-shadow: 0 8px 32px color-mix(in srgb, var(--gemma-ink) 45%, transparent); }

@media (max-width: 48rem) {
  .gemma-name { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .gemma-tagline { margin-bottom: 2.2rem; font-size: 1.25rem; }
  .gemma-btn { padding: 0.85rem 2.4rem; font-size: 1.12rem; }
}

@media (max-width: 31.25rem) {
  .gemma-name { font-size: clamp(1.35rem, 6.2vw, 1.75rem); }
  .gemma-tagline { font-size: 1.05rem; }
}

@media (max-height: 30rem) {
  html:has(.gemma-teaser),
  body:has(.gemma-teaser),
  body:has(.gemma-teaser) .md-container,
  body:has(.gemma-teaser) .md-main {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow: auto;
  }

  .gemma-bg { position: fixed; }
  .gemma-teaser { position: relative; inset: auto; margin: 4rem auto 2rem; transform: none; }
}