@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
:root{
  --chapterSizeDesktop: 60px;  /* ← CHANGE THIS ONE VALUE ONLY */
  --chapterSizeMobile: 34px;
}

html, body { height: 100%; }





body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: 'Indie Flower', cursive;
  padding: 80px 0;

  background: radial-gradient(circle at center, #0b0f1a 0%, #000 70%);
  overflow-x: hidden;
}

.topMarquee {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  background: #000;
  color: #00ff88;
  overflow: hidden;
  z-index: 9999;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
}

.marqueeTrack {
  display: flex;
  width: max-content;
  animation: marqueeLoop 15s linear infinite;
}

.marqueeTrack span {
  padding-right: 50px;
  white-space: nowrap;
}

@keyframes marqueeLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

body {
  padding-top: 32px;
}



::selection { background: transparent; }

h4 {
  font-family: 'Amatic SC', cursive;
  font-size: var(--chapterSizeDesktop);
  margin: 0;
  line-height: 1.05;

  display: inline-block;
  white-space: nowrap;
}



.color1 { color:#4aa61f; }
.color2 { color:#C0392B; }
.margin { margin-top: 10px; }

.card {
  color: #013243;
  width: min(92vw, 520px);
  height: min(84vh, 720px);
  position: relative;
isolation: isolate;

  background: #e0e1dc;
  transform-style: preserve-3d;
  transform: perspective(2000px);
  box-shadow: 20px 0 60px rgba(0,0,0,.45);


  transition:
  transform 900ms cubic-bezier(.16,1,.3,1),
  box-shadow 900ms cubic-bezier(.16,1,.3,1),
  width 900ms cubic-bezier(.16,1,.3,1),
  height 900ms cubic-bezier(.16,1,.3,1),
  max-width 900ms cubic-bezier(.16,1,.3,1);

  border-radius: 0;

}

/* subtle tilt when open */
.card.open{
  transform: perspective(2000px) rotate(8deg) scale(1.02);

  box-shadow:
    0 0 40px #00ffcc,
    0 0 80px #ff00cc,
    0 0 140px rgba(255,0,200,.6),
    inset 40px 0 80px rgba(0,0,0,.35);

  animation: bookEnergy 2.5s ease-in-out infinite alternate;
}

@keyframes bookEnergy{
  from{
    filter: drop-shadow(0 0 10px #00ffcc);
  }
  to{
    filter: drop-shadow(0 0 30px #ff00cc);
  }
}

.card:before {
  content:'';
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: #BAC1BA;
  transform-origin: bottom;
  transform: skewX(-45deg);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card:after {
  content: '';
  position: absolute;
  top: 0;
  right: -6px;
  width: 6px;
  height: 100%;
  background: #92A29C;
  transform-origin: left;
  transform: skewY(-45deg);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* COVER */
.imgBox {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: left;
  transition: transform .75s cubic-bezier(.2,.85,.2,1);
 border-radius: 0;

  overflow: hidden;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  z-index: 3;
}

/* COVER: color only the word "PEDE" */
.coverMain{
  color: #c44467;
}

/* ===== SPINE JOIN FIX (FLAT INNER EDGE) ===== */
/* When open, remove the LEFT rounding so cover + page join flat */
.card.open #cover,
.card.open .details{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
/* FIX: imgBox was still clipping the spine round */
.card.open .imgBox{
  border-radius: 0 12px 12px 0 !important;
}

/* Keep the OUTER corners rounded */
.card.open #cover{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.card.open .details{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* PASTE THIS RIGHT HERE (under the block above) */
#cover .coverFront,
#cover .coverBack{
  position: absolute;
  inset: 0;
  border-radius: 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
    transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  
}

/* ===== FIX: prevent see-through inside cover after reopen ===== */

/* Make both faces solid slabs */
#cover .coverFront,
#cover .coverBack{
  background: #e0e1dc; /* same as book paper */
}

/* Back face: keep original orientation, but make it solid + fix GPU see-through */
#cover .coverBack{
  background: #e0e1dc;                  /* solid inside cover */
  transform: translateZ(0.1px);         /* tiny nudge fixes see-through on reopen */
  -webkit-transform: translateZ(0.1px);
}


/* Closed state */
.card:not(.open) #cover .coverFront{ opacity: 1; }
.card:not(.open) #cover .coverBack { opacity: 0; }

/* Open state */
.card.open #cover .coverFront{ opacity: 0; }


/* ONLY when open: flatten the hinge edge on the cover faces */
.card.open #cover .coverFront,
.card.open #cover .coverBack{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

#cover .coverFront{
  z-index: 2;
  transform: translateZ(0);   /* IMPORTANT: stops front “winning” when open */
  opacity: 1;
  transition: opacity .2s ease;
}


#cover .coverFront img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
    -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}










/* tap hint */
.hint{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 14px;
    z-index: 6;

}
.imgBox img,
.imgBox .coverTitle,
.imgBox .hint{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* OPEN state: cover swings */
.card.open .imgBox { transform: rotateY(-135deg); }
.card.open #cover .coverFront{
  opacity: 0;                 /* hide the front face when open */
}

.card.open #cover .coverBack{
  opacity: 1;
    box-shadow:
    inset 120px 0 90px rgba(0,0,0,.38),   /* dark hinge shadow */
    inset 18px 0 28px rgba(0,0,0,.22),    /* tight crease */
    inset 0 0 0 1px rgba(0,0,0,.06);      /* faint paper edge */


}







/* INSIDE PAGES */
.details {
  position: absolute;
  inset: 0;
  padding: 24px 28px;
  z-index: 1;
  transform: translateZ(0);
  isolation: isolate; /* <-- ADD THIS LINE */
  
}

/* shadow that continues from inside cover onto page */
.card.open .details::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 0 12px 12px 0;

  pointer-events:none;
  z-index: 0; /* <-- CHANGE THIS FROM 0 TO 3 */

  background: linear-gradient(
  90deg,
  rgba(0,0,0,.14) 0%,
  rgba(0,0,0,.07) 18%,
  rgba(0,0,0,0) 45%
);

}




