/* Reset & Fonts */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cagliostro", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #41084f;
  background-color: #fffef7;
  overflow-x: hidden;
}

h1 {
  font-family: "Sail", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.tagline {
  font-family: "WindSong", cursive;
  font-weight: 500;
  font-style: normal;
}

/* Colors */
:root {
  --purple: oklch(26% 0.14 321); /*#41084f; (Hex Color)*/
  --golden-yellow: oklch(80% 0.18 94); /*#edc624; (Hex Color)*/
  --light-purple: oklch(95% 0.02 321); /*#efe1f2; (Hex Color)*/
}

/* Buttons */
.btn {
  padding: 0.6em 2em;
  text-decoration: none;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
  margin: 1em;
}

.btn-golden-yellow {
  background: var(--golden-yellow);
  color: black;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-golden-yellow:hover {
  background: oklch(75.12% 0.1524 83.53); /*#dca40c; (Hex Color)*/
  transform: translateY(-8px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
}

.btn-light-purple {
  background: var(--light-purple);
  color: black;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
} 

.btn-light-purple:hover {
  background: oklch(83.80% 0.1119 320.44); /*#ebb2f7; (Hex Color)*/
  transform: translateY(-8px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
}


/* Scroll-in Animation using Pure CSS */

@supports (animation-timeline: view()) {
  .animate-slide-right {
    animation-name: slideInRightView;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    animation-fill-mode: both;
    animation-duration: 10s;
    animation-timing-function: ease-out;
  }

  .animate-slide-left {
    animation-name: slideInLeftView;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    animation-fill-mode: both;
    animation-duration: 10s;
    animation-timing-function: ease-out;
  }
  
  .animate-roll-in {
    animation-name: rollInView;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
    animation-fill-mode: both;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
  }
}

/* Keyframes (these are separate from Animate.css) */
@keyframes slideInRightView {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeftView {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rollInView {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}


/* Hero Section */
.hero {
  background: var(--purple);
  color: white;
  padding: 3em 1em;
 /* margin-top: 2em;*/
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;  
}

   @keyframes rotatingAnimation {
  0% {
    transform: rotateX(16deg) translate3d(0, 0, 0) rotateY(0deg);
  }
  100% {
    transform: rotateX(16deg) translate3d(0, 0, 0) rotateY(360deg);
  }
}

:root {
  --box-width: 300px;
  --box-height: 450px;
  --box-depth: 32px;
}

.book-container {
  width: auto;
  height: 500px;
  perspective: 1200px; 
  background: oklch(26% 0.14 321);
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-holder {
 /* transform: rotateY(10deg); */
  animation: rotatingAnimation 10s linear infinite;
  transform-style: preserve-3d; 
  position: relative;
}

.box-holder:hover {
  animation: paused;
}

.box-holder > div {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

/* FRONT */
.box--front {
  width: var(--box-width);
  height: var(--box-height);
  background: url(./assets/Book_cover_front_with_text.webp) no-repeat center right;
  background-size: auto 100%;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), 0) rotateY(0deg);
}

/* BACK */
.box--back {
  width: var(--box-width);
  height: var(--box-height);
  background: url(./assets/Book_cover_back_with_text.webp) no-repeat center left;
  background-size: auto 100%;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), calc(-1 * var(--box-depth))) rotateY(180deg);
}

/* LEFT */
.box--side-left {
  width: var(--box-depth);
  height: var(--box-height);
  background: oklch(25.74% 0.0579 321.51); /*#301934; (Hex Color)*/
  background-size: auto 100%;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), 0)
  translate3d(calc(var(--box-depth) * -0.5), 0, calc(var(--box-depth) * -0.5)) rotateY(-90deg);
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0 2px;
}

.author-name {
  writing-mode: vertical-lr; /* Vertical Left to Right (top to bottom) */
  color: white;
  font-size: 10px; /* Adjust as needed to fit the narrow spine */
  letter-spacing: 1.5px;
  text-align: center;
}

.spine-text {
  writing-mode: vertical-lr; /* Vertical Left to Right (top to bottom) */
  color: white;
  font-size: 14px; /* Adjust as needed to fit the narrow spine */
  letter-spacing: 2px;
  text-align: center;
}

/* RIGHT */
.box--side-right {
  width: var(--box-depth);
  height: var(--box-height);
  background: url(./assets/paper-vertical.webp) no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), 0)
  translate3d(calc(var(--box-width) - var(--box-depth) * 0.5), 0, calc(var(--box-depth) * -0.5)) rotateY(90deg);
}

