<?php
// index.php — The Kepler Drift: Digital Codex Edition + Physically Correct 3D Book
$title = "The Kepler Drift";
$tagline = "A Pop-Science Space Opera Trilogy by Hoolzlab";
$intro = "Two souls, one ship, a galaxy that doesn’t want to be understood.";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $title ?> — <?= $tagline ?></title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Unica+One&display=swap');
        html,body {
            margin:0; padding:0;
            background:#030712; color:#e5e7eb;
            font-family:'Inter',sans-serif;
            scroll-behavior:smooth;
        }
        h1,h2,h3 {font-family:'Unica One',sans-serif; letter-spacing:1px;}
        a{color:#38bdf8; text-decoration:none;}
        a:hover{text-decoration:underline;}
        .starfield {
            position:fixed; top:0; left:0; width:100%; height:100%;
            background:radial-gradient(ellipse at bottom,#0f172a 0%,#000 100%);
            overflow:hidden; z-index:-2;
        }
        .starfield:after {
            content:"";
            position:absolute; top:0; left:0; width:100%; height:100%;
            background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"100%\" height=\"100%\"><circle cx=\"1\" cy=\"1\" r=\"1\" fill=\"white\"/></svg>') repeat;
            opacity:0.1;
            animation: drift 300s linear infinite;
        }
        @keyframes drift { from{transform:translate(0,0);} to{transform:translate(-1000px,1000px);} }

        header {
            text-align:center; padding:10rem 2rem 6rem;
            background:linear-gradient(to bottom,rgba(3,7,18,0.9) 0%,rgba(0,0,0,0) 100%);
        }
        header h1 {
            font-size:3.5rem; color:#f1f5f9; margin:0 0 1rem;
            text-shadow:0 0 25px rgba(56,189,248,0.4);
        }
        header p {
            font-size:1.25rem; color:#94a3b8; max-width:600px; margin:auto;
        }
        button {
            margin-top:2rem;
            background:#38bdf8; color:#0f172a;
            border:none; border-radius:9999px; padding:0.75rem 1.5rem;
            font-weight:600; letter-spacing:.5px; cursor:pointer;
            transition:background .3s, transform .2s;
        }
        button:hover {background:#7dd3fc; transform:scale(1.05);}
        section {
            max-width:900px; margin:auto; padding:5rem 1.5rem;
        }
        .card {
            background:rgba(17,24,39,0.7); backdrop-filter:blur(8px);
            border:1px solid rgba(56,189,248,0.15);
            padding:2rem; border-radius:1rem; margin-bottom:2rem;
            box-shadow:0 0 25px rgba(0,0,0,0.6);
            transition:transform .3s, box-shadow .3s;
        }
        .card:hover {
            transform:translateY(-5px);
            box-shadow:0 0 35px rgba(56,189,248,0.25);
        }
        h2 {
            border-left:3px solid #38bdf8; padding-left:.75rem;
            font-size:1.75rem; color:#f9fafb; margin-bottom:2rem;
        }
        h3 {color:#f1f5f9; font-size:1.25rem;}
        ul {line-height:1.75; color:#cbd5e1;}
        footer {
            text-align:center; padding:3rem 1rem;
            color:#64748b; font-size:0.9rem;
            border-top:1px solid #1e293b;
            margin-top:4rem;
        }
        blockquote {
            border-left:3px solid #38bdf8;
            padding-left:1rem; font-style:italic; color:#a5f3fc;
            margin:2rem 0;
        }
        hr {border:0; border-top:1px solid #1e293b; margin:3rem 0;}

        /* === 3D Rotating Book (spine left, page block centered) === */
        .book-3d {
            perspective: 1200px;
            margin: 3rem auto;
            width: 300px; height: 340px;
            display:flex; justify-content:center; align-items:center;
            position:relative;
        }
        .book-3d::after {
            content:""; position:absolute; bottom:-10px; left:50%;
            transform:translateX(-50%);
            width:180px; height:25px;
            background:radial-gradient(ellipse,rgba(0,0,0,0.6),transparent);
            filter:blur(5px);
        }

        @keyframes spinBook {
            from { transform: rotateY(0deg) rotateX(5deg); }
            to { transform: rotateY(360deg) rotateX(5deg); }
        }

        .book.full3d {
            position:relative;
            width:calc(var(--bookW) + var(--spineW)); height:var(--bookH);
            transform-style:preserve-3d;
            animation: spinBook 18s linear infinite;
            transition:animation-play-state .3s ease;
        }
        .book.full3d:hover { animation-play-state: paused; }

        .book.full3d div {
            position:absolute;
            backface-visibility:hidden;
            border-radius:2px;
        }

        /* Dimensions scaled from actual artwork */
        :root {
            --bookH:300px;
            --bookW:205px;   /* scaled 693px */
            --spineW:44px;   /* scaled 150px */
        }

        /* --- Faces --- */

        /* SPINE — far left */
        .book.full3d .spine {
            width:var(--spineW); height:var(--bookH);
            background:url('./assets/bindings/book1-spine.webp') center/cover no-repeat;
            transform:rotateY(-90deg) translateZ(calc(var(--bookW)/6));
        }

        /* PAGES — centered */
        .book.full3d .pages {
            width:var(--bookW); height:var(--bookH);
            background:repeating-linear-gradient(90deg,#f8fafc 0px,#e5e7eb 2px,#f1f5f9 4px);
            transform:translateX(calc(var(--spineW)/2));
            box-shadow:inset 0 0 10px rgba(0,0,0,0.3);
        }

        /* FRONT — attached to right edge of pages */
        .book.full3d .front {
            width:var(--bookW); height:var(--bookH);
            background:url('./assets/bindings/book1-front.webp') center/cover no-repeat;
            transform:translateZ(calc(var(--spineW)/2 + 0.1px));
        }

        /* BACK — behind pages */
        .book.full3d .back {
            width:var(--bookW); height:var(--bookH);
            background:url('./assets/bindings/book1-back.webp') center/cover no-repeat;
            transform:rotateY(180deg) translateZ(calc(var(--spineW)/2 + 0.1px));
            filter:brightness(.95);
        }

        /* Top and Bottom */
        .book.full3d .top {
            width:calc(var(--bookW) + var(--spineW)); height:var(--spineW);
            background:linear-gradient(to right,#f8fafc 0%,#cbd5e1 100%);
            transform:rotateX(90deg) translateZ(calc(var(--bookH)/2));
        }
        .book.full3d .bottom {
            width:calc(var(--bookW) + var(--spineW)); height:var(--spineW);
            background:linear-gradient(to right,#e2e8f0 0%,#cbd5e1 100%);
            transform:rotateX(-90deg) translateZ(calc(var(--bookH)/2));
        }
    </style>
</head>
<body>
<div class="starfield"></div>

<header>
    <h1><?= $title ?></h1>
    <p><?= $intro ?></p>
    <button onclick="document.getElementById('about').scrollIntoView({behavior:'smooth'})">Begin Reading</button>
</header>

<section id="about">
    <h2>About the Trilogy</h2>
    <blockquote>“Science is a lantern, not a sermon.”</blockquote>
    <p><strong><?= $title ?></strong> follows <em>Myra Kepler</em> and her AI companion <em>CASS</em> as they traverse an unknown galaxy whose maps behave like living minds.</p>
    <p>Across three books, discovery becomes devotion — and love itself becomes the paradox that rewrites creation.</p>
</section>

<section id="books">
    <h2>The Trilogy</h2>

    <!-- Realistic 3D Book -->
    <div class="book-3d">
        <div class="book full3d">
            <div class="spine"></div>
            <div class="pages"></div>
            <div class="front"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </div>
    </div>

    <div class="card">
        <h3>Book I: The Lantern Edge <small>(Discovery)</small></h3>
        <p>Myra awakens beneath a sky that refuses to match any chart. With CASS, she discovers the <em>Weft</em> — a navigation logic embedded in the galaxy — and learns its first rule: <strong>to go forward, something must be surrendered.</strong></p>
    </div>
</section>

<hr>
<footer>
    <p>© <?= date('Y') ?> Hoolzlab • <?= $title ?> Trilogy</p>
    <p><em>“A galaxy that doesn’t want to be understood.”</em></p>
</footer>
</body>
</html>