/* each page is stacked; only .active shows */
.details .page {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  z-index: 1; /* <-- ADD THIS */
  background: transparent;

}


.details .page.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.details p {
  font-size: 16px;
  line-height: 1.2;
  transform: rotate(-5deg);
  margin: 10px 0;
}

/* NAV (inside book) */
.nav{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
   z-index: 5; /* <-- ADD THIS */
}

.btn{
  font: inherit;
  border: 0;
 border-radius: 0;

  padding: 10px 14px;
  cursor: pointer;
  background: rgba(0,0,0,.08);
}

.btn:disabled{
  opacity: .4;
  cursor: not-allowed;
}

.btn.ghost{
  background: transparent;
  text-decoration: underline;
}

.status{
  display:flex;
  align-items:center;
  gap:12px;
  color: rgba(0,0,0,.55);
  font-size: 14px;
}

/* When closed, hide inside nav UX hints */
.card:not(.open) .details { opacity: .25; }
.card:not(.open) .nav { display:none; }

/* Mobile tweaks */
@media (max-width: 420px){
  .details{ padding: 18px 18px; }
  .details p{ transform: rotate(-3deg); }
}
.pageImage{
  width: 100%;
  max-height: 50%;
  object-fit: contain;
  margin: 12px 0 16px;
  border-radius: 8px;
}
/* ===== DESKTOP: FULL-WIDTH CLOSED, TRANSFORM-ZOOM OPEN ===== */
@media (min-width: 1100px) {
  .card {
    width: 60vw;
    max-width: 900px;
    height: min(80vh, 760px);
  }

  .card.open {
    width: 60vw;
    max-width: 900px;
    height: min(80vh, 760px);
  }
}

  /* OPEN: do NOT change width/height -> prevents image re-cropping */
  .card.open {
    width: 96vw;          /* same as .card */
    max-width: 1200px;    /* same as .card */
    height: min(96vh, 920px); /* same as .card */

    transform: perspective(2000px) rotate(8deg) scale(0.80);
    box-shadow:
      inset 40px 0 80px rgba(0,0,0,.35),
      0 18px 120px rgba(0,0,0,.45);
  }
}




/* ===== MOBILE: SUBTLE ZOOM-OUT WHEN OPEN ===== */
@media (max-width: 1099px) {
  .card.open {
    transform:
      perspective(2000px)
      rotate(6deg);
  }
}

/* ===== INSIDE PAGE FLIP (LIKE COVER) ===== */
.details {
  overflow: hidden;
  perspective: 2000px;
  transform-style: preserve-3d;
}

/* the flap */
.sheet{
  position:absolute;
  inset:0;
  transform-style: preserve-3d;
  transform-origin: left;
 border-radius: 0;

  transition: transform .75s cubic-bezier(.2,.85,.2,1);
}

