/* Masculine utilitarian theme layer (MVP)
 * Loads last to override existing styles without template rewrites.
 * Keep changes minimal and reversible.
 */

:root {
  --bg: #0f1112;
  --surface: #171a1d;
  --surface-2: #1d2126;
  --text: #e3ded2;
  --muted: #9a9486;
  --border: #2b3036;
  --accent: #b49a6a; /* muted brass */
  --danger: #a8473f;
  --success: #3f7a62;

  /* Belt/level accents - keep subtle, use for small indicators only */
  --level-white: #b9b1a4;
  --level-yellow: #b89c5d;
  --level-orange: #a66a3f;
  --level-green: #4f7b63;
  --level-blue: #4d6b7b;
  --level-brown: #6a4f3f;
  --level-black: #3a3a3a;

  --radius-sm: 6px;
  --radius-md: 8px;
  --shadow-low: 0 1px 0 rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body,
body.theme-light {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* === PAGE BACKGROUND === */
#page {
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 16%, rgba(200,165,104,0.08), rgba(200,165,104,0) 38%),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.05), rgba(255,255,255,0) 48%),
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,0.00), rgba(0,0,0,0.38));
  opacity: 0.24;
}

.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background:
    radial-gradient(circle at 35% 24%, rgba(180,154,106,0.03), rgba(0,0,0,0) 32%),
    radial-gradient(circle at 70% 70%, rgba(180,154,106,0.02), rgba(0,0,0,0) 36%);
}

.page-bg div {
  display: none;
}

/* === Cards and buttons: content above the decorative layers === */
.card-style,
.content-box,
.btn {
  position: relative;
  overflow: hidden;
}

.card-style > *,
.content-box > *,
.btn > * {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
  letter-spacing: -0.2px;
}

p,
.color-dark,
.color-dark-light {
  color: var(--muted) !important;
}

/* Panels & cards */
.card-style,
.content-box {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.04), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 20%, rgba(180,154,106,0.025), rgba(180,154,106,0) 40%),
    linear-gradient(180deg, #191e23 0%, #12171b 100%) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid var(--border) !important;
}

/* vignette layer */
.card-style::after,
.content-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.015) 0%,
      rgba(255,255,255,0.00) 18%,
      rgba(0,0,0,0.04) 24%,
      rgba(0,0,0,0.18) 42%,
      rgba(0,0,0,0.48) 68%,
      rgba(0,0,0,0.68) 78%,
      rgba(0,0,0,0.78) 100%
    );
}

/* keep content above the vignette */
.card-style > *,
.content-box > * {
  position: relative;
  z-index: 2;
}

.card-style .card-overlay {
  border-radius: var(--radius-md) !important;
}

