@font-face {
    font-family: IRANSans;
    src: url('/client/themes/fa/main/fonts/IRANSansX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: iransansMedium;
    src: url('/client/themes/fa/main/fonts/IRANSansX-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap
}

:root {
    --ink: #004d50;
    --gold: #b68b43;
    --paper: #f1e7d3;
    --vh: 1vh
}

* {
    box-sizing: border-box
}

html {
    background: #f1e9d7;
    scrollbar-width: thin;
    scrollbar-color: #b58b43 #eee8dc
}

body {
    margin: 0;
    color: var(--ink);
    font-family: IRANSans, Tahoma, sans-serif;
    overflow: hidden
}

body.travel {
    overflow: hidden
}

body.arrived, body.departing {
    overflow: hidden
}

[hidden] {
    display: none !important
}

button {
    font: inherit
}

button {
    cursor: pointer
}

button:disabled {
    opacity: .6;
    cursor: wait
}

button:focus-visible, a:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px
}

#stage {
    position: fixed;
    inset: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate
}

#sky, #ending-sky {
    position: absolute;
    inset: -2px;
    background-size: cover;
    background-position: center;
    z-index: 0;
    will-change: transform, opacity
}

#sky {
    background-image: url("/client/themes/fa/main/img/biography/intro-sky.webp")
}

#ending-sky {
    opacity: 0;
    transform-origin: 75% 82%
}

#world {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

#intro-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transform-origin: 28% 50%
}

.intro-cloth {
    position: absolute;
    left: 3.75%;
    top: 0;
    width: 26.75%;
    height: 100%;
    object-fit: cover
}

.intro-gold {
    position: absolute;
    left: 9.4%;
    top: 20.3%;
    width: 5.625%;
    height: 47.3%;
    object-fit: fill
}

.intro-script {
    position: absolute;
    left: 30.5%;
    top: .5%;
    width: 24.4%;
    max-height: 17vh;
    object-fit: contain;
    object-position: left top;
    mix-blend-mode: multiply
}

.near-branch {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    object-fit: contain;
    will-change: opacity, transform
}

.branch-left {
    left: -6vw;
    bottom: -14vh;
    width: 55vw;
    filter: blur(1.5px);
    transform-origin: 8% 80%
}

.branch-right {
    right: -7vw;
    top: -18vh;
    width: 21vw;
    filter: blur(5px);
    transform-origin: 80% 8%
}

#edge-mist {
    position: absolute;
    inset: -9%;
    z-index: 4;
    pointer-events: none;
    filter: blur(16px);
    animation: mist-breathe 18s ease-in-out infinite alternate;
    will-change: opacity, transform
}

#travel-veil {
    position: absolute;
    inset: -10%;
    z-index: 6;
    pointer-events: none;
    filter: blur(18px);
    will-change: opacity;
    animation: mist-drift 25s ease-in-out infinite alternate
}

@keyframes mist-breathe {
    to {
        transform: translate(2%, -1%) scale(1.03)
    }
}

@keyframes mist-drift {
    to {
        transform: translate(-3%, 2%) scale(1.03)
    }
}

#intro {
    position: absolute;
    left: 53%;
    top: 19%;
    width: 34%;
    text-align: center;
    z-index: 4;
    will-change: transform, opacity
}

.intro-copy h1 {
    margin: 4.5rem 0 0
}

.intro-copy h1 img {
    width: 100%;
    max-width: 550px
}

.pendant {
    position: absolute;
    top: -20vh;
    left: calc(50% - 40px);
    width: 80px;
    height: 180px;
    object-fit: cover;
    object-position: top
}

.intro-name {
    font-size: clamp(16px, 1.75vw, 25px);
    font-weight: 500;
    margin: 1rem 0 .4rem
}

.intro-date {
    color: var(--gold);
    font-size: 18px;
    margin: .4rem
}

.intro-description {
    color: #776b56;
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 2;
    margin-top: 1.3rem
}

#start-panel {
    position: absolute;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: min(90%, 490px)
}

