/* Main Container */
.story {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  z-index: 25;
  margin-bottom: 3rem;
}


/* Default (Desktop) Background */
.cssbackground {
  position: absolute;
  top: -20rem; /* Adjusted to match the top offset of the story container */
  left: 0;
  width: 100vh;
  height: 100vw; /* Match the height of the parent container */
  background-size: cover; /* Ensure the background image covers the entire area */
  background-position: left; /* Center the background image */
  z-index: -2; /* Behind the mask */


}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .cssbackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Match the height of the parent container */
    background-size: cover; /* Ensure the background image covers the entire area */
    background-position: center; /* Center the background image */
    z-index: -2; /* Behind the mask */
    transform: scale(1.2); /* Slight zoom for mobile */
    transform-origin: center; /* Keep the zoom centered */
  }
  .story-svg-layer path {
    position: absolute;
    stroke: #361083; /* Adjust the stroke color */
    stroke-width: 5px;
    transition: stroke-dashoffset 0.2s ease-out; /* Smooth animation */
    z-index: -1;
    transform: scale(2.8);
    transform-origin: center; /* Scale from the center */
  }
  .story {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    top: 2rem;
    z-index: 25;
    background-size: cover; /* Ensure the background image covers the entire area */
    background-position: center; /* Center the background image */
  }
}


/* Second Background (Mask) */
.cssmask {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 0; /* Above the first background */
}

.center-column{
  margin-left: 20%;
}


.story-header {
  padding-top: 3rem;
  margin-bottom: 3rem;
}
.story-footer {
  padding: 6rem 0;
}
.story-date {
  color: var(--color-text-grey);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  background: transparent;
}
.tag {
  display: inline-block;
  padding: 0.4em 1.2em;
  border-radius: 2em;
  background: var(--color-light, #f9f9f9);
  color: var(--color-black, #222);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  margin: 0;
}
.tag:hover,
.tag:focus {
  background: var(--color-black, #222);
  color: var(--color-white, #fff);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  text-decoration: none;
}

/* General container for the three columns */
.story-container {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr; /* Left column, middle column (auto width), right column */
  gap: 10px; /* Space between columns */
  align-items: start; /* Align items at the top */
  z-index: 10; /* Ensure it is above the backgrounds */;
}

/* First Column: Text Left */
.story-text {
  padding: 20px;
  font-weight: 800;
  z-index: 10;
}

.story-paragraph {
  position: relative;
  margin-bottom: 40px;
  line-height: 1.5em;
}

.story-paragraph h1{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 800;
  text-align: center;
  padding-right: 45px; /* Add padding to ensure content doesn't overlap the fade */
}

.story-paragraph h2{
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  text-align: center;
  padding-right: 45px; /* Add padding to ensure content doesn't overlap the fade */
}

.story-paragraph p{
  font-size: 0.9rem;
  text-align: justify;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
  padding-left: 45px;
  padding-right: 45px;
  padding-top: 5px;
  padding-bottom: 5px; /* Add padding to ensure content doesn't overlap the fade */
  border-radius: 8px;
  box-shadow: 1px 2px 10px rgba(50, 50, 50, 0.5);
  backdrop-filter: blur(10px);

  /* Add fading effect on all edges */
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%),
               linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%),
                      linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
}

.story-paragraph a {
  text-decoration: underline;
}

.story-paragraph :first-child {
  margin-top: 0;
}

.story-paragraph :last-child {
  margin-bottom: 0;
}

.story-paragraph p,
.story-paragraph ul,
.story-paragraph ol {
  margin-bottom: 1.5rem;
}

.story-paragraph ul,
.story-paragraph ol {
  margin-left: 1rem;
}

.story-paragraph ul p,
.story-paragraph ol p {
  margin-bottom: 0;
}

.story-paragraph ul > li {
  list-style: disc;
}

.story-paragraph ol > li {
  list-style: decimal;
}

.story-paragraph ul ol,
.story-paragraph ul ul,
.story-paragraph ol ul,
.story-paragraph ol ol {
  margin-bottom: 0;
}

.story-paragraph h1,
.story-paragraph .h1,
.story-paragraph .intro {
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.25em;
}

.story-paragraph h2,
.story-paragraph .h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.story-paragraph h3,
.story-paragraph .h3 {
  font-weight: 600;
}

.story-paragraph .codeblock {
  display: grid;
}

.story-paragraph code {
  font-family: var(--font-family-mono);
  font-size: 1em;
  background: var(--color-light);
  padding: 0 .5rem;
  display: inline-block;
  color: var(--color-black);
}

.story-paragraph pre {
  margin: 3rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.5rem;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 1.5rem;
}

.story-paragraph pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.story-paragraph hr {
  margin: 6rem 0;
}

.story-paragraph dt {
  font-weight: 600;
}

.story-paragraph blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}

.story-paragraph blockquote footer {
  font-size: .875rem;
  font-style: italic;
}

.story-paragraph figure {
  margin: 3rem 0;
}

.story-paragraph figcaption {
  padding-top: .75rem;
  color: var(--color-text-grey);
}

.story-paragraph figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.story-paragraph figure ul li {
  list-style: none;
}

.story-paragraph img {
  width: 100%;
  padding: 2rem;
}

/* Top layer: SVG Path */
.story-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent interaction with the SVG */
  z-index: -1;
}