/* Buttons */
.btn,
.btn.bg-highlight,
.btn.bg-blue-dark,
.btn.bg-red-dark {
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid #0c0f12 !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(188,156,96,0.08), rgba(188,156,96,0.00) 26%),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 40%),
    linear-gradient(180deg, #20252a 0%, #171b1f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 0 rgba(0,0,0,0.62),
    0 1px 0 rgba(0,0,0,0.6);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background:
    linear-gradient(rgba(180,154,106,0.07), rgba(180,154,106,0.03));
}

.btn:focus,
.btn:hover {
  opacity: 0.96;
}

.bg-blue-dark {
  background-color: #22262b !important;
}

/* Inputs */
.input-style-1 input,
.input-style-1 textarea,
.input-style-1 select {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

.input-style-1 input:focus,
.input-style-1 textarea:focus,
.input-style-1 select:focus {
  border-bottom-color: var(--accent) !important;
}

.input-style-1 span,
.input-style-2 span {
  color: var(--muted) !important;
  opacity: 0.85;
}

.input-style-1:focus-within span,
.input-style-2:focus-within span {
  color: var(--accent) !important;
}

/* Gallery controls */
.gallery-view-controls {
  border-bottom: 1px solid var(--border) !important;
}

.gallery-view-controls a {
  color: var(--muted) !important;
}

.gallery-view-controls a.color-highlight {
  color: var(--text) !important;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Header & menus */
.header,
.menu {
  background-color: #171b20 !important;
  border-bottom: 1px solid var(--border);
}

.header .header-icon,
.header .header-title {
  color: var(--muted) !important;
}

.menu-gradient {
  background-color: var(--surface) !important;
}

/* Icon button in Dream Board ("info") */
.page-content .icon.gradient-green {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.page-content .color-icon-green,
.page-content .icon.gradient-green i {
  color: var(--muted) !important;
}

/* Brass accents for thin borders/labels */
.border-heading {
  border-left-color: var(--accent) !important;
}

/* Reduce softness on utility rounded classes */
.rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.rounded-xl {
  border-radius: 10px !important;
}

/* Text & icon color utilities that skew bright */
.color-white {
  color: var(--text) !important;
}

/* Dream Board image tiles: reduce softness */
.gallery-views.gallery-view-2 a.mb-2 {
  position: relative;
  display: inline-block;
}

.gallery-views.gallery-view-2 img.shadow-xxl {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  z-index: 1;
}

/* Reliable overlay via image filter */
.gallery-views.gallery-view-2 a.mb-2 img.rounded-circle {
  filter: brightness(0.88) saturate(0.84) contrast(0.98);
}

/* Info icon: reduce size/contrast */
.page-content .icon.gradient-green.icon-xxs {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
}

/* === BRASS TARNISH: subtle aged-metal dirt === */
.border-heading,
.btn,
.gallery-view-controls a.color-highlight,
.page-content .icon.gradient-green {
  position: relative;
}

.border-heading::after {
  inset: 0 auto 0 0;
  width: 8px;
}


:root {
    --md-bg-top: #262a35;
    --md-bg-bottom: #1f222b;

    --md-gold: #c7b076;
    --md-gold-soft: rgba(199, 176, 118, 0.78);

    --md-text-main: #f6f1e6;

    --md-card-dark-top: rgba(25, 26, 28, 0.98);
    --md-card-dark-bottom: rgba(9, 10, 12, 0.98);
}

/* PAGE */

.md-page {
    min-height: calc(100dvh - 60px);
    background:
        radial-gradient(circle at 50% 42%, rgba(199, 176, 118, 0.045), transparent 26%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.02), transparent 35%),
        linear-gradient(180deg, var(--md-bg-top) 0%, var(--md-bg-bottom) 100%);
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-rows: 1fr auto;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
}

.md-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 46%);
    background-size: 220px 220px;
}

/* COMMON SHELL */

.md-shell {
    position: relative;
    z-index: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 28px 0 36px;
}

.md-shell-reading,
.md-shell-choice {
    align-items: center;
}

/* READING SCREEN */

.md-reading {
    width: 100%;
    max-width: 390px;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.md-speaker {
    color: var(--md-gold-soft) !important;
    opacity: 1 !important;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 clamp(28px, 6vh, 58px) 0;
}

.md-text {
    color: var(--md-text-main) !important;
    font-size: 24px;
    line-height: 1.38;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0;
    white-space: pre-line;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.78),
        0 0 22px rgba(246, 241, 230, 0.08);
}

.md-divider {
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(199, 176, 118, 0.95) 50%,
        transparent 100%
    );
    margin: 28px auto 0;
    opacity: 0.95;
}

/* BOTTOM BUTTON — zawsze widoczny, ale nie fixed */

.md-bottom-action {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    padding: 0 0 0;
}

.md-bottom-action form {
    margin: 0;
}

.md-next {
    width: 100%;
    min-height: 58px;
    border-radius: 10px;
    border: 1px solid rgba(199, 176, 118, 0.48);
    background:
        linear-gradient(180deg, rgba(31, 32, 32, 0.98), rgba(10, 11, 12, 0.98));
    color: var(--md-text-main) !important;
    opacity: 1 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.md-next-label {
    display: inline-block;
    color: var(--md-text-main) !important;
}

.md-next-arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--md-gold) !important;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
}

.md-next:active {
    transform: scale(0.985);
    border-color: rgba(199, 176, 118, 0.72);
}