.gold-button {
    padding: 13px 27px;
    border: 1px solid #bd9558;
    border-radius: 999px;
    background: #fff9e8e8;
    color: var(--ink);
    box-shadow: 0 5px 22px #6f542520;
    font-weight: 500;
    transition: background .2s, transform .2s
}

.gold-button:hover {
    background: #e8dbb9;
    transform: translateY(-2px)
}

.gold-button span {
    margin-right: 14px;
    font-size: 22px
}

#start-panel p {
    font-size: 12px;
    color: #716756
}

#load-status {
    font-size: 10px;
    color: #8e7e64
}

#journey-hint {
    position: absolute;
    z-index: 8;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

#stations {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none
}

.station {
    position: absolute;
    left: 0;
    top: 0;
    direction: ltr;
    will-change: transform, opacity;
    pointer-events: none
}

.station-art {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 10px 22px #6760501a)
}

.station-art img {
    display: block;
    width: 100%;
    object-fit: contain;
    mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent)
}

.station-copy {
    direction: rtl;
    text-align: right
}

.glass {
    background: linear-gradient(125deg, #fffdf552, #fdf8e96b);
    border: 1px solid #ffffff94;
    border-radius: 21px;
    box-shadow: 0 12px 50px #68736c15, inset 0 1px 0 #ffffff99;
    backdrop-filter: blur(15px) saturate(1.1);
    -webkit-backdrop-filter: blur(15px) saturate(1.1)
}

.station h2 {
    margin: 0
}

.station-title {
    display: block;
    max-width: 100%;
    width: auto;
    margin: 0 0 8px auto;
    mix-blend-mode: multiply
}

.station .date {
    color: var(--gold);
    margin: 0 0 13px
}

.station h3 {
    color: var(--ink);
    margin: 0 0 14px
}

.reading-window {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b49b70 transparent
}

.reading-window p {
    margin: 0 0 .8rem
}

.read-indicator {
    color: #887859;
    margin: 6px 0
}

.timeline {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 11px;
    margin-top: 12px
}

.timeline div {
    flex: 1;
    text-align: center;
    line-height: 1.7
}

.timeline b {
    display: block;
    font-weight: 500;
    color: #a3793a;
    margin-bottom: 4px
}

#chapters {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-right: 14px
}

#chapters button {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    color: #81765f;
    font-size: 10px;
    text-align: right;
    max-width: 110px;
    line-height: 1.65
}

#chapters button::before {
    content: '';
    position: absolute;
    right: -19px;
    top: 4px;
    width: 8px;
    height: 8px;
    background: #efe5d1;
    border: 1px solid var(--gold);
    border-radius: 50%
}

#chapters button[aria-current=true] {
    color: var(--ink);
    font-weight: 500
}

#chapters button[aria-current=true]::before {
    background: var(--gold)
}

#top-controls {
    position: absolute;
    right: 22px;
    top: max(18px, env(safe-area-inset-top));
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px
}

#top-controls button {
    background: #f6eeddbb;
    border: 1px solid #c2a57180;
    color: #655942;
    border-radius: 16px;
    padding: 6px 10px
}

#chapter-caption {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 8
}

#ending {
    position: absolute;
    z-index: 8;
    text-align: center
}

#ending h2 {
    font-weight: 500
}

#ending .ending-kicker {
    color: #a7803d
}

#ending button {
    margin-top: 22px
}

#error {
    position: absolute;
    z-index: 20;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: min(90%, 520px);
    padding: 20px;
    background: #f6ecd9f5;
    border: 1px solid #b58e50;
    text-align: center;
    border-radius: 15px;
    font-size: 14px
}

#error button, #error a {
    display: inline-block;
    padding: 8px 12px;
    color: var(--ink);
    border: 1px solid #bb9e67;
    background: transparent;
    border-radius: 6px;
    margin: 4px
}

