/* ════════════════════════════════════════════════════════════
   NARRADIVE — About page (Who we are · Team · Contact)
   ════════════════════════════════════════════════════════════ */

/* ═══ PAGE HEADER — cinematic scene ═══
   Real castle key art drifts behind on parallax; petals fall on top; the copy
   sits inside the scene. Scene classes are ported here because about.html only
   loads core.css+about.css (games.css/home.css, where they live, aren't on this
   page). */
.about-hero {
    position: relative;
    min-height: clamp(560px, 88vh, 820px);
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 5rem) 0 var(--s-5);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}
.about-hero .scene-bg {
    position: absolute;
    inset: -22%; /* bleed so the parallax translate never exposes an edge */
    z-index: -3;
    background-color: #0d0a08;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}
.about-hero .scene-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(8, 9, 13, 0.82) 0%,
        rgba(8, 9, 13, 0.34) 26%,
        rgba(8, 9, 13, 0.50) 62%,
        rgba(8, 9, 13, 0.92) 92%,
        var(--bg) 100%);
}
.about-hero .scene-vignette {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    box-shadow: inset 0 0 240px 70px rgba(0, 0, 0, 0.72);
}
/* Fire-spark video layer (ported from the home hero). `screen` blend drops the
   black footage background so only the sparks light up over the castle backdrop;
   masked so they glow along the bottom and fade as they rise. */
.about-hero .hero-fire {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container), 100%);
    height: 55%;
    object-fit: cover;
    object-position: center bottom;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.5;
    /* Recolour the red footage toward the castle scene's cool storm palette:
       hue-rotate red → verdigris teal, ease saturation to the dusky range so the
       sparks read as cold ember-glow rather than warm fire. */
    filter: brightness(0.95) contrast(1.05) saturate(0.8) hue-rotate(150deg);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 75%);
    mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 75%);
}
/* Desktop-only, and off when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .about-hero .hero-fire { display: none; }
}
@media (max-width: 768px) {
    .about-hero .hero-fire { display: none; }
}
.about-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--s-3);
}
.about-hero .eyebrow { justify-content: center; margin-bottom: var(--s-2); }
.about-hero .eyebrow::before { display: none; }
.about-hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    color: var(--text);
    letter-spacing: 0.03em;
    margin-bottom: var(--s-3);
}
.about-hero .lead { font-size: 1.22rem; color: var(--text-dim); max-width: 56ch; margin: 0 auto; }
.about-hero .lead strong { color: var(--teal-bright); font-weight: 600; }

.about-greeting {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.2;
    color: var(--text);
    letter-spacing: 0.01em;
    margin: 0 auto var(--s-3);
}
.about-intro {
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 54ch;
    margin: 0 auto var(--s-3);
    font-style: italic;
}

/* ═══ TEAM ═══ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-2);
}
.team-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--line);
    background: #000;
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.team-card:hover { border-color: var(--teal); transform: translateY(-4px); }
.team-card-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: opacity 0.5s var(--ease);
}
.team-card-img.hover { opacity: 0; }
.team-card:hover .team-card-img.hover { opacity: 1; }
.team-card:hover .team-card-img.default { opacity: 0; }
.team-card-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 45%, rgba(8, 9, 13, 0.95) 100%);
    pointer-events: none;
}
.team-card-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: var(--s-2);
}
.team-card-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}
.team-card-role {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: var(--teal);
    letter-spacing: 0.04em;
}
.team-card-link {
    position: absolute;
    top: var(--s-2); right: var(--s-2);
    z-index: 3;
    width: 36px; height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(8, 9, 13, 0.6);
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    opacity: 0;
    transform: translateY(-6px);
    transition: all 0.35s var(--ease);
}
.team-card:hover .team-card-link { opacity: 1; transform: none; }
.team-card-link:hover { background: #0077b5; color: #fff; border-color: #0077b5; }
.team-card-link svg { width: 17px; height: 17px; }

/* ═══ ORNAMENT — gold flourish section divider ═══
   In-game UI chrome reused as a diegetic separator between page sections. The
   flourish (Seperate_Top on the upper divider, Seperate_Bot on the lower) is
   flanked by gold hairlines that fade out toward the edges, mirroring games.html's
   .scene-divider. Purely decorative → aria-hidden in markup. */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.9rem, 3vw, 2.2rem);
    margin: var(--s-5) auto;
    padding: 0 var(--s-3);
    pointer-events: none;
}
.ornament::before,
.ornament::after {
    content: '';
    height: 2px;
    width: min(26vw, 320px);
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 55%, transparent));
}
.ornament::after {
    background: linear-gradient(to left, transparent, color-mix(in srgb, var(--gold) 55%, transparent));
}
.ornament-orn {
    flex-shrink: 0;
    width: clamp(160px, 36vw, 260px); /* native ~246px; only ever downscaled */
    aspect-ratio: 246 / 35;
    background: center / contain no-repeat;
    opacity: 0.92;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
.ornament--top .ornament-orn { background-image: url('../Assets/wybmd-assets/Seperate_Top.png'); }
.ornament--bot .ornament-orn {
    aspect-ratio: 247 / 36;
    background-image: url('../Assets/wybmd-assets/Seperate_Bot.png');
}
/* The section that follows an ornament already gets even spacing from the
   ornament's own symmetric margin, so drop its adjacent section padding to
   keep the gap balanced on both sides of the flourish. */
.ornament--top + .section { padding-top: 0; }

/* ═══ CONTACT ═══ */
.contact {
    padding-top: var(--s-4); /* ornament divider now separates from Team above */
}
.contact-inner { text-align: center; max-width: var(--container-narrow); margin: 0 auto; }
.contact-email {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 400;
    color: var(--text);
    margin: var(--s-3) 0;
    position: relative;
    transition: color 0.3s var(--ease);
}
.contact-email::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 100%; height: 2px;
    background: var(--teal);
    transform: scaleX(0.2);
    transform-origin: center;
    opacity: 0.5;
    transition: all 0.35s var(--ease);
}
.contact-email:hover { color: var(--teal-bright); }
.contact-email:hover::after { transform: scaleX(1); opacity: 1; }
.contact-actions { display: flex; justify-content: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }

/* Contact buttons reuse the devlog hero's parchment wax-seals (.devlog-seal):
   Small_Button.png material, gilt Top+Bot flourishes + soft halo on hover, red
   parchment on press. about.html doesn't load devlog.css, so the seal machinery
   is copied here verbatim (kept in sync with css/devlog.css .devlog-seal). */
.devlog-seal {
    position: relative;
    z-index: 0; /* own stacking context so the ::before halo sits behind cleanly */
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.7rem 0.95rem 1.5rem;
    background: url('../Assets/wybmd-assets/Small_Button.png') center / 100% 100% no-repeat;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #37280f;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.35);
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
    cursor: pointer;
}
/* Icon + label ride above the parchment; the img logo reads as dark ink on tan,
   the stroke SVG inherits the seal's ink colour via currentColor. */
.devlog-seal img,
.devlog-seal svg {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.devlog-seal img { object-fit: contain; filter: brightness(0) opacity(0.78); }
.devlog-seal svg { opacity: 0.85; }
.devlog-seal span { position: relative; z-index: 2; }
/* Hover halo — the selection's soft glow, dimmed and kept below the text. */
.devlog-seal::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 78%;
    height: 150%;
    transform: translate(-50%, -50%);
    background: url('../Assets/wybmd-assets/Button_Selection_Seperate_Highlight.png') center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
    z-index: 1;
}
/* Hover gilt flourishes — Top + Bot selection pieces pinned to the edges. */
.devlog-seal::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    bottom: -25%;
    background-image:
        url('../Assets/wybmd-assets/Button_Selection_Seperate_Top.png'),
        url('../Assets/wybmd-assets/Button_Selection_Seperate_Bot.png');
    background-position: center top, center bottom;
    /* Fixed height (not width-proportional) so the flourish stays the same size
       on every button regardless of label length; a longer button no longer
       scales the ornament up over the text. The -32% box spreads the Top/Bot
       pieces apart vertically. Kept in sync with css/devlog.css. */
    background-size: auto 22px, auto 22px;
    background-repeat: no-repeat, no-repeat;
    opacity: 0;
    transform: scale(0.92);
    transform-origin: center;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    pointer-events: none;
    z-index: 3;
}
.devlog-seal:hover::before,
.devlog-seal:focus-visible::before { opacity: 1; }
.devlog-seal:hover::after,
.devlog-seal:focus-visible::after { opacity: 1; transform: scale(1); }
/* Grow as one — the parent scale carries parchment + halo + flourishes together. */
.devlog-seal:hover { transform: scale(1.05); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); }
.devlog-seal:active { background-image: url('../Assets/wybmd-assets/Small_Button_Red.png'); color: #fff6e6; }
.devlog-seal:active img { filter: brightness(0) invert(1) opacity(0.92); }
.devlog-seal:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .devlog-seal { transition: none; }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .team-card-link { opacity: 1; transform: none; }
}