/* CHOICE SCREEN */

.md-question-block {
    width: 100%;
    max-width: 390px;
    text-align: center;
}

.md-question {
    color: var(--md-text-main) !important;
    text-align: center;
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 800;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(246, 241, 230, 0.06);
}

.md-choice-form {
    margin-top: 26px;
}

.md-choice {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr 22px;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 76px;
    margin-bottom: 13px;
    padding: 12px 16px;

    border-radius: 12px;
    border: 1px solid rgba(199, 176, 118, 0.23);
    background:
        linear-gradient(180deg, var(--md-card-dark-top), var(--md-card-dark-bottom));

    color: var(--md-text-main) !important;
    text-align: left;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.04);

    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.md-choice::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    background-image:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 45%, transparent 46%);
    background-size: 180px 180px;
}

.md-choice-letter {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 9px;
    border: 1px solid rgba(199, 176, 118, 0.36);

    color: var(--md-gold) !important;
    font-size: 22px;
    font-weight: 800;
}

.md-choice-text {
    position: relative;
    z-index: 1;

    color: var(--md-text-main) !important;
    opacity: 1 !important;

    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.md-choice-arrow {
    position: relative;
    z-index: 1;

    color: var(--md-gold) !important;
    font-size: 28px;
    opacity: 0.9;
}

.md-choice:active {
    transform: scale(0.985);
    border-color: rgba(199, 176, 118, 0.65);
}

/* SMALL */

@media (max-width: 370px) {
    .md-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .md-speaker {
        margin-bottom: clamp(24px, 5vh, 46px);
        font-size: 11px;
    }

    .md-text {
        font-size: 22px;
    }

    .md-question {
        font-size: 24px;
    }

    .md-choice {
        grid-template-columns: 48px 1fr 18px;
        min-height: 68px;
        padding: 10px 12px;
    }

    .md-choice-letter {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .md-choice-text {
        font-size: 13px;
    }
}


#mdExperienceRoot {
    animation: mdFadeIn 180ms ease-out;
}

.htmx-request #mdExperienceRoot,
#mdExperienceRoot.htmx-swapping {
    opacity: 0.55;
}

@keyframes mdFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mdExperienceFrame.md-page {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;

    margin: 0 !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-rows: 1fr auto;

    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* gdy framework dopisze inline min-height do .page-content */
#mdExperienceFrame[style] {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
}

#mdExperienceFrame.md-page {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    overflow: hidden !important;
    padding: 0 18px !important;
}

/* content już nie może być display: contents, bo chcemy sterować układem */
#mdExperienceContent {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* tekst */
.md-shell {
    width: 100%;
    padding: 0 !important;
}

.md-shell-reading {
    flex: 0 0 auto;
}

.md-reading {
    width: 100%;
    max-width: 390px;
}

/* przycisk pod dividerem, nie na dole */
.md-bottom-action {
    position: relative !important;
    width: 100%;
    max-width: 390px;
    margin: clamp(72px, 12vh, 120px) auto 0 !important;
    padding: 0 !important;
}

#mdExperienceFrame.md-page {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 18px !important;
}

#mdExperienceContent {
    width: 100%;
    max-width: 390px;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
}

/* czytanie */
.md-shell {
    width: 100%;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.md-reading {
    width: 100%;
    max-width: 390px;
}

.md-speaker {
    margin-bottom: 42px !important;
}

/* divider */
.md-divider {
    margin: 26px auto 0 !important;
}

/* button bliżej tekstu */
.md-bottom-action {
    position: relative !important;
    width: 100%;
    max-width: 390px;

    margin: 44px auto 0 !important;
    padding: 0 !important;
}

#mdExperienceContent {
    animation: mdContentEnter 520ms ease-out 160ms both;
}

#mdExperienceContent {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition:
        opacity 520ms ease,
        transform 520ms ease,
        filter 520ms ease;
    animation: mdContentEnter 520ms ease-out 160ms both;
}

#mdExperienceContent.md-is-leaving {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(2px);
    pointer-events: none;
}

@keyframes mdContentEnter {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}