@media (max-width: 850px) {
    #ending-sky {
        background-position: 90% center
    }

    #chapters {
        right: 7px;
        padding-right: 9px;
        gap: 12px
    }

    #chapters button {
        font-size: 0;
        max-width: 8px;
        min-height: 12px
    }

    #chapters button::before {
        right: -14px;
        top: 2px
    }

    #intro {
        top: 21%;
        left: 46%;
        width: 49%
    }

    .intro-copy h1 {
        margin-top: 1.8rem
    }

    .intro-name {
        font-size: 14px
    }

    .intro-date {
        font-size: 12px
    }

    .intro-description {
        font-size: 10px;
        margin-top: 12px
    }

    .pendant {
        top: -21vh;
        width: 70px;
        left: calc(50% - 35px);
        height: 165px
    }

    .branch-left {
        width: 80vw;
        left: -24vw;
        bottom: -6vh
    }

    .branch-right {
        width: 30vw;
        right: -12vw;
        top: -8vh
    }

    .intro-cloth {
        left: 2%;
        width: 33%;
        height: 100%
    }

    .intro-gold {
        left: 5.5%;
        width: 6%;
        top: 25%;
        height: 40%
    }

    .intro-script {
        left: 35%;
        top: 2%;
        width: 22%;
        max-height: 14vh
    }

    #top-controls {
        right: 10px;
        gap: 5px;
        font-size: 9px
    }

    #top-controls button {
        padding: 5px 7px;
        font-size: 9px
    }

    #chapter-caption {
        line-height: 1.6
    }

    #journey-hint {
        bottom: 19px
    }

    .station-art img {
        height: 100%;
        width: 100%;
        max-height: 25vh
    }

    .station-copy {
        border-radius: 17px
    }

    .station-title {
        max-width: 95%
    }

    .timeline {
        gap: 8px
    }

    .gold-button {
        padding: 11px 22px;
        font-size: 13px
    }
}

@media (max-width: 520px) {
    #intro {
        left: 42%;
        width: 54%;
        top: 18%
    }

    .intro-copy h1 {
        margin-top: 2.9rem
    }

    .intro-name {
        font-size: 13px
    }

    .branch-left {
        width: 105vw;
        left: -35vw;
        bottom: -6vh
    }

    #start-panel p {
        font-size: 10px
    }
}

@media (max-height: 580px) and (min-width: 700px) {
    .station {
        width: 1000px;
        grid-template-columns:460px 450px;
        gap: 90px
    }

    .station-copy {
        padding: 14px 20px
    }

    .station-art {
        grid-column: 2;
        grid-row: 1;
        height: auto
    }

    .station-art img {
        max-height: 76vh
    }

    .station-title {
        max-height: 50px
    }

    .station .date {
        font-size: 10px;
        margin-bottom: 6px
    }

    .station h3 {
        font-size: 11px;
        margin-bottom: 7px
    }

    .reading-window {
        font-size: 12px;
        max-height: 34vh;
        line-height: 1.75
    }

    .timeline {
        margin-top: 7px;
        padding-top: 7px
    }

    .timeline div {
        font-size: 7px
    }

    .timeline b {
        font-size: 8px
    }

    #intro {
        top: 7%;
        width: 32%
    }

    .intro-copy h1 {
        margin-top: 2.2rem
    }

    .intro-name {
        font-size: 14px
    }

    .intro-description {
        font-size: 10px
    }

    .pendant {
        top: -24vh
    }

    #chapters {
        gap: 8px
    }

    #start-panel {
        bottom: 3vh
    }

    #start-panel p {
        margin: 5px
    }
}

@media (prefers-reduced-motion: reduce) {
    #edge-mist, #travel-veil {
        animation: none
    }

    .gold-button {
        transition: none
    }
}

#chapters {
    border-right: 0
}

.timeline {
    border-top: 0
}

#site-credit {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    white-space: nowrap
}

#journey-hint {
    bottom: auto;
    font-weight: 800;
    color: #004d50;
    text-shadow: 0 2px 22px #ffffff;
    transition: opacity .8s, filter .8s;
    pointer-events: none
}

#ending {
    opacity: 0;
    filter: blur(20px);
    will-change: opacity, filter, transform
}

