@font-face{font-family:Edosz;src:url("../fonts/edosz.ttf"); font-display: swap; }
@font-face{font-family:TojoCaptioner;src:url("../fonts/TheTojoCaptioner-Regular.ttf"); font-display: swap; }
*{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#0b0b0b;
    --panel:#111;
    --line:#3a3a3a;

    --red:#8a1f2b;
    --red-bright:#BF00FF;
    --gold:#c9a227;
    --text-dim:#9c9c9c;

    /* Faction heading colors */
    --faction-murasaki:#7d4071;
    --faction-omi:#c9a227;
    --faction-tojo:#777;
    --faction-jingweon:#5c1119;
    --faction-gensokyo:#e0294f;
}

body {
    background: var(--bg) url("../images/homebg_soten_sdm.webp") center center / cover fixed no-repeat;
    color: #fff;
    font-family: Arial, sans-serif;
}
body:focus{outline:none}

header{padding:40px 20px 12px;text-align:center}
h1{
    font:normal 58px Edosz,sans-serif;
    text-shadow: 2px 2px 6px #000;
}
.eyebrow{
    font:normal 18px TojoCaptioner,sans-serif;
    letter-spacing:4px;
    color:var(--gold);
    margin-bottom:6px;
}

 
.raid{
    display:flex;
    gap:0;
    max-width:1500px;
    margin:10px auto 0;
    padding:0 20px;
    height:78vh;
    min-height:520px;
}

 
.raidLeft{
    width:36%;
    min-width:300px;
    position:relative;
background:
    linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,.4125) 55%, rgba(11,11,11,.75) 92%),
    radial-gradient(ellipse at 50% 20%, rgba(36,20,23,.75) 0%, rgba(11,11,11,.75) 70%);
    border:1px solid var(--line);
    border-right:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.raidLeft .renderWrap{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    min-height:0;
}

.raidLeft img.render{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.6));
    transition:opacity .15s ease;
}

.raidLeft .infoBlock{
    position:relative;
    padding:18px 26px 26px;
    background:linear-gradient(180deg, rgba(11,11,11,0) 0%, var(--bg) 40%);
}

.raidLeft .caption{
    font:normal 17px TojoCaptioner,sans-serif;
    color:var(--text-dim);
    letter-spacing:.5px;
    margin-bottom:4px;
}

.raidLeft .charName{
    font:normal 40px Edosz,sans-serif;
    line-height:1.05;
    margin-bottom:12px;
    text-shadow:0 2px 6px rgba(0,0,0,.7);
}

.raidLeft .bioBar{
    height:2px;
    width:100%;
    background:linear-gradient(90deg,var(--red-bright),transparent);
    margin-bottom:12px;
}

.raidLeft .bio{
    font:normal 17px TojoCaptioner,sans-serif;
    line-height:1.65;
    color:#ddd;
    max-height:120px;
    overflow:auto;
}

 
.raidGrid{
    flex:1;
    background:rgba(17, 17, 17, 0.75);
    border:1px solid var(--line);
    padding:18px 22px;
    overflow-y:auto;
}

.factionBlock{margin-bottom:26px}
.factionBlock:last-child{margin-bottom:6px}

.factionHead{
    display:flex;
    align-items:baseline;
    gap:12px;
    border-bottom:1px solid var(--faction-omi);
    padding-bottom:6px;
    margin-bottom:4px;
}

 

/* Murasaki Family — muted purple */
.factionBlock.murasaki .factionHead{
    border-bottom-color:var(--faction-murasaki);
}

/* Omi Alliance — existing gold */
.factionBlock.omi .factionHead{
    border-bottom-color:var(--faction-omi);
}

/* Tojo Clan — grey */
.factionBlock.tojo .factionHead{
    border-bottom-color:var(--faction-tojo);
}

/* Jingweon Mafia — dark blood red */
.factionBlock.jingweon .factionHead{
    border-bottom-color:var(--faction-jingweon);
}

/* Scarlet Devil Mansion */
.factionBlock.sdm .factionHead{
    border-bottom-color:var(--faction-gensokyo);
}

/* Other Gensokyo */
.factionBlock.gensokyo .factionHead{
    border-bottom-color:var(--faction-gensokyo);
}

