/* CSC316 Project Styles */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Philosopher:ital,wght@0,400;0,700;1,400&display=swap');

/* ── VARIABLES ── */
:root {
	--parchment:    #e8d9b5;
	--parchment-lt: #f0e6cc;
	--ink:          #2c1f0e;
	--ink-faded:    #5a3e22;
	--ink-ghost:    rgb(44 31 14 / 22%);
}

/* ── PAGE ── */
html, body {
	background-color: var(--parchment) !important;
	font-family: Philosopher, serif;
	color: var(--ink);
	margin: 0;
	padding: 0;
	overflow-y: auto;
}

.vignette {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 200px rgb(0 0 0 / 60%) inset;
	pointer-events: none; /* Allows clicks to pass through */
	z-index: 9999; /* Ensures it stays on top */
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Uncial Antiqua', cursive;
	color: var(--ink-faded);
	letter-spacing: 0.06em;
}

.canvas {
	width: 100%;
	max-width: 100vw;
	margin: 40px auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Frame 1: Intro */

#frame1 {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Avatar Bubble Chart Styles */

svg {
	display: block;
	margin: 0 auto;
}

#frame1 svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Frame 2: Element Bending Visualization */
#frame2 {
	min-height: 820px;
	flex-direction: column;
}


#frame3 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

#frame3 svg {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}

.frame3-viz-row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}

/* Bubble styles */
.bubble {
	cursor: pointer;
	transition: all 0.2s ease;
}

.bubble:hover {
	filter: drop-shadow(0 0 8px rgb(0 0 0 / 40%));
}

/* Chart title */
.chart-title {
	fill: #333;
}

/* Book labels */
.book-label {
	opacity: 0.7;
}

/* Tooltip - styles are mostly inline in JS, but adding some backup */
.tooltip {
	line-height: 1.6;
}

.tooltip strong {
	color: #fff;
}

/* Legend */
.legend text {
	fill: #333;
}

/* Optional: Add controls container */
.controls {
	text-align: center;
	margin: 20px 0;
}

.controls button {
	margin: 0 5px;
	padding: 10px 20px;
	border: 2px solid #ddd;
	background: white;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	transition: all 0.3s ease;
}

.controls button:hover {
	background: #f0f0f0;
	border-color: #999;
}

.controls button.active {
	background: #333;
	color: white;
	border-color: #333;
}

/* Responsive design */
@media (width <= 1280px) {
	svg {
		max-width: 100%;
		height: auto;
	}
}

/* Frame 4: Character */

/* #frame4_1 {
    font-family: 'Uncial Antiqua', cursive;
} */

.scrollbox::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.scrollbox:hover::-webkit-scrollbar {
  width: 6px;
  height: 8px;
}

.scrollbox::-webkit-scrollbar-thumb {
  background: rgb(0 0 0 / 35%);
  border-radius: 6px;
}


/* Frame 6: Theme Timeline  */

#frame6 {
	background-color: var(--parchment);
	padding: 10px;
}


/* filter buttons */
#atla-filters {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px auto -4px;
	max-width: 1400px;
	width: 100%;
	position: relative;
	z-index: 10;
}

.atla-btn {
	padding: 7px 18px;
	border: 1.5px solid;
	border-radius: 3px;
	cursor: pointer;
	background: rgb(255 255 255 / 30%);
	font-family: "Uncial Antiqua", cursive;
	font-size: 12px;
	letter-spacing: 0.05em;
	transition: opacity 0.2s, transform 0.15s;
}

.atla-btn:hover {
	transform: translateY(-1px);
}

.atla-btn.inactive {
	opacity: 0.35;
	background: transparent;
}

/* chart  */
#atla-vis {
	display: block;
	width: 100%;
	height: 600px;
	background-color: var(--parchment);
}

/* themes hover tooltip */
#atla-tooltip {
	position: fixed;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 999;
	max-width: 280px;
}

#atla-tooltip.visible {
	opacity: 1;
}

.atla-tt-inner {
	background: var(--parchment-lt);
	border: 1px solid var(--ink-ghost);
	border-radius: 4px;
	padding: 12px 14px;
	box-shadow: 2px 4px 14px rgb(44 31 14 / 20%);
}

#atla-tt-label {
	font-size: 10px;
	color: var(--ink-faded);
	font-style: italic;
	margin: 0 0 3px;
}

#atla-tt-title {
	font-family: "Uncial Antiqua", cursive;
	font-size: 13px;
	color: var(--ink);
	margin: 0 0 8px;
}

#atla-tt-themes {
	font-size: 11px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

#atla-tt-desc {
	font-size: 13px;
	font-style: italic;
	color: var(--ink-faded);
	margin: 0;
	line-height: 1.5;
}

/* help icon */
.atla-help-icon {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid var(--ink-faded);
	border-radius: 50%;
	background: rgb(255 255 255 / 30%);
	color: var(--ink-faded);
	font-family: "Uncial Antiqua", cursive;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
	margin-left: 8px;
	user-select: none;
}

.atla-help-icon:hover {
	transform: translateY(-1px);
	background: rgb(255 255 255 / 50%);
}

.atla-help-icon.active {
	background: rgb(255 255 255 / 60%);
	box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}

/* instructional tooltips on chart */
.atla-instruction-tooltip rect {
	opacity: 0.95;
}

.atla-instruction-tooltip text {
	pointer-events: none;
}

/* Brush selection */
.brush {
	cursor: crosshair;
}

.brush .overlay {
	cursor: crosshair;
}

.brush .selection {
	stroke: #fff;
	stroke-width: 1.5;
	fill: rgb(90 62 34 / 45%);
	opacity: 1;
}

.brush .handle {
	display: none;
}

/* Stats panel */
#atla-stats-panel {
	line-height: 1.6;
	font-size: 13px;
	box-shadow: 2px 2px 6px rgb(0 0 0 / 20%);
	margin: 0 auto;
}

/* Summary section */
#summary {
	width: 100%;
	background-color: var(--parchment);
	padding: 20px 0 0 0;
	margin: -20px 0 0 0;
}