@media (max-width: 1100px) {
    .station {
        width: 360px;
        grid-template-columns:1fr;
        gap: 12px
    }

    .station-art {
        grid-column: 1;
        grid-row: 1;
        height: 23vh
    }

    .station-art img {
        max-height: 23vh;
        height: 100%;
        object-fit: contain
    }

    .station-copy {
        grid-column: 1;
        grid-row: 2;
        padding: 14px 17px
    }

    .station-title {
        max-height: 52px
    }

    .station h3 {
        font-size: 11px
    }

    .reading-window {
        font-size: 12px;
        max-height: 29vh
    }

    #site-credit {
        font-size: 9px;
        bottom: 17px
    }

    #journey-hint {
        top: 14%;
        font-size: 18px
    }
}

@media (max-height: 580px) and (min-width: 1100px) {
    .station {
        width: 760px;
        grid-template-columns:360px 340px;
        gap: 60px
    }

    .station-art {
        grid-column: 2;
        grid-row: 1;
        height: auto
    }

    .station-art img {
        max-height: 74vh
    }

    .station-copy {
        grid-column: 1;
        grid-row: 1;
        padding: 12px 16px
    }

    .station-title {
        max-height: 48px
    }

    .station h3 {
        font-size: 11px
    }

    .reading-window {
        font-size: 12px;
        max-height: 34vh
    }
}

@media (prefers-reduced-motion: reduce) {
    #journey-hint {
        transition: none
    }
}

#stage {
    background: radial-gradient(ellipse at 78% 8%, #fff8d8 0%, #dae9eb 22%, #a9c9e1 56%, #d8e4ec 82%, #ede9dc 100%)
}

#sunlight {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background: conic-gradient(from 165deg at 73% 12%, transparent 0deg, #fff5c33d 12deg, transparent 22deg, #fff8d940 36deg, transparent 45deg, #fff1b52b 58deg, transparent 80deg), radial-gradient(ellipse at 73% 12%, #fff9d4aa, transparent 32%);
    filter: blur(8px)
}

@keyframes sunlight-drift {
    to {
        transform: rotate(2deg);
        opacity: .5
    }
}

#edge-mist {
    background: radial-gradient(ellipse at 50% 45%, transparent 52%, #f7f6ec30 75%, #f9f6ed55 100%)
}

#travel-veil {
    background: radial-gradient(ellipse at 15% 70%, #fff9ef9c, transparent 68%), radial-gradient(ellipse at 90% 12%, #f8fbf9a1, transparent 62%)
}

.station {
    width: 1000px;
    height: 640px;
    display: grid;
    grid-template-columns:530px 470px;
    gap: 0;
    align-items: center;
    isolation: isolate
}

.station-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: 100% 100%;
    background-position: center
}

.station-copy {
    grid-column: 1;
    grid-row: 1;
    margin: 25px 20px 25px 38px
}

.station-art {
    grid-column: 2;
    grid-row: 1;
    visibility: hidden;
    height: 600px
}

.station-art img {
    max-height: 600px
}

@media (max-width: 850px) {
    .station {
        width: 1000px;
        height: 640px;
        grid-template-columns:550px 450px;
        gap: 0
    }

    .station-art {
        grid-column: 2;
        grid-row: 1;
        height: 600px
    }

    .station-copy {
        grid-column: 1;
        grid-row: 1
    }
}

@media (max-height: 580px) and (min-width: 850px) {
    .station {
        width: 1000px;
        height: 640px;
        grid-template-columns:530px 470px;
        gap: 0
    }

    .station-art {
        grid-column: 2;
        grid-row: 1;
        height: 600px
    }

    .station-copy {
        grid-column: 1;
        grid-row: 1
    }

    .reading-window {
        max-height: 265px;
        font-size: 21px
    }

    .station-title {
        max-height: 80px
    }
}

@media (prefers-reduced-motion: reduce) {
    #sunlight {
        animation: none
    }
}

#edge-mist, #travel-veil {
    animation: none;
    opacity: 0
}

#load-status:empty {
    display: none
}

#journey-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    top: 11%;
    font-size: clamp(15px, 1.5vw, 21px)
}

