/* Visual Journal - A Solari Board Component
 * This script dynamically creates and manages the interactive Solari board.
 * It finds a placeholder, injects the HTML, and dynamically loads Three.js
 * before initializing the scene. It assumes its CSS is loaded separately.
 * 
 * Copyright (C) 2025 Willem L. Middelkoop - willem.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.*/


/* --- Visual Journal Styles --- */

/* This creates a "full-bleed" section that spans the full viewport width,
   breaking out of the main content column. */
#visual-journal-container {
    position: relative;
    width: 100vw; /* Use full viewport width */
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* Center the full-width element */
    margin-right: -50vw;
    height: 500px; /* A fixed height for the normal page flow */
    background-color: #121212;

	box-sizing:border-box;
}

/* This makes the container break out of the page flow and fill the entire screen */
body.vj-maximized #visual-journal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0; /* Reset margins for fixed positioning */
    z-index: 100000; /* Ensure it's on top of other page content */
	box-sizing:border-box;
}


/* Prevents the main page from scrolling when the journal is in fullscreen mode */
body.vj-no-scroll {
    overflow: hidden;
}

/* Hides the main title when in fullscreen mode */
body.vj-maximized .vj-content-overlay {
    opacity: 0;
    pointer-events: none;
	display:none;
}

/* Shows the close button only when in fullscreen mode */
body.vj-maximized .vj-close-btn {
    opacity: 1;
    pointer-events: all;
}

/* The Three.js canvas container fills its parent (either fixed height or fullscreen) */
.vj-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, filter 0.3s ease-in-out;
    cursor: default;
	box-sizing:border-box;
}

/* Changes cursor to a pointer when hovering over a clickable tile */
.vj-canvas-container.interactive {
    cursor: pointer;
}

/* Fades the canvas in after images have loaded */
.vj-canvas-container.loaded {
    opacity: 1;
}

/* Blurs and darkens the canvas when the toast popup is active */
.vj-canvas-container.board-inactive {
    filter: blur(5px) brightness(0.5);
}

/* Overlay for the main title and buttons */
.vj-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.5s ease-in-out;
}

/* The main title "toast" box */
.vj-title-section {
    padding: 2rem;
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;

	max-width:80vw;
	margin-left:auto;
	margin-right:auto;
	box-sizing:border-box;
}

/* Disables pointer events on the title when maximized */
body.vj-maximized .vj-title-section {
    pointer-events: none;
}

.vj-title-section h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.vj-title-section p {
    font-size: 1.1rem;
    color: #a0a0a0;
    margin: 0;
}

.vj-loading-indicator {
    font-size: 1.2rem;
    color: #a0a0a0;
}

/* General button styling for maximize/close */
.vj-view-toggle-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, opacity 0.5s ease-in-out;
    pointer-events: all;
}

.vj-view-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Specific styling for the "Open Fullscreen" button */
.vj-maximize-btn {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

/* Specific styling for the close button in fullscreen mode */
.vj-close-btn {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 0, 0, 0.8);
}

.vj-close-btn:hover {
    background: rgba(255, 0, 0, 0.5);
}

.vj-close-btn svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

/* Styling for the toast popup when a tile is clicked */
.vj-toast-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: calc(100% - 2rem);
    max-width: 400px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 16px;
    z-index: 110; /* Ensure it's above the maximized container */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

.vj-toast-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

.vj-toast-popup img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.vj-toast-popup p {
    font-size: 1rem;
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 1.5rem;
}

.vj-toast-popup .actions {
    display: flex;
    width: 100%;
    gap: 1rem;
}

.vj-toast-popup .actions a,
.vj-toast-popup .actions button {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vj-toast-popup .actions .open-story-btn {
    background-color: #fff;
    color: #000;
}

.vj-toast-popup .actions .open-story-btn:hover {
    background-color: #ccc;
}

.vj-toast-popup .actions .close-toast-btn {
    background-color: #444;
    color: #fff;
}

.vj-toast-popup .actions .close-toast-btn:hover {
    background-color: #555;
}

/* --- "About this" Link Style --- */
.vj-about-link {
	display:none;
    font-size: 0.8rem;
    margin-top: 1.5rem;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.vj-about-link:link,
.vj-about-link:active,
.vj-about-link:visited{
    color: #a0a0a0;
    text-decoration: underline;
}

.vj-about-link:hover {
    opacity: 1;
    color: #ffffff;
}