/* =========================
   LINDEIER.AT – CINEMATIC THEME
   ========================= */

/* ----- Design Tokens ----- */
:root {
    /* Core Colors */
    --bg-0: #0c0b0a;
    --bg-1: #141110;
    --bg-2: #1c1816;

    --gold: #e6c15a;
    --ember: #ff9a3c;

    --text-main: #f2f2f2;
    --text-muted: #b8b1aa;

    /* Effects */
    --border-gold: rgba(230, 193, 90, 0.35);
    --glass-dark: rgba(15, 12, 10, 0.55);

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.65);
    --glow-gold: 0 0 18px rgba(230, 193, 90, 0.25);

    /* Layout */
    --radius-lg: 18px;
    --radius-xl: 24px;
}

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

html, body {
    min-height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-main);
    background: radial-gradient(
        circle at top,
        #1f1a17 0%,
        #100e0d 45%,
        #0b0a09 100%
    );
    overflow-x: hidden;
}

/* ----- Cinematic Grain Overlay ----- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: overlay;
    z-index: 1;
}

/* =========================
   NAVBAR
   ========================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.2rem 2.5rem;

    background: linear-gradient(
        180deg,
        rgba(18, 15, 13, 0.85),
        rgba(10, 8, 7, 0.78)
    );

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--border-gold);
    box-shadow: var(--shadow-soft);
}

.logo {
    font-size: 1.3rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: var(--glow-gold);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    position: relative;
    transition: color 0.25s ease;
}

.nav-links a:hover {
    color: var(--gold);
}

/* =========================
   SECTIONS
   ========================= */
section {
    position: relative;
    z-index: 2;
}

/* Glass Panel (Reusable) */
.panel {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 2.5rem;

    background: var(--glass-dark);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: var(--radius-xl);
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-soft);
}

/* Headings */
.panel h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--gold);
    text-shadow: var(--glow-gold);
}

.panel p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* =========================
   SLIDESHOW
   ========================= */
.slideshow {
    max-width: 1200px;
    margin: 3rem auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-gold);
}

.slideshow img {
    width: 100%;
    display: block;
}

/* =========================
   LOGIN PLACEHOLDER
   ========================= */
.login form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login input,
.login button {
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-gold);
    background: rgba(0, 0, 0, 0.45);
    color: var(--text-main);
}

.login button {
    cursor: not-allowed;
    opacity: 0.6;
}

/* =========================
   FOOTER
   ========================= */
footer {
    text-align: center;
    padding: 2rem;
    margin-top: 4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
/* =========================
   PROJECTS GRID
   ========================= */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;

    background: rgba(15, 12, 10, 0.55);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-gold);
    overflow: hidden;

    box-shadow: var(--shadow-soft);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(230, 193, 90, 0.6);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.7),
        var(--glow-gold);
}

/* Image */
.project-image {
    position: relative;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

/* Content */
.project-content {
    padding: 1.6rem;
}

.project-content h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    text-shadow: var(--glow-gold);
}

.project-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}
/* =========================
   MICRO‑INTERACTIONS
   ========================= */

/* Links */
a {
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover {
    text-shadow: 0 0 12px rgba(230, 193, 90, 0.35);
}

/* Project Cards – extra polish */
.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        circle at top center,
        rgba(255, 184, 100, 0.15),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-card:hover::after {
    opacity: 1;
}

/* Buttons (future‑proofed) */
.button,
button:not([disabled]) {
    background: linear-gradient(
        135deg,
        #f0cf6f,
        #c89b3c
    );
    color: #1a140d;
    font-weight: 600;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.button:hover,
button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(230, 193, 90, 0.45);
}
/* =========================
   HERO SECTION
   ========================= */

.hero {
    position: relative;
    padding: 6rem 2rem 4rem;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at center top,
            rgba(255, 180, 90, 0.18),
            transparent 60%
        );
    pointer-events: none;
}