/* TOP */
.box--top {
  width: var(--box-width);
  height: var(--box-depth);
  background: url(./assets/paper-horizontal.webp) no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), 0)
  translate3d(0, calc(var(--box-depth) * -0.5), calc(var(--box-depth) * 0.5)) rotateX(90deg);
}

/* BOTTOM */
.box--bottom {
  width: var(--box-width);
  height: var(--box-depth);
  background: url(./assets/paper-horizontal.webp) no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  transform: translate3d(calc(var(--box-width) * -0.5), calc(var(--box-height) * -0.5), 0)
  translate3d(0, calc(var(--box-height) - var(--box-depth) * 0.5), calc(var(--box-depth) * -0.5)) rotateX(-90deg);
}


.hero-text h1 {
  font-size: 4em;
  text-align: center;
  margin: 0.5em 0;
  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

.hero-text .tagline {
  font-size: 2.5em;
  color: var( --golden-yellow);
  text-align: center;
  margin: 0.5em 0;
}

.hero-text .book-description {
  font-size: 1.25em;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Blurb Section */
.blurb {
  background: var(--light-purple);
  padding: 3em 1em;
}

.blurb-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
}

.blurb-right h2 {
  max-width: 600px;
  font-size: clamp(1.5rem, 5vw, 3em);
  margin-bottom: 1em;
  text-transform: uppercase;
}

.blurb-icon {
  width: 300px;
  margin-bottom: 1em;
}

.blurb-left p {
  max-width: 600px;
  line-height: 1.6;
  font-size: 1.25em;
}

/* About the Author Section */
.about-author-section {
  background: var(--purple);
  color: white;
  padding: 3em 1em;
}

.about-content {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;
}

.about-text {
  max-width: 600px;
}

.about-author {
  font-family: "WindSong", cursive;
  font-weight: 500;
  font-size: 3em;
  color: var( --golden-yellow);
}

.about-text p {
  line-height: 1.6;
  font-size: 1.25em;
}

.author-photo {
  width: 300px;
  border-radius: 10px;
  margin-bottom: 1.5em;
}

/* Testimonials Section */
.testimonials-section {
  background: var(--light-purple);
  padding: 3em 1em;
}

.testimonials {  
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;  
}

.testimonials h2 {
  font-size: clamp(1.5rem, 5vw, 3em);
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 2rem;
}

.testimonials-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  align-items: center;
}

.testimonial-card {
  background: var(--light-purple);
  max-width: 400px;
  border-radius: 1rem;
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
}

.testimonial-text {
  font-size: 1rem;
  color: var(--purple);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  text-align: left;
}

.testimonial-text::before {
  content: "“";
  font-size: 4rem;
  color: var(--purple);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-author-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-author-info {
  text-align: left;
}

.testimonial-author-name {
  font-weight: bold;
  color: oklch(0 0 0); /*#000000; (Hex Color)*/
}

.testimonial-author-profession {
  font-size: 0.9rem;
  color: oklch(51.22% 0.1478 304.27); /*#7a4caa; (Hex Color)*/
}

/* Buy From Section */
.buy-from-section {
  background: var(--purple);
  padding: 3em 1em;
}  

.buy-from { 
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*gap: 2em;*/
  max-width: 1300px;
  margin: 0 auto;  
}

.buy-from h2 {
  max-width: 600px;
  font-size: 3em;
  text-transform: uppercase;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2em;
  background: transparent;
}

.store-buttons a {
  padding: 0.6em 2em;
  text-decoration: none;
  border-radius: 20px;
  font-weight: bold;
  display: inline-block;
  margin: 1em;
  background: var(--light-purple);
  color: black;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
} 

.store-buttons a:hover {
  background: oklch(83.80% 0.1119 320.44); /*#ebb2f7; (Hex Color)*/
  transform: translateY(-8px);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
}

/* Upcoming Books Section */
.more-books-section {
  background: var(--light-purple);
  padding: 3em 1em;
}

.more-books {
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;
}

.more-books h2 {
  font-size: clamp(1.5rem, 5vw, 3em);
  text-transform: uppercase;
}

.book-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  margin-top: 2em;
}