.strokes {
  visibility: hidden; /* Hide the SVG */
}



.story-svg-layer path {
  position: absolute;
  stroke: #361083; /* Adjust the stroke color */
  width: 10px;
  stroke-width: 15px;
  stroke-dasharray: 10px; /* Adjust the dash pattern */
  /*fill: none;*/
  transition: stroke-dashoffset 0.2s ease-out; /* Smooth animation */
  z-index: -1;
}



/* Third Column: Text Right */
.story-text:last-child {
  padding: 20px;
}


/* story item link image */

.story-item{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* This centers children horizontally */
}

.story-link {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.story-images {
  padding: 20px;
}

.story-image {
  position: relative;
  margin-bottom: 40px;
  height: 10rem;
  border-radius: 30px;
  background-position: center;
  width: 50rem;
  transition: transform 0.3s ease, width 1s ease;

}

.story-image:hover {
  transform: scale(1.05);
  width: 60rem;
}





.story-image img {
  max-width: 100%;
  display: block;
  border-radius: 8px;
}

.story-image .line-to-center {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 2px;
  background-color: #333;
}





/* Path Container */
.path-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent interaction */
  z-index: 1;
}

.svg {
  position: absolute;
  width: 100%;
  height: 200%;
  top: -50%;
}

#scroll-path {
  stroke: #333; /* Path color */
  stroke-width: 6;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 0.1s ease;
}

#path-svg{
  color: aqua;
}


/* wrapping landscape */
.landscape {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
	background: var(--c1);
	height: 75vh;
	overflow: hidden;
  z-index: 20;
}

/********************/
/********************/
/* ENABLES PARALLAX */
/********************/
/********************/

@media (min-width: 601px) {

	#nonparallax {
		display: none;
	}
	#parallax {
		display: block;
	}

}

/*********************/
/*********************/
/* DISABLES PARALLAX */
/*********************/
/*********************/

@media (max-width: 600px) {

	#nonparallax {
		display: block;
	}
	#parallax {
		display: none;
	}

	#main {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 70px;
	}

	.section.copyright p {
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 1px;
	}
	.section.companylinks .companies li h1 {
		margin: 20px;
	}
}


/* Remove mobile adjustment for landscape */
@media (max-width: 600px) {

    #nonparallax {
        display: block;
    }
    #parallax {
        display: none;
    }

    #main {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 70px;
    }

    .section.copyright p {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 1px;
    }
    .section.companylinks .companies li h1 {
        margin: 20px;
    }
}

/* Remove or comment out the above block if you want the landscape parallax to behave the same on all devices. 
If you want to keep other mobile adjustments, but NOT disable parallax on mobile, just remove these lines: */

