/* CodeSeed Studios: Rites of Accord's dark tactics look, CodeSeed's sage palette */
:root {
    --ink: #060f1e;
    --panel: #0b1424;
    --seed: #8dba90;
    --moss: #5a7d5c;
    --rite: #00c8dc;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* Hex-grid texture */
.hex-bg {
    background-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16 L56 49 L28 65 L0 49 L0 16 Z M28 65 L28 98' fill='none' stroke='%238dba90' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 56px 98px;
}

.hero-glow {
    background:
        radial-gradient(60% 50% at 75% 40%, rgba(0, 200, 220, 0.14), transparent 70%),
        radial-gradient(50% 60% at 15% 80%, rgba(141, 186, 144, 0.16), transparent 70%),
        linear-gradient(to bottom, transparent 70%, var(--ink));
}

/* Header turns solid once scrolled */
.studio-header { transition: background-color .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.studio-header.is-scrolled { background-color: rgba(6, 15, 30, 0.9); backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.08); }

/* Angled game-UI buttons */
.hex-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    font-family: "Chakra Petch", Inter, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .9rem;
    line-height: 1;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hex-btn:hover { transform: translateY(-1px); }
.hex-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hex-btn--seed { background: var(--seed); color: var(--ink); }
.hex-btn--seed:hover { background: #a5d1a8; }
.hex-btn--rite { background: var(--rite); color: var(--ink); }
.hex-btn--rite:hover { background: #4fe3f0; box-shadow: 0 0 24px rgba(0, 220, 240, .35); }
.hex-btn--ghost { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.hex-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Rites of Accord key art frame */
.keyart {
    box-shadow: 0 0 0 1px rgba(0, 200, 220, 0.35), 0 30px 80px -20px rgba(0, 200, 220, 0.35);
    transition: box-shadow .3s ease;
}
.keyart img { transition: transform .6s ease; }
.keyart:hover { box-shadow: 0 0 0 1px rgba(0, 220, 240, 0.7), 0 30px 90px -15px rgba(0, 220, 240, 0.5); }
.keyart:hover img { transform: scale(1.02); }

/* ListForge logo tile */
.listforge-badge {
    background: radial-gradient(circle at 50% 40%, rgba(141, 186, 144, 0.35), rgba(90, 125, 92, 0.15) 55%, transparent 75%), var(--panel);
    box-shadow: 0 0 0 1px rgba(141, 186, 144, 0.25);
}

/* ---------- Hero stage: Rites of Accord faction lineup ---------- */
.hero-stage {
    aspect-ratio: 1 / 0.92;
    isolation: isolate;
}
.hero-stage::before {
    /* soft halo behind the lineup */
    content: "";
    position: absolute;
    inset: 8% 4% 18%;
    background: radial-gradient(closest-side, rgba(0, 200, 220, 0.22), rgba(141, 186, 144, 0.08) 60%, transparent);
    filter: blur(10px);
    z-index: 0;
}

/* Glowing hex floor in perspective */
.hero-floor {
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -6%;
    height: 52%;
    z-index: 0;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: 50% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16 L56 49 L28 65 L0 49 L0 16 Z M28 65 L28 98' fill='none' stroke='%2300dcf0' stroke-opacity='0.55' stroke-width='1.4'/%3E%3C/svg%3E");
    background-size: 56px 98px;
    background-position: center bottom;
    -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 60%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 50% 70% at 50% 60%, #000 30%, transparent 75%);
    filter: drop-shadow(0 0 6px rgba(0, 220, 240, 0.6));
    animation: floor-pulse 6s ease-in-out infinite;
}
@keyframes floor-pulse {
    0%, 100% { opacity: .75; }
    50% { opacity: 1; }
}

.hero-unit {
    position: absolute;
    left: var(--x);
    bottom: var(--b);
    height: var(--h);
    z-index: var(--z);
    margin: 0;
    transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
    transition: transform .25s ease-out;
    animation: unit-in .9s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--i) * 110ms + 150ms);
}
.hero-unit img {
    height: 100%;
    width: auto;
    max-width: none;
    display: block;
    filter: drop-shadow(0 0 22px rgba(var(--c), 0.35)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.55));
    transition: filter .3s ease, transform .3s ease;
}
.hero-unit--back img { filter: brightness(.72) saturate(.9) drop-shadow(0 0 18px rgba(var(--c), 0.25)); }
.hero-unit--float img { animation: unit-float 5.5s ease-in-out infinite; }
@keyframes unit-in {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes unit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Name tags on hover (pointer devices) */
.hero-unit figcaption {
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50% 6px;
    white-space: nowrap;
    padding: .3rem .65rem;
    font: 600 .7rem/1 "Chakra Petch", Inter, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(6, 15, 30, 0.85);
    border: 1px solid rgba(var(--c), 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, translate .2s ease;
}
.hero-unit figcaption span { color: rgb(var(--c)); }
@media (hover: hover) {
    .hero-unit:hover { z-index: 10; }
    .hero-unit:hover img { filter: brightness(1.08) drop-shadow(0 0 30px rgba(var(--c), 0.7)) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.55)); }
    .hero-unit:hover figcaption { opacity: 1; translate: -50% -4px; }
}

.hero-stage-tag {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 50%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    white-space: nowrap;
    color: var(--rite);
    background: rgba(6, 15, 30, 0.85);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 220, 0.45), 0 0 24px rgba(0, 200, 220, 0.2);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: background-color .2s ease;
}
.hero-stage:hover .hero-stage-tag { background: rgba(0, 200, 220, 0.15); }