.book img {
  width: 150px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.8);
  border-radius: 5px;
}

.book a {
  margin-bottom: 2em;
}

/* Contact Section */
.contact-section {
  background: var(--purple);
  padding: 3em 1em;
}

.contact {
  color: white;
  text-align: center;
  max-width: 1300px;
  margin: 0 auto;
}

.contact h2 {
  font-size: clamp(1.5rem, 5vw, 3em);
  text-transform: uppercase;
  margin-bottom: 1em;
}

.contact-info p {
  line-height: 1.6;
  font-size: clamp(12px, 4vw, 1.5em);
}

.contact a {
  color: white;
  margin: 0 0.5em;
}


/* Back-To-Top Section */

.back-to-top {
  --golden-yellow: oklch(80% 0.18 94);
  /*--purple: oklch(26% 0.14 321);*/
  --white:  oklch(100% 0 0);

  /* Basic styling */
  background-color: oklch(100% 0 0);
  background-image: linear-gradient(var(--golden-yellow), var(--white));
  /*background-image: linear-gradient(var(--golden-yellow) 0% 50%, var(--white) 50% 100%);*/
  background-image: linear-gradient(var(--golden-yellow) 0% var(--progress), var(--white) var(--progress) 100%);
  border: 5px solid;
  border-radius: 0.9em;
  border-color: black;
  box-shadow: 0px 4px 0px rgba(0, 0, 0, 1);
  display: inline-block;
  padding: 0.3em;
  /* Position at the bottom right of the viewport */
  position: fixed;
  inset: auto 2rem 2rem auto;
  animation: progress linear;
  animation-timeline: scroll();
}

.back-to-top:is(:link, :visited) {
  /* Instead of the link color, use the text color */
  color: currentColor;
  text-decoration: none;
}

.back-to-top span {
  /* Hide text accessibly */
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.back-to-top svg {
  display: block;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3px;
  transform: rotate(var(--angle));
}

/* ========================= */
/* Centered on small screens (< 768px) */
/* ========================= */
@media (max-width: 768px) {
  .back-to-top {
    /* put it at bottom center */
    inset: auto auto 1rem 50%;
    transform: translateX(-50%);   /* center horizontally */
  }
}

/* ========================= */
/* Custom properties & animation */
/* ========================= */

@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -90deg;
}

@keyframes progress {
  0% {
    --progress: 0%;
    --angle: 0deg;
  }

  2% {
    --angle: -90deg;
  }

  100% {
    --progress: 100%;
  }
}

/* ========================= */
/* Fallbacks for unsupported browsers */
/* ========================= */
@supports not (animation-timeline: scroll()) {
  .back-to-top {
    background: var(--golden-yellow);
  }
}

/* ========================= */
/* Reduced motion & smooth scroll */
/* ========================= */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    animation: none;          /* no scroll-driven effects */
    opacity: 1; visibility: visible;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* Responsive Layout for Larger Screens */
@media (min-width: 769px) {
  .hero-content {
    flex-direction: row;
    justify-content: center;
    gap: 4em;
    text-align: left;
  }
  
  .book-container {
    width: 750px;
  }
  
  .blurb-content {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
  }

  .blurb-left, .blurb-right {
    flex: 1;
  }

  .blurb-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
  }

  .blurb-left {
    display: flex;
    align-items: center;
    text-align: left;
    padding-left: 1em;
  }

  .blurb-left p {
    margin: 0;
  }

  .blurb-icon {
  width: 400px;
  }
  
  .about-content {
    flex-direction: row;
    gap: 3em;
    text-align: left;
    align-items: center;
    justify-content: space-evenly;
  }
  
  .testimonials-container {
    flex-direction: row;
    justify-content: space-evenly;
  }
  
  .store-buttons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 0 40px;
  }
  
  .store-buttons a {
    flex: 1 1 200px;
    max-width: 220px;
    text-align: center;
  }
  
  .book-list {
    justify-content: space-evenly;
  }
  
  .contact-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2em;
    flex-wrap: wrap;
  }
  
  .contact-info p {
    flex: 1 1 200px;
  }
}