/* HelioShift SOREYA — style strony | File-Version: v10 (2026-11-07)
   Zmiana v10: kontrast małych tekstów (WCAG AA), stopka z Impressum/Datenschutz, opis przykładu, błąd formularza, safe-area. */
/* Prototyp v2 strony: spokój → „Ein Tag mit AURA” → dwa pytania → kontakt.
   Warstwy kuli 1:1 z HelioShift Live (hmi/src/aura/aura.css V0.0.6); światło AURA zmienia się z porą dnia (motywy aplikacji).
   Układ: jedna scena na cały ekran; przy kontakcie kula maleje do nagłówka jak w AURA Details. */
:root {
  --aura-1: #55B8FF; --aura-2: #746BFF; --aura-3: #9C6EFF; --aura-4: #7FE3FF; --aura-deep: #0a0b2e;
  --aura-ink: rgba(236, 242, 255, .92); --aura-dim: rgba(214, 224, 245, .66);
  --aura-tone: 0deg; --aura-sat: 1.12; --aura-bright: 1; --aura-warm: 0;
  --mock: #ffd27a; --crit: #ff9a8a;
  --line: rgba(214, 224, 245, .16); --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --aura-size: clamp(220px, min(92vw, 56dvh), 700px);
  color-scheme: dark;
}
:root[data-aura="aurora"]  { --aura-1: #4FE3E0; --aura-2: #39B7FF; --aura-3: #5CE58F; --aura-4: #B6FFE0; --aura-deep: #03201f; --aura-tone: -62deg; --aura-sat: 1.08; --aura-bright: 1.08; }
:root[data-aura="solar"]   { --aura-1: #FFC861; --aura-2: #FF8A3D; --aura-3: #FF6A5C; --aura-4: #FFE6A8; --aura-deep: #170a03; --aura-tone: 150deg; --aura-sat: 1.6; --aura-bright: 1.25; --aura-warm: .45; }
:root[data-aura="rose"]    { --aura-1: #FF7EB6; --aura-2: #C46BFF; --aura-3: #9C6EFF; --aura-4: #FFC2DE; --aura-deep: #240a26; --aura-tone: 45deg; --aura-sat: 1.1; --aura-bright: 1.08; }

html, body { height: 100%; margin: 0; }
html { background: #000; }
body { background: #000; color: var(--aura-ink); font-family: var(--sans); overflow: hidden; -webkit-tap-highlight-color: transparent; }
.scene {
  position: relative; box-sizing: border-box; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 46%, color-mix(in srgb, var(--aura-deep) 60%, #000) 0%, #000 64%) #000;
  padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button { font: inherit; }
/* Tło przy kontakcie: białe kropki, które delikatnie pojawiają się i gasną — kula jest wtedy mała, a tło nie może być płaskie. */
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 2.4s ease; }
.scene[data-mode="form"] .stars { opacity: 1; }

/* Nagłówek */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 2; }
.brand { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--aura-dim); }
.brand b { font-weight: 400; color: color-mix(in srgb, var(--aura-1) 70%, #fff); transition: color 2s ease; }
/* Język: globus + skrót bieżącego języka; menu z nazwami w ich własnym języku */
.lang { position: relative; }
.lang-btn {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--aura-dim);
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 4px 6px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .16em; transition: color .5s ease;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: #fff; }
.lang-btn svg { width: 18px; height: 18px; flex: none; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; min-width: 150px; z-index: 5;
  background: rgba(4, 5, 14, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px;
}
.lang-menu button {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  font-size: 14px; font-weight: 300; color: var(--aura-ink); transition: background .3s ease, color .3s ease;
}
.lang-menu button:hover { background: var(--surface-2); color: #fff; }
.lang-menu button[aria-checked="true"] { color: #fff; }
.lang-menu button[aria-checked="true"]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--aura-1) 75%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--aura-1) 70%, transparent);
}
:focus-visible { outline: 1px solid color-mix(in srgb, var(--aura-1) 70%, #fff); outline-offset: 3px; }

/* Scena */
.stage {
  display: grid; justify-items: center; align-content: center; gap: clamp(16px, 3dvh, 30px);
  min-height: 0; position: relative; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-block: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(214, 224, 245, .18) transparent;
}
.hit {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; flex: none;
  width: var(--aura-size); height: var(--aura-size); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  transition: width 1.6s cubic-bezier(.45, 0, .2, 1), height 1.6s cubic-bezier(.45, 0, .2, 1);
}
.hit:focus-visible { outline-offset: 14px; }
.hit { position: relative; touch-action: pan-y; }
/* Nawigacja: strzałki na wysokości godzin + lewa 1/3 kuli = wstecz, reszta = dalej, przesunięcie palcem. */
.tl-row { display: flex; align-items: center; gap: clamp(4px, 2vw, 14px); }
.tl-arrow {
  appearance: none; border: 0; background: none; cursor: pointer; flex: none;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--aura-dim); transition: color .5s ease, opacity .5s ease, background .5s ease;
}
.tl-arrow svg { width: 16px; height: 16px; }
.tl-arrow:hover:not(:disabled) { color: #fff; background: var(--surface); }
.tl-arrow:disabled { opacity: .18; cursor: default; }
.scene[data-mode="ask"] .hit, .scene[data-mode="form"] .hit { cursor: default; }
.scene[data-mode="form"] .hit { width: 84px; height: 84px; }
.scene[data-mode="form"] .stage { align-content: start; }

.orb { position: relative; width: 100%; height: 100%; }
.halo {
  position: absolute; inset: -22%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--aura-2) 34%, transparent) 0%, color-mix(in srgb, var(--aura-1) 12%, transparent) 55%, transparent 100%);
  opacity: .55; animation: breathe 36s ease-in-out infinite;
}
.body { position: absolute; inset: 0; animation: art-breathe 40s ease-in-out infinite; transition: opacity 2.4s ease; }
.orb[data-dim] .body { opacity: .62; }
.orb[data-dim] .halo { opacity: .25; animation: none; }
.art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none;
  filter: hue-rotate(var(--aura-tone)) sepia(var(--aura-warm)) saturate(var(--aura-sat)) brightness(var(--aura-bright)) contrast(1.08);
  transition: filter 2.6s ease; animation: turn 60s linear infinite;
}
.echo { mix-blend-mode: screen; opacity: .42; animation: turn-echo 84s linear infinite; }
.light {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 26% at 30% 34%, color-mix(in srgb, var(--aura-1) 22%, transparent), transparent 70%),
              radial-gradient(34% 24% at 70% 70%, color-mix(in srgb, var(--aura-3) 18%, transparent), transparent 70%);
  animation: drift 92s linear infinite;
}
.hole {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(1, 2, 10, .97) 0%, rgba(1, 2, 10, .94) 34%, rgba(1, 2, 10, .62) 46%, rgba(1, 2, 10, 0) 60%);
  opacity: 0; transform: scale(.35);
  transition: opacity 3.2s cubic-bezier(.45, 0, .2, 1), transform 3.2s cubic-bezier(.45, 0, .2, 1);
}
.orb.is-open .hole { opacity: 1; transform: none; transition-duration: 2.2s; }
.scene[data-mode="form"] .hole { opacity: 0; }
.veil {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 6, .55) 0%, rgba(0, 0, 6, .22) 50%, transparent 72%);
  opacity: 0; transition: opacity 1.6s ease;
}
.orb.is-open .veil { opacity: 1; }

