:root{
  --bg:#06101d;
  --bg2:#123756;

  --text:#ffffff;
  --cyan:#6fe9ff;

  --radius:20px;

  --page-width:min(33vw,430px);
  --page-height:calc(var(--page-width) * 1.414);

  --shadow:0 30px 70px rgba(0,0,0,.45);
}

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

body{

  font-family:"Vazirmatn",sans-serif;

  background:
  radial-gradient(circle at top right,#13456d 0%,transparent 30%),
  radial-gradient(circle at bottom left,#0d8d89 0%,transparent 25%),
  linear-gradient(135deg,#05101c,#06111e,#123756);

  color:var(--text);

  min-height:100vh;
}

.experience{

  min-height:100vh;

  display:flex;
  flex-direction:column;

  justify-content:center;
  align-items:center;

  gap:35px;

  padding:40px 20px;
}

.hero-copy{

  text-align:center;
}

.hero-copy h1{

  font-size:clamp(2rem,4vw,4rem);
}

.eyebrow{

  color:var(--cyan);

  margin-bottom:12px;

  letter-spacing:4px;
}

.catalog-shell{

  width:100%;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:25px;
}

.book-stage{

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  width:100%;
}

.book-shadow{

  position:absolute;

  width:min(70vw,850px);

  height:70px;

  bottom:-45px;

  border-radius:50%;

  background:rgba(0,0,0,.45);

  filter:blur(25px);

  z-index:0;
}

.page-viewer{
  position:relative;
  display:inline-block;
}

/* .nav-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:100;
}

.prev{
  left:-28px;
}

.next{
  right:-28px;
} */

.nav-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:50%;

  cursor:pointer;

  color:#fff;
  font-size:28px;
  font-weight:700;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.15);

  box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 1px 1px rgba(255,255,255,.25);

  transition:
      transform .25s ease,
      background .25s ease,
      box-shadow .25s ease;
}

.nav-button:hover{

  background:#16b7ff;

  transform:translateY(-50%) scale(1.12);

  box-shadow:
      0 18px 45px rgba(22,183,255,.45),
      inset 0 1px 1px rgba(255,255,255,.35);
}

.nav-button:active{

  transform:translateY(-50%) scale(.95);
}

.nav-button:disabled{

  opacity:.35;
  cursor:default;
  transform:translateY(-50%);
}

.prev{
  left:-30px;
}

.next{
  right:-30px;
}

.book{

  display:flex;

  align-items:stretch;

  justify-content:center;
}

.page{

  width:var(--page-width);

  height:var(--page-height);

  overflow:hidden;

  background:white;

  box-shadow:var(--shadow);

  position:relative;
}

.left-page{

  border-radius:20px 0 0 20px;
}

.right-page{

  border-radius:0 20px 20px 0;
}

.page img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;
}

.book-spine{

  width:14px;

  height:var(--page-height);

  background:

  linear-gradient(
      to right,
      rgba(0,0,0,.45),
      rgba(255,255,255,.25),
      rgba(0,0,0,.45)
  );

  box-shadow:

  inset 0 0 15px rgba(255,255,255,.15),

  0 0 20px rgba(0,0,0,.35);
}

.page-loader{

  position:absolute;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  background:rgba(0,0,0,.5);

  backdrop-filter:blur(6px);

  z-index:20;

  opacity:0;

  pointer-events:none;

  transition:.3s;
}

.page-viewer.is-loading .page-loader{

  opacity:1;
}

.page-loader-spinner{

  width:50px;

  height:50px;

  border-radius:50%;

  border:4px solid rgba(255,255,255,.25);

  border-top-color:white;

  animation:spin .8s linear infinite;
}

@keyframes spin{

  to{

      transform:rotate(360deg);
  }
}

.edge-hit{

  position:absolute;

  top:0;

  width:80px;

  height:100%;

  border:none;

  background:transparent;

  cursor:pointer;

  z-index:10;
}

.edge-prev{

  left:0;
}

.edge-next{

  right:0;
}

.nav-button{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:100;
  transition:.25s;
}

.nav-button:hover{
  background:#0d4c78;
  transform:translateY(-50%) scale(1.08);
}