/* ---------- ListForge download bar ---------- */
.platform-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid rgba(141, 186, 144, 0.25);
    border-radius: .75rem;
    overflow: hidden;
    background: rgba(6, 15, 30, 0.6);
}
.platform-bar li + li { border-left: 1px solid rgba(141, 186, 144, 0.18); }
.platform-bar a {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: 1.1rem 1.25rem;
    color: #e2e8f0;
    transition: background-color .2s ease, color .2s ease;
}
.platform-bar i { font-size: 1.5rem; width: 1.6rem; text-align: center; color: var(--seed); transition: transform .2s ease; }
.platform-bar strong { display: block; font-family: "Chakra Petch", Inter, sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; }
.platform-bar small { display: block; color: #64748b; font-size: .78rem; margin-top: .1rem; }
.platform-bar a:hover { background: rgba(141, 186, 144, 0.1); color: #fff; }
.platform-bar a:hover i { transform: translateY(-2px); }
.platform-bar a:focus-visible { outline: 2px solid var(--seed); outline-offset: -2px; }
@media (max-width: 1023px) {
    .platform-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-bar li + li { border-left: 0; }
    .platform-bar li { border-top: 1px solid rgba(141, 186, 144, 0.18); }
    .platform-bar li:nth-child(-n+2) { border-top: 0; }
    .platform-bar li:nth-child(even) { border-left: 1px solid rgba(141, 186, 144, 0.18); }
    .platform-bar li:last-child { grid-column: 1 / -1; border-left: 0; }
}

/* The character lineup is desktop-only; on phones the hero is text-first */
@media (max-width: 767px) {
    .studio-hero .hero-stage { display: none; }
    section.studio-hero { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hex-btn, .keyart img { transition: none; }
    .hex-btn:hover, .keyart:hover img { transform: none; }
    .hero-unit, .hero-unit--float img, .hero-floor { animation: none; }
    .hero-unit { transform: none; }
}

/* Footer stance flags */
.stance { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .75rem; }
.stance-head { font-size: .85rem; }
.stance-flags { display: flex; gap: .5rem; }
.flag { display: block; width: 30px; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.stance-line { font-size: .85rem; font-style: italic; }
.flag { filter: saturate(.7) brightness(.92); }