/* ==========================================================================
   THE FAVOR AND THE DECREE — SACRED GOLD ART DIRECTION
   Loaded after the reconstructed base stylesheet so the original layout and
   interaction contracts remain intact while every visible cool accent is
   translated into the book's antique-gold, parchment, umber, and soot world.
   ========================================================================== */

:root {
    --ivory: #f8f2e5;
    --parchment: #efe5d2;
    --paper-aged: #e3d4bd;
    --gold-bright: #e3be7b;
    --gold-base: #ca9c54;
    --gold-dark: #7f572b;
    --umber: #4d3019;
    --umber-deep: #2e1d10;
    --charcoal: #1a120b;
    --soot: #0c0603;
    --ink: #23180f;
    --ink-muted: #6b5e52;
    --inverse: #f1eade;
    --warm-border: rgba(107, 94, 82, 0.26);
    --warm-shadow: rgba(12, 6, 3, 0.28);

    /* Preserve the base CSS API while changing its visual language. */
    --cream: var(--ivory);
    --cobalt: var(--gold-dark);
    --cobalt-dark: var(--umber);
    --dark: var(--charcoal);
    --text-light: var(--inverse);
    --text-dark: var(--ink);
    --award-bg: var(--parchment);
    --gallery-bg: var(--parchment);
    --border-color: var(--warm-border);
    --gold: var(--gold-base);
}

html {
    background: var(--soot);
    scrollbar-color: var(--gold-dark) var(--ivory);
}

body,
html {
    color: var(--ink);
    background-color: var(--ivory);
}

body::-webkit-scrollbar-track { background: var(--ivory); }
body::-webkit-scrollbar-thumb {
    background-color: rgba(127, 87, 43, 0.66);
    border-color: var(--ivory);
}
body::-webkit-scrollbar-thumb:hover { background-color: var(--gold-dark); }

::selection {
    color: var(--ivory);
    background: var(--gold-dark);
}

:where(a, button, input, textarea, .g-card-wrapper, .back-to-top, .modal-close):focus-visible {
    outline: 2px solid var(--gold-dark);
    outline-offset: 4px;
}

.interactive-showcase :where(a, button, input, textarea):focus-visible,
.c-blue-frame :where(a, button, input, textarea):focus-visible {
    outline-color: var(--gold-bright);
}

/* Fixed atmospheric layers */
#book-ambient,
.film-grain,
.story-vignette {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#book-ambient {
    z-index: 82;
    opacity: 0.72;
}

.film-grain {
    z-index: 83;
    opacity: 0.045;
    mix-blend-mode: soft-light;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E");
    /* Keep the film texture, but do not force a full-screen repaint twice a second. */
    animation: none;
}

.story-vignette {
    z-index: 81;
    box-shadow:
        inset 0 0 12vw rgba(12, 6, 3, 0.16),
        inset 0 -8vh 10vw rgba(12, 6, 3, 0.08);
}

.story-progress {
    position: fixed;
    top: 50%;
    right: clamp(12px, 1.4vw, 24px);
    width: 1px;
    height: min(34vh, 280px);
    z-index: 160;
    pointer-events: none;
    transform: translateY(-50%);
    background: rgba(227, 190, 123, 0.22);
}

.story-progress::before,
.story-progress::after {
    position: absolute;
    left: 50%;
    color: var(--gold-bright);
    font-family: "Cormorant Garamond", serif;
    font-size: 0.75rem;
    transform: translateX(-50%);
    text-shadow: 0 2px 10px var(--soot);
}

.story-progress::before { content: "✦"; top: -1.8rem; }
.story-progress::after { content: "✦"; bottom: -1.8rem; }

.story-progress-fill {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    background: linear-gradient(var(--gold-bright), var(--gold-base), var(--gold-dark));
    box-shadow: 0 0 14px rgba(227, 190, 123, 0.6);
}

/* Cursor */
.k-cursor-jewel-image {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.84))
        drop-shadow(0 3px 5px rgba(35, 17, 7, 0.38));
}

.k-cursor.is-white .k-cursor-jewel-image {
    filter:
        brightness(1.08)
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 5px rgba(227, 190, 123, 0.48))
        drop-shadow(0 3px 6px rgba(10, 5, 2, 0.44));
}

/* Hero */
.viewport-wrapper {
    background:
        radial-gradient(circle at 50% 48%, rgba(202, 156, 84, 0.22), transparent 48%),
        var(--soot);
}

.back-leaves img,
.front-leaves img {
    filter: sepia(0.34) saturate(0.82) contrast(1.04) brightness(0.82);
}

#real-blue-frame {
    background:
        radial-gradient(circle at 50% 44%, rgba(227, 190, 123, 0.24), transparent 54%),
        linear-gradient(135deg, var(--umber-deep), var(--soot));
    border: 1px solid rgba(227, 190, 123, 0.36);
    box-shadow:
        0 34px 90px rgba(12, 6, 3, 0.42),
        0 0 0 1px rgba(202, 156, 84, 0.12) inset;
}

.character-wrapper {
    border: 0;
    box-shadow: none;
}