.nav-button:disabled{

  opacity:.3;

  cursor:default;

  transform:translateY(-50%);
}

.prev{
  left:-26px;
}

.next{
  right:-26px;
}

.catalog-meta{

  font-size:22px;

  font-weight:bold;
}

/******************************
    Tablet
******************************/

@media(max-width:1000px){

:root{

--page-width:min(42vw,360px);

}

}

/******************************
      Mobile
******************************/

@media(max-width:700px){

:root{

--page-width:min(43vw,250px);

}

.experience{

padding:20px 10px;

}

.book-spine{

width:8px;

}

.hero-copy h1{

font-size:32px;

}

.nav-button{

padding:10px 18px;

font-size:14px;

}

.catalog-meta{

font-size:18px;

}

}

/******************************
  Small Mobile
******************************/

@media(max-width:420px){

:root{

--page-width:42vw;

}

.book{

gap:0;

}

.page{

border-radius:10px;
}

.left-page{

border-radius:10px 0 0 10px;

}

.right-page{

border-radius:0 10px 10px 0;

}

.book-spine{

width:5px;

}

}

@media(max-width:900px){

  .prev{
  
  left:-25px;
  
  }
  
  .next{
  
  right:-25px;
  
  }
  
  .nav-button{
  
  width:50px;
  height:50px;
  font-size:24px;
  
  }
  
}

@media(max-width:700px){

  .nav-button{
    width:42px;
    height:42px;
    font-size:20px;
  }

  .prev{
    left:8px;
  }

  .next{
    right:8px;
  }

}

/* ===========================
   Mobile (Single Page)
=========================== */

@media (max-width:768px){

    .book{

        display:flex;
        justify-content:center;
        align-items:center;
    }

    .right-page{

        display:none;
    }

    .book-spine{

        display:none;
    }

    .left-page{

        width:min(92vw,420px);

        height:auto;

        aspect-ratio:0.707;

        border-radius:18px;
    }

    .page{

        width:100%;

        height:100%;
    }

    .page img{

        width:100%;
        height:100%;
        object-fit:cover;
    }

    .page-viewer{

        width:100%;
        display:flex;
        justify-content:center;
    }

    .book-stage{

        width:100%;
    }

    .book-shadow{

        width:min(90vw,420px);
    }

    .nav-button{

        width:44px;
        height:44px;

        font-size:22px;
    }

    .prev{

        left:8px;
    }

    .next{

        right:8px;
    }

}


/* ===========================
   Mobile Full Screen
=========================== */
@media (max-width:768px){

  .right-page,
  .book-spine{
    display:none !important;
  }

  .left-page{
    width:min(95vw,500px) !important;
    height:auto !important;
    aspect-ratio:0.707;
    margin:auto;
    border-radius:18px;
  }

  .page{
    width:100%;
    height:100%;
  }

  .page img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  /* عنوان نمایش داده شود */
  .hero-copy{
    display:block;
  }

  /* بک گراند و فاصله‌ها حفظ شوند */
  .experience{
    padding:20px 10px;
    gap:20px;
  }

  .catalog-shell,
  .book-stage,
  .page-viewer,
  .book{
    width:100%;
    height:auto;
  }

  .book{
    display:flex;
    justify-content:center;
  }
}

/*  */
/* @media (max-width:768px){ */

  /* .experience{
    min-height:100vh;
    padding:0;
    gap:0;
  } */

  /* .catalog-shell,
  .book-stage,
  .page-viewer,
  .book{
    width:100vw;
    height:100vh;
  } */

  /* .book{
    display:block;
  }

  .right-page,
  .book-spine{
    display:none !important;
  } */

  /* .left-page,
  .page{
    width:100vw !important;
    height:100vh !important;
    max-width:none;
    border-radius:0;
  } */

  /* .page img{
    width:100%;
    height:100%; */
    /* object-fit:contain; یا cover */
  /* } */

  /* .book-shadow{
    display:none;
  } */

  /* .hero-copy{ -
    display:none;
  } */

  /* .catalog-meta{
    position:fixed;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    z-index:100;
  }

  .prev{
    left:10px;
  }

  .next{
    right:10px;
  }
} */