/* bark/shadow like cover interior */
.sheetBark{
  position:absolute;
  inset:0;
  background: #e0e1dc;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events:none;
}

/* faces */
.sheetFace{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
}
.sheetFace.back{
 transform: rotateY(180deg) translateZ(2px);

}

/* live page content area */
.pageLive{
  position:absolute;
  inset:0;
  padding: 24px 28px;
}

/* page turn states driven by JS */
.card.turnNext .sheet{
  transform: rotateY(-135deg);
}
.card.turnNext .sheetBark{
  opacity: 1;
  box-shadow: 520px 240px 140px rgba(0, 0, 0, .22) inset;
}

/* for prev we flip the other direction slightly */
.card.turnPrev .sheet{
  transform: rotateY(0deg);
}
/* CHILDREN'S BOOK: IMAGE AT TOP */
.pageImage--top{
  width: 100%;
  height: 60%;
  object-fit: contain;      /* NEVER crops */
  object-position: center top;
  margin-bottom: 10px;
  border-radius: 10px;
}

@media (min-width: 1100px){
  .pageImage--top{
    height: 65%;
  }
}
/* FIRST PAGE: NUDGE IMAGE UP A BIT */
.pageImage--top {
  margin-top: -12px; /* start higher */
}
/* PAGE 1: IMAGE STARTS HIGHER (OVERRIDES .details PADDING LOOK) */
.page.active .pageImage--top{
  margin-top: -24px;      /* cancels .details top padding */
  margin-bottom: 10px;
  width: 100%;
  height: 58%;
  object-fit: contain;     /* no crop */
  object-position: center top;
  border-radius: 10px;
}
/* PAGE 1: START CONTENT HIGHER WITHOUT CLIPPING */
.page.active{
  padding-top: 0;
}

/* PAGE 1 IMAGE: TOP-ALIGNED, NO CROP */
.page.active .pageImage--top{
  width: 100%;
  height: 58%;
  object-fit: contain;        /* no crop */
  object-position: center top;
  margin: 0 0 10px;
  border-radius: 10px;
}



/* ===== PAGE 1 LAYOUT TWEAKS ===== */
.page--one{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}


.page--one h4{
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 30px;

  
  white-space: nowrap;
  text-align: center;
}


@media (min-width: 1100px){
  .page--one h4{
    font-size: 52px;        /* desktop */
  }
}


/* remove the crooked rotation ONLY on page 1 text */
.page--one p{
  transform: none;
  margin: 8px 0;
  line-height: 1.35;
  font-size: 16px;          /* mobile/base */
}

@media (min-width: 1100px){
  .page--one p{
    font-size: 24px;        /* desktop */
    line-height: 1.5;
  }
}


/* give the text a nice readable block */
.page--one .storyText{
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 0;

  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
}

/* keep image panel consistent */
.page--one .pageImage--topFill{
  flex: 0 0 auto;
  border-radius: 0;

}

/* make sure nav stays at bottom and doesn’t overlap */
.page--one{
  padding-bottom: 64px; /* space for nav */
}
/* ===== FIX: CENTER TEXT WITHOUT TOUCHING HERO IMAGE ===== */

/* keep page padding as-is (don’t change .page padding) */
/* center ONLY headings + paragraphs */
.details .page h4{
  text-align: center;
}