.character-wrapper::after {
    background:
        linear-gradient(180deg, rgba(12, 6, 3, 0.2), transparent 24%, transparent 68%, rgba(12, 6, 3, 0.38)),
        radial-gradient(ellipse at center, transparent 48%, rgba(12, 6, 3, 0.28) 100%);
}

#loader-layer {
    color: var(--gold-bright);
    background:
        radial-gradient(circle at center, rgba(127, 87, 43, 0.28), transparent 42%),
        var(--soot);
}

.loader-progress-bar { background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); }
.loader-text { color: var(--inverse); letter-spacing: 0.3em; }

.desktop-text {
    max-width: 22rem;
    padding: 1rem 1.1rem 1.1rem;
    background: linear-gradient(90deg, rgba(12, 6, 3, 0.7), rgba(12, 6, 3, 0.18) 78%, transparent);
    border-left: 1px solid rgba(227, 190, 123, 0.55);
    text-shadow: 0 3px 18px var(--soot);
}

.info-title,
.info-links a,
.info-subtitle,
.artist-credit { color: var(--inverse); }
.info-links a:hover { color: var(--gold-bright); }

.editorial-title-layer {
    padding: 1.2vw;
    background: radial-gradient(ellipse at center, rgba(12, 6, 3, 0.36), transparent 72%);
}

.editorial-title-main {
    color: var(--gold-bright);
    background: linear-gradient(104deg, #f4ddb1 4%, var(--gold-bright) 36%, #fff1c8 52%, var(--gold-base) 80%);
    background-size: 230% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 14px 36px rgba(12, 6, 3, 0.48);
    animation: title-gilding 11s ease-in-out infinite;
}

.editorial-title-kicker,
.hero-scroll-indicator { color: var(--inverse); }
.editorial-title-kicker::before,
.hero-scroll-line::after { background: var(--gold-bright); }
.hero-scroll-line { background: rgba(227, 190, 123, 0.25); }

/* Providence / illuminated manuscript scene */
.award-scene {
    background:
        radial-gradient(circle at 52% 38%, rgba(255, 244, 215, 0.92), transparent 34%),
        var(--parchment);
}

.award-hero-bg img {
    filter: sepia(0.5) saturate(0.75) contrast(1.05) brightness(0.88);
}

.award-bg-overlay {
    background:
        linear-gradient(120deg, rgba(239, 229, 210, 0.26), rgba(239, 229, 210, 0.84) 62%, var(--parchment)),
        radial-gradient(circle at 50% 35%, rgba(227, 190, 123, 0.3), transparent 36%);
}

.bg-watermark {
    color: rgba(127, 87, 43, 0.08);
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
}

.floating-particles {
    opacity: 0.34;
    background-image: radial-gradient(var(--gold-base) 1px, transparent 1.5px);
    animation: illuminated-drift 18s linear infinite;
}

.top-accent-line,
.award-deadline-block::before { background: var(--gold-dark); }
.award-top-subtitle,
.deadline-text,
.deadline-day,
.award-logo,
.award-categories { color: var(--ink); }

.award-banner-backdrop { background: var(--gold-base); }
.award-image-banner {
    border: 1px solid rgba(127, 87, 43, 0.48);
    box-shadow: 0 32px 80px rgba(46, 29, 16, 0.28);
}
.award-image-banner img { filter: sepia(0.08) saturate(1.05) contrast(1.04); }
.award-word {
    color: var(--ink);
    text-shadow: 0 12px 32px rgba(248, 242, 229, 0.82), 0 6px 18px rgba(46, 29, 16, 0.24);
}
.award-cursive {
    color: var(--gold-bright);
    text-shadow: 0 3px 14px rgba(12, 6, 3, 0.78);
}
.deadline-number {
    -webkit-text-stroke-color: var(--umber-deep);
}
.deadline-author {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 4.4vw, 5rem);
    letter-spacing: 0.02em;
}
.deadline-surname {
    width: auto;
    min-width: 5.5rem;
    padding: 0 0.8rem;
    border-radius: 999px;
}

/* Gallery as a suspended illuminated archive */
.gallery-section,
.transition-master {
    background-color: var(--parchment);
    background-image:
        radial-gradient(circle at 13% 10%, rgba(179, 52, 73, 0.1), transparent 28%),
        radial-gradient(circle at 86% 84%, rgba(139, 112, 45, 0.13), transparent 31%),
        linear-gradient(145deg, rgba(255, 250, 240, 0.96), rgba(231, 216, 191, 0.86));
}

.gallery-section::before,
.transition-master::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -2%;
    width: 104%;
    height: clamp(22px, 3vw, 48px);
    z-index: 60;
    pointer-events: none;
    background: var(--paper-aged);
    transform: translateX(var(--tear-shift, 0%));
    clip-path: polygon(0 0,100% 0,100% 58%,97% 72%,94% 54%,90% 76%,86% 59%,82% 78%,77% 55%,72% 74%,68% 58%,63% 79%,58% 55%,53% 73%,48% 57%,42% 78%,37% 54%,32% 74%,27% 58%,22% 79%,17% 56%,12% 74%,7% 57%,3% 77%,0 63%);
    filter: drop-shadow(0 10px 9px rgba(46, 29, 16, 0.2));
}

