/* ================================================================
   BRUTAL-EXTEND.CSS
   Carries the neo-brutalist / maximalist language that already
   lived in "Why Azra Exists", the hero and the syntax showcase
   into every other mid/late section of the page. The hero and
   header are intentionally left untouched — they already have
   their own distinct look.
   ================================================================ */

/* ---- Section framing: hard edge, offset border on one side ---- */
.brut-panel {
    position: relative;
    border-top: 3px solid var(--accent-gold);
    box-shadow: 0 -10px 0 -7px rgba(255,213,0,0.35) inset;
}
.brut-panel-alt {
    border-top-color: var(--accent-purple-light);
}

/* ---- Heading treatment: outline stroke behind solid title ---- */
.brut-heading .section-title,
h2.section-title.brut-heading {
    position: relative;
    display: inline-block;
}
.brut-heading .section-title::before,
h2.section-title.brut-heading::before {
    content: attr(data-i18n);
    position: absolute;
    top: 6px; left: 6px;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,213,0,0.3);
    pointer-events: none;
}
.brut-panel-alt .brut-heading .section-title::before,
.brut-panel-alt h2.section-title.brut-heading::before {
    -webkit-text-stroke: 1px rgba(192,132,252,0.3);
}
@media (max-width: 768px) {
    .brut-heading .section-title::before,
    h2.section-title.brut-heading::before { display: none; }
}

/* ---- Copy blocks: hard-edge card so paragraphs aren't just bare text ---- */
.brut-copy {
    position: relative;
    z-index: 2;
    background: rgba(8,8,8,0.55);
    border: 2px solid var(--border-gold);
    border-radius: var(--radius-md);
    padding: 2rem clamp(1.2rem, 4vw, 2.6rem);
    box-shadow: 7px 7px 0 rgba(255,213,0,0.12);
}
.brut-panel-alt .brut-copy {
    border-color: rgba(192,132,252,0.28);
    box-shadow: 7px 7px 0 rgba(192,132,252,0.14);
}
@media (max-width: 768px) {
    .brut-copy { padding: 1.4rem 1.1rem; box-shadow: 4px 4px 0 rgba(255,213,0,0.12); }
}