/* Wolniejsze wejście ekranów narracyjnych / pojedynczych */
#mdExperienceContent .md-reading {
    opacity: 0;
    animation: mdReadingAppear 700ms ease-out 200ms both;
}

#mdExperienceContent .md-bottom-action {
    opacity: 0;
    animation: mdButtonAppear 520ms ease-out 640ms both;
}

@keyframes mdReadingAppear {
    from {
        opacity: 0;
        color: rgba(246, 241, 230, 0.12);
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        color: #f6f1e6;
        transform: translateY(0);
    }
}

@keyframes mdButtonAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.md-choice {
    opacity: 0;
    animation: mdChoiceAppear 420ms ease-out both;
}

.md-choice:nth-of-type(1) {
    animation-delay: 220ms;
}

.md-choice:nth-of-type(2) {
    animation-delay: 300ms;
}

.md-choice:nth-of-type(3) {
    animation-delay: 380ms;
}

.md-choice:nth-of-type(4) {
    animation-delay: 460ms;
}

@keyframes mdChoiceAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================
   HARDCODED MD INTRO SCENE
   temporary MVP prototype
========================= */

#mdExperienceContent {
    position: relative;
}

#mdExperienceContent.md-scene-active .md-shell,
#mdExperienceContent.md-scene-active .md-bottom-action {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

#mdExperienceContent.md-scene-active.md-scene-ready .md-shell {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 780ms ease,
        transform 780ms ease;
}

#mdExperienceContent.md-scene-active.md-scene-ready .md-bottom-action {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 700ms ease 420ms,
        transform 700ms ease 420ms;
}

.md-scene-stage {
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(340px, 92vw);
    height: 240px;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 1;
    filter: blur(0);
    transition:
        opacity 820ms ease,
        transform 820ms ease,
        filter 820ms ease;
}

#mdExperienceContent.md-scene-ready .md-scene-stage {
    opacity: 0;
    transform: translate(-50%, -54%);
    filter: blur(2px);
}

.md-scene-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.md-scene-bg-glow {
    display: none;
}

.md-scene-draw {
    fill: none;
    stroke: rgba(246, 241, 230, 0.78);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    filter: drop-shadow(0 0 9px rgba(199, 176, 118, 0.10));
    animation: mdDrawLine 1250ms ease forwards;
}

.md-scene-fade {
    fill: none;
    stroke: rgba(246, 241, 230, 0.72);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    filter: drop-shadow(0 0 9px rgba(199, 176, 118, 0.10));
    animation: mdFadeScene 820ms ease forwards;
}

/* sekwencja sceny */
.md-scene-table {
    animation-delay: 420ms;
}

.md-leg-left {
    animation-delay: 860ms;
}

.md-leg-right {
    animation-delay: 940ms;
}

.md-plate-left {
    animation-delay: 1450ms;
}

.md-plate-right {
    animation-delay: 1850ms;
}

.md-scene-head {
    animation-delay: 2350ms;
}

.md-scene-woman {
    animation-delay: 2750ms;
}

.md-silence-1 {
    animation-delay: 3300ms;
}

.md-silence-2 {
    animation-delay: 3600ms;
}

.md-silence-3 {
    animation-delay: 3900ms;
}

@keyframes mdDrawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mdFadeScene {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdSceneGlowIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* żeby animacje nie robiły choroby lokomocyjnej użytkownikom z prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .md-scene-stage,
    .md-scene-draw,
    .md-scene-fade,
    .md-scene-bg-glow,
    #mdExperienceContent.md-scene-active .md-shell,
    #mdExperienceContent.md-scene-active .md-bottom-action {
        animation: none !important;
        transition: none !important;
    }

    .md-scene-stage {
        display: none;
    }

    #mdExperienceContent.md-scene-active .md-shell,
    #mdExperienceContent.md-scene-active .md-bottom-action {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* podczas intro tekst i button są twardo schowane */
#mdExperienceContent.md-scene-active:not(.md-scene-ready) .md-shell,
#mdExperienceContent.md-scene-active:not(.md-scene-ready) .md-bottom-action {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    animation: none !important;
}

