/* Start page — token remap + splash helpers (after Polykroma). */

:root {
  color-scheme: light;

  --c-white: var(--step-01);
  --c-white-rgb: 254, 240, 254;
  --c-black: var(--step-08);
  --c-black-rgb: 49, 22, 51;
  --c-grey: color-mix(in srgb, var(--step-07) 72%, var(--step-01));
  --c-grey-rgb: 139, 84, 154;
  --c-stone: color-mix(in srgb, var(--step-08) 85%, var(--step-01));
  --c-stone-rgb: 74, 43, 77;
  --c-yellow: var(--step-01);
  --c-yellow-rgb: 254, 240, 254;
  --c-brown: var(--pk-soft);
  --c-brown-rgb: 240, 137, 254;
  --c-stroke: var(--step-03);
  --c-stroke-rgb: 240, 158, 251;
  --c-red: var(--pk-soft);
  --c-red-rgb: 240, 137, 254;
  --c-purple: var(--pk-primary);
  --c-purple-rgb: 228, 62, 255;

  --aimy-surface: var(--step-01);
  --aimy-surface-deep: var(--step-02);
  --aimy-ink: var(--step-07);
  --aimy-ink-soft: var(--pk-soft);
  --aimy-primary: var(--pk-primary);
  --aimy-secondary: var(--step-02);
  --aimy-tertiary: var(--step-08);
  --aimy-accent: var(--pk-accent);
  --aimy-ink-on-dark: var(--step-01);
  --aimy-glass: color-mix(in srgb, var(--pk-soft) 28%, transparent);
  --aimy-glass-strong: color-mix(in srgb, var(--pk-soft) 42%, transparent);
  --aimy-field-line: color-mix(in srgb, var(--step-07) 22%, transparent);
  --aimy-field-placeholder: color-mix(in srgb, var(--step-07) 38%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-white: var(--pk-heading);
    --c-white-rgb: 255, 255, 255;
    --c-yellow: var(--pk-bg);
    --c-yellow-rgb: 0, 0, 0;
    --c-black: var(--pk-bg);
    --c-black-rgb: 0, 0, 0;
    --c-stone: var(--pk-surface);
    --c-stone-rgb: 10, 10, 10;
    --c-grey: var(--pk-text);
    --c-grey-rgb: 168, 168, 168;
    --c-brown: var(--pk-text-muted);
    --c-brown-rgb: 130, 130, 130;
    --c-stroke: var(--pk-soft);
    --c-stroke-rgb: 34, 34, 34;
    --c-red: var(--pk-text);
    --c-red-rgb: 168, 168, 168;
    --c-purple: var(--pk-soft);
    --c-purple-rgb: 34, 34, 34;
    --aimy-surface: var(--pk-surface);
    --aimy-surface-deep: var(--pk-bg);
    --aimy-ink: var(--pk-text);
    --aimy-ink-soft: var(--pk-text-muted);
    --aimy-primary: var(--pk-primary);
    --aimy-secondary: var(--pk-text);
    --aimy-tertiary: var(--pk-heading);
    --aimy-accent: var(--pk-accent);
    --aimy-ink-on-dark: var(--pk-heading);
    --aimy-glass: color-mix(in srgb, var(--step-06) 35%, transparent);
    --aimy-glass-strong: color-mix(in srgb, var(--step-06) 50%, transparent);
    --aimy-field-line: color-mix(in srgb, var(--pk-text) 28%, transparent);
    --aimy-field-placeholder: color-mix(in srgb, var(--pk-text-muted) 85%, transparent);
  }
}

html:has([data-spa-host]),
html:has([data-spa-host]) body {
  background-color: var(--c-yellow) !important;
  color: var(--c-black);
}

/* Responsive root scale — lived in home.css before cleanup; SPA views use rem. */
@media (min-width: 1024px) and (min-height: 512px) {
  html:has([data-spa-host]) {
    font-size: 20px;
    line-height: 1.2;
  }
}

@media (min-width: 1600px) and (min-height: 800px) {
  html:has([data-spa-host]) {
    font-size: 22px;
    line-height: 1.2;
  }
}