.gallery-section::after {
    content: "";
    position: absolute;
    left: -20%;
    bottom: -12%;
    width: 140%;
    height: 40%;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 55%, rgba(248, 242, 229, 0.74), transparent 32%),
        radial-gradient(ellipse at 72% 58%, rgba(227, 190, 123, 0.22), transparent 38%);
    filter: blur(26px);
    animation: manuscript-mist 17s ease-in-out infinite alternate;
}

.gallery-back-wall img {
    filter: sepia(0.58) saturate(0.72) brightness(0.9) contrast(1.04);
}
.gallery-bg-text { color: rgba(127, 87, 43, 0.065); }
.interlude-line { background: var(--gold-dark); }
.interlude-title { color: var(--ink); }
.interlude-eng { color: var(--gold-dark); }

.g-top-tape,
.g-side-tape {
    background:
        repeating-linear-gradient(-45deg, rgba(227, 190, 123, 0.92) 0 4px, rgba(248, 242, 229, 0.94) 4px 8px, rgba(127, 87, 43, 0.78) 8px 12px);
}
.g-string { background: linear-gradient(var(--gold-dark), var(--gold-base), var(--gold-dark)); }
.g-card {
    background: linear-gradient(145deg, var(--ivory), var(--paper-aged));
    border: 1px solid rgba(127, 87, 43, 0.24);
}
.g-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 238, 195, 0.22) 49%, transparent 64%);
    transform: translateX(-120%);
    animation: card-gilding 8s ease-in-out infinite;
    will-change: transform;
}
.g-item:nth-child(2) .g-card-inner::after { animation-delay: -2s; }
.g-item:nth-child(3) .g-card-inner::after { animation-delay: -4s; }
.g-item:nth-child(4) .g-card-inner::after { animation-delay: -6s; }
.g-item:nth-child(5) .g-card-inner::after { animation-delay: -1s; }
.g-bottom-label {
    background: linear-gradient(var(--ivory), var(--parchment));
    border-color: rgba(127, 87, 43, 0.28);
}
.label-main { color: var(--ink); }
.label-sub { color: var(--gold-dark); }
.gallery-front-leaves img {
    filter: sepia(0.38) saturate(0.74) brightness(0.82) drop-shadow(25px 35px 35px rgba(46, 29, 16, 0.34));
}

/* Witness and chapter bridge */
.monolith {
    background:
        radial-gradient(circle at 50% 20%, rgba(127, 87, 43, 0.18), transparent 46%),
        var(--charcoal);
    box-shadow: 0 0 60px rgba(46, 29, 16, 0.35);
}
.pillar-text { color: var(--gold-bright); }
.outer-text-left { color: var(--ink); }
.outer-text-right { color: var(--ink-muted); }
.interactive-showcase { background: var(--soot); }
.cinematic-shadow {
    width: 72%;
    background: linear-gradient(90deg, rgba(12, 6, 3, 0.96), rgba(26, 18, 11, 0.76) 42%, transparent);
}
.chapter-watermark { color: rgba(227, 190, 123, 0.055); }
.ui-spine { border-right-color: rgba(227, 190, 123, 0.24); }
.spine-chapter,
.chat-title,
.block-bot .msg-name,
.chat-send-btn,
.ambience-label { color: var(--inverse); }
.spine-line,
.typing-dot { background: var(--gold-bright); }
.spine-eng,
.chat-subtitle { color: rgba(227, 190, 123, 0.72); }
.msg-bot { border-left-color: var(--gold-base); }
.msg-user { border-left-color: rgba(227, 190, 123, 0.42); }
.chat-input-area { border-color: rgba(227, 190, 123, 0.46); }
.ambience-switcher {
    background: rgba(12, 6, 3, 0.66);
    border-color: rgba(227, 190, 123, 0.28);
}

/* The Decree */
#scene-5 {
    background:
        radial-gradient(circle at 22% 38%, rgba(227, 190, 123, 0.18), transparent 38%),
        var(--parchment);
}
.s5-bg-image {
    filter: sepia(0.42) saturate(0.72) brightness(0.92);
}
.s5-bg-image::after {
    background:
        linear-gradient(100deg, rgba(239, 229, 210, 0.42), rgba(239, 229, 210, 0.82)),
        radial-gradient(circle at 20% 35%, rgba(227, 190, 123, 0.26), transparent 34%);
}
.systems-watermark {
    -webkit-text-stroke-color: rgba(127, 87, 43, 0.18);
    color: transparent;
}
.s5-hero-frame {
    background:
        linear-gradient(150deg, rgba(77, 48, 25, 0.94), rgba(12, 6, 3, 0.98));
    border: 1px solid rgba(227, 190, 123, 0.36);
    box-shadow: 0 28px 80px rgba(46, 29, 16, 0.34);
}
.s5-img-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 54%, rgba(12, 6, 3, 0.58));
}
.systems-title-main {
    color: var(--gold-bright);
    text-shadow: 0 8px 26px rgba(12, 6, 3, 0.68);
}
.systems-title-kicker,
.s5-meta-card { color: var(--inverse); }
.systems-title-kicker::before { background: var(--gold-bright); }
.s5-chapter-num { color: rgba(227, 190, 123, 0.72); }
.sys-id { color: var(--gold-dark); }
.sys-title,
.sys-value { color: var(--ink); }
.sys-label { color: var(--ink-muted); }
.sys-module:hover .sys-details { border-left-color: var(--gold-dark); }
.s5-spine-text {
    color: var(--gold-dark);
    background: rgba(239, 229, 210, 0.76);
}
.g-leaf { filter: sepia(0.36) saturate(0.82) drop-shadow(10px 15px 15px rgba(46, 29, 16, 0.18)); }

