/* Slamena Buda - background depth layer.

   Loaded AFTER slamenabuda.css so it can override the flat section fills.
   Kept in its own file deliberately: it is pure presentation, so it can be
   reviewed, tuned or reverted in one step on a live client site.

   WHY: every light section was a single flat fill, and the seams between them
   were hard colour bands (paper -> paper-2 -> paper-3). That reads as flat.
   Two moves fix it without touching layout, copy or the palette:

     1. SEAM BLEND. Each section starts with a short vertical gradient carrying
        the PREVIOUS section's colour, fading out over ~120-140px. The eye reads
        a soft transition instead of a stripe.
     2. DIRECTIONAL LIGHT. Each light section gets one off-axis straw-gold
        radial, at a different position per section, low alpha. This is the same
        language the hero and the dark restaurant section already use, so it
        extends the existing design rather than inventing a new one.

   No new colours: everything below is the existing --paper / --paper-2 /
   --paper-3 / --straw / --brown tokens at low alpha. No layout changes.
   Static only, so nothing here needs a reduced-motion branch. */

/* ---------- 1. PAPER GRAIN ---------- */
/* Was .045 and effectively invisible over the mid-tones. Still subtle, but now
   it actually does the job of breaking up large flat areas. Stays a fixed,
   pointer-events-none overlay, so it never repaints on scroll. */
.grain {
  opacity: .062;
}

/* ---------- 2. HOMEPAGE SECTION STACK ---------- */
/* Order on the page: hero, story, cinema, quote, feature (dark), weekly, menu,
   rooms, galeria, contact, footer (dark). The glow position walks around the
   page (left, right, centre) so no two neighbours are lit from the same side. */

/* story: previous section is .hero (paper). Light from the top left. */
.story {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(74% 50% at 6% -4%, rgba(239, 210, 129, .26), transparent 62%),
    linear-gradient(180deg, #F6F1E5 0, rgba(246, 241, 229, 0) 140px);
}

/* cinema: previous is .story (paper-2). Warm centre, darker corners, so the
   video frame in the middle sits in a pool of light. */
.cinema {
  background-color: #E5D4B0;
  background-image:
    radial-gradient(58% 62% at 50% 42%, rgba(255, 246, 226, .55), transparent 68%),
    linear-gradient(180deg, #EFE7D5 0, rgba(239, 231, 213, 0) 130px);
}

/* quote: previous is .cinema. Gets the straw fibre, because the section is
   otherwise empty and the name of the house is literally "straw hut". Very low
   alpha: it should read as paper texture, never as a visible stripe pattern.
   NOTE: .quote::before is the big quotation mark, so this stays on background. */
.quote {
  background-color: var(--paper-3);
  background-image:
    repeating-linear-gradient(114deg, rgba(61, 27, 13, .032) 0 1px, rgba(61, 27, 13, 0) 1px 7px),
    radial-gradient(62% 58% at 50% 6%, rgba(239, 210, 129, .22), transparent 68%),
    linear-gradient(180deg, #E5D4B0 0, rgba(229, 212, 176, 0) 120px);
}

/* weekly: previous is .feature, which is dark brown. A light-to-light blend
   would be wrong here; instead the dark section casts a soft shadow down onto
   this one. That is the single biggest depth cue on the page. */
.weekly {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(66% 46% at 92% 8%, rgba(239, 210, 129, .22), transparent 62%),
    linear-gradient(180deg, rgba(61, 27, 13, .13) 0, rgba(61, 27, 13, 0) 96px);
}

/* menu teaser: no class of its own, addressed by id. Previous is .weekly. */
#menu {
  background-color: var(--paper);
  background-image:
    radial-gradient(70% 48% at 14% 100%, rgba(239, 210, 129, .20), transparent 64%),
    linear-gradient(180deg, #EFE7D5 0, rgba(239, 231, 213, 0) 130px);
}

/* rooms: previous is #menu (paper). Light from the top right. */
.rooms {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(72% 50% at 94% -2%, rgba(239, 210, 129, .24), transparent 62%),
    linear-gradient(180deg, #F6F1E5 0, rgba(246, 241, 229, 0) 140px);
}

/* galeria teaser: previous is .rooms (paper-2). */
#galeria {
  background-color: var(--paper);
  background-image:
    radial-gradient(64% 52% at 50% 104%, rgba(239, 210, 129, .18), transparent 66%),
    linear-gradient(180deg, #EFE7D5 0, rgba(239, 231, 213, 0) 130px);
}

/* contact: previous is #galeria (paper). Last light section before the dark
   footer, so it also gets a faint bottom bleed to meet the footer softly. */
.contact {
  background-color: var(--paper-2);
  background-image:
    radial-gradient(70% 48% at 8% 0%, rgba(239, 210, 129, .22), transparent 62%),
    linear-gradient(180deg, #F6F1E5 0, rgba(246, 241, 229, 0) 140px),
    linear-gradient(0deg, rgba(42, 20, 9, .10) 0, rgba(42, 20, 9, 0) 110px);
}

/* ---------- 3. SUBPAGE HEADS ---------- */
/* The menu, drinks and gallery pages open straight into one long light section
   under the sticky header. Without a wash they are the flattest surfaces on the
   site. Light from the top right, matching the hero's direction. */
.menu-full,
.drinks-full,
.gallery-full {
  background-color: var(--paper);
  background-image:
    radial-gradient(58% 42% at 88% -6%, rgba(239, 210, 129, .26), transparent 64%),
    radial-gradient(52% 38% at 4% 22%, rgba(199, 130, 47, .07), transparent 62%);
  background-repeat: no-repeat;
}

/* ---------- 4. CARD ELEVATION ---------- */
/* These were outlined boxes sitting flush on the paper. A shadow TINTED to the
   background hue (never pure black on a warm ground) lifts them just enough to
   read as objects on a surface. */
.wk-card {
  box-shadow: 0 10px 26px rgba(61, 27, 13, .07);
}

.pcard {
  box-shadow: 0 18px 44px rgba(61, 27, 13, .10);
}

.gal-tile {
  box-shadow: 0 8px 22px rgba(61, 27, 13, .10);
}

.menu-pdf,
.weekly-dl {
  box-shadow: 0 2px 8px rgba(61, 27, 13, .05);
}

/* ---------- 5. STICKY HEADER ---------- */
/* Sat flush against the page with only a hairline. Once the sections below have
   depth, the header needs to sit above them rather than beside them. */
header.nav {
  box-shadow: 0 1px 0 rgba(61, 27, 13, .05), 0 8px 24px rgba(61, 27, 13, .045);
}

/* ---------- 6. MOBILE ---------- */
/* Sections are shorter on a phone, so a 140px seam blend would swallow a third
   of the section. Tighten the blends; keep the glows. */
@media (max-width: 700px) {
  .story,
  .rooms,
  .contact {
    background-image:
      radial-gradient(88% 34% at 8% 0%, rgba(239, 210, 129, .22), transparent 64%),
      linear-gradient(180deg, #F6F1E5 0, rgba(246, 241, 229, 0) 80px);
  }

  .cinema,
  #menu,
  #galeria {
    background-image:
      radial-gradient(88% 34% at 50% 0%, rgba(239, 210, 129, .18), transparent 64%),
      linear-gradient(180deg, #EFE7D5 0, rgba(239, 231, 213, 0) 80px);
  }

  .weekly {
    background-image:
      radial-gradient(88% 34% at 92% 4%, rgba(239, 210, 129, .20), transparent 64%),
      linear-gradient(180deg, rgba(61, 27, 13, .12) 0, rgba(61, 27, 13, 0) 64px);
  }
}