@media (min-width: 1920px) and (min-height: 960px) {
  html:has([data-spa-host]) {
    font-size: 24px;
    line-height: 1.2;
  }
}

@media (min-width: 2560px) and (min-height: 1280px) {
  html:has([data-spa-host]) {
    font-size: 28px;
    line-height: 1.2;
  }
}

@media (prefers-color-scheme: dark) {
  html:has([data-spa-host]),
  html:has([data-spa-host]) body {
    background-color: var(--pk-bg) !important;
    color: var(--pk-text);
  }

  html:has(body.spa-view-start),
  body.spa-view-start {
    background-color: var(--pk-bg) !important;
    color: var(--pk-text);
  }
}

/* Hide Nuxt page-transition splash (never dismissed without app JS) */
.page-transition,
.m-transition-underlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Start splash layout, reveal, parallax → css/home-hero.css */

.c-welcome[data-aimy-splash-only]::before,
.c-welcome[data-aimy-splash-only]::after {
  content: none !important;
  display: none !important;
}

.c-welcome[data-aimy-splash-only] .-w .stone::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.site-header[data-aimy-chrome] .nav a,
.site-header[data-aimy-chrome] .social a {
  font-family: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
}

/* =========================================================
   Header chrome type logo (legacy prism — splash uses wordmark-holo.css)
   ========================================================= */

.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__text,
.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow {
  position: absolute;
  inset: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__text {
  background-color: color-mix(in srgb, var(--step-02) 38%, var(--step-01));
  -webkit-mask-image: url("../assets/polykroma/branding/wordmark-type.svg");
  mask-image: url("../assets/polykroma/branding/wordmark-type.svg");
  transform: translateZ(6px);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--step-03) 8%, transparent));
}

.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow {
  overflow: hidden;
  background-color: var(--pk-soft);
  background-image: url("../assets/polykroma/branding/prism.jpg?v=1");
  background-size: 255% 255%;
  background-position:
    calc(50% + var(--mx, 0) * 32% + cos(calc(var(--holo-angle, 135) * 1deg)) * 5%)
    calc(50% + var(--my, 0) * 32% + sin(calc(var(--holo-angle, 135) * 1deg)) * 5%);
  background-repeat: no-repeat;
  -webkit-mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  transform: translateZ(-6px);
  transition: background-position 0.45s ease-out;
  opacity: 0.76;
}

.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/polykroma/branding/prism.jpg?v=1");
  background-size: 190% 190%;
  background-position:
    calc(50% - var(--mx, 0) * 22% + cos(calc(var(--holo-angle, 135) * 1deg + 90deg)) * 4%)
    calc(50% - var(--my, 0) * 22% + sin(calc(var(--holo-angle, 135) * 1deg + 90deg)) * 4%);
  background-repeat: no-repeat;
  -webkit-mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: background-position 0.45s ease-out;
}

.site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/polykroma/branding/noise.svg?v=glitter-2");
  background-size: 72px 72px;
  background-repeat: repeat;
  background-position:
    calc(50% + var(--mx, 0) * 10px)
    calc(50% + var(--my, 0) * 8px);
  -webkit-mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  mask-image: url("../assets/polykroma/branding/wordmark-shadow.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: calc(0.18 + var(--logo-sparkle, 0) * 0.12);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position 0.45s ease-out, opacity 0.35s ease-out;
}

@media (prefers-color-scheme: dark) {
  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__text {
    background-color: color-mix(in srgb, var(--step-03) 28%, var(--pk-surface));
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--step-04) 6%, transparent));
  }

  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow {
    background-color: color-mix(in srgb, var(--step-06) 18%, var(--pk-surface));
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-welcome[data-aimy-splash-only] .aimy-wordmark-holo .aimy-type-logo__sticker {
    transform: none !important;
    scale: 1 !important;
  }

  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow,
  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow::before,
  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow::after {
    transition: none;
  }

  .site-header[data-aimy-chrome] .aimy-chrome-type-logo .aimy-type-logo__shadow::after {
    opacity: 0.18;
  }
}