/* Closing / contact */
.contact-section {
    background-color: var(--parchment);
    background-image:
        linear-gradient(rgba(46, 29, 16, 0.18), rgba(239, 229, 210, 0.42)),
        url("/static/book/providence-mediterranean-night-v1.webp");
}
.contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(202, 156, 84, 0.055);
    backdrop-filter: sepia(0.82) saturate(0.68) hue-rotate(-7deg);
    -webkit-backdrop-filter: sepia(0.82) saturate(0.68) hue-rotate(-7deg);
}
.c-blue-frame {
    background:
        radial-gradient(circle at 68% 34%, rgba(202, 156, 84, 0.22), transparent 38%),
        linear-gradient(135deg, var(--umber-deep), var(--soot));
    border: 1px solid rgba(227, 190, 123, 0.38);
    box-shadow: 0 40px 90px rgba(12, 6, 3, 0.36), inset 0 0 0 1px rgba(227, 190, 123, 0.1);
}
.c-vert-line { background: var(--gold-bright); }
.c-vert-text,
.contact-hero-title { color: var(--gold-bright); }
.contact-hero-title {
    right: 1.5vw;
    font-size: clamp(3.6rem, 5.5vw, 7rem);
    text-shadow: 0 15px 42px rgba(12, 6, 3, 0.48);
}
.c-form-card {
    background:
        linear-gradient(rgba(248, 242, 229, 0.92), rgba(239, 229, 210, 0.88)),
        url("/static/book/providence-peony-v1.png") 116% 128% / 58% auto no-repeat;
    border: 1px solid rgba(127, 87, 43, 0.24);
    box-shadow: 0 40px 90px rgba(12, 6, 3, 0.3);
}
.c-form-title,
.input-group input:focus ~ .c-label-flex .c-label-eng,
.input-group textarea:focus ~ .c-label-flex .c-label-eng {
    color: var(--gold-dark);
}
.input-group input:focus,
.input-group textarea:focus { border-bottom-color: var(--gold-dark); }
.submit-btn {
    color: var(--inverse);
    background: var(--charcoal);
    border: 1px solid rgba(227, 190, 123, 0.22);
}
.submit-btn::before { background: var(--gold-dark); }

/* Footer and story modal */
.site-footer {
    background-color: var(--ivory);
    background-image:
        linear-gradient(rgba(77, 48, 25, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 48, 25, 0.035) 1px, transparent 1px);
}
.f-links a:hover,
.f-status span,
.btt-arrow-inner.hover { color: var(--gold-dark); }
.back-to-top:hover .btt-arrow { border-color: var(--gold-dark); }
.f-massive-text {
    color: var(--umber-deep);
    text-shadow: 0 12px 35px rgba(46, 29, 16, 0.12);
}
.project-modal {
    background-color: var(--ivory);
    background-image:
        linear-gradient(rgba(248, 242, 229, 0.84), rgba(239, 229, 210, 0.94)),
        url("/static/book/providence-blossom-spray-v1.png");
    background-repeat: no-repeat;
    background-size: cover, min(46vw, 720px) auto;
    background-position: center, -8% 108%;
}
.modal-close {
    color: var(--ink);
    background: rgba(248, 242, 229, 0.9);
    border-color: rgba(127, 87, 43, 0.18);
}
.modal-title { color: var(--umber-deep); }
.modal-asterisk,
.modal-details-list li::before { color: var(--gold-dark); }
.modal-left-col {
    background: rgba(248, 242, 229, 0.72);
    border: 1px solid rgba(127, 87, 43, 0.14);
}

/* Scroll-motion support */
.g-card-inner img,
.award-image-banner img,
.showcase-bg img,
.s5-img-main img,
.modal-right-col img {
    transform-origin: center;
    will-change: transform;
}

.story-dove {
    position: absolute;
    z-index: 43;
    top: 0;
    left: 0;
    width: clamp(172px, 22vw, 360px);
    aspect-ratio: 3 / 2;
    pointer-events: none;
    opacity: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    isolation: isolate;
}

