:root{
    --ink:#07070a;
    --ink-deep:#020203;
    --chosen:#C9A84C;      /* gold — same tone as the Sylvarra crest */
    --consumed:#B98CFF;    /* violet — those consumed by them */
    --facet:#F0DCA0;       /* light gold shimmer highlight */
    --fog:rgba(255,255,255,0.72);
    --fog-dim:rgba(255,255,255,0.45);
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Cormorant Garamond', serif;
    color: var(--fog);
    background: var(--ink);
    overflow-x: hidden;
}

/* HERO */
.hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content:"";
    position:absolute;
    width:110%;
    height:110%;
    left:-5%; top:-5%;
    background:url('background.jpg') center/cover no-repeat;
    animation:zoom 22s infinite alternate;
    z-index:1;
}

.overlay {
    position:absolute;
    width:100%;
    height:100%;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.78) 75%),
        linear-gradient(180deg, rgba(2,2,3,0.4) 0%, rgba(2,2,3,0.75) 100%);
    z-index:2;
}

.content {
    position:relative;
    z-index:3;
    text-align:center;
    top:50%;
    transform:translateY(-50%);
    padding:20px;
    animation:fade 2s ease forwards;
}

/* WORDMARK — fractured crystal */
.wordmark {
    position:relative;
    display:inline-block;
    font-family:'Cinzel', serif;
    font-weight:700;
    font-size:4.4rem;
    letter-spacing:10px;
    line-height:1;
    background:linear-gradient(100deg,
        var(--chosen) 0%, var(--chosen) 42%,
        var(--facet) 49%, var(--facet) 51%,
        var(--consumed) 58%, var(--consumed) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 7s ease-in-out infinite;
    filter:drop-shadow(0 0 30px rgba(201,168,76,0.18)) drop-shadow(0 0 30px rgba(185,140,255,0.14));
}

.crack {
    display:block;
    width:min(520px, 78%);
    height:14px;
    margin:2px auto 0;
    opacity:0.85;
}
.crack path{
    fill:none;
    stroke-width:1.4;
    stroke:url(#crackGradient);
    stroke-dasharray:340;
    stroke-dashoffset:340;
    animation:draw 2.4s 0.4s ease forwards, pulse 5s 3s ease-in-out infinite;
}

.subtitle {
    margin:22px 0 6px;
    font-size:1.3rem;
    font-weight:400;
    letter-spacing:0.3px;
}

.subtitle strong {
    font-style:italic;
    font-weight:500;
    background:linear-gradient(90deg, var(--chosen), var(--facet) 50%, var(--consumed));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.coming {
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:4px;
    color:var(--fog-dim);
    margin: 18px 0 8px;
}

.chapter {
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:3px;
    color:var(--fog-dim);
    margin-bottom:22px;
}

video {
    width:80%;
    max-width:800px;
    border-radius:10px;
    margin:6px 0 26px;
    box-shadow:0 0 50px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06);
}

.trailer-click {
    cursor:zoom-in;
    transition:box-shadow 0.3s ease;
}
.trailer-click:hover {
    box-shadow:0 0 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,168,76,0.35);
}

.trailer-hint {
    margin:-16px 0 20px;
    font-family:'Jost', sans-serif;
    font-size:0.68rem;
    letter-spacing:1.5px;
    color:var(--fog-dim);
    opacity:0.75;
}

/* BUTTONS */
.btn {
    display:inline-block;
    margin:6px;
    padding:13px 30px;
    border-radius:3px;
    text-decoration:none;
    font-family:'Jost', sans-serif;
    font-weight:500;
    font-size:0.85rem;
    letter-spacing:2px;
    cursor:pointer;
    transition:0.3s;
}

.btn-main {
    background:linear-gradient(45deg, var(--chosen), var(--facet));
    color:#221806;
}
.btn-main:hover { transform:scale(1.04); box-shadow:0 0 24px rgba(201,168,76,0.35); }

.btn-sound {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.28);
    color:var(--fog);
    font-size:0.78rem;
}
.btn-sound:hover { background:rgba(255,255,255,0.14); }

/* Used for the three offer-card buttons: identical height, neutral by
   default, gold only on hover (instead of one card being gold at rest). */
.offer-btn {
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.28);
    color:var(--fog);
    font-size:0.82rem;
}
.offer-btn:hover {
    background:linear-gradient(45deg, var(--chosen), var(--facet));
    border-color:transparent;
    color:#221806;
    transform:scale(1.04);
    box-shadow:0 0 24px rgba(201,168,76,0.35);
}

