@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Sacramento&display=swap');

:root * {
  box-sizing: border-box;
}
html, body {
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden;
  
  font-weight: 400;
  font-style: normal;
  background-color: #FDF7E8;
}

.book-container {
  width:100vw; height:100vh;
  display:flex; justify-content:center; align-items:center;
  perspective:2000px; position:relative;
}

/* Cinematic lights */
.book-container::before {
  content:'';
  background:
    linear-gradient(135deg, rgba(255,255,200,0.2) 0%, transparent 70%),
    linear-gradient(225deg, rgba(255,255,200,0.15) 0%, transparent 70%);
  pointer-events:none;
  z-index:5;
}

/* Cover */
.cover {
  padding: 33px;
  position:absolute; top:0; height:100%; width:50%;
  background:#6d4c41; display:flex; justify-content:center; align-items:center;
  backface-visibility:hidden; box-shadow:0 0 20px rgba(0,0,0,0.5);
  color:#FDF7E8;
  font-size:2rem;
  transition: transform 1s ease;
  z-index:10;
   /* gradient continuu pentru fundal */
  background: linear-gradient(285deg, #6d4c41, #5d4037, #703c29);
  display: flex; flex-direction: column; gap: 50px;
}
.left-cover { left:0; transform-origin:left;  }
.right-cover { right:0; transform-origin:right; background-image: url('./images/bkg.png');}

.open-btn {
  padding:15px 30px; font-size:1.2rem; cursor:pointer;
  border:none; background:#FDF7E8; color:#3e2723;
}
.open-btn:hover { transform: scale(1.05); }

/* Animație deschidere */
.book.open .left-cover { transform: rotateY(-120deg); opacity:0.8; }
.book.open .right-cover { transform: rotateY(120deg); opacity:0.8; }

/* Pages */
.pages { 
  width:100%; height:100%; display:flex; 
  /* position:absolute; top:0; left:0;  */
  opacity:0; transition: opacity 1s ease; 
}

.book.open .pages { opacity:1; }

.page {
  display: none;
  width: 50%;
  background:rgba(255,255,240,0.95);
  padding: 30px 70px; overflow:auto; 
  box-shadow:inset 0 0 15px rgba(0,0,0,0.1);
  transform: translateX(100vw);
  transition: transform 1s ease;

  /* top: 0%; left: 50%; transform: translate(-50%, 0); */
  /* padding: 4em; */
  box-shadow: 0 0 60px #8a4d0f inset;
  background: #fffef0;
  filter: url(#wavy2);
}

/* Active pages */
.page.active-left { transform: translateX(0); z-index:5; }
.page.active-right { transform: translateX(0); z-index:4;}

/* Writing effect */
.writing { 
  white-space:nowrap; overflow:hidden; display:inline-block; 
  font-size:1.5rem; font-family: "Sacramento", cursive;
  margin: 0;
   white-space: normal; font-size: 30px; color: #6d4c41;
  display: none;
}
.writing::after {
  content: "";
  display: inline-block;
  width: 1em;  /* same height as the text */
  height: 1em;
  margin-left: 0.3em; /* small space after text */
  background-size: 30px;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.writing.see{
  display: block;
}

.writing.pen::after{
  background-image: url('images/pen.png');
}



.next-btn {
  position:absolute; bottom:20px; right:20px;
  padding:10px 20px; font-size:1rem; cursor:pointer;
  background:transparent; border:none; color:#3e2723;
  z-index:20;
  display: none;
}
.next-btn:hover { transform: scale(1.05); }

.prev-btn {
  position:absolute; bottom:20px; left:20px;
  padding:10px 20px; font-size:1rem; cursor:pointer;
  background:transparent; border:none; color:#3e2723;
  z-index:20;
  display: none;
}
.prev-btn:hover { transform: scale(1.05); }

.appear{
  display: block !important;
}

#tree{
  background-image: url('./images/try2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.email{
  position:absolute; bottom:15px; left: calc(25vw - 175px);
  z-index: 20;
  font-style: italic;
  color: #6d4c41;
  font-size: 20px;
  font-weight: bold;
  background-color: #FDF7E8;
  padding: 10px;
  height: 50px;
  width: 350px;
  text-align: center;
  border: 3px solid #6d4c41;
  box-shadow:0 0 20px rgba(218, 181, 60, 0.384);
}

h1{
  font-size: 56px;
  margin: 10px;
}
h2{
  font-size: 48px;
  margin: 10px;
}


.colored-border {
  display: grid;
  place-content: center;
  color: white;
  
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #91431a,
      #767238 5%,
      #46543D 60%,
      rgb(120, 27, 214) 95%
    );
  
  border: solid 3px transparent;
  border-radius: 7px;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, rgb(255, 230, 1), #815C25 99%, transparent);
  
  background: 
     /* padding-box clip this background in to the overall element except the border. */
    var(--main-bg) padding-box,
     /* border-box extends this background to the border space */
    var(--gradient-border) border-box, 
     /* Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background. */
    var(--main-bg) border-box;
  
  background-position: center center;

  animation: bg-spin 3s linear infinite;
}

.colored-border:hover{
  animation-play-state: paused;
}

@keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.button-89 {
  --b: 3px;   /* border thickness */
  --s: .45em; /* size of the corner */
  --color: #FDF7E8;
  
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background:
    conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-89:hover,
.button-89:focus-visible{
  --_p: 0px;
  outline-color: var(--color);
  outline-offset: .05em;
}

.button-89:active {
  background: var(--color);
  color: #fff;
}

/* CSS */
.button-55 {
  align-self: center;
  background-color: #FDF7E8;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-55:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(-3px, -7px, 0);
}

.button-55:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}