.story-dove-aura {
    position: absolute;
    inset: 17% 13% 6%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 246, 206, 0.46), rgba(227, 190, 123, 0.16) 43%, transparent 72%);
    filter: blur(13px);
    transform: scale(0.92);
    animation: dove-aura-pulse 1.8s ease-in-out infinite alternate;
}

.story-dove-bank {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 54%;
    animation: dove-body-float 1.7s ease-in-out infinite alternate;
}

.story-dove-render-rig,
.story-dove-art {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    overflow: visible;
}

.story-dove-render-rig {
    z-index: 2;
    display: none;
    overflow: hidden;
    contain: layout paint;
}

.story-dove-art {
    z-index: 1;
    opacity: 0.72;
}

.story-dove.has-rendered-dove .story-dove-render-rig { display: block; }

.story-dove.has-rendered-dove .story-dove-art { display: none; }

.dove-flight-atlas {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 400%;
    max-width: none;
    object-fit: fill;
    object-position: left top;
    backface-visibility: hidden;
    pointer-events: none;
    user-select: none;
    will-change: transform;
}

.dove-wing {
    transform-box: fill-box;
    animation-duration: 720ms;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
    animation-iteration-count: infinite;
    animation-play-state: paused;
    will-change: transform;
}

.story-dove.is-flying .dove-wing { animation-play-state: running; }
.story-dove.has-rendered-dove.is-flying .dove-wing { animation-play-state: paused; }

.dove-wing-left {
    transform-origin: 96% 72%;
    animation-name: dove-wing-left;
}

.dove-wing-right {
    transform-origin: 4% 72%;
    animation-name: dove-wing-right;
    animation-delay: -38ms;
}

.dove-wing-shape {
    fill: url("#doveWingPearl");
    stroke: rgba(112, 78, 42, 0.46);
    stroke-width: 1.5;
}

.dove-wing-light {
    fill: none;
    stroke: rgba(255, 255, 249, 0.72);
    stroke-width: 7;
    stroke-linecap: round;
}

.dove-feather-line {
    fill: none;
    stroke: rgba(112, 78, 42, 0.29);
    stroke-width: 2;
    stroke-linecap: round;
}

.dove-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: dove-breath 1.15s ease-in-out infinite alternate;
}

/* Animation definitions */
@keyframes book-grain {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-1.4%, 0.8%, 0); }
    50% { transform: translate3d(0.9%, -1.1%, 0); }
    75% { transform: translate3d(1.2%, 1%, 0); }
    100% { transform: translate3d(-0.8%, -0.6%, 0); }
}
@keyframes title-gilding {
    0%, 18%, 100% { background-position: 100% 50%; }
    54%, 70% { background-position: 0% 50%; }
}
@keyframes illuminated-drift {
    from { background-position: 0 0; }
    to { background-position: 80px -120px; }
}
@keyframes manuscript-mist {
    from { transform: translate3d(-4%, 0, 0) scale(1); opacity: 0.58; }
    to { transform: translate3d(5%, -4%, 0) scale(1.08); opacity: 0.82; }
}
@keyframes card-gilding {
    0%, 64% { transform: translateX(-125%); }
    82%, 100% { transform: translateX(125%); }
}
@keyframes dove-wing-left {
    0%, 100% { transform: rotate(2deg) translate3d(0, 0, 0) scaleY(1); }
    26% { transform: rotate(-10deg) translate3d(3px, -8px, 0) scaleY(0.86); }
    53% { transform: rotate(5deg) translate3d(-1px, 5px, 0) scaleY(1.06); }
    76% { transform: rotate(-3deg) translate3d(1px, -2px, 0) scaleY(0.97); }
}
@keyframes dove-wing-right {
    0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 0) scaleY(1); }
    26% { transform: rotate(10deg) translate3d(-3px, -8px, 0) scaleY(0.86); }
    53% { transform: rotate(-5deg) translate3d(1px, 5px, 0) scaleY(1.06); }
    76% { transform: rotate(3deg) translate3d(-1px, -2px, 0) scaleY(0.97); }
}
@keyframes dove-body-float {
    from { transform: translate3d(0, 1.5px, 0) rotate(-0.45deg); }
    to { transform: translate3d(0, -2px, 0) rotate(0.45deg); }
}
@keyframes dove-breath {
    from { transform: scaleY(0.992); }
    to { transform: scaleY(1.008); }
}
@keyframes dove-aura-pulse {
    from { opacity: 0.45; transform: scale(0.9); }
    to { opacity: 0.86; transform: scale(1.06); }
}