/* ---- Gallery: rotated hard-bordered tiles instead of soft grid ---- */
.brut-gallery .gallery-item {
    border: 3px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: 8px 8px 0 rgba(0,0,0,0.8);
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.brut-gallery .gallery-item:nth-child(3n+1) { transform: rotate(-1.6deg); }
.brut-gallery .gallery-item:nth-child(3n+2) { transform: rotate(1.4deg); }
.brut-gallery .gallery-item:nth-child(3n)   { transform: rotate(-0.8deg); border-color: var(--accent-purple-light); box-shadow: 8px 8px 0 rgba(192,132,252,0.35); }
.brut-gallery .gallery-item:hover {
    transform: translate(-4px,-4px) rotate(0deg) !important;
    box-shadow: 12px 12px 0 rgba(0,0,0,0.85);
    z-index: 2;
}
@media (max-width: 768px) {
    .brut-gallery .gallery-item { transform: none !important; box-shadow: 4px 4px 0 rgba(0,0,0,0.75); }
    .brut-gallery .gallery-item:hover { transform: translate(-2px,-2px) !important; }
}

/* ---- Feature cards: thick borders, offset shadows, slight tilt ---- */
.brut-feature-grid .feature-card-extended {
    border: 3px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: 8px 8px 0 rgba(255,213,0,0.18);
    background: rgba(8,8,8,0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.brut-feature-grid .feature-card-extended:nth-child(2n) {
    border-color: var(--accent-purple-light);
    box-shadow: 8px 8px 0 rgba(192,132,252,0.22);
}
.brut-feature-grid .feature-card-extended:hover {
    transform: translate(-4px,-4px);
    box-shadow: 12px 12px 0 rgba(255,213,0,0.28);
}
.brut-feature-grid .feature-card-extended:nth-child(2n):hover {
    box-shadow: 12px 12px 0 rgba(192,132,252,0.3);
}
@media (max-width: 768px) {
    .brut-feature-grid .feature-card-extended { box-shadow: 4px 4px 0 rgba(255,213,0,0.2); }
}

/* ---- Research area cards: hard block instead of soft glass ---- */
.brut-research-grid .research-area {
    border: 3px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: 7px 7px 0 rgba(255,213,0,0.16);
    background: rgba(8,8,8,0.9);
}
.brut-research-grid .research-area:nth-child(odd)  { transform: rotate(-1deg); }
.brut-research-grid .research-area:nth-child(even) { transform: rotate(1deg); border-color: var(--accent-purple-light); box-shadow: 7px 7px 0 rgba(192,132,252,0.2); }
.brut-research-grid .research-area:hover {
    transform: translate(-3px,-3px) rotate(0deg);
    box-shadow: 10px 10px 0 rgba(255,213,0,0.26);
}
@media (max-width: 768px) {
    .brut-research-grid .research-area { transform: none !important; box-shadow: 4px 4px 0 rgba(255,213,0,0.18); }
}

/* ---- Timeline: hard-edge markers + offset cards ---- */
.brut-timeline .timeline-content {
    border: 2.5px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 rgba(255,213,0,0.16);
    background: rgba(8,8,8,0.9);
}
.brut-timeline .timeline-item:nth-child(even) .timeline-content {
    border-color: var(--accent-purple-light);
    box-shadow: 6px 6px 0 rgba(192,132,252,0.2);
}
.brut-timeline .timeline-item:hover .timeline-content {
    transform: translate(-3px,-3px);
    box-shadow: 9px 9px 0 rgba(255,213,0,0.24);
}

/* ---- Writings list: chunky hard-edge rows ---- */
.brut-writings-list .writing-item {
    border: 2.5px solid var(--border-gold);
    border-radius: var(--radius-md);
    box-shadow: 6px 6px 0 rgba(255,213,0,0.14);
    background: rgba(8,8,8,0.85);
}
.brut-writings-list .writing-item:nth-child(even) {
    border-color: rgba(192,132,252,0.3);
    box-shadow: 6px 6px 0 rgba(192,132,252,0.18);
}
.brut-writings-list .writing-item:hover {
    transform: translate(-4px,-2px);
    box-shadow: 10px 10px 0 rgba(255,213,0,0.24);
}
.brut-writings-list .writing-item:nth-child(even):hover {
    box-shadow: 10px 10px 0 rgba(192,132,252,0.28);
}

/* ---- Vision grid (final CTA section) ---- */
.brut-vision-grid .vision-item {
    border: 3px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: 7px 7px 0 rgba(255,213,0,0.16);
    background: rgba(8,8,8,0.9);
}
.brut-vision-grid .vision-item:nth-child(2n) {
    border-color: var(--accent-purple-light);
    box-shadow: 7px 7px 0 rgba(192,132,252,0.2);
}
.brut-vision-grid .vision-item:hover {
    transform: translate(-3px,-3px);
    box-shadow: 10px 10px 0 rgba(255,213,0,0.24);
}

/* ---- Footer ---- */
.brut-footer {
    position: relative;
    border-top: 3px solid var(--accent-gold);
    overflow: hidden;
}
.brut-footer .max-stripe-band { opacity: 0.14; }
.brut-footer .footer-section h4 {
    display: inline-block;
    border-bottom: 2px solid var(--accent-gold);
    padding-bottom: 0.2rem;
}

/* ================================================================
   FAINT SCROLL-REVEALED BACKGROUND WATERMARKS (photoazr2..7)
   Small accent artwork tucked behind section content — not full
   backgrounds, closer in scale to a single illustrated character.
   Hidden by default; fades in once its section scrolls into view.
   If the file isn't present on the host, the inline onerror
   handler on the <img> hides it and nothing breaks.
   ================================================================ */
.azr-watermark {
    position: absolute;
    z-index: 6; /* above section-max cards/panels so it can never get buried */
    pointer-events: none;
    user-select: none;
    max-width: 190px;
    width: 14vw;
    min-width: 90px;
    height: auto;
    opacity: 0;
    filter: grayscale(35%) contrast(1.05);
    mix-blend-mode: luminosity;
    transform: translateY(24px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}
.azr-watermark.is-visible {
    opacity: 0.45;
    transform: translateY(0);
}
.brut-panel-alt .azr-watermark.is-visible { opacity: 0.4; }

/* Slightly different placement per instance so they don't stack identically */
.azr-watermark-1 { top: 8%;  right: 5%; }
.azr-watermark-2 { bottom: 6%; left: 4%; }
.azr-watermark-3 { top: 10%; left: 3%; }
.azr-watermark-4 { bottom: 8%; right: 4%; }
.azr-watermark-5 { top: 6%;  right: 6%; }
.azr-watermark-6 { bottom: 5%; left: 5%; }

@media (max-width: 768px) {
    .azr-watermark { width: 22vw; max-width: 120px; opacity: 0 !important; }
    .azr-watermark.is-visible { opacity: 0.3 !important; }
}