.footer-text {
    margin-top:16px;
    font-style:italic;
    color:var(--fog-dim);
    line-height:1.6;
}

.scroll {
    position:absolute;
    bottom:22px;
    width:100%;
    text-align:center;
    color:var(--fog-dim);
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:2px;
    z-index:3;
}

/* CHAPTER SECTION */
.section {
    min-height:55vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px 80px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.05), transparent 60%),
        var(--ink-deep);
}

.section h2 {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:2.1rem;
    letter-spacing:2px;
    color:var(--fog);
}

.section p {
    max-width:560px;
    margin:20px auto 0;
    font-size:1.25rem;
    line-height:1.7;
    color:var(--fog-dim);
}

.cta-teil1 {
    margin-top:38px;
}

.cta-teil1 .btn-main {
    padding:15px 40px;
    font-size:0.9rem;
}

.next-book {
    margin-top:46px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.next-book-title {
    font-family:'Cinzel', serif;
    font-size:1rem;
    letter-spacing:1px;
    color:var(--fog-dim);
}

.next-book-status {
    font-family:'Jost', sans-serif;
    font-size:0.7rem;
    letter-spacing:3px;
    color:var(--consumed);
    margin-top:8px;
}

.closing-logo {
    display:block;
    width:300px; /* fallback if JS hasn't run yet */
    max-width:85%;
    height:auto;
    margin:44px auto 0;
    opacity:0.92;
}

/* ANIMATIONS */
@keyframes zoom { from{transform:scale(1);} to{transform:scale(1.1);} }
@keyframes fade { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(-50%);} }
@keyframes shimmer {
    0%,100% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
}
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes pulse {
    0%,100% { opacity:0.55; }
    50% { opacity:1; }
}

@media(max-width:768px){
    .wordmark { font-size:2.4rem; letter-spacing:6px; }
    .subtitle { font-size:1.05rem; }
    video { width:95%; }
    .section h2 { font-size:1.6rem; }
}

@media (prefers-reduced-motion: reduce){
    .hero::before, .wordmark, .content, .crack path { animation:none !important; }
}

/* ============================= */
/* TEIL I PAGE                    */
/* ============================= */

.subhero {
    position:relative;
    padding:120px 20px 70px;
    text-align:center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(185,140,255,0.08), transparent 60%),
        var(--ink);
    border-bottom:1px solid rgba(255,255,255,0.06);
}

.nav-home {
    position:absolute;
    top:28px; left:28px;
    font-family:'Jost', sans-serif;
    font-size:0.75rem;
    letter-spacing:2px;
    color:var(--fog-dim);
    text-decoration:none;
}
.nav-home:hover { color:var(--fog); }

.nav-home-bottom {
    position:static;
    display:block;
    text-align:center;
    margin-top:50px;
}

.wordmark-sm {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:1.6rem;
    letter-spacing:6px;
    color:var(--fog-dim);
}