.scroll-icon {
    width: 32px;
    height: 53px;
    filter: drop-shadow(0 1px 8px #fff)
}

@keyframes scroll-dot {
    0%, 100% {
        transform: translateY(0);
        opacity: .4
    }
    55% {
        transform: translateY(9px);
        opacity: 1
    }
}

@keyframes scroll-chevron {
    0%, 100% {
        opacity: .3;
        transform: translateY(-2px)
    }
    60% {
        opacity: 1;
        transform: translateY(2px)
    }
}

.station {
    transform-origin: 0 0;
    transition: none
}

.station.active {
    pointer-events: auto
}

#ending-sky {
    z-index: 0;
    background-image: none;
    inset: -7%;
    mask-image: radial-gradient(ellipse at 50% 51%, #000 37%, #000 57%, #000b3 70%, transparent 94%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 51%, #000 37%, #000 57%, #000b3 70%, transparent 94%)
}

#shrine-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 49% 55%
}

#ending {
    pointer-events: auto
}

@media (max-width: 850px) {
    #journey-hint {
        top: 12%;
        font-size: 16px
    }

    .scroll-icon {
        width: 27px;
        height: 46px
    }

    #ending-sky {
        inset: -9%
    }
}

@media (prefers-reduced-motion: reduce) {
}

#sunlight {
    opacity: .4;
    animation: none
}

#site-credit {
    font-size: clamp(9px, 1.2vw, 10px);
    font-weight: 700;
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 5px 13px;
    border-radius: 17px;
    border: 1px solid #ffffffb8;
    box-shadow: 0 4px 22px #1c53551a;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #004d50
}

#chapter-caption {
    padding: 8px 13px;
    color: #00585b;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #b78f568c;
    border-radius: 13px;
    background: linear-gradient(120deg, #fff8e5d9, #e8f3efb8);
    box-shadow: 0 4px 20px #22504d16;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    max-width: 38vw
}

#ending .gold-button {
    font-weight: 700
}

.station-copy {
    position: relative;
    z-index: 1;
    border-radius: 27px
}

.station-photo-glass {
    position: absolute;
    left: 55%;
    right: 3%;
    top: 6%;
    bottom: 6%;
    z-index: 0;
    pointer-events: none;
    border-radius: 30px;
    border: 2px solid #ffffff9c
}

.station .date {
    font-size: 20px
}

.read-indicator {
    font-size: 13px
}

.timeline b {
    font-size: 17px
}

@media (max-width: 850px) {
    #site-credit {
        font-size: 13px;
        padding: 8px 13px;
        bottom: 12px
    }

    #chapter-caption {
        top: 64px;
        bottom: auto;
        left: 10px;
        max-width: 46vw;
        font-size: 10px;
        padding: 7px 10px;
        border-radius: 12px
    }

    #ending {
        border-radius: 22px
    }

    .station-copy {
        padding: 14px 18px;
        margin: 12px 12px 12px 26px
    }
}

.station-copy {
    height: 590px;
    display: flex;
    flex-direction: column
}

.station-copy h2, .station-copy .date, .station-copy h3, .station-copy .timeline, .station-copy .read-indicator {
    flex: 0 0 auto
}

.reading-window {
    flex: 1;
    min-height: 75px
}

.station-copy h3 {
    margin-bottom: 10px
}

@media (max-width: 850px) {
    .station-copy {
        height: 610px
    }

    .station-title {
        margin-bottom: 4px
    }

    .station .date {
        margin-bottom: 7px
    }

    .station h3 {
        margin-bottom: 7px
    }

    .reading-window {
        min-height: 90px
    }

    .read-indicator {
        font-size: 24px;
        margin: 4px 0
    }

    .timeline div {
        font-size: 24px
    }

    .timeline b {
        font-size: 26px
    }

    .timeline {
        padding-top: 4px;
        margin-top: 4px
    }
}

#start-panel {
    bottom: max(92px, 12vh)
}

#start-panel p {
    margin: 15px 0 0;
    line-height: 1.8
}