@media screen and (max-width: 768px) {
    .story-progress {
        right: 8px;
        height: 22vh;
        opacity: 0.66;
    }
    .film-grain { opacity: 0.032; }
    .story-vignette { box-shadow: inset 0 0 18vw rgba(12, 6, 3, 0.14); }
    .desktop-text { background: none; border: 0; }
    .mobile-text {
        color: var(--inverse) !important;
        background: linear-gradient(90deg, rgba(12, 6, 3, 0.72), rgba(12, 6, 3, 0.16), transparent);
        border-left: 1px solid rgba(227, 190, 123, 0.5);
    }
    .mobile-text .info-title,
    .mobile-text .info-links a,
    .mobile-text .info-subtitle,
    .mobile-text .artist-credit { color: var(--inverse) !important; }
    .deadline-author { font-size: clamp(1.8rem, 10vw, 3rem); }
    .deadline-surname { min-width: 4.6rem; padding: 0 0.55rem; }
    .gallery-section::before,
    .transition-master::before { height: 22px; }
    .story-dove { width: clamp(148px, 44vw, 220px); }
    .systems-title-main { font-size: clamp(1.35rem, 6.2vw, 2.2rem) !important; }
    .contact-hero-title {
        right: 5vw;
        font-size: clamp(2.55rem, 12vw, 3.8rem);
    }
    .c-form-card { background-color: rgba(248, 242, 229, 0.97) !important; }
}

@media (prefers-reduced-motion: reduce) {
    #book-ambient,
    .film-grain,
    .story-dove { display: none !important; }
    .editorial-title-main,
    .floating-particles,
    .gallery-section::after,
    .g-card-inner::after,
    .witness-lumen,
    .witness-atmosphere::before,
    .witness-embers i,
    .witness-ready-mark,
    .witness-voice-icon i,
    .witness-prompt-chip,
    .chat-block,
    .chat-block:last-child .msg-bot,
    .chat-input-area::after,
    .typing-dot,
    .audio-bar,
    .scroll-indicator { animation: none !important; }
    .g-card-inner img,
    .award-image-banner img,
    .showcase-bg img,
    .showcase-foreground-wrapper,
    .s5-img-main img { transform: none !important; }
    .fg-img.active { animation: none !important; }
    .witness-embers { display: none !important; }
    .showcase-video-layer,
    .showcase-avatar-layer {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    .chat-input-area { border-color: rgba(240, 200, 117, 0.74); }
    .typing-indicator::after {
        content: "Listening…";
        color: rgba(253, 251, 242, 0.72);
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }
    .typing-dot { display: none !important; }
}

/* =========================================================
   CINEMATIC SACRED THRESHOLD
   An original Providence-path loader and gate entrance.
   ========================================================= */
#loader-layer {
    z-index: 60;
    display: grid;
    place-items: center;
    overflow: hidden;
    clip-path: none;
    background:
        radial-gradient(circle at 50% 54%, rgba(123, 83, 39, 0.13), transparent 34%),
        #080601;
}

.loader-content {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    color: #d9b875;
    transform-origin: center;
}

.loader-wordmark {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-inline: 6vw;
    box-sizing: border-box;
    transform: none;
    text-align: center;
    text-shadow: 0 0 32px rgba(206, 162, 84, 0.18);
}

.loader-wordmark-the {
    margin-bottom: -0.18em;
    font-family: "Dancing Script", "Cormorant Garamond", serif;
    font-size: clamp(1.25rem, 2.1vw, 2.2rem);
    font-weight: 400;
    color: rgba(244, 225, 185, 0.8);
}

.loader-wordmark-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1rem, 1.8vw, 1.65rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(244, 225, 185, 0.74);
}

.loader-path-window {
    position: absolute;
    top: 42%;
    left: 0;
    width: 100%;
    height: min(36vh, 390px);
    overflow: hidden;
    background-image: url('/static/book/providence-loader-line-v1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: max(100vw, 1160px) auto;
    opacity: 1;
    filter:
        sepia(0.72)
        saturate(1.08)
        brightness(2.1)
        contrast(1.08)
        drop-shadow(0 0 1px rgba(255, 228, 165, 0.58))
        drop-shadow(0 1px 0 rgba(239, 198, 121, 0.24))
        drop-shadow(0 -1px 0 rgba(239, 198, 121, 0.18))
        drop-shadow(0 0 7px rgba(219, 174, 95, 0.28));
    mix-blend-mode: screen;
    will-change: clip-path;
}

.loader-text {
    position: absolute;
    bottom: clamp(11vh, 13vh, 150px);
    left: 50%;
    width: min(84vw, 520px);
    margin: 0;
    transform: translateX(-50%);
    color: rgba(244, 225, 185, 0.68);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(0.62rem, 0.72vw, 0.78rem);
    font-weight: 400;
    letter-spacing: 0.32em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.threshold-layer {
    --gate-width: max(100vw, 177.8vh);
    position: absolute;
    inset: 0;
    z-index: 32;
    overflow: hidden;
    isolation: isolate;
    perspective: 1500px;
    pointer-events: auto;
    background: transparent;
}

.threshold-layer[data-state="opening"],
.threshold-layer[data-state="open"] {
    pointer-events: none;
}

.threshold-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 4, 1, 0.78) 0%, rgba(21, 11, 4, 0.36) 48%, rgba(8, 4, 1, 0.66) 100%),
        linear-gradient(180deg, rgba(10, 5, 2, 0.34), transparent 42%, rgba(8, 4, 1, 0.5)),
        radial-gradient(circle at 52% 48%, rgba(230, 183, 95, 0.1), rgba(8, 4, 1, 0.42) 68%);
    backdrop-filter: sepia(0.42) saturate(0.7) brightness(0.6);
}

