/* PropNova Phase B — Vienna visual story */
.pn-vienna {
    position: relative;
    isolation: isolate;
    overflow: clip;
    color: var(--pn-ivory-100);
    background:
        radial-gradient(circle at 80% 18%, rgb(0 219 252 / 9%), transparent 34%),
        linear-gradient(145deg, var(--pn-navy-950), var(--pn-navy-900) 58%, var(--pn-navy-950));
}

.pn-vienna__austria-mark {
    display: grid;
    grid-template-rows: 3px 2px 3px;
    position: absolute;
    inset: 0 0 auto;
    z-index: 5;
}

.pn-vienna__austria-mark i:nth-child(1),
.pn-vienna__austria-mark i:nth-child(3) { background: var(--pn-austria-red); }
.pn-vienna__austria-mark i:nth-child(2) { background: rgba(255,255,255,.96); }

.pn-vienna__stage {
    position: relative;
    min-height: 100svh;
    width: min(100%, 1920px);
    margin-inline: auto;
    padding: clamp(5rem, 7.5vw, 7.25rem) clamp(1.25rem, 5vw, 6.5rem) clamp(3.5rem, 5vw, 5.5rem);
    display: grid;
    grid-template-rows: auto minmax(31rem, 1fr) auto;
    gap: clamp(1.4rem, 2.5vw, 2.6rem);
}

.pn-vienna__intro {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, .9fr);
    gap: clamp(2rem, 8vw, 10rem);
    align-items: end;
}