.station-backdrop {
    mask-image: linear-gradient(to right, transparent 0%, transparent 49%, #000 57%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 49%, #000 57%, #000 95%, transparent 100%)
}

.station-copy {
    background: linear-gradient(125deg, #fff9e862, #fffbef40);
    border: 1px solid #fffdf540;
    box-shadow: 0 8px 35px #24443a08;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 15px 21px;
    color: #454d48
}

.station-photo-glass {
    background: #fff9df05;
    border-color: #fff9e52b;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.station-title {
    max-height: 89px
}

.station .date {
    font-weight: 700
}

.station h3 {
    font-weight: 700;
    font-size: 23px;
    line-height: 1.6
}

.reading-window {
    font-size: 23px;
    line-height: 1.85;
    max-height: 330px
}

.timeline div {
    font-size: 13px
}

#ending-sky {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transform: perspective(var(--film-perspective, 2000px)) rotateY(7deg) rotateX(-2deg) translateZ(0);
    contain: layout paint
}

#ending-sky.final-focus {
    animation: shrine-approach 32s cubic-bezier(.34, 0, .28, 1) both
}

@keyframes shrine-approach {
    from {
        transform: perspective(var(--film-perspective, 2000px)) translate3d(0, 0, 0) rotateY(7deg) rotateX(-2deg) scale(1)
    }
    to {
        transform: perspective(var(--film-perspective, 2000px)) translate3d(var(--focus-x, 0px), var(--focus-y, 0px), 0) rotateY(0deg) rotateX(0deg) scale(1.75)
    }
}

#ending {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 8%;
    border: 0;
    border-radius: 32px;
    box-shadow: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-shadow: 0 1px 12px #fff6e7;
    translate: -50% 0
}

#ending h2 {
    font-size: clamp(20px, 2vw, 30px);
    margin: 7px 0
}

#ending p {
    font-size: 11px;
    margin: 5px 0
}

#ending .ending-kicker {
    letter-spacing: 0
}

#ending .gold-button {
    margin-top: 9px;
    padding: 9px 17px;
    border: 0;
    border-radius: 17px;
    background: #fff9ee55;
    box-shadow: none;
    font-size: 13px
}

#finale-memories {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    perspective: 1400px;
    overflow: hidden
}

.memory-photo {
    position: absolute;
    margin: 0;
    transform-origin: center;
    will-change: transform, opacity;
    filter: drop-shadow(0 7px 11px #30241635)
}

.memory-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.memory-photo.placed {
    animation: photo-place .82s cubic-bezier(.22, .62, .24, 1) both
}

@keyframes photo-place {
    0% {
        opacity: 0;
        transform: translate3d(0, -24px, 90px) rotateX(12deg) rotateZ(calc(var(--photo-angle) - 3deg)) scale(1.025)
    }
    45% {
        opacity: 1
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(var(--photo-angle)) scale(1)
    }
}

@media (max-width: 850px) {
    #start-panel {
        bottom: max(83px, 11vh)
    }

    #start-panel p {
        font-size: 10px;
        margin-top: 12px
    }

    .station .date {
        font-size: 31px
    }

    .station h3 {
        font-size: 38px;
        line-height: 1.3
    }

    .reading-window {
        line-height: 1.45;
        max-height: 290px
    }

    .station-title {
        max-height: 88px
    }

    #ending {
        top: auto;
        bottom: 8%
    }

    #ending h2 {
        font-size: 21px
    }

    #ending p {
        font-size: 10px
    }

    .memory-photo {
        filter: drop-shadow(0 4px 6px #30241630)
    }
}

@media (prefers-reduced-motion: reduce) {
    #ending-sky.final-focus {
        animation-duration: 1ms
    }

    .memory-photo.placed {
        animation-name: photo-fade;
        animation-duration: .5s
    }

    @keyframes photo-fade {
        from {
            opacity: 0
        }
        to {
            opacity: 1
        }
    }
}

@media (max-width: 850px) {
    .reading-window {
        font-size: 58px
    }
}

body.stacked-slides .station {
    width: 1000px;
    height: 1160px;
    grid-template-columns:1fr;
    grid-template-rows:500px 632px;
    gap: 12px;
    padding: 8px 0;
    align-items: stretch
}

body.stacked-slides .station-backdrop, body.stacked-slides .station-photo-glass {
    display: none
}

body.stacked-slides .station-art {
    visibility: visible;
    grid-column: 1;
    grid-row: 1;
    height: 500px;
    padding: 8px 28px;
    filter: drop-shadow(0 7px 18px #40352420)
}

body.stacked-slides .station-art img {
    height: 100%;
    width: 100%;
    max-height: 500px;
    object-fit: contain;
    mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent)
}