/* keep wonky, but make the text block centered on the page */
/* Center story text on desktop */
@media (min-width: 601px){
  .details .page p{
    width: min(520px, 100%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}
.details .page p{
  text-wrap: balance;
}


/* IMPORTANT: do NOT touch all images.
   Only center the normal (non-hero) page images */
.details .page img.pageImage:not(.pageImage--topFill){
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pageHero{
  position: relative;
}


/* image fills wrapper */
.page.active .pageHero .pageImage--topFill{
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top;
  display: block;
  margin: 0 !important;
  border-radius: 0;
}




/* ===== PAGE 1: BIGGER, STRAIGHT TEXT ===== */
.page-one p {
  transform: none;          /* remove wonky tilt */
  font-size: 18px;          /* bigger text */
  line-height: 1.4;
  margin: 12px 0;
}

/* DESKTOP ONLY: nudge Page 1 text upward slightly */
@media (min-width: 601px){
  .page-one p:last-of-type{
    margin-top: -12px;     /* pulls "Turn the page…" up */
  }
}


/* headings slightly bigger too */
.page-one h4{
  font-size: inherit;
}

/* ===== COVER TITLE (single source of truth) ===== */
.imgBox .coverTitle{
  position: absolute;

  /* move it down by changing THIS one value */
  top: 18%;
  left: 30%;
  transform: translateX(-50%);

  font-family: 'Amatic SC', cursive;
  font-weight: 700;
  text-align: center;
  line-height: 0.85;

  /* keep your responsive size */
  font-size: clamp(140px, 22vw, 260px);

  /* keep it black */
  color: #111;

  letter-spacing: 6px;
  pointer-events: none;

  /* keep your “thicker” look (works on black too, just subtle) */
  text-shadow:
    0 2px 0 rgba(255,255,255,.15),
    0 10px 25px rgba(0,0,0,.20);
      z-index: 5;

}

.coverSubtitle{
  display: block;
  margin-top: 18px;

  font-family: 'Indie Flower', cursive;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.3;

  color: #111;
  opacity: 0.9;

  /* 👇 widen this to reduce lines */
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  text-wrap: balance;
}



/* "This is" line */
.coverThisIs {
  display: block;
  font-size: 0.35em;   /* relative to PEDE */
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  opacity: 0.9;
}
.coverText{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 👇 THIS controls vertical position */
  justify-content: center;
  transform: translateY(1%);
}





/* === FINAL PATCH: STOP SEE-THROUGH ON ALL DEVICES === */

/* Make the cover always a solid slab (no transparency) */
/* === FINAL PATCH: STOP SEE-THROUGH ON ALL DEVICES === */

/* Make the cover always a solid slab (no transparency) */
#cover{
  background: #e0e1dc;
  will-change: transform;
}

  /* ===== PAGE 1 HERO (CLEAN) ===== */
.pageHero{
  width: 100%;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  border-radius: 0px;
  margin: 0 0 10px; /* <-- CHANGED: NO negative margin */
}

.pageHero .pageImage--topFill{
  width: 100%;
  height: 100%;
  object-fit: contain;              /* <-- NO crop */
  object-position: center top;
  display: block;
}

/* pull content up safely */
.pageLive{
  padding-top: 0 !important;
}
/* ===== PAGE SHADOW OVER HERO IMAGE ===== */
.pageHero{
  position: relative;          /* required for overlay */
}

.pageHero::after{
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 5;                  /* ABOVE the image */

  background: linear-gradient(
  to right,
  rgba(0,0,0,0.35) 0%,
  rgba(0,0,0,0.18) 10%,
  rgba(0,0,0,0.0) 35%
);

}
.details .page p{
  transform: none !important;
}
/* FINAL: PAGE TEXT SIZE + STRAIGHT */
.details .page p{
  font-size: 26px !important;
  line-height: 1.6 !important;
  transform: none !important;
}
/* ===== FINAL: NAV + BUTTON TEXT SIZE ===== */
.nav .btn{
  font-size: 22px !important;
  line-height: 1.3;
}

.nav .btn.ghost{
  font-size: 22px !important;
}

.nav .status{
  font-size: 20px !important;
}
.details .page h4{
  width: 100%;
  text-align: center;
}
@media (min-width: 601px){
  .details .page h4,
  .details .chapterLine{
    font-size: var(--chapterSizeDesktop);
  }
}


/* ONE-LINE CHAPTER TITLE — CENTERED */
.chapterLine{
  width: 100%;
  text-align: center;
  white-space: nowrap;
  margin: 6px 0 8px;
}

/* spacing between the two parts */
.chapterLine .color2{
  margin-left: 10px;
}
/* MOBILE ONLY: make page-one hero taller */
@media (max-width: 600px){
  .page-one .pageHero,
  .page-blank .pageHero{
    height: 48vh;
    aspect-ratio: auto;
  }
}


/* MOBILE ONLY: chapter + page text sizes */
@media (max-width: 600px){
  .details .page h4,
  .details .chapterLine{
    font-size: var(--chapterSizeMobile) !important;
    text-align: center !important;
  }

  .details .page p{
    font-size: 17px !important;
    line-height: 1.45 !important;
    text-align: center !important;

    max-width: 94%;   /* ← makes text wider */
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== MOBILE COVER — MANUAL CONTROL ===== */
@media (max-width: 600px){

  /* TITLE BLOCK */
  .imgBox .coverTitle{
    left: 50%;
    top: 25px;                 /* move up/down here */
    transform: translateX(-50%);

    font-size: 30vw;           /* PEDE size */
    line-height: 0.9;
    letter-spacing: 4px;
    text-align: center;
  }

  /* "This is" */
  .coverThisIs{
    font-size: 0.32em;
    margin-bottom: 4px;
  }

  /* SUBTITLE — FIXED, NO WRAPPING LOGIC */
  .coverSubtitle{
    font-size: 18px;
    line-height: 1.25;

    width: 90vw;        /* ← THIS is the key */
    max-width: 420px;  /* ← caps it so it doesn’t go silly wide */

    margin: 10px auto 0;
    text-align: center;

    white-space: normal;
  }

}
/* ===== MOBILE: SMALLER NAV (Prev | 1/4 Close | Next) ===== */
@media (max-width: 600px){

  .nav .btn{
    font-size: 16px !important;   /* Prev / Next / Close */
    padding: 6px 10px;
  }

  .nav .btn.ghost{
    font-size: 15px !important;   /* Close */
  }

  .nav .status{
    font-size: 14px !important;   /* 1 / 4 */
    gap: 8px;
  }

}
/* ===== BLANK PAGE AFTER PAGE 1 ===== */
.page-blank{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* was center */
  text-align: center;
}


/* image fills upper portion, no crop */
.page-blank .pageImage--full{
  width: 100%;
  max-height: 55%;
  object-fit: contain;
  margin-bottom: 14px;
}

/* text styling */
.blankText{
  font-size: 20px;
  line-height: 1.4;
  transform: none;
}


.page-blank .pageHero img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills, may crop */
  object-position: center;
  display: block;
}
/* MAKE PAGE-BLANK HERO MATCH PAGE-ONE HERO */
.page-blank .pageHero{
  width: 100%;
  aspect-ratio: 12 / 5;   /* same base as page-one */
  overflow: hidden;
  margin: 0 0 10px;
}

.page-blank .pageHero img{
  width: 100%;
  height: 100%;
  object-position: center top;
  display: block;
}

/* MOBILE: give page-blank the SAME height rule as page-one */
@media (max-width: 600px){
  .page-blank .pageHero{
    height: 48vh;         /* identical to page-one */
    aspect-ratio: auto;
  }
  .page-blank .pageHero img{
    height: 100%;
    object-fit: cover;    /* remove gaps when resizing */
  }
}
/* PAGE 2 (page-blank) — MOBILE: image starts at very top like page 1 */
@media (max-width: 600px){
  .page-blank{
    padding-top: 0 !important;
  }

  .page-blank .pageHero{
    margin-top: -24px; /* cancels .details top padding (24px) */
  }
}
/* === PAGE 1 + PAGE 2 HERO MUST MATCH ON MOBILE === */
@media (max-width: 600px){
  .page-one .pageHero,
  .page-blank .pageHero{
    height: 48vh;
    aspect-ratio: unset !important;
    margin: 0 0 10px;
    overflow: hidden;
  }

  .page-one .pageHero img,
  .page-blank .pageHero img{
    width: 100%;
    height: 100%;
    object-fit: contain;       /* exactly like your page 1 */
    object-position: top center;
    display: block;
  }
}
/* ===== CHAPTER V DESKTOP: TEXT LEFT, BIG IMAGE RIGHT ===== */
@media (min-width: 1100px){
  .page-still{
    display: flex;
    flex-direction: column;
  }

  .page-still .stillWrap{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* left text, bigger right image */
    gap: 24px;
    align-items: center;
  }

  .page-still .stillText{
    text-align: left;
  }

  .page-still .chapterLine{
    text-align: left;
    margin-bottom: 14px;
  }

  .page-still .blankText{
    text-align: left;
    font-size: 26px; /* tweak if you want */
    line-height: 1.5;
  }

  .page-still .stillImg{
    width: 100%;
    height: 80%;
    max-height: none;
    object-fit: contain;
    margin: 0;
    border-radius: 0;
  }
}

/* CHAPTER V (page-still) — MOBILE: IMAGE ON TOP, TEXT UNDER */
@media (max-width: 600px){
  .page-still .stillWrap{
    display: flex;
    flex-direction: column;
  }

  .page-still .stillImg{
    order: 0;              /* image first */
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    margin: 0 0 12px;
  }

  .page-still .stillText{
    order: 1;              /* text second */
  }
}
/* ===== CHAPTER VI (Links): center title + content together ===== */
.page-links{
  display: flex;
}

.page-links .linksWrap{
  margin: auto;             /* centers vertically + horizontally */
  text-align: center;
}
/* Keep links looking like your normal text */
.page-links a{
  color: inherit;
  text-decoration: none;
}

/* Optional: only show underline on hover (still subtle) */
.page-links a:hover{
  text-decoration: underline;
}

/* Make contract address easy to copy without changing appearance */
.page-links .ca{
  user-select: all;   /* drag/click select works well */
  cursor: text;
}
/* FORCE hand cursor on contract address */
.details .page .ca{
  cursor: pointer !important;
}
/* ================================
   iOS SAFARI REPAINT FIX — COVER
   Paste at VERY BOTTOM of CSS
================================ */

/* Ensure cover is a true 3D object */
#cover{
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Both faces must be real 3D faces */
#cover .coverFront,
#cover .coverBack{
  position: absolute;
  inset: 0;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  /* Forces GPU repaint on reopen (iOS fix) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* IMPORTANT: inside cover MUST be rotated */
#cover .coverBack{
  transform: rotateY(180deg) translateZ(0.2px);
  -webkit-transform: rotateY(180deg) translateZ(0.2px);
}

/* Use visibility (not just opacity) to stop iOS ghosting */
.card:not(.open) #cover .coverFront{
  visibility: visible;
  opacity: 1;
}
.card:not(.open) #cover .coverBack{
  visibility: hidden;
  opacity: 0;
}