/* Słowa wewnątrz AURA */
.content { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.result {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--aura-size) * .02); text-align: center;
  max-width: calc(var(--aura-size) * .64);
  opacity: 0; filter: blur(8px); transform: scale(.97);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}
.result.show { opacity: 1; filter: blur(0); transform: none; transition-duration: 1.5s; transition-delay: .4s; }
.scene[data-mode="form"] .result { display: none; }
.r-period { font-size: clamp(10px, calc(var(--aura-size) * .028), 14px); letter-spacing: .3em; text-transform: uppercase; font-weight: 300; color: var(--aura-dim); font-variant-numeric: tabular-nums; }
.r-value {
  font-size: clamp(44px, calc(var(--aura-size) * .17), 104px); font-weight: 200; letter-spacing: -.01em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 28px color-mix(in srgb, var(--aura-1) 55%, transparent);
}
.r-text {
  font-size: clamp(18px, calc(var(--aura-size) * .058), 32px); font-weight: 300; line-height: 1.3; color: #fff; text-wrap: balance;
  text-shadow: 0 0 22px color-mix(in srgb, var(--aura-1) 45%, transparent);
}
/* Mowa AURA: krótkie zdania po kolei — szybkie przejście w obrębie myśli; stała wysokość, żeby nic nie skakało. */
.r-line {
  display: flex; align-items: center; justify-content: center; min-height: 2.6em;
  opacity: 0; filter: blur(3px); transition: opacity .38s ease, filter .38s ease;
}
.r-line.in { opacity: 1; filter: none; transition-duration: .6s; }
.r-tail { opacity: 0; transition: opacity 1s ease; }
.result.last .r-tail { opacity: 1; }
.r-caption { font-size: clamp(14px, calc(var(--aura-size) * .036), 19px); font-weight: 300; line-height: 1.4; color: var(--aura-ink); text-wrap: balance; max-width: calc(var(--aura-size) * .52); }
.r-mock { font-size: clamp(10px, calc(var(--aura-size) * .024), 12px); letter-spacing: .03em; line-height: 1.35; color: var(--mock); max-width: calc(var(--aura-size) * .5); text-wrap: balance; }