/* The moving 1440p film is already color-graded. Re-filtering every decoded
   frame through a viewport-sized backdrop blur caused the opening hitch. */
.threshold-layer[data-state="opening"] .threshold-veil,
.threshold-layer[data-state="open"] .threshold-veil {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.threshold-light {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: min(72vw, 980px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(0.52);
    background: radial-gradient(circle, rgba(255, 236, 178, 0.94) 0%, rgba(226, 176, 91, 0.36) 26%, transparent 68%);
    filter: blur(18px);
    mix-blend-mode: screen;
}

.threshold-gate {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.threshold-gate--left {
    clip-path: inset(0 50% 0 0);
    transform-origin: left center;
}

.threshold-gate--right {
    clip-path: inset(0 0 0 50%);
    transform-origin: right center;
}

.threshold-gate img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--gate-width);
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    user-select: none;
    filter:
        sepia(0.12)
        saturate(0.9)
        brightness(0.73)
        contrast(1.14)
        drop-shadow(0 18px 36px rgba(0, 0, 0, 0.78));
}

.threshold-layer[data-state="ready"] .threshold-gate img { animation: none; }

.threshold-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: min(78vw, 980px);
    transform: translate(-50%, -50%);
    color: #fff2d2;
    text-align: center;
    text-shadow: 0 8px 34px rgba(5, 2, 0, 0.86);
}

.threshold-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-weight: 400;
}

.threshold-title-the {
    position: relative;
    z-index: 2;
    margin: 0 0 -0.23em;
    font-family: "Dancing Script", "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5.6vw, 6.8rem);
    font-weight: 400;
    line-height: 0.9;
    color: #fff4da;
}

.threshold-title-main {
    display: block;
    max-width: 10.5ch;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(4.3rem, 7.7vw, 9.1rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.76;
    text-wrap: balance;
    text-transform: uppercase;
    color: #f8e8c1;
}

.threshold-enter {
    position: relative;
    min-width: 148px;
    margin-top: clamp(2.2rem, 4.4vh, 3.5rem);
    padding: 0.9rem 2rem 0.84rem;
    border: 1px solid rgba(225, 181, 98, 0.68);
    border-radius: 999px;
    color: #f5dfb0;
    background: rgba(20, 10, 3, 0.3);
    box-shadow:
        0 0 0 1px rgba(255, 235, 190, 0.05) inset,
        0 12px 38px rgba(0, 0, 0, 0.24);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}

.threshold-enter:disabled {
    cursor: wait;
}

.threshold-enter:not(:disabled):hover,
.threshold-enter:not(:disabled):focus-visible {
    color: #fff9e9;
    border-color: rgba(255, 225, 158, 0.94);
    background: rgba(131, 88, 38, 0.28);
    box-shadow:
        0 0 0 1px rgba(255, 236, 194, 0.12) inset,
        0 0 34px rgba(220, 166, 76, 0.26);
}

.threshold-enter:focus-visible {
    outline: 2px solid rgba(255, 238, 199, 0.96);
    outline-offset: 5px;
}

.character-wrapper .opening-couple-video {
    clip-path: inset(0) !important;
    transform: scale(1) translateZ(0);
}

/* Final-frame title relocated from the removed cream award screen. */
.opening-end-title {
    position: absolute;
    top: calc(50% - 50vh);
    left: calc(50% - 50vw);
    z-index: 18;
    width: 100vw;
    height: 100vh;
    color: #fff2d5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-shadow: 0 5px 22px rgba(10, 4, 1, 0.9);
    isolation: isolate;
}

.opening-end-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: min(64vw, 940px);
    height: 57vh;
    background: radial-gradient(ellipse at 12% 86%, rgba(13, 6, 2, 0.66), rgba(13, 6, 2, 0.28) 46%, transparent 76%);
}