.card.open #cover .coverFront{
  visibility: hidden;
  opacity: 0;
}
.card.open #cover .coverBack{
  visibility: visible;
  opacity: 1;
}
/* ================================
   INSIDE COVER SHADOW — SAFARI PROOF
   (Paste at very bottom)
================================ */

/* Make sure #cover can layer an overlay above its faces */
#cover{
  position: relative;
  isolation: isolate;
}

/* This overlay simulates your hinge + inside cover shading */
#cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* MUST be above faces */
  z-index: 999;

  /* start hidden */
  opacity: 0;
  transition: opacity .2s ease;

  /* shadow look (hinge-heavy on the left, fades right) */
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.22) 12%,
      rgba(0,0,0,0) 45%
    );
}

/* Show shadow only when book is open */
.card.open #cover::after{
  opacity: 1;
}
/* ===== TELEGRAM FIX: give text more usable width on mobile ===== */
@media (max-width: 600px){

  .details{
    padding-left: 16px !important;   /* was 28px */
    padding-right: 16px !important;  /* was 28px */
  }

}
/* ===== MOBILE: tighten space between chapter + text (ALL pages) ===== */
@media (max-width: 600px){

  .chapterLine{
    margin-bottom: 4px !important;   /* was ~8px */
  }

  .details .page p,
  .details .page .blankText{
    margin-top: 2px !important;      /* pulls text upward */
  }

}
/* ===== MOBILE: small upward nudge for chapter + text ===== */
@media (max-width: 600px){

  .details .page .chapterLine,
  .details .page p,
  .details .page .blankText{
    position: relative;
    top: -12px;   /* small lift only */
  }

}
/* ===== DESKTOP: wider, stronger story text ===== */
@media (min-width: 1100px){

  .details .page p,
  .details .page .blankText{
    width: min(1000px, 96%) !important;  /* MUCH wider */
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    font-size: 32px !important;
    line-height: 1.55 !important;
  }

  .chapterLine{
    margin: 12px 0 16px !important;
  }
}
/* ===== DESKTOP: center Chapter V text block better ===== */
@media (min-width: 1100px){

  .page-still .stillWrap{
    grid-template-columns: 1.1fr 1fr;   /* give text column more space */
  }

  .page-still .stillText{
    padding-left: 40px;                 /* move text away from spine */
  }

}