/* Human Village Militia */
.factionBlock.hvm .factionHead{
    border-bottom-color:var(--faction-gensokyo);
}

.factionHead img{
    width:22px;height:22px;object-fit:contain;flex-shrink:0;
}

.factionHead .fName{
    font:normal 26px TojoCaptioner,sans-serif;
    letter-spacing:1px;
}

.factionHead .fTheme{
    margin-left:auto;
    font:normal 14px TojoCaptioner,sans-serif;
}
.factionHead .fTheme a{
    color:var(--text-dim);
    text-decoration:none;
    border-bottom:1px solid #555
}
.factionHead .fTheme a:hover{
    color:#fff;
    border-bottom-color:#fff
}

.factionDesc{
    font:normal 14px TojoCaptioner,sans-serif;
    color:var(--text-dim);
    line-height:1.55;
    margin:8px 0 14px;
    max-width:900px;
}

.thumbRow{
    display:flex;
    flex-wrap:wrap;
    column-gap:16px;
    row-gap:38px;
    padding-bottom:4px;
}

/* Parallelogram portrait slot - achieved with clip-path, no image pre-editing needed */
.thumb{
    position:relative;
    width:104px;
    height:130px;
    background:#1a1a1a;
    border:none;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
}

.thumb .clip{
    position:absolute;
    inset:0;
    clip-path:polygon(18% 0, 100% 0, 82% 100%, 0 100%);
    background:#000;
    overflow:hidden;
    border:2px solid #3d3d3d;
    transition:border-color .12s ease, transform .12s ease;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumb:hover .clip,
.thumb.selected .clip{
    border-color:var(--red-bright);
    transform:scale(1.045);
}

.thumb.selected .clip{
    box-shadow:0 0 0 2px var(--red-bright), 0 0 14px rgba(224,41,79,.55);
}

.thumb .nameTag{
    position:absolute;
    left:50%;
    bottom:-20px;
    transform:translateX(-50%);
    font:normal 12px TojoCaptioner,sans-serif;
    color:var(--text-dim);
    white-space:nowrap;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    pointer-events:none;
}

.thumb:hover .nameTag,
.thumb.selected .nameTag{
    color:#fff
}





.thumb.locked{
    width:0;
    margin-right:-16px;
    overflow:visible;
    cursor:default;
    transition:
        width .16s ease,
        margin-right .16s ease;
}

.thumb.locked .clip{
    width:100%;
    border-style:dashed;
    border-color:#444;
    background:#0d0d0d;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.thumb.locked .lockIcon{
    font-size:22px;
    color:#555;
}

 
.controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:36px;
    flex-wrap:wrap;
    max-width:1500px;
    margin:14px auto 0;
    padding:0 20px;
    font-family:TojoCaptioner,sans-serif;
    font-size:15px;
    color:#fff;
    text-align:center;
    text-shadow: 2px 2px 6px #000
}

.page-credit{
    margin-top:18px;
    text-align:center;
    font-family:"TojoCaptioner", sans-serif;
    font-size:14px;
    padding-bottom:10px;
    color:#fff;
    text-shadow: 2px 2px 4px #000
}

.storyTitle{
    text-align:center;
    font:normal 42px TojoCaptioner,sans-serif;
    margin:50px 0 20px;
    text-shadow: 2px 2px 6px #000
}

.storyRow{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    padding-bottom:25px
}

.storyCard{
    width:540px;
    text-align:center;
    text-shadow: 2px 2px 6px #000
}

.storyCard img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover
}

.storyCard div{
    margin-top:10px;
    font:normal 22px TojoCaptioner,sans-serif
}

@media(max-width:900px){
    .raid{
        flex-direction:column;
        height:auto
    }

    .raidLeft{
        width:100%;
        height:280px
    }

    .raidGrid{
        height:60vh
    }

    h1{
        font-size:36px
    }
}

.overlay{
    position:fixed;
    inset:0;
    background:#0b0b0b;
    opacity:0;
    pointer-events:none;
    transition:none;
    z-index:1000;
    display:flex;
    flex-direction:column
}

.overlay.open{
    opacity:1;
    pointer-events:auto
}

.overlay iframe{
    flex:1;
    width:100%;
    border:none;
    background:#0b0b0b
}

.overlay .controls{
    margin:0 auto;
    padding:10px 20px;
    border-top:1px solid #333
}