.opening-end-title-lockup {
    position: absolute;
    top: 51%;
    left: clamp(42px, 5.2vw, 100px);
    width: min(48vw, 720px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.opening-title-rule {
    position: absolute;
    top: 0.24rem;
    left: -1.35rem;
    width: 1px;
    height: 92%;
    background: linear-gradient(180deg, #f5d995, rgba(245, 217, 149, 0.08));
    box-shadow: 0 0 15px rgba(240, 195, 105, 0.28);
}

.opening-title-line {
    overflow: hidden;
    line-height: 0.83;
}

.opening-title-line span {
    display: block;
}

.opening-title-kicker {
    margin: 0 0 -0.22em 0.12em;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(0.74rem, 1.18vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.48em;
}

.opening-title-primary {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(4.6rem, 7.7vw, 9rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    color: #f8e4b4;
}

.opening-title-script {
    position: relative;
    z-index: 2;
    margin: -0.16em 0 -0.27em clamp(1.4rem, 5.2vw, 5.8rem);
    font-family: "Dancing Script", "Cormorant Garamond", serif;
    font-size: clamp(1.75rem, 3.2vw, 3.9rem);
    font-weight: 400;
    line-height: 1;
    color: #f0bf60;
    white-space: nowrap;
    text-shadow: 0 4px 18px rgba(10, 4, 1, 0.92), 0 0 18px rgba(230, 171, 72, 0.18);
}

.opening-title-decree {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.2rem, 4vw, 4.9rem);
    font-weight: 800;
    letter-spacing: -0.065em;
    color: #fff3d8;
    white-space: nowrap;
}

.opening-title-author {
    position: absolute;
    left: clamp(42px, 5.2vw, 100px);
    bottom: clamp(34px, 5.2vh, 64px);
    display: flex;
    align-items: center;
    gap: clamp(0.55rem, 1.1vw, 1.2rem);
    color: #f8e9ca;
}

.opening-author-by {
    padding-left: 0.85rem;
    border-left: 1px solid rgba(239, 193, 104, 0.8);
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(0.58rem, 0.72vw, 0.78rem);
    letter-spacing: 0.28em;
}

.opening-author-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.2rem, 4vw, 4.8rem);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 0.8;
}

.opening-author-surname {
    padding: 0.56rem 0.86rem 0.48rem;
    border: 1px solid rgba(242, 211, 151, 0.58);
    border-radius: 999px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(0.5rem, 0.64vw, 0.7rem);
    letter-spacing: 0.16em;
}

.text-frame-wrapper,
.editorial-title-wrapper,
.mobile-text-layer {
    display: none !important;
}

.award-word-3 {
    font-size: 7vw;
    white-space: nowrap;
}

.f-massive-text {
    font-size: clamp(3.4rem, 10.8vw, 12rem) !important;
    line-height: 0.82 !important;
}

@keyframes threshold-metal-breathe {
    from {
        filter:
            sepia(0.12)
            saturate(0.86)
            brightness(0.7)
            contrast(1.14)
            drop-shadow(0 18px 36px rgba(0, 0, 0, 0.78));
    }
    to {
        filter:
            sepia(0.08)
            saturate(0.98)
            brightness(0.82)
            contrast(1.1)
            drop-shadow(0 22px 44px rgba(0, 0, 0, 0.7));
    }
}

@media screen and (max-width: 768px) {
    .loader-wordmark {
        width: 100%;
        padding-inline: 7vw;
    }

    .loader-wordmark-the { font-size: clamp(1.35rem, 7vw, 2rem); }
    .loader-wordmark-title {
        max-width: 18rem;
        font-size: clamp(0.78rem, 3.5vw, 1rem);
        letter-spacing: 0.16em;
        line-height: 1.2;
    }

    .loader-path-window {
        top: 39%;
        height: 38vh;
    }

    .loader-path-window { background-size: 238vw auto; }
    .loader-text {
        bottom: 12vh;
        font-size: 0.58rem;
        letter-spacing: 0.24em;
    }

    .threshold-layer { --gate-width: max(178vw, 177.8vh); }

    .threshold-copy {
        top: 33%;
        left: 50%;
        width: min(88vw, 520px);
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .threshold-title { align-items: center; }
    .threshold-title-the {
        margin: 0 0 -0.2em;
        font-size: clamp(2.7rem, 14vw, 4.4rem);
    }
    .threshold-title-main {
        max-width: 9ch;
        font-size: clamp(3.1rem, 13vw, 5.5rem);
        line-height: 0.78;
    }
    .threshold-enter {
        min-width: 132px;
        margin-top: 2.2rem;
        padding: 0.82rem 1.7rem 0.78rem;
        font-size: 0.64rem;
    }

    .opening-end-title::before {
        width: 100vw;
        height: 56vh;
        background: linear-gradient(180deg, transparent, rgba(12, 5, 2, 0.36) 28%, rgba(12, 5, 2, 0.72));
    }

    .opening-end-title-lockup {
        top: 57%;
        left: 7vw;
        width: 86vw;
    }

    .opening-title-rule {
        left: -3.2vw;
    }

    .opening-title-kicker {
        font-size: clamp(0.66rem, 3.5vw, 0.86rem);
    }

    .opening-title-primary {
        font-size: clamp(4rem, 18vw, 5.5rem);
    }

    .opening-title-script {
        margin-left: 12vw;
        font-size: clamp(1.75rem, 8.4vw, 2.75rem);
    }

    .opening-title-decree {
        font-size: clamp(1.82rem, 8.2vw, 2.65rem);
    }

    .opening-title-author {
        left: 7vw;
        bottom: 5.2vh;
        gap: 0.55rem;
    }

    .opening-author-name {
        font-size: clamp(2.25rem, 11vw, 3.2rem);
    }

    .opening-author-surname {
        padding: 0.42rem 0.6rem 0.36rem;
        font-size: clamp(0.43rem, 2vw, 0.58rem);
    }

    .award-word-3 { font-size: clamp(2rem, 8vw, 3.5rem); }
    .f-massive-text { font-size: clamp(2.25rem, 11vw, 4.5rem) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .threshold-gate img { animation: none !important; }
    .loader-path-window { clip-path: inset(0) !important; }
    .opening-end-title,
    .opening-end-title * { transition: none !important; }
}