/* ===== UCIL DIVIDER MARQUEE ===== */

.dividerMarquee {
  width: 100%;
  height: 40px;
  background: #111;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 2px solid #00ff88;
  border-bottom: 2px solid #00ff88;
}

.dividerTrack {
  display: flex;
  width: max-content;
  animation: dividerLoop 12s linear infinite;
}

.dividerTrack span {
  white-space: nowrap;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 4px;
  color: #00ff88;
  padding-right: 60px;
}

@keyframes dividerLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== UCIL VIDEO SECTION ===== */

/* ===============================
   SECTION 2 — PREMIUM CINEMA
================================ */

.ucilSection{
  position: relative;
  min-height: 100vh;
   width: 100%;
  padding: 140px 20px 120px;

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

  background: #0b0f1a;
  overflow: hidden;
}

/* soft animated gradient light */
.ucilSection::before{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  background: radial-gradient(circle,
      rgba(0,255,200,.25),
      transparent 60%);
  filter: blur(120px);
  animation: moveLight1 12s ease-in-out infinite alternate;
  z-index:0;
}

.ucilSection::after{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  background: radial-gradient(circle,
      rgba(255,0,180,.25),
      transparent 60%);
  filter: blur(120px);
  animation: moveLight2 14s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes moveLight1{
  from{ transform: translate(-200px,-100px); }
  to{ transform: translate(200px,150px); }
}

@keyframes moveLight2{
  from{ transform: translate(200px,100px); }
  to{ transform: translate(-200px,-150px); }
}

/* make content above lights */
.ucilWrap{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
}

/* GLASS VIDEO */
.videoBox{
  position: relative;
  z-index: 3;

  max-width: 900px;
  margin: auto;

  padding: 25px;
  border-radius: 20px;

  background: rgba(0,0,0,0.35); /* transparan */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border: 1px solid rgba(255,255,255,0.1);

  box-shadow:
    0 0 40px rgba(0,255,200,.3),
    0 0 80px rgba(255,0,180,.25);
}

/* TITLE */
.ucilTitle{
  margin-top: 40px;
  font-size: 52px;
  letter-spacing: 10px;
  font-weight: 900;
  color: white;
}

/* BUTTONS */
.memeBtn{
  padding: 18px 40px;
  background: transparent;
  border: 2px solid #00ffcc;
  color: #00ffcc;
  font-weight: 800;
  letter-spacing: 2px;
  transition: 0.3s ease;
  border-radius: 12px;
}

.memeBtn:hover{
  background: #00ffcc;
  color: black;
  box-shadow:
    0 0 20px #00ffcc,
    0 0 40px #00ffcc;
  transform: translateY(-6px);
}

.videoBox {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
}

.videoBox video {
  width: 100%;
  border-radius: 20px;
  display: block;
}

/* JUDUL DI TENGAH BAWAH VIDEO */
.ucilTitle {
  margin-top: 30px;
  font-size: 48px;
  letter-spacing: 8px;
  font-weight: 900;
}

/* MEME BUTTONS */
.memeButtons {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.memeBtn {
  padding: 18px 35px;
  background: #111;
  border: 2px solid #00ff88;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.3s ease;
}

.memeBtn:hover {
  background: #00ff88;
  color: black;
  transform: translateY(-5px);
}

.videoBox {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.videoBox video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* ===== MOBILE BUTTON FIX ===== */
@media (max-width: 768px){
  .ucilSection{
    padding: 50px 15px 70px;
  }
}

/* ===============================
   LASER CYBER EFFECT
================================ */

.laserWrap{
  position: relative;
  display: grid;
  place-items: center;
}

/* ===============================
   CINEMATIC LASER BEAMS
================================ */

.laserWrap{
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}

/* ambient glow background */
.laserWrap::before{
  content:"";
  position:absolute;
  width:1200px;
  height:1200px;
  background: radial-gradient(circle, rgba(0,255,200,.25), transparent 60%);
  filter: blur(120px);
  z-index:-3;
  animation: breathe 6s ease-in-out infinite alternate;
}

@keyframes breathe{
  from{ opacity:.4; transform: scale(1); }
  to{ opacity:.8; transform: scale(1.2); }
}

/* REAL LASER BEAMS */
.laserBg{
  position:absolute;
  inset:-300px;
  pointer-events:none;
  z-index:-2;
}

/* beam 1 */
.laserBg::before{
  content:"";
  position:absolute;
  width:4px;
  height:160%;
  left:20%;
  top:-20%;
  background: linear-gradient(to bottom, transparent, #00ffcc, transparent);
  box-shadow:
    0 0 20px #00ffcc,
    0 0 60px #00ffcc;
  transform: rotate(25deg);
  animation: beamMove1 5s ease-in-out infinite alternate;
}

/* beam 2 */
.laserBg::after{
  content:"";
  position:absolute;
  width:8px;
  height:160%;
  right:25%;
  top:-30%;
  background: linear-gradient(to bottom, transparent, #ff00cc, transparent);
  box-shadow:
    0 0 20px #ff00cc,
    0 0 60px #ff00cc;
  transform: rotate(-30deg);
  animation: beamMove2 7s ease-in-out infinite alternate;
}

@keyframes beamMove1{
  from{ transform: rotate(20deg) translateY(-40px); }
  to{ transform: rotate(30deg) translateY(40px); }
}

@keyframes beamMove2{
  from{ transform: rotate(-25deg) translateY(50px); }
  to{ transform: rotate(-35deg) translateY(-50px); }
}

/* ===============================
   BOOK NEON EDGE GLOW
================================ */

.card{
  transition: box-shadow .4s ease, transform .9s cubic-bezier(.16,1,.3,1);
}

.card.open{
  box-shadow:
    0 0 40px rgba(0,255,170,.5),
    0 0 80px rgba(255,0,180,.35),
    inset 40px 0 80px rgba(0,0,0,.35),
    0 18px 120px rgba(0,0,0,.45);
}

/* ===============================
   COVER LIGHT SWEEP
================================ */

.imgBox::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:60%;
  height:100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  transition: 0s;
}

.card:not(.open) .imgBox:hover::after{
  animation: sweep 1.2s ease;
}

@keyframes sweep{
  0%{ left:-100%; }
  100%{ left:150%; }
}

/* ===============================
   PULSE GLOW ANIMATION
================================ */

.card.open{
  animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow{
  from{
    filter: drop-shadow(0 0 8px rgba(0,255,170,.4));
  }
  to{
    filter: drop-shadow(0 0 18px rgba(255,0,180,.6));
  }
}

/* ===============================
   ULTRA LASER CORE
================================ */

.laserWrap{
  position: relative;
  display: grid;
  place-items: center;
}

.laserWrap::before{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  background:
    conic-gradient(
      from 0deg,
      #00ffcc,
      #ff00cc,
      #00ffcc
    );
  filter: blur(140px);
  opacity:.35;
  animation: spinLaser 12s linear infinite;
  z-index:-2;
}

@keyframes spinLaser{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* HARD LASER LINES */
.laserBg{
  position:absolute;
  inset:-200px;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,255,200,.08) 0px,
      rgba(0,255,200,.08) 2px,
      transparent 2px,
      transparent 60px
    );
  animation: moveLaser 6s linear infinite;
}

@keyframes moveLaser{
  from{ background-position: 0 0; }
  to{ background-position: 300px 0; }
}

/* ===============================
   SECTION 2 GIF BACKGROUND
================================ */

.ucilSection{
  position: relative;
  overflow: hidden;
}



/* dark overlay supaya text kebaca */


/* pastikan konten di atas */
.ucilWrap{
  position: relative;
  z-index: 2;
}

/* ===============================
   FULL SCREEN GIF BACKGROUND
================================ */



/* GIF layer */
.bgGif{
  mix-blend-mode: screen;
  opacity: 0.9;
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;      /* penting */
  object-position: center;

  z-index: 0;

  filter: brightness(0.65) contrast(1.1);
}

/* dark overlay */


/* content above */
.ucilWrap{
  position: relative;
  z-index: 2;
}

/* =========================================
   NEON FOG EFFECT — CINEMATIC LAYER
========================================= */

/* fog layer */
.neonFog{
  position:absolute;
  inset:-200px;
  pointer-events:none;
  z-index:1;   /* above GIF (0), below laser (2) */

  background:
    radial-gradient(circle at 20% 30%, rgba(0,255,200,.35), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,0,180,.35), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,255,200,.15), transparent 60%);

  filter: blur(120px);
  opacity:.7;

  animation: fogMove 18s ease-in-out infinite alternate;
}

/* slow drifting motion */
@keyframes fogMove{
  0%{
    transform: translate(-100px,-80px) scale(1);
  }
  50%{
    transform: translate(120px,60px) scale(1.1);
  }
  100%{
    transform: translate(-60px,120px) scale(1.05);
  }
}

/* =========================================
   FLOATING PEPE FIELD
========================================= */

.pepeField{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

.pepeField img{
  position:absolute;
  width:120px;
  opacity:.7;
  animation: floatPepe linear infinite;
  filter: drop-shadow(0 0 20px rgba(0,255,200,.4));
}

/* floating animation */
@keyframes floatPepe{
  from{
    transform: translateY(100vh) rotate(0deg);
  }
  to{
    transform: translateY(-200px) rotate(360deg);
  }
}