/* scena najpierw spokojnie gaśnie */
#mdExperienceContent.md-scene-active.md-scene-ready .md-scene-stage {
    opacity: 0 !important;
    transform: translate(-50%, -56%) !important;
    filter: blur(3px) !important;
    pointer-events: none !important;
    transition:
        opacity 950ms ease,
        transform 950ms ease,
        filter 950ms ease;
}

/* dopiero po chwili wchodzi tekst */
#mdExperienceContent.md-scene-active.md-scene-ready .md-shell {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    animation: mdReadingAppear 950ms ease-out 850ms both !important;
}

/* button jeszcze później */
#mdExperienceContent.md-scene-active.md-scene-ready .md-bottom-action {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    animation: mdButtonAppear 720ms ease-out 1550ms both !important;
}

.md-scene-stage {
    overflow: visible !important;
}

.md-scene-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 560px;
    height: 420px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(199, 176, 118, 0.16) 0%,
            rgba(199, 176, 118, 0.07) 24%,
            rgba(246, 241, 230, 0.035) 42%,
            transparent 68%
        );
    filter: blur(18px);
    opacity: 1;
}

.md-scene-svg {
    position: relative;
    z-index: 1;
}

/* SCENA INTRO — trzy fazy:
   1. scena widoczna, tekst ukryty
   2. scena gaśnie
   3. tekst wchodzi dopiero po zniknięciu sceny
*/


/* scena domyślnie widoczna */
#mdExperienceContent.md-scene-active .md-scene-stage {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition:
        opacity 1800ms ease,
        transform 1800ms ease,
        filter 1800ms ease;
}

#mdExperienceContent.md-scene-active.md-scene-fading .md-scene-stage {
    opacity: 0 !important;
    transform: translate(-50%, -56%) !important;
    filter: blur(4px) !important;
}

/* Po zniknięciu sceny pokazujemy obszar tekstu, ale sam tekst animuje się osobno */
#mdExperienceContent.md-scene-active.md-text-ready .md-shell {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    animation: none !important;
}

/* Tekst wchodzi z ciemnego w jasne */
#mdExperienceContent.md-scene-active.md-text-ready .md-text {
    animation: mdTextReveal 1700ms ease-out 120ms both !important;
}

/* Divider delikatnie po tekście */
#mdExperienceContent.md-scene-active.md-text-ready .md-divider {
    animation: mdDividerReveal 900ms ease-out 900ms both !important;
}

/* Button dopiero później */


/* kiedy tekst jest gotowy, scena nie może klikać ani zasłaniać */
#mdExperienceContent.md-scene-active.md-text-ready .md-scene-stage {
    pointer-events: none !important;
}

.md-reading,
.md-text,
.md-bottom-action,
.md-next {
    filter: none !important;
}

@keyframes mdTextReveal {
    0% {
        opacity: 0;
        color: rgba(246, 241, 230, 0.05);
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.65);
    }

    35% {
        opacity: 0.35;
        color: rgba(246, 241, 230, 0.38);
    }

    100% {
        opacity: 1;
        color: #f6f1e6;
        text-shadow:
            0 2px 12px rgba(0, 0, 0, 0.78),
            0 0 22px rgba(246, 241, 230, 0.08);
    }
}

@keyframes mdDividerReveal {
    from {
        opacity: 0;
        transform: scaleX(0.35);
    }

    to {
        opacity: 0.95;
        transform: scaleX(1);
    }
}

@keyframes mdButtonReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   INTRO SCENE — FINAL FLOW
   scena -> fade out -> tekst -> button
========================= */

/* 1. Podczas sceny tekst i button są ukryte */
#mdExperienceContent.md-scene-active:not(.md-text-ready) .md-shell,
#mdExperienceContent.md-scene-active:not(.md-text-ready) .md-bottom-action {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 2. Scena widoczna domyślnie */
#mdExperienceContent.md-scene-active .md-scene-stage {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition:
        opacity 1800ms ease,
        transform 1800ms ease,
        filter 1800ms ease;
}