.pn-vienna__eyebrow,
.pn-vienna__kicker {
    color: var(--pn-cyan-500);
    font: 650 .72rem/1.2 Inter, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.pn-vienna__title {
    max-width: 12ch;
    margin: .55rem 0 0;
    color: var(--pn-ivory-100);
    font: 500 clamp(2.55rem, 5.4vw, 6.25rem)/.94 Syne, sans-serif;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.pn-vienna__lead {
    max-width: 38rem;
    margin: 0 0 .25rem;
    color: rgba(247,248,248,.72);
    font: 400 clamp(.96rem, 1.18vw, 1.12rem)/1.7 Inter, sans-serif;
}

.pn-vienna__map {
    position: absolute;
    z-index: -1;
    inset: 8% -8% auto auto;
    width: min(62vw, 72rem);
    color: rgba(255,255,255,.12);
    opacity: .92;
    pointer-events: none;
}

.pn-vienna__map-base,
.pn-vienna__map-route {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.pn-vienna__map-stop--digital { stop-color: var(--pn-cyan-500); }
.pn-vienna__map-stop--human { stop-color: var(--pn-gold-500); }

.pn-vienna__map-base { stroke: currentColor; stroke-width: 1; }
.pn-vienna__map-route {
    stroke: url(#pn-vienna-route-gradient);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.pn-vienna__map-node {
    fill: var(--pn-navy-900);
    stroke: rgba(255,255,255,.3);
    stroke-width: 1.4;
    transform-origin: center;
    transition: fill .5s ease, stroke .5s ease, transform .5s ease;
}

.pn-vienna[data-active-state="1"] .pn-vienna__map-node:nth-of-type(2),
.pn-vienna[data-active-state="2"] .pn-vienna__map-node:nth-of-type(3) {
    fill: var(--pn-gold-500);
    stroke: var(--pn-gold-500);
    transform: scale(1.45);
}

.pn-vienna__states { position: relative; min-height: 31rem; z-index: 2; }

.pn-vienna__state {
    min-height: 31rem;
    display: grid;
    grid-template-columns: minmax(16rem, .72fr) minmax(30rem, 1.28fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: center;
}

.pn-vienna__copy { position: relative; z-index: 4; max-width: 33rem; }
.pn-vienna__index {
    display: inline-flex;
    margin-bottom: clamp(1.1rem, 2vw, 2rem);
    color: var(--pn-gold-500);
    font: 500 clamp(2rem, 4vw, 4.5rem)/1 Syne, sans-serif;
}

.pn-vienna__copy h3 {
    max-width: 14ch;
    margin: .65rem 0 1rem;
    color: var(--pn-ivory-100);
    font: 500 clamp(1.8rem, 3.2vw, 3.65rem)/1.02 Syne, sans-serif;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.pn-vienna__copy p {
    max-width: 33rem;
    margin: 0;
    color: rgba(247,248,248,.68);
    font: 400 .96rem/1.7 Inter, sans-serif;
}

.pn-vienna__media { position: relative; height: min(54vh, 36rem); min-height: 27rem; }
.pn-vienna__figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: var(--pn-navy-800);
    box-shadow: 0 2.5rem 6rem rgba(0,0,0,.28);
}

.pn-vienna__figure picture,
.pn-vienna__figure img { display: block; width: 100%; height: 100%; }
.pn-vienna__figure img { object-fit: cover; transform: scale(1.015); }
.pn-vienna__figure--hero { inset: 0; clip-path: inset(0 0 0 0 round .15rem); }
.pn-vienna__figure--hero img { filter: saturate(.78) contrast(.98) brightness(.96); }
.pn-vienna__figure--hero::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(155deg, rgb(8 19 31 / 10%), rgb(19 32 47 / 24%));
    pointer-events: none;
}
.pn-vienna__figure--wide { inset: 3% 9% 9% 3%; }
.pn-vienna__figure--portrait {
    width: 27%;
    height: 72%;
    right: 1.5%;
    bottom: -1%;
    clip-path: inset(0 0 0 0);
    box-shadow: -1.2rem 1.4rem 2.8rem rgb(8 19 31 / 32%);
    transform-origin: right center;
}
.pn-vienna__figure--portrait img { object-position: 62% 46%; }
.pn-vienna__figure--residence { inset: 0 10% 9% 0; }
.pn-vienna__figure--interior { width: 37%; height: 57%; right: 0; bottom: 0; border: 1px solid rgba(216,175,99,.55); }

.pn-vienna__caption {
    position: absolute;
    inset: auto auto .9rem 1rem;
    z-index: 2;
    padding: .42rem .65rem;
    color: var(--pn-ivory-100);
    background: rgba(4,18,29,.7);
    backdrop-filter: blur(7px);
    font: 600 .65rem/1.25 Inter, sans-serif;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.pn-vienna__disclosure {
    position: relative;
    z-index: 4;
    max-width: 34rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.13);
    color: rgba(247,248,248,.52);
    font: 400 .69rem/1.55 Inter, sans-serif;
}

.pn-vienna__exit {
    position: absolute;
    z-index: 4;
    inset: auto 0 0;
    height: clamp(3rem, 6vw, 6.75rem);
    background: var(--pn-ivory-50);
    clip-path: polygon(0 100%, 100% 14%, 100% 100%);
    transition: clip-path var(--pn-motion-standard) var(--pn-ease-in-out);
    pointer-events: none;
}

.pn-vienna__exit::before {
    content: '';
    position: absolute;
    top: 14%;
    right: 0;
    width: 62%;
    height: 1px;
    background: linear-gradient(90deg, var(--pn-cyan-500), var(--pn-gold-500));
    transform: rotate(-2.5deg);
    transform-origin: right center;
    opacity: .72;
}

html[data-pn-vienna="ready"] .pn-vienna:not([data-active-state="2"]) .pn-vienna__exit {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%);
}
.pn-vienna[data-active-state="2"] .pn-vienna__exit { clip-path: polygon(0 100%, 100% 14%, 100% 100%); }

.pn-visual-credits {
    color: var(--pn-navy-950);
    background: var(--pn-ivory-50);
    border-top: 1px solid var(--pn-rule-light);
}

.pn-visual-credits summary,
.pn-visual-credits__body {
    width: min(88rem, calc(100% - clamp(2rem, 8vw, 8rem)));
    margin-inline: auto;
}

.pn-visual-credits summary {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--pn-navy-950);
    font: 650 .78rem/1.3 Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pn-visual-credits summary::-webkit-details-marker { display: none; }
.pn-visual-credits summary:focus-visible { outline: 2px solid var(--pn-gold-500); outline-offset: -2px; }

.pn-visual-credits__indicator {
    width: .55rem;
    height: .55rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translate(-.12rem, .12rem);
    transition: transform var(--pn-motion-fast) var(--pn-ease-out);
}
.pn-visual-credits[open] .pn-visual-credits__indicator { transform: rotate(225deg); }

.pn-visual-credits__body { padding: .25rem 0 1.5rem; }
.pn-visual-credits__body ul {
    margin: 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid var(--pn-rule-light);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem clamp(2rem, 5vw, 5rem);
    list-style: none;
}
.pn-visual-credits__body li { color: rgb(8 19 31 / 72%); font: 400 .78rem/1.6 Inter, sans-serif; }
.pn-visual-credits__body a { color: var(--pn-navy-950); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.pn-visual-credits__body a:hover { color: #006f82; }

html[data-pn-vienna="ready"] .pn-vienna { height: 200svh; }
html[data-pn-vienna="ready"] .pn-vienna__stage { position: sticky; top: 0; height: 100svh; min-height: 43rem; }
html[data-pn-vienna="ready"] .pn-vienna__state { position: absolute; inset: 0; }
html[data-pn-vienna="ready"] .pn-vienna__state:not(.is-active) { opacity: 0; pointer-events: none; }

@media (max-width: 1100px) {
    .pn-vienna__stage { padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
    .pn-vienna__intro { gap: 3rem; }
    .pn-vienna__state { grid-template-columns: minmax(15rem, .7fr) minmax(25rem, 1.3fr); gap: 2rem; }
    .pn-vienna__figure--portrait { width: 31%; height: 68%; }
}

@media (max-width: 900px) {
    html[data-pn-vienna="ready"] .pn-vienna { height: auto; }
    html[data-pn-vienna="ready"] .pn-vienna__stage { position: relative; top: auto; height: auto; min-height: 0; }
    html[data-pn-vienna="ready"] .pn-vienna__state { position: relative; inset: auto; visibility: visible; pointer-events: auto; }
    .pn-vienna__stage { min-height: 0; grid-template-rows: auto auto auto; }
    .pn-vienna__intro { grid-template-columns: 1fr; align-items: start; }
    .pn-vienna__lead { max-width: 44rem; }
    .pn-vienna__states { display: grid; gap: 5rem; }
    .pn-vienna__state { grid-template-columns: 1fr; min-height: 0; gap: 2rem; }
    .pn-vienna__copy { max-width: 40rem; }
    .pn-vienna__media { height: min(67vw, 34rem); min-height: 27rem; }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__media { height: min(95vw, 42rem); }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__figure--wide { inset: 0 0 27% 0; }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__figure--portrait { width: 43%; height: 44%; right: 3%; bottom: 0; }
    .pn-vienna__map { inset: 6rem -24rem auto auto; width: 60rem; opacity: .55; }
}

@media (max-width: 760px) {
    .pn-vienna__stage { padding: 5.5rem 1.15rem 5rem; gap: 2.25rem; }
    .pn-vienna__title { max-width: 10ch; font-size: clamp(2.65rem, 13vw, 4.4rem); }
    .pn-vienna__states { gap: 4.5rem; }
    .pn-vienna__index { font-size: 2.15rem; margin-bottom: .9rem; }
    .pn-vienna__copy h3 { max-width: 13ch; font-size: clamp(1.85rem, 8.4vw, 2.8rem); }
    .pn-vienna__media { height: min(118vw, 32rem); min-height: 24rem; }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__media { height: min(142vw, 38rem); }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__figure--wide { inset: 0 0 30% 0; }
    .pn-vienna__state[data-vienna-state="1"] .pn-vienna__figure--portrait { width: 56%; height: 42%; right: 5%; bottom: 0; }
    .pn-vienna__figure--residence { inset: 0 8% 13% 0; }
    .pn-vienna__figure--interior { width: 48%; height: 48%; }
    .pn-vienna__caption { font-size: .58rem; }
    .pn-vienna__exit::before { width: 72%; transform: rotate(-4deg); }
    .pn-visual-credits summary,
    .pn-visual-credits__body { width: calc(100% - 2rem); }
    .pn-visual-credits__body ul { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-vienna,
    html[data-pn-vienna="ready"] .pn-vienna { height: auto; }
    .pn-vienna__stage,
    html[data-pn-vienna="ready"] .pn-vienna__stage { position: relative; top: auto; height: auto; }
    .pn-vienna__states { display: grid; gap: clamp(4rem, 8vw, 7rem); }
    .pn-vienna__state,
    html[data-pn-vienna="ready"] .pn-vienna__state { position: relative; inset: auto; visibility: visible; pointer-events: auto; }
    .pn-vienna__map-route { stroke-dashoffset: 0; }
    .pn-vienna__map-node { transition: none; }
    .pn-vienna__figure img { transform: none; }
    .pn-vienna__figure--portrait { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
    .pn-vienna__exit { transition: none; }
    .pn-visual-credits__indicator { transition: none; }
}