.subhero h1 {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:2.6rem;
    letter-spacing:2px;
    margin:14px 0 18px;
    background:linear-gradient(100deg, var(--chosen), var(--facet) 50%, var(--consumed));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.subhero p {
    max-width:600px;
    margin:0 auto;
    font-size:1.2rem;
    line-height:1.7;
    color:var(--fog-dim);
}

/* GALLERY */
.block {
    padding:80px 24px;
    max-width:1180px;
    margin:0 auto;
}

.block-label {
    font-family:'Jost', sans-serif;
    font-size:0.75rem;
    letter-spacing:3px;
    color:var(--chosen);
    text-align:center;
    margin-bottom:10px;
}

.block-title {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:1.7rem;
    text-align:center;
    color:var(--fog);
    margin-bottom:44px;
    letter-spacing:1px;
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
    gap:14px;
}

.tile {
    position:relative;
    aspect-ratio:3/4;
    border-radius:6px;
    overflow:hidden;
    background:#111;
    cursor:pointer;
}
.tile img, .tile video {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease, filter 0.5s ease;
    filter:saturate(0.9) brightness(0.9);
}
.tile:hover img, .tile:hover video {
    transform:scale(1.06);
    filter:saturate(1.05) brightness(1);
}
.tile::after{
    content:"";
    position:absolute; inset:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
    pointer-events:none;
}
.tile .play {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:1.8rem;
    color:rgba(255,255,255,0.85);
    background:rgba(0,0,0,0.15);
    opacity:0.85;
    transition:opacity 0.3s ease, background 0.3s ease;
}
.tile:hover .play{ opacity:1; background:rgba(0,0,0,0.3); }

.video-item {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.tile-caption {
    text-align:center;
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:2px;
    color:var(--fog-dim);
}

/* OFFERS */
.offers {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:22px;
    max-width:900px;
    margin:0 auto;
}

.offer-card {
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:34px 26px;
    text-align:center;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.offer-card.featured {
    border-color:rgba(201,168,76,0.35);
    box-shadow:0 0 40px rgba(201,168,76,0.08);
}

.offer-eyebrow {
    font-family:'Jost', sans-serif;
    font-size:0.68rem;
    letter-spacing:2.5px;
    color:var(--consumed);
}
.offer-card.featured .offer-eyebrow{ color:var(--chosen); }

.offer-card h3 {
    font-family:'Cinzel', serif;
    font-size:1.25rem;
    margin:12px 0 4px;
    color:var(--fog);
    letter-spacing:0.5px;
}

.offer-price {
    font-family:'Jost', sans-serif;
    font-size:1.05rem;
    font-weight:500;
    letter-spacing:1px;
    color:var(--chosen);
    margin-bottom:16px;
}

.offer-card p {
    font-size:1.05rem;
    color:var(--fog-dim);
    line-height:1.6;
    margin-bottom:22px;
}

footer {
    text-align:center;
    padding:50px 20px 70px;
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:1.5px;
    color:var(--fog-dim);
}

.footer-links {
    margin-top:18px;
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
}

.footer-links a {
    color:var(--fog-dim);
    text-decoration:none;
    letter-spacing:1.5px;
    font-size:0.7rem;
    transition:color 0.25s ease;
}
.footer-links a:hover { color:var(--chosen); }

.footer-copyright {
    margin-top:22px;
    font-size:0.65rem;
    letter-spacing:1px;
    color:rgba(255,255,255,0.28);
}

/* ============================= */
/* LEGAL PAGES                    */
/* ============================= */

.legal-page {
    max-width:760px;
    margin:0 auto;
    padding:120px 24px 60px;
}

.legal-page .nav-home {
    position:static;
    display:inline-block;
    margin-bottom:36px;
}

.legal-page h1 {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:2rem;
    letter-spacing:1px;
    color:var(--fog);
    margin-bottom:8px;
}

.legal-page .legal-updated {
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:1.5px;
    color:var(--fog-dim);
    margin-bottom:50px;
}

.legal-page h2 {
    font-family:'Cinzel', serif;
    font-weight:600;
    font-size:1.15rem;
    letter-spacing:0.5px;
    color:var(--chosen);
    margin:44px 0 14px;
}

.legal-page p, .legal-page li {
    font-size:1.08rem;
    line-height:1.75;
    color:var(--fog-dim);
}

.legal-page p { margin-bottom:14px; }

.legal-page ul { padding-left:22px; margin-bottom:14px; }
.legal-page li { margin-bottom:6px; }

.legal-page a.inline-link {
    color:var(--facet);
    text-decoration:underline;
    text-decoration-color:rgba(240,220,160,0.4);
}
.legal-page a.inline-link:hover { color:var(--chosen); }

.legal-page strong { color:var(--fog); font-weight:600; }

/* LIGHTBOX */
.lightbox {
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,2,3,0.92);
    backdrop-filter:blur(6px);
}
.lightbox.active { display:flex; }

.lightbox img {
    max-width:88vw;
    max-height:86vh;
    border-radius:6px;
    box-shadow:0 0 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}

.lightbox video {
    max-width:88vw;
    max-height:86vh;
    border-radius:6px;
    box-shadow:0 0 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
    background:#000;
}

.lightbox-close, .lightbox-nav {
    position:absolute;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.22);
    color:var(--fog);
    font-family:'Jost', sans-serif;
    cursor:pointer;
    border-radius:50%;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    transition:0.25s;
}
.lightbox-close:hover, .lightbox-nav:hover {
    background:rgba(201,168,76,0.15);
    border-color:rgba(201,168,76,0.4);
}

.lightbox-close {
    top:24px; right:24px;
    font-size:1.1rem;
}

.lightbox-nav {
    top:50%;
    transform:translateY(-50%);
    font-size:1.6rem;
}
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }

@media(max-width:640px){
    .lightbox-nav { width:38px; height:38px; }
    .lightbox-prev { left:10px; }
    .lightbox-next { right:10px; }
    .lightbox-close { top:14px; right:14px; }
}