/* Pod kulą: jedna warstwa naraz */
.below { display: grid; place-items: center; min-height: 72px; width: 100%; }
.below > * { grid-area: 1 / 1; transition: opacity 1.2s ease, visibility 0s linear 1.2s; opacity: 0; visibility: hidden; }
.scene[data-mode="calm"] .tagline,
.scene[data-mode="story"] .pager,
.scene[data-mode="ask"].ready .choices,
.scene[data-mode="done"] .pager-done { opacity: 1; visibility: visible; transition-delay: .3s, 0s; }
.scene[data-mode="form"] .below { display: none; }
.tagline { text-align: center; display: grid; gap: 10px; }
.tagline h1 { margin: 0; font-size: clamp(20px, 3.2dvh, 30px); font-weight: 200; color: #fff; text-wrap: balance; }
.tagline p { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--aura-dim); animation: hint 6s ease-in-out infinite; }
.pager, .pager-done { display: grid; justify-items: center; gap: 14px; }
.timeline { display: flex; gap: clamp(2px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.timeline button {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
  min-width: 32px; min-height: 44px; padding: 0 4px; border-radius: 8px;
}
.timeline button:hover { color: #fff; }
.timeline li { font-size: 11px; letter-spacing: .12em; color: rgba(214, 224, 245, .6); font-variant-numeric: tabular-nums; transition: color 1s ease, text-shadow 1s ease; }
.timeline li.past { color: rgba(214, 224, 245, .85); }
.timeline li.on { color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--aura-1) 80%, transparent); }
.pager p, .pager-done p { margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--aura-dim); text-align: center; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.choice {
  appearance: none; cursor: pointer; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--aura-ink); font-size: 15px; font-weight: 300; letter-spacing: .01em;
  transition: border-color .5s ease, background .5s ease, color .5s ease;
}
.choice:hover { border-color: color-mix(in srgb, var(--aura-1) 60%, transparent); color: #fff; }
.choice.primary { border-color: color-mix(in srgb, var(--aura-1) 55%, transparent); color: #fff; background: color-mix(in srgb, var(--aura-1) 10%, transparent); }

/* Kontakt — jedyne miejsce, gdzie AURA ustępuje zwykłemu, przewidywalnemu formularzowi */
.contact {
  display: none; box-sizing: border-box; width: 100%; max-width: 460px; margin: 0; padding: 22px clamp(16px, 4vw, 26px) 20px;
  border: 1px solid var(--line); border-radius: 20px; background: rgba(4, 5, 14, .74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  gap: 16px; opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease .6s, transform 1.2s ease .6s;
}
.scene[data-mode="form"] .contact { display: grid; }
.contact.in { opacity: 1; transform: none; }
.contact h2 { margin: 0; font-size: clamp(19px, 2.6vw, 23px); font-weight: 300; line-height: 1.3; color: #fff; text-wrap: balance; text-align: center; }
.summary { margin: -6px 0 2px; text-align: center; font-size: 12px; letter-spacing: .06em; color: var(--aura-dim); }
.field { display: grid; gap: 6px; font-size: 12px; letter-spacing: .06em; color: var(--aura-dim); }
.field input, .field textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; letter-spacing: 0; color: #fff;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; resize: vertical;
  transition: border-color .4s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: color-mix(in srgb, var(--aura-1) 70%, #fff); }
.field input:user-invalid { border-color: var(--crit); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .row { grid-template-columns: 1fr; } }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.seg legend { padding: 0 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--aura-dim); }
.seg .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 300; color: var(--aura-ink); transition: border-color .4s ease, background .4s ease, color .4s ease;
}
.seg input:checked + span { border-color: color-mix(in srgb, var(--aura-1) 65%, transparent); background: color-mix(in srgb, var(--aura-1) 12%, transparent); color: #fff; }
.seg input:focus-visible + span { outline: 1px solid color-mix(in srgb, var(--aura-1) 70%, #fff); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--aura-ink); }
.consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--aura-1); }
.consent a, .direct .mail { color: color-mix(in srgb, var(--aura-1) 70%, #fff); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.direct { margin: 0; text-align: center; font-size: 12px; color: var(--aura-dim); }
.direct .mail { user-select: all; }

/* Stopka */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; position: relative; z-index: 2; font-size: 11px; color: var(--aura-dim); }
.foot a { color: var(--aura-dim); text-decoration: none; padding: 6px 0; transition: color .4s ease; }
.foot a:hover, .foot a:focus-visible { color: #fff; }
.legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.copy { letter-spacing: .06em; }
.foot .mail { letter-spacing: .04em; }
/* Pułapka na boty, błąd wysyłki, brak JS */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: #fff;
  background: color-mix(in srgb, var(--crit) 16%, transparent); border: 1px solid color-mix(in srgb, var(--crit) 55%, transparent); }
.choice:disabled { opacity: .6; cursor: progress; }
.noscript { position: fixed; inset: auto 16px 16px; margin: 0; color: #fff; font: 14px/1.5 var(--sans); text-align: center; }
.noscript a { color: #fff; }
@media (max-width: 520px) { .foot { justify-content: center; } }

@keyframes breathe { 0%, 100% { transform: scale(.97); opacity: .45; } 50% { transform: scale(1.03); opacity: .62; } }
@keyframes art-breathe { 0%, 100% { transform: scale(.985, .995); } 50% { transform: scale(1.02, 1.01); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes turn-echo { from { transform: scaleX(-1) rotate(0deg); } to { transform: scaleX(-1) rotate(360deg); } }
@keyframes drift { to { transform: rotate(-360deg); } }
@keyframes hint { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .halo, .body, .art, .light, .tagline p { animation: none; }
  .echo { transform: scaleX(-1) rotate(140deg); }
  .result, .result.show, .r-line, .r-tail, .veil, .hole, .orb.is-open .hole, .body, .art, .hit, .contact, .below > * { transition-duration: .01s; transition-delay: 0s; }
}