:root {
    --moss-deep: #1a2419;
    --moss-mid: #2d3b27;
    --moss-light: #4a5d3a;
    --bark-dark: #1c1410;
    --bark-mid: #3d2b1f;
    --bark-warm: #5a3e26;
    --mist: #8a9b85;
    --gold-leaf: #c9a661;
    --parchment: #d9c9a3;
    --ember: #d97a3a;
    --shadow: #0a0d09;
  }

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

  html, body {
    min-height: 100vh;
    background: var(--shadow);
    font-family: 'Cormorant Garamond', serif;
    color: var(--parchment);
    overflow-x: hidden;
  }

  /* ============ ATMOSPHERIC BACKGROUND LAYERS ============ */

  .scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(74, 93, 58, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 100%, rgba(28, 20, 16, 0.9) 0%, transparent 70%),
      linear-gradient(180deg, #0d1410 0%, #1a2419 40%, #0a0d09 100%);
  }

  .scene svg {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
  }

  /* Drifting mist layers */
  .mist-layer {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(ellipse 60% 30% at 30% 60%, rgba(138, 155, 133, 0.12), transparent 60%),
      radial-gradient(ellipse 40% 25% at 70% 70%, rgba(138, 155, 133, 0.08), transparent 60%),
      radial-gradient(ellipse 50% 20% at 50% 80%, rgba(217, 201, 163, 0.05), transparent 60%);
    animation: drift 60s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .mist-layer.two {
    animation-duration: 90s;
    animation-delay: -30s;
    opacity: 0.7;
    filter: blur(2px);
  }

  @keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-3%, 2%) scale(1.05); }
    100% { transform: translate(2%, -1%) scale(1.02); }
  }

  /* Floating embers / fireflies */
  .embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .ember {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-leaf);
    box-shadow: 0 0 8px var(--gold-leaf), 0 0 16px rgba(201, 166, 97, 0.4);
    animation: float-ember 12s ease-in-out infinite;
    opacity: 0;
  }
  .ember:nth-child(1) { left: 12%; top: 80%; animation-delay: 0s;   animation-duration: 14s; }
  .ember:nth-child(2) { left: 25%; top: 90%; animation-delay: -3s;  animation-duration: 18s; }
  .ember:nth-child(3) { left: 45%; top: 85%; animation-delay: -7s;  animation-duration: 12s; }
  .ember:nth-child(4) { left: 65%; top: 95%; animation-delay: -2s;  animation-duration: 16s; }
  .ember:nth-child(5) { left: 78%; top: 75%; animation-delay: -10s; animation-duration: 20s; }
  .ember:nth-child(6) { left: 88%; top: 88%; animation-delay: -5s;  animation-duration: 15s; }
  .ember:nth-child(7) { left: 35%; top: 70%; animation-delay: -8s;  animation-duration: 17s; }
  .ember:nth-child(8) { left: 55%; top: 92%; animation-delay: -1s;  animation-duration: 13s; }

  @keyframes float-ember {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.9; }
    50%  { transform: translateY(-60vh) translateX(30px); opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { transform: translateY(-100vh) translateX(-20px); opacity: 0; }
  }

  /* Vignette */
  .vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 13, 9, 0.6) 80%, rgba(10, 13, 9, 0.95) 100%);
  }

  /* Film grain texture */
  .grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ============ CONTENT ============ */

  .content {
    position: relative;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
  }

  .ornament {
    width: 120px;
    height: 30px;
    margin: 1.5rem auto;
    opacity: 0.7;
    filter: drop-shadow(0 0 8px rgba(201, 166, 97, 0.3));
  }

  .title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-align: center;
    color: var(--gold-leaf);
    letter-spacing: 0.08em;
    text-shadow:
      0 0 20px rgba(201, 166, 97, 0.4),
      0 0 40px rgba(201, 166, 97, 0.2),
      2px 2px 0 var(--bark-dark);
    margin-bottom: 0.5rem;
    line-height: 1.1;
    animation: fade-in-down 2s ease-out;
  }

  .title-main {
    display: inline-block;
  }

  /* Wooden plaque hanging beneath the title */
  .tld-plaque {
    position: relative;
    width: 200px;
    height: 50px;
    margin: 0.5rem auto 1rem;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
    animation: fade-in-down 2.5s ease-out;
  }

  .tld-plaque svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .tld-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em; /* compensate for letter-spacing centering */
    color: var(--gold-leaf);
    text-shadow: 0 0 8px rgba(201, 166, 97, 0.4), 1px 1px 0 #0a0805;
    text-transform: uppercase;
  }

  /* Hanging chain/rope effect connecting plaque visually */
  .tld-plaque::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 1px;
    height: 12px;
    background: linear-gradient(to bottom, transparent, var(--bark-warm));
    opacity: 0.5;
  }

  .subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--mist);
    text-align: center;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
    animation: fade-in 3s ease-out;
  }

  .runes {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    color: var(--bark-warm);
    margin-bottom: 2.5rem;
    opacity: 0.8;
    animation: fade-in 4s ease-out;
  }

  /* Video frame — carved wooden window into Fangorn */
  .video-frame {
    position: relative;
    width: min(960px, 92vw);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    padding: 14px;
    background:
      linear-gradient(135deg, var(--bark-warm) 0%, var(--bark-mid) 50%, var(--bark-dark) 100%);
    border-radius: 6px;
    box-shadow:
      0 0 0 2px var(--bark-dark),
      0 0 0 3px var(--gold-leaf),
      0 0 0 5px var(--bark-dark),
      0 30px 80px rgba(0, 0, 0, 0.8),
      0 0 60px rgba(201, 166, 97, 0.15),
      inset 0 0 30px rgba(0, 0, 0, 0.4);
    animation: fade-in-up 2.5s ease-out;
  }

  /* Carved corner ornaments */
  .video-frame::before,
  .video-frame::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background:
      radial-gradient(circle, var(--gold-leaf) 0%, var(--bark-warm) 40%, transparent 70%);
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(1px);
  }
  .video-frame::before { top: -15px; left: -15px; }
  .video-frame::after  { bottom: -15px; right: -15px; }

  .video-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 2px;
    display: block;
    background: #000;
  }

  .signature {
    margin-top: 3rem;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--mist);
    text-align: center;
    max-width: 600px;
    line-height: 1.6;
    opacity: 0.85;
    animation: fade-in 5s ease-out;
  }

  .signature::before, .signature::after {
    content: '❦';
    color: var(--gold-leaf);
    margin: 0 0.5rem;
    opacity: 0.6;
  }

  /* ============ TOLKIEN QUOTE ============ */
  .quote-block {
    margin-top: 4rem;
    max-width: 720px;
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
    animation: fade-in 6s ease-out;
  }

  .quote-block::before,
  .quote-block::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-leaf), transparent);
    opacity: 0.5;
  }
  .quote-block::before { top: 0; }
  .quote-block::after  { bottom: 0; }

  .quote-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    color: var(--parchment);
    line-height: 1.7;
    letter-spacing: 0.01em;
    margin: 0 0 1.2rem;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
    transition: opacity 0.8s ease;
  }

  .quote-text::before {
    content: '“';
    font-family: 'IM Fell English', serif;
    font-size: 2.5em;
    color: var(--gold-leaf);
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 0.1em;
    opacity: 0.7;
  }
  .quote-text::after {
    content: '”';
    font-family: 'IM Fell English', serif;
    font-size: 2.5em;
    color: var(--gold-leaf);
    line-height: 0;
    vertical-align: -0.5em;
    margin-left: 0.05em;
    opacity: 0.7;
  }

  .quote-attribution {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold-leaf);
    opacity: 0.75;
    transition: opacity 0.8s ease;
  }

  .quote-attribution::before {
    content: '— ';
    opacity: 0.6;
  }

  /* ============ FOOTER ============ */
  .footer {
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--mist);
    opacity: 0.6;
    animation: fade-in 6s ease-out;
  }

  .footer a {
    color: var(--gold-leaf);
    text-decoration: none;
    border-bottom: 1px dotted var(--bark-warm);
    padding-bottom: 1px;
    transition: all 0.3s ease;
  }

  .footer a:hover {
    border-bottom-color: var(--gold-leaf);
    text-shadow: 0 0 8px rgba(201, 166, 97, 0.4);
  }

  @keyframes fade-in       { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-in-down  { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fade-in-up    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

  /* Subtle tree sway */
  .tree-sway   { animation: sway   12s ease-in-out infinite alternate; transform-origin: bottom center; }
  .tree-sway-2 { animation: sway-2 18s ease-in-out infinite alternate; transform-origin: bottom center; }
  @keyframes sway   { from { transform: rotate(-0.4deg); } to { transform: rotate(0.4deg); } }
  @keyframes sway-2 { from { transform: rotate(0.5deg); }  to { transform: rotate(-0.5deg); } }

  /* ============ LEMBAS CONSENT BANNER ============ */

  .lembas {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 50;
    width: min(560px, calc(100vw - 2rem));
    padding: 1.25rem 1.5rem;
    background:
      linear-gradient(135deg, rgba(45, 59, 39, 0.95) 0%, rgba(28, 36, 24, 0.97) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--gold-leaf);
    border-radius: 4px;
    box-shadow:
      0 0 0 1px var(--bark-dark) inset,
      0 20px 60px rgba(0, 0, 0, 0.7),
      0 0 30px rgba(201, 166, 97, 0.15);
    color: var(--parchment);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.5;
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  }

  .lembas.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  .lembas-leaf {
    width: 36px;
    height: 36px;
    float: left;
    margin: 0 0.85rem 0 0;
    flex-shrink: 0;
  }

  .lembas-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold-leaf);
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
    text-shadow: 0 0 8px rgba(201, 166, 97, 0.3);
  }

  .lembas-text {
    color: var(--parchment);
    opacity: 0.9;
    margin-bottom: 0.9rem;
  }

  .lembas-text em {
    color: var(--gold-leaf);
    font-style: italic;
    opacity: 0.95;
  }

  .lembas-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    clear: both;
  }

  .lembas-btn {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--gold-leaf);
    background: transparent;
    color: var(--gold-leaf);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.3s ease;
    font-variant: small-caps;
  }

  .lembas-btn:hover {
    background: var(--gold-leaf);
    color: var(--bark-dark);
    box-shadow: 0 0 20px rgba(201, 166, 97, 0.4);
  }

  .lembas-btn.primary {
    background: var(--gold-leaf);
    color: var(--bark-dark);
  }

  .lembas-btn.primary:hover {
    background: #e0bc78;
    box-shadow: 0 0 24px rgba(201, 166, 97, 0.6);
  }

  .lembas-btn.subtle {
    border-color: var(--bark-warm);
    color: var(--mist);
  }

  .lembas-btn.subtle:hover {
    background: var(--bark-warm);
    color: var(--parchment);
    box-shadow: none;
  }

  @media (max-width: 600px) {
    .content { padding: 2rem 1rem; }
    .video-frame { padding: 8px; }
    .lembas { font-size: 0.95rem; padding: 1rem 1.1rem; }
    .lembas-leaf { width: 28px; height: 28px; }
  }