/* 3. Scena gaśnie */
#mdExperienceContent.md-scene-active.md-scene-fading .md-scene-stage {
    opacity: 0;
    transform: translate(-50%, -56%);
    filter: blur(4px);
}

/* 4. Po zgaśnięciu sceny pokazujemy obszar tekstu */
#mdExperienceContent.md-scene-active.md-text-ready .md-shell {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: mdReadingAreaReveal 1500ms ease-out 120ms both;
}

/* 5. Tekst rozjaśnia się bez blurra */
#mdExperienceContent.md-scene-active.md-text-ready .md-text {
    animation: mdTextReveal 1800ms ease-out 180ms both;
}

/* 6. Divider wchodzi po tekście */
#mdExperienceContent.md-scene-active.md-text-ready .md-divider {
    animation: mdDividerReveal 900ms ease-out 1050ms both;
}

/* animacje */

@keyframes mdReadingAreaReveal {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdTextReveal {
    0% {
        opacity: 0;
        color: rgba(246, 241, 230, 0.08);
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.65);
    }

    45% {
        opacity: 0.45;
        color: rgba(246, 241, 230, 0.45);
    }

    100% {
        opacity: 1;
        color: #f6f1e6;
        text-shadow:
            0 2px 12px rgba(0, 0, 0, 0.78),
            0 0 22px rgba(246, 241, 230, 0.08);
    }
}

@keyframes mdDividerReveal {
    from {
        opacity: 0;
        transform: scaleX(0.35);
    }

    to {
        opacity: 0.95;
        transform: scaleX(1);
    }
}

@keyframes mdButtonReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

/* =========================
   MICRO-EXPERIENCES UI
   base layout, text, buttons, choices
   Scene-specific CSS lives outside this file.
========================= */

:root {
    --md-bg-top: #262a35;
    --md-bg-bottom: #1f222b;
    --md-gold: #c7b076;
    --md-gold-soft: rgba(199, 176, 118, 0.78);
    --md-text-main: #f6f1e6;
    --md-card-dark-top: rgba(25, 26, 28, 0.98);
    --md-card-dark-bottom: rgba(9, 10, 12, 0.98);
}

/* Stable MD page frame. The framework injects inline min-height on .page-content,
   so this target must win with !important. */
#mdExperienceFrame.md-page,
#mdExperienceRoot.md-page {
    position: relative !important;

    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;

    padding: 0 18px !important;
    margin: 0 !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 50% 42%, rgba(199, 176, 118, 0.045), transparent 26%),
        radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.02), transparent 35%),
        linear-gradient(180deg, var(--md-bg-top) 0%, var(--md-bg-bottom) 100%);
}

#mdExperienceFrame[style],
#mdExperienceRoot[style] {
    height: calc(100dvh - 56px) !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
}

#mdExperienceFrame.md-page::before,
#mdExperienceRoot.md-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 46%);
    background-size: 220px 220px;
}

/* Hard vertical centering for the current MD screen. */
#mdExperienceContent {
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    top: 50% !important;

    width: auto !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    transform: translateY(-50%) !important;

    z-index: 1;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#mdExperienceContent.md-is-leaving {
    opacity: 0;
    pointer-events: none;
    transition: opacity 520ms ease;
}

/* =========================
   Common layout
========================= */

#mdExperienceContent .md-shell {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 0 !important;

    position: relative;
    z-index: 1;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible;
}

.md-reading,
.md-question-block {
    width: 100%;
    max-width: 390px;
    text-align: center;
}

.md-reading {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.md-speaker {
    color: var(--md-gold-soft) !important;
    opacity: 1 !important;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 42px 0 !important;
}

.md-text {
    color: var(--md-text-main) !important;
    font-size: 24px;
    line-height: 1.38;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0;
    white-space: pre-line;
    filter: none !important;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.78),
        0 0 22px rgba(246, 241, 230, 0.08);
}

.md-divider {
    width: 44px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(199, 176, 118, 0.95) 50%,
        transparent 100%
    );
    margin: 26px auto 0 !important;
    opacity: 0.95;
}

