/* ===================================================================
   Life Is An RPG — Parchment Textures & Hero Backdrops
   ===================================================================
   Additive layer: applies parchment textures, hero photography, and
   ornaments on top of existing layout/components. Load LAST so its
   background-image rules win over the solid-color fallbacks set in
   theme/layout/components/pages.css.

   Assets live in /img/theme/ (generated via design/generate_image.py).
   =================================================================== */

/* --- Base parchment surface ----------------------------------------
   Body gets the tile; any page/section that already has its own
   background-color (sidebar, dark header/footer, cta-section, etc.)
   will cover it where appropriate. background-attachment: fixed keeps
   the same tile region visible while content scrolls, hiding repeats.
   ------------------------------------------------------------------- */
body {
    background-color: var(--color-bg-primary);
    background-image: url('/img/theme/parchment-tile.webp');
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 600px 600px; /* enlarged so seams are infrequent */
}

/* App SPA central panel — re-applies the tile so it shows above
   the layout-grid background colour. */
.dashboard-main {
    background-color: var(--color-bg-primary);
    background-image: url('/img/theme/parchment-tile.webp');
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 600px 600px;
}

/* Social panel and alternating landing section: use a TRANSLUCENT
   colour overlay (no tile) so the underlying body parchment shows
   through. This eliminates the "patched-in" hard-edged tile look.
   The body's `background-attachment: fixed` means the same parchment
   shows continuously underneath. */
.social-panel {
    background-color: rgba(196, 168, 110, 0.18);
    background-image: none;
}

.features-overview--alt {
    background-color: transparent;
    background-image:
        linear-gradient(180deg,
            rgba(160, 128, 48, 0.0)  0%,
            rgba(160, 128, 48, 0.25) 25%,
            rgba(160, 128, 48, 0.25) 93%,
            rgba(160, 128, 48, 0.0)  100%);
}

/* NOTE: paper-grain-overlay deliberately NOT applied to cards.
   The original tile reads as cracks/cobwebs at any opacity high enough
   to be visible. Cards rely on `--color-bg-card` (#faf3e0) being a
   half-step lighter than the body for natural contrast, plus stronger
   shadows added below. */

/* --- Card lift: stronger shadow + slightly warmer border ----------
   With no grain texture, cards need a touch more visual weight to read
   as raised parchment "slips" sitting on top of the page.
   ------------------------------------------------------------------- */
.feature-item,
.feature-block,
.character-card,
.friend-card,
.quest-card,
.friend-pending-card,
.friend-search-result,
.guild-header-card,
.guild-tally-card,
.guild-invite-card,
.guild-create-section,
.account-card,
.quest-avail-row,
.guild-member-row,
.guild-avail-row,
/* Skill cards (every variant across the site) */
.skill-card,
.skill-item,
.skill-log-row,
.explore-skill-card {
    box-shadow:
        0 1px 0 rgba(255, 248, 220, 0.6) inset,
        0 4px 14px rgba(60, 40, 20, 0.18),
        0 1px 2px rgba(60, 40, 20, 0.10);
    border-color: rgba(139, 115, 85, 0.55);
}

/* Skill cards get a subtle hover lift to match other interactive cards */
.skill-card:hover,
.explore-skill-card:hover,
.skill-item:hover,
.skill-log-row:hover {
    box-shadow:
        0 1px 0 rgba(255, 248, 220, 0.6) inset,
        0 6px 20px rgba(60, 40, 20, 0.25),
        0 1px 2px rgba(60, 40, 20, 0.12);
    border-color: var(--color-gold);
}

/* --- Hero backdrops ------------------------------------------------
   The hero image lives on a ::before pseudo-element that is masked
   with a radial gradient to ACTUAL transparency at the edges. The
   page parchment shows through the masked-away pixels — no cream
   overlay covering dark image pixels, no visible rectangle.

   .hero / .cta-section / .register-wizard get position: relative and
   their direct children are pushed above the ::before with z-index.
   ------------------------------------------------------------------- */
.hero,
.cta-section,
.register-wizard {
    position: relative;
    background: none;
    isolation: isolate; /* keeps blend modes contained */
}

.hero > *,
.cta-section > *,
.register-wizard > * {
    position: relative;
    z-index: 1;
}

/* Hero image lives on ::after (NOT ::before) so it doesn't collide
   with the section-divider ::before rule applied to .cta-section.

   The mask shape is identical across all three heroes (soft fade
   with the same proportions). To make a hero "bigger," scale the
   image content via background-size — NOT by widening the mask. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;

    /* Symmetric soft fade: 50% horizontal radius (sides), 65% vertical
       radius (bottom + top) so top/bottom fade pattern matches sides. */
    -webkit-mask-image: radial-gradient(ellipse 50% 65% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   40%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0)   100%);
            mask-image: radial-gradient(ellipse 100% 50% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   60%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0)   100%);
}

.cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;

    /* Symmetric soft fade: 50% horizontal radius (sides), 65% vertical
       radius (bottom + top) so top/bottom fade pattern matches sides. */
    -webkit-mask-image: radial-gradient(ellipse 50% 65% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   60%,
        rgba(0, 0, 0, 0.5) 80%,
        rgba(0, 0, 0, 0)   100%);
            mask-image: radial-gradient(ellipse 55% 50% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   50%,
        rgba(0, 0, 0, 0.5) 65%,
        rgba(0, 0, 0, 0)   100%);
}

.register-wizard::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;

    /* Symmetric soft fade: 50% horizontal radius (sides), 65% vertical
       radius (bottom + top) so top/bottom fade pattern matches sides. */
    -webkit-mask-image: radial-gradient(ellipse 50% 65% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   40%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0)   100%);
            mask-image: radial-gradient(ellipse 60% 50% at center,
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 1)   60%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0)   100%);
}

/* Main landing hero — image content at natural `cover` crop.
   Opacity dims the image so the headline text on top stays legible
   without needing per-element text shadows. */
.hero::after {
    background-image: url('/img/theme/hero-landscape.webp');
    background-size: cover;
    opacity: 0.5;
}

/* Make .hero span full viewport so the masked image covers the
   entire screen width. The inner 1fr 1fr grid is held to the
   original max-width via larger horizontal padding so the text
   (left) and character card (right) stay laid out where they were. */
.hero {
    max-width: none;
    width: 100%;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    padding-left: max(var(--space-3xl), calc((100vw - var(--max-content-width)) / 2 + var(--space-lg)));
    padding-right: max(var(--space-3xl), calc((100vw - var(--max-content-width)) / 2 + var(--space-lg)));
}

/* Suppress horizontal scrollbar from 100vw vs scrollbar width. */
html, body {
    overflow-x: hidden;
}

.cta-section::after {
    background-image: url('/img/theme/hero-journey.webp');
    background-position: center 35%;
    background-size: 100% auto;
}

.register-wizard::after {
    background-image: url('/img/theme/hero-auth.webp');
    background-size: 100% auto;
    /* Dim it a touch so form inputs stay readable. */
    opacity: 0.1;
}

/* --- Ornaments -----------------------------------------------------
   Corner flourishes on landing feature cards + character card.
   Section divider between major landing sections.
   ------------------------------------------------------------------- */
/* Cards that get ornate corner flourishes — only the spacious card
   variants. Tighter dashboard cards (.skill-card with embedded log
   form) are too dense once the flourishes are added. */
.feature-item,
.feature-block,
.character-card,
.explore-skill-card {
    position: relative;
}

.feature-item::before,
.feature-block::before,
.character-card::before,
.explore-skill-card::before,
.feature-item::after,
.feature-block::after,
.character-card::after,
.explore-skill-card::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    background: url('/img/theme/corner-flourish.webp') no-repeat center / contain;
    opacity: 0.45;
    pointer-events: none;
}

.feature-item::before,
.feature-block::before,
.character-card::before,
.explore-skill-card::before {
    top: 6px;
    left: 6px;
}

.feature-item::after,
.feature-block::after,
.character-card::after,
.explore-skill-card::after {
    bottom: 6px;
    right: 6px;
    transform: rotate(180deg);
}

/* Dashboard skill card refinements:
   - Larger icon (80px) so it anchors visually at the same column as
     the Hours/Note/Log row below.
   - Negative left margin pulls the icon a few pixels left to
     compensate for the inner whitespace baked into the icon images,
     so the icon's painted content aligns with the form's left edge.
   - Wider grid minimum so the skill name + level fit comfortably.
   - Header gap so the name and level never touch. */
.skill-card .skill-icon {
    width: 80px;
    height: 80px;
    margin-left: -8px;
}

.skills-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.skill-card__header {
    gap: var(--space-sm);
}

/* Horizontal ornate divider between landing sections. Drop it above any
   .features-overview, .features-overview--alt, or .cta-section that
   follows another landing section. */
.hero + .features-overview::before,
.features-overview + .features-overview--alt::before,
.features-overview--alt + .cta-section::before,
.features-overview + .cta-section::before {
    content: '';
    display: block;
    height: 32px;
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    background: url('/img/theme/divider-ornate.webp') no-repeat center / contain;
    opacity: 0.55;
}

/* Optional gold seal accent — applied to completed quest cards. */
.quest-card--completed {
    position: relative;
}

.quest-card--completed::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: url('/img/theme/seal-gold.webp') no-repeat center / contain;
    opacity: 0.85;
    pointer-events: none;
}

/* --- Responsive fallback -------------------------------------------
   On very small screens, drop the corner ornaments (they crowd
   already-tight cards) and lighten the hero overlay so the text
   stays primary.
   ------------------------------------------------------------------- */
@media (max-width: 600px) {
    .feature-item::before,
    .feature-block::before,
    .character-card::before,
    .feature-item::after,
    .feature-block::after,
    .character-card::after {
        display: none;
    }

    .hero,
    .cta-section,
    .register-wizard {
        background-attachment: scroll;
    }
}