.hero-inner {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow:
        0 0 24px rgba(230, 193, 90, 0.35),
        0 0 60px rgba(255, 154, 60, 0.15);
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.8;
}
/* =========================
   PROJECT PAGES
   ========================= */

.project-hero {
    position: relative;
    height: 60vh;
    min-height: 420px;
    overflow: hidden;
}

.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75) contrast(1.05);
}

.project-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35),
        rgba(12, 10, 9, 0.85)
    );
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    z-index: 2;
}

.project-hero-overlay h1 {
    font-size: 2.8rem;
    color: var(--gold);
    text-shadow:
        0 0 30px rgba(230, 193, 90, 0.4);
    margin-bottom: 0.5rem;
}

.project-hero-overlay p {
    max-width: 700px;
    font-size: 1.1rem;
    color: var(--text-muted);
}

/* Reduce spacing slightly for project content */
.project-content {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* =========================
   HEPHAESTUS DEMO GRID
   ========================= */
.slot-controls { display: grid; gap: 1rem; margin: 1.25rem 0 1.5rem; }
.slot-inputs { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.slot-inputs label { display: grid; gap: .35rem; color: var(--text-muted); font-size: .9rem; }
.slot-inputs input {
  padding: .75rem .9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-gold);
  background: rgba(0,0,0,.35);
  color: var(--text-main);
}
.slot-grid { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: .75rem; margin-top: 1rem; }
.slot-cell {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(230,193,90,.28);
  background: radial-gradient(circle at 30% 20%, rgba(230,193,90,.16), rgba(0,0,0,.35));
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  font-weight: 700;
  letter-spacing: .06em;
}
.slot-output {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(230,193,90,.25);
  background: rgba(0,0,0,.35);
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* Symbol images inside slot cells */
.slot-symbol {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
  user-select: none;
  -webkit-user-drag: none;
}

.slot-fallback {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

/* ===============================
   PROVABLY FAIR – VERIFY PANEL
   =============================== */

.verify-summary {
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0;
}

.verify-content {
  margin-top: 1rem;
  line-height: 1.65;
  max-width: 720px;
}

.verify-content h4 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.verify-content ol {
  margin-left: 1.25rem;
}

.verify-content li {
  margin-bottom: 0.4rem;
}

.verify-content pre {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  overflow-x: auto;
}

.verify-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.slot-cell.slot-win {
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.85),
    inset 0 0 10px rgba(255, 215, 0, 0.6);
  animation: winPulse 1.1s ease-in-out infinite alternate;
}

@keyframes winPulse {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}
/* ===============================
   Replay Speed Control
   =============================== */

.speed-control {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(230, 193, 90, 0.25);
  border-radius: 0.75rem;
}

.speed-control label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: #e6c15a;
}

.speed-control span {
  font-weight: 600;
  color: #fff;
}

/* --- Slider --- */
.speed-control input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #e6c15a 0%,
    #e6c15a 50%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.25) 100%
  );
  outline: none;
}

/* Thumb */
.speed-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e6c15a;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(230,193,90,0.8);
}

.speed-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e6c15a;
  cursor: pointer;
  border: none;
}




/* =========================
   AUTH NAVBAR – FINAL FIX
   ========================= */

/* Every nav item aligns the same */
.nav-links li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Style username like a nav label */
.user-name {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.9;
}

/* Logout keeps gold accent */
.user-nav .logout-link {
    color: var(--gold);
    font-weight: 500;
    text-decoration: none;
}

.user-nav .logout-link:hover {
    text-shadow: 0 0 12px rgba(230, 193, 90, 0.35);
}

/* Ensure all navbar items align identically */
.navbar .nav-links li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Username styled EXACTLY like a nav link */
.navbar .nav-links .user-name {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.9;
    cursor: default;
}

/* Logout link keeps accent */
.navbar .nav-links .user-nav .logout-link {
    color: var(--gold);
    font-weight: 500;
    text-decoration: none;
}

.navbar .nav-links .user-nav .logout-link:hover {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(230, 193, 90, 0.35);
}