/* =========================
   Next button
========================= */

#mdExperienceContent .md-bottom-action {
    position: relative !important;
    z-index: 2;

    width: 100% !important;
    max-width: 390px !important;

    margin: 44px auto 0 !important;
    padding: 0 !important;
    filter: none !important;
}

.md-bottom-action form {
    margin: 0;
}

.md-next,
.md-next-link {
    width: 100%;
    min-height: 58px;

    border-radius: 10px;
    border: 1px solid rgba(199, 176, 118, 0.18);

    background:
        linear-gradient(
            180deg,
            rgba(18, 20, 22, 0.34),
            rgba(10, 11, 12, 0.28)
        );

    color: rgba(246, 241, 230, 0.72) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.md-next-label {
    display: inline-block;
    color: rgba(246, 241, 230, 0.74) !important;
    animation: mdNextLabelPulse 2600ms ease-in-out infinite;
}

.md-next-arrow {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);

    color: rgba(199, 176, 118, 0.64) !important;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.72;
}

@keyframes mdNextLabelPulse {
    0% {
        opacity: 0.58;
        text-shadow: none;
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 12px rgba(246, 241, 230, 0.10),
            0 0 18px rgba(199, 176, 118, 0.10);
    }

    100% {
        opacity: 0.58;
        text-shadow: none;
    }
}

.md-next:active,
.md-next-link:active {
    transform: scale(0.985);
    border-color: rgba(199, 176, 118, 0.34);
    background:
        linear-gradient(
            180deg,
            rgba(24, 25, 27, 0.42),
            rgba(11, 12, 13, 0.34)
        );
}
/* =========================
   Choice screen
========================= */

.md-question {
    color: var(--md-text-main);
    text-align: center;
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 800;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(246, 241, 230, 0.06);
}

.md-choice-form {
    margin-top: 26px;
}

.md-choice {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr 22px;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 76px;
    margin-bottom: 13px;
    padding: 12px 16px;

    border-radius: 12px;
    border: 1px solid rgba(199, 176, 118, 0.23);
    background:
        linear-gradient(180deg, var(--md-card-dark-top), var(--md-card-dark-bottom));

    color: var(--md-text-main) !important;
    text-align: left;

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.04);

    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.md-choice::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    background-image:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 45%, transparent 46%);
    background-size: 180px 180px;
}

/* =========================
   MD CHOICES — slower reveal
   spokojniejsze wejście A/B/C/D
========================= */

.md-choice {
    opacity: 0;
    transform: translateY(10px);
    animation: mdChoiceAppearSlow 720ms ease-out both;
}

/* pytanie już jest, user ma chwilę zanim opcje wejdą */
.md-choice:nth-of-type(1) {
    animation-delay: 780ms;
}

.md-choice:nth-of-type(2) {
    animation-delay: 1020ms;
}

.md-choice:nth-of-type(3) {
    animation-delay: 1260ms;
}

.md-choice:nth-of-type(4) {
    animation-delay: 1500ms;
}

@keyframes mdChoiceAppearSlow {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.md-choice-letter {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 9px;
    border: 1px solid rgba(199, 176, 118, 0.36);

    color: var(--md-gold) !important;
    font-size: 22px;
    font-weight: 800;
}

.md-choice-text {
    position: relative;
    z-index: 1;
    color: var(--md-text-main) !important;
    opacity: 1 !important;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.md-choice-arrow {
    position: relative;
    z-index: 1;
    color: var(--md-gold) !important;
    font-size: 28px;
    opacity: 0.9;
}

.md-choice:active {
    transform: scale(0.985);
    border-color: rgba(199, 176, 118, 0.65);
}

@keyframes mdChoiceAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Non-intro reading screens: calm entrance, no full scene. */
#mdExperienceContent:not(.md-scene-active) .md-reading {
    opacity: 0;
    animation: mdReadingAppear 700ms ease-out 200ms both;
}

#mdExperienceContent:not(.md-scene-active) .md-bottom-action {
    opacity: 0;
    animation: mdButtonAppear 520ms ease-out 640ms both;
}

@keyframes mdReadingAppear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdButtonAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   Small devices
========================= */

@media (max-width: 370px) {
    #mdExperienceFrame.md-page,
    #mdExperienceRoot.md-page {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #mdExperienceContent {
        left: 14px !important;
        right: 14px !important;
    }

    .md-speaker {
        margin-bottom: 34px !important;
        font-size: 11px;
    }

    .md-text {
        font-size: 22px;
    }

    .md-question {
        font-size: 24px;
    }

    .md-choice {
        grid-template-columns: 48px 1fr 18px;
        min-height: 68px;
        padding: 10px 12px;
    }

    .md-choice-letter {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .md-choice-text {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mdExperienceContent,
    .md-reading,
    .md-bottom-action,
    .md-choice,
    .md-text,
    .md-divider {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================
   MD PROMPT SCREEN — slower rhythm
   wolniejsze wejście pytania i opcji A/B/C/D
========================= */

/* =========================
   MD PROMPT SCREEN — slower sequential choices
========================= */

#mdExperienceContent .md-question-block {
    animation: mdQuestionBlockAppear 1200ms ease-out 320ms both !important;
}

#mdExperienceContent .md-question {
    opacity: 0;
    animation: mdQuestionTextReveal 1700ms ease-out 650ms both !important;
}

#mdExperienceContent .md-question-block .md-divider {
    opacity: 0;
    animation: mdPromptDividerReveal 1100ms ease-out 2100ms both !important;
}

#mdExperienceContent .md-choice {
    opacity: 0;
    transform: translateY(12px);
    animation: mdChoiceAppearSlow 1000ms ease-out both !important;
}

/* teraz różnice między opcjami są wyraźne */
#mdExperienceContent .md-choice:nth-of-type(1) {
    animation-delay: 3100ms !important;
}

#mdExperienceContent .md-choice:nth-of-type(2) {
    animation-delay: 4100ms !important;
}

#mdExperienceContent .md-choice:nth-of-type(3) {
    animation-delay: 5100ms !important;
}

#mdExperienceContent .md-choice:nth-of-type(4) {
    animation-delay: 6100ms !important;
}

@keyframes mdQuestionBlockAppear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdQuestionTextReveal {
    0% {
        opacity: 0;
        color: rgba(246, 241, 230, 0.10);
    }

    45% {
        opacity: 0.5;
        color: rgba(246, 241, 230, 0.52);
    }

    100% {
        opacity: 1;
        color: #f6f1e6;
    }
}

@keyframes mdPromptDividerReveal {
    from {
        opacity: 0;
        transform: scaleX(0.35);
    }

    to {
        opacity: 0.95;
        transform: scaleX(1);
    }
}

@keyframes mdChoiceAppearSlow {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   MD PROMPT QUESTION — slow pure fade
   wolno, bez blurra, bez wyostrzania, bez ruchu
========================= */

#mdExperienceContent .md-question-block {
    animation: none !important;
}

#mdExperienceContent .md-question {
    opacity: 0;
    transform: none !important;
    filter: none !important;

    animation: mdPromptQuestionSlowFade 8600ms ease-out 1800ms both !important;
}

#mdExperienceContent .md-question-block .md-divider {
    opacity: 0;
    transform: none !important;
    filter: none !important;

    animation: mdPromptDividerSlowFade 900ms ease-out 2400ms both !important;
}

/* opcje zaczynają dopiero po pytaniu i dividerze */
#mdExperienceContent .md-choice-form > .md-choice-1 {
    --md-choice-delay: 3000ms;
}

#mdExperienceContent .md-choice-form > .md-choice-2 {
    --md-choice-delay: 3400ms;
}

#mdExperienceContent .md-choice-form > .md-choice-3 {
    --md-choice-delay: 3800ms;
}

#mdExperienceContent .md-choice-form > .md-choice-4 {
    --md-choice-delay: 4200ms;
}

@keyframes mdPromptQuestionSlowFade {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 0.24;
    }

    70% {
        opacity: 0.72;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mdPromptDividerSlowFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.95;
    }
}