body.stacked-slides .station-copy {
    grid-column: 1;
    grid-row: 2;
    margin: 0 24px;
    padding: 16px 28px;
    height: 632px;
    max-width: none;
    min-width: 0;
    text-align: right
}

body.stacked-slides .station-title {
    max-height: 92px;
    max-width: 100%;
    margin-bottom: 7px
}

body.stacked-slides .station .date {
    font-size: 31px;
    margin: 0 0 8px
}

body.stacked-slides .station h3 {
    font-size: 38px;
    line-height: 1.35;
    margin: 0 0 9px
}

body.stacked-slides .reading-window {
    font-size: 52px;
    line-height: 1.55;
    max-height: 340px;
    min-height: 140px
}

body.stacked-slides .read-indicator {
    font-size: 22px;
    margin: 5px 0
}

body.stacked-slides .timeline {
    gap: 12px;
    margin-top: 6px;
    padding-top: 4px
}

body.stacked-slides .timeline div {
    font-size: 23px
}

body.stacked-slides .timeline b {
    font-size: 26px
}

.station.departing-left {
    pointer-events: none;
    animation: martyr-depart-left 2.4s cubic-bezier(.35, 0, .25, 1) both
}

@keyframes martyr-depart-left {
    0% {
        translate: 0 0;
        opacity: 1
    }
    35% {
        opacity: .96
    }
    100% {
        translate: -125vw 0;
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .station.departing-left {
        animation-duration: .6s
    }
}

#cloud-world {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none
}

#world {
    z-index: 2
}

#journey-hint small {
    font-size: 12px;
    font-weight: 500
}

.scroll-up-dot {
    animation: scroll-up-cue 1.55s ease-in-out infinite
}

@keyframes scroll-up-cue {
    0% {
        transform: translateY(0);
        opacity: .2
    }
    20% {
        opacity: 1
    }
    85% {
        transform: translateY(-37px);
        opacity: 1
    }
    100% {
        transform: translateY(-37px);
        opacity: 0
    }
}

#ending {
    width: max-content;
    max-width: calc(100vw - 30px);
    padding: 15px;
    background: radial-gradient(ellipse, #fff9ec24 0%, #fff9ec10 50%, transparent 85%)
}

#site-credit {
    background: linear-gradient(125deg, #fffbef66, #e5f0e84d)
}

@media (max-width: 850px) {
    #ending {
        left: auto;
        right: 15px;
        translate: 0 0;
        width: max-content;
        max-width: calc(64vw - 30px);
        padding: 15px
    }

    #journey-hint small {
        font-size: 10px
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-up-dot {
        animation: none
    }
}

.station {
    contain: layout style;
    backface-visibility: hidden
}

.reading-window {
    contain: layout paint;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scroll-behavior: auto
}

#site-credit .credit-link {
    color: inherit;
    text-decoration: none;
    transition: color .2s
}

#site-credit .credit-link:hover, #site-credit .credit-link:focus-visible {
    color: #a37930
}

/* Small foreground render target. The bird stays crisp and cannot be covered by a station. */
#bird-world {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    pointer-events: none;
    will-change: transform;
    contain: strict
}

.station {
    contain: layout paint style;
    backface-visibility: hidden
}

.station-copy {
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.station-art, body.stacked-slides .station-art {
    filter: none
}

#ending.ending-visible {
    animation: ending-emerge 3.8s cubic-bezier(.35, 0, .25, 1) both
}

@keyframes ending-emerge {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: translateY(18px)
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0)
    }
}

@media (prefers-reduced-motion: reduce) {
    #ending.ending-visible {
        animation-duration: 1ms
    }
}


/* Bounded compositing area; road is vector rather than a low-resolution framebuffer. */
#stations {
    overflow: hidden;
    contain: strict
}

#route-world {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    contain: strict
}

#ending .ending-kicker {
    color: #003b40;
    font-weight: 800;
    font-size: clamp(13px, 1.2vw, 17px);
    text-shadow: 0 1px 4px #fffdf5, 0 0 12px #fffdf5
}