#taxiSprite{
    position:fixed;
    bottom:24px;
    right:24px;
    width:64px;
    height:auto;
    cursor:pointer;
    z-index:1001;
    display:none;
    transition:transform .15s ease;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));
}
.site-navigation { display: flex; justify-content: center; margin: 24px auto; padding: 0 20px; }
.credits-link { display: inline-block; padding: 14px 42px; border: 2px solid #333; background: #181818; color: #fff; font: normal 24px/1.3 TojoCaptioner, sans-serif; text-decoration: none; text-transform: uppercase; }
.credits-link:hover, .credits-link:focus-visible { background: #353535; border-color: #888; }

/* =========================================================
   Profiles Home — Yakuza 0 Director's Cut intro
   Total timeline: 2.243 seconds

   Left slide:   0.192–0.312s
   Right slide:  0.530–0.650s
   White split:  1.004–1.096s
   ========================================================= */

/* Keep panels in their normal layout; animate their transforms. */
.raidLeft,
.raidGrid {
    position: relative;
    backface-visibility: hidden;
}

/* LEFT PANEL — 120ms slide with motion blur. */
.raidLeft {
    animation: profiles-raid-enter-left 120ms
        cubic-bezier(0.16, 1, 0.3, 1) 192ms both;
}

/* RIGHT PANEL — starts later, also 120ms. */
.raidGrid {
    animation: profiles-raid-enter-right 120ms
        cubic-bezier(0.16, 1, 0.3, 1) 530ms both;
}

@keyframes profiles-raid-enter-left {
    from {
        transform: translateX(-110%);
        filter: blur(5px);
    }

    65% {
        filter: blur(2px);
    }

    to {
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes profiles-raid-enter-right {
    from {
        transform: translateX(110%);
        filter: blur(5px);
    }

    65% {
        filter: blur(2px);
    }

    to {
        transform: translateX(0);
        filter: blur(0);
    }
}


/* WHITE CURTAINS — conceal the panels, then uncover them. */
.raidLeft::before,
.raidLeft::after,
.raidGrid::before,
.raidGrid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: #fff;
    opacity: 1;
    pointer-events: none;
    z-index: 20;

    animation-duration: 300ms;
    animation-delay: 1.025s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}

/* Upper halves move up and disappear. */
.raidLeft::before,
.raidGrid::before {
    top: 0;
    animation-name: profiles-raid-white-top;
}

/* Lower halves move down and disappear. */
.raidLeft::after,
.raidGrid::after {
    bottom: 0;
    animation-name: profiles-raid-white-bottom;
}

@keyframes profiles-raid-white-top {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-110%);
        opacity: 0;
    }
}

@keyframes profiles-raid-white-bottom {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(110%);
        opacity: 0;
    }
}



/* Reduced motion: show the panels and their contents immediately. */
@media (prefers-reduced-motion: reduce) {
    .raidLeft,
    .raidGrid {
        animation: none;
        transform: none;
        filter: none;
    }

    .raidLeft::before,
    .raidLeft::after,
    .raidGrid::before,
    .raidGrid::after {
        animation: none;
        display: none;
    }
}


/* Remove the rectangular backing behind profile thumbnails. */
.thumb {
    background: transparent;
}

.thumb .clip {
    background: transparent;
}

/* Keep the Nishitani II secret completely invisible before the first press. */
.thumb.locked {
    visibility: hidden;
    pointer-events: none;
}

/* Reveal the slot only after the user begins the secret input. */
.thumb.locked.revealing {
    visibility: visible;
}
/* Hold the existing entrance at time zero until intro audio is playing. */
html.intro-pending .raidLeft,
html.intro-pending .raidGrid,
html.intro-pending .raidLeft::before,
html.intro-pending .raidLeft::after,
html.intro-pending .raidGrid::before,
html.intro-pending .raidGrid::after {
    animation-play-state: paused;
}

/* Failed or blocked audio must never leave the menu concealed. */
html.intro-skipped .raidLeft,
html.intro-skipped .raidGrid {
    animation: none;
}
html.intro-skipped .raidLeft::before,
html.intro-skipped .raidLeft::after,
html.intro-skipped .raidGrid::before,
html.intro-skipped .raidGrid::after {
    display: none;
}