@media (max-width: 600px) {
    #nonparallax {
        display: block;
    }
    #parallax {
        display: none;
    }
}

/* After removal, both #parallax and #nonparallax will display according to your default (desktop) styles, even on mobile. */

@media only screen and (max-device-width: 450px) {

  .section.buy h2 {
		font-size: 22px;
		letter-spacing: 3px;
		font-weight: 700;
		line-height: 28px;
	}
	.section.buy h2.banner span {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.withxbone .section.buy h2.banner span {
		padding-top: 6px;
		padding-bottom: 8px;
	}

	.columntext p {
		font-size: 23px;
	}

	.section.pressquote.big h2 {
		font-size: 28px;
		letter-spacing: 1px;
	}
	.section.pressquote.big h3 {
		font-size: 16px;
	}

	.section.screenshots .thumbnails li {
		opacity: 1;
	}

	.supportlinks.smalllinks li h4 {
		letter-spacing: 1px;
	}

	.section.copyright {
		margin-top: 60px;
	}
	.section.copyright p {
		font-size: 10px;
		line-height: 16px;
		letter-spacing: 1px;
	}
	ul.awards {
		display: none;
	}







/* PARALLAX */

	.keyart, .keyart_layer {
		height: 550px;
	}

	.keyart_layer {
		position: absolute;
		background-size: auto 600px;
	}
}

/* make each layer fill parent */
.landscape__layer {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0.5)));
  will-change: transform; /* Optimize for performance */
  pointer-events: none; /* Prevent interaction */
  background-position: bottom center;
  background-size: auto 1038px;
  background-repeat: repeat-x;
}

.landscape .landscape__layer{
  height: 1000px;
  z-index: 20;
  max-width: 100%;
}

/* svg wrapper */
.landscape__image {
	/* position at bottom of element in center*/
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	/* set sizes that work for my image */
	/*max-height: 120%;*/
	max-width: 110%;
	min-width: 100%;
	width: 2500px;

	/* use flexbox to center SVG elements */
	display: flex;
	flex-direction: column;
}

.landscape__layer img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/*
@media (prefers-reduced-motion: reduce) {
  .landscape__layer {
    transform: translateY(0); /* Disable parallax for reduced motion */

/* Parallax effect */
.parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform; /* Optimize for performance */
}

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



.story-header {
  padding-top: 3rem;
  margin-bottom: 3rem;
}
.story-footer {
  padding: 6rem 0;
}
.story-date {
  color: var(--color-text-grey);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top:3rem;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  background: transparent;
}
.tag {
  display: inline-block;
  padding: 0.4em 1.2em;
  border-radius: 2em;
  background: var(--color-light, #f9f9f9);
  color: var(--color-black, #b79739);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  margin: 0;
}



.tag:hover,
.tag:focus {
  background: var(--color-black, #222);
  color: var(--color-white, #fff);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  text-decoration: none;
}

/* stories items */

.story-title h2{
  color:#fff
}

.story-title{
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
  align-items: center;
  text-align: center;
  padding-top: 2rem;
}

.stories-grid{
  padding-top: 2rem;
}


/* Add to your story.css */
.section-separator {
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0.85;
}
/*
.story-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
  will-change: opacity, background-image;
}
*/
.bg-current { opacity: 1; }
.bg-next   { opacity: 0; }
.story-section.active .bg-next { opacity: 1; }
.story-section.active .bg-current { opacity: 0; }

.story-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Remove aspect-ratio if you want it to grow with content */
  /* aspect-ratio: 16/9; */
  overflow: hidden;
}
/*
.story-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: scroll; 
  z-index: -2;
  pointer-events: none;
}

.story-path{
  color: red;
}
*/
/*
.story-bg, .story-path {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/*
.story-path {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 80vh; 
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
 
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  overflow: hidden;
}

.story-path svg {
  height: 100%;
  width: auto;
  display: block;
}
*/