/* Original portrait keeps the same world-space perspective with a native image layer. */
#world {
    inset: auto;
    left: 0;
    top: 0;
    width: 1000px;
    height: 1145.03816794px;
    object-fit: fill;
    transform-origin: 0 0;
    will-change: transform, opacity;
    pointer-events: none;
    backface-visibility: hidden
}


/* Mobile readability: append after the existing tour.css rules. */
@font-face {
    font-family: IRANSans;
    src: url('/client/themes/fa/main/fonts/IRANSansX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Main reading paragraphs retain their regular weight. */
.station .date,
.station h3,
.station .timeline,
.station .timeline b,
.station .read-indicator {
    font-weight: 700;
}
.station h3,
.station .timeline,
.station .read-indicator {
    color: #003b40;
}
.station .date,
.station .timeline b {
    color: #76521d;
}
.intro-copy p,
#start-panel p,
#load-status,
.gold-button,
#chapters button,
#chapters button[aria-current=true],
#chapter-caption,
#journey-hint,
#journey-hint small,
#site-credit,
#ending p,
#resume-sound,
#resume-video {
    font-weight: 700;
}
.intro-name,
.intro-description,
#start-panel p,
#load-status,
.gold-button,
#chapter-caption,
#journey-hint,
#journey-hint small,
#ending p {
    color: #003b40;
}
.intro-date {
    color: #76521d;
}
#chapters button {
    color: #605039;
}

.reading-shell {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-height: 75px;
    overflow: hidden;
    border-radius: 12px;
}
.station .reading-shell > .reading-window {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    max-height: none;
    padding-inline-end: 12px;
    padding-block-end: .8em;
    scrollbar-width: auto;
    scrollbar-color: #826024 #eee6d5;
    scrollbar-gutter: stable;
}
.reading-window::-webkit-scrollbar {
    width: 16px;
}
.reading-window::-webkit-scrollbar-track {
    background: #eee6d5;
    border-radius: 20px;
}
.reading-window::-webkit-scrollbar-thumb {
    background: #826024;
    border: 3px solid #eee6d5;
    border-radius: 20px;
}
.reading-window::-webkit-scrollbar-thumb:hover {
    background: #5f461d;
}
.reading-shell::before,
.reading-shell::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    z-index: 2;
    height: 46px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.reading-shell::before {
    top: 0;
    background: linear-gradient(to bottom, #eee4ceeb, #eee4ce00);
}
.reading-shell::after {
    bottom: 0;
    background: linear-gradient(to bottom, #eee4ce00, #e5d6bce8);
}
.station.has-reading-overflow:not(.reading-at-start) .reading-shell::before,
.station.has-reading-overflow:not(.reading-at-end) .reading-shell::after {
    opacity: 1;
}
.station .read-indicator {
    line-height: 1.5;
}

/* Change only this font-size to tune the mobile footer credit. */
@media (max-width: 850px) {
    #site-credit {
        font-size: 10px;
        line-height: 1.7;
        padding: 5px 9px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    body.stacked-slides .station {
        height: 1500px;
        grid-template-rows: 650px 822px;
    }
    body.stacked-slides .station-art {
        height: 650px;
        padding: 4px 12px;
    }
    body.stacked-slides .station-art img {
        height: 100%;
        width: 100%;
        max-height: 650px;
        object-fit: contain;
        object-position: center;
        image-rendering: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
    body.stacked-slides .station-copy {
        height: 822px;
        margin-inline: 18px;
        padding: 16px 24px;
    }
    body.stacked-slides .station .date {
        font-size: 34px;
    }
    body.stacked-slides .station h3 {
        font-size: 34px;
    }
    body.stacked-slides .reading-shell {
        min-height: 140px;
    }
    body.stacked-slides .reading-window {
        line-height: 1.65;
    }
    body.stacked-slides .reading-window::-webkit-scrollbar {
        width: 24px;
    }
    body.stacked-slides .read-indicator {
        font-size: 30px;
    }
    body.stacked-slides .timeline div {
        font-size: 26px;
    }
    body.stacked-slides .timeline b {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reading-shell::before,
    .reading-shell::after {
        transition: none;
    }
}