test page

<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400&display=swap');

.tm{background:radial-gradient(ellipse at 50% 30%,#13100b 0%,#0a0805 55%,#060403 100%);position:relative;overflow:hidden;padding:clamp(80px,13vh,150px) 0 clamp(90px,14vh,160px);}
.tm *,.tm *::before,.tm *::after{box-sizing:border-box;}
/* deep vignette */
.tm::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(4,3,2,.55) 78%,rgba(2,1,1,.9) 100%);}
/* candlelight pulse */
.tm-candle{position:absolute;left:50%;top:34%;width:80vw;max-width:1100px;height:60vh;transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(200,169,107,.14) 0%,rgba(200,169,107,.05) 35%,transparent 70%);
  animation:tm-flicker 5s ease-in-out infinite;}
@keyframes tm-flicker{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}45%{opacity:1;transform:translate(-50%,-51%) scale(1.04)}70%{opacity:.88;transform:translate(-50%,-50%) scale(1.01)}}

/* floating gold embers */
.tm-embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.tm-ember{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,220,160,.95),rgba(200,169,107,.2));
  box-shadow:0 0 6px rgba(200,169,107,.6);animation:tm-rise linear infinite;opacity:0;}
@keyframes tm-rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-95vh) translateX(var(--ex,20px));opacity:0}}

.tm-head{text-align:center;padding:0 clamp(20px,5vw,80px) clamp(50px,8vh,86px);position:relative;z-index:3;max-width:920px;margin:0 auto;}
.tm-ey{display:inline-flex;align-items:center;gap:16px;font-family:'Jost',sans-serif;font-weight:200;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:#c8a96b;margin-bottom:22px;}
.tm-ey::before,.tm-ey::after{content:'';height:.5px;width:34px;background:rgba(200,169,107,.5);display:block;}
.tm-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(38px,6vw,76px);line-height:1.03;color:#faf7f3;margin:0 0 18px;}
.tm-h em{font-style:italic;background:linear-gradient(118deg,#b8966a,#f0ddb0 38%,#c8a96b 62%,#e2c99a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.tm-sub{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(13px,1.5vw,15px);line-height:1.85;color:rgba(200,196,188,.72);max-width:600px;margin:0 auto;}

/* SHELF */
.tm-shelf{display:flex;align-items:flex-end;justify-content:center;gap:clamp(26px,5vw,80px);
  padding:0 clamp(20px,5vw,80px);position:relative;z-index:3;max-width:1500px;margin:0 auto;
  perspective:2600px;flex-wrap:wrap;}

.tm-book{position:relative;width:clamp(280px,26vw,360px);cursor:pointer;
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,1,.3,1);
  animation:tm-float 7s ease-in-out infinite;animation-delay:calc(var(--bi) * -2.3s);}
@keyframes tm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.tm-book:hover{transform:translateY(-18px) rotateX(4deg);z-index:10;}

.tm-book-3d{position:relative;aspect-ratio:3/4.1;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.16,1,.3,1);transform:rotateY(-18deg) rotateX(2deg);transform-origin:left center;}
.tm-book:hover .tm-book-3d{transform:rotateY(-26deg) rotateX(3deg);}
.tm-book.tm-opening .tm-book-3d{transform:rotateY(-150deg) rotateX(2deg);}

.tm-pages{position:absolute;top:1.5%;right:-13px;width:14px;height:97%;z-index:1;
  background:repeating-linear-gradient(to right,#e8d9b5 0px,#cbb585 1px,#f3e8c8 2px,#b89c66 3px);
  transform:rotateY(8deg);transform-origin:left center;border-radius:0 2px 2px 0;
  box-shadow:2px 2px 8px rgba(0,0,0,.5);}

.tm-spine{position:absolute;top:0;left:-1px;width:22px;height:100%;z-index:0;
  background:linear-gradient(to right,#1a140d,#3a2c1a 40%,#241b10);transform:rotateY(-88deg);transform-origin:left center;
  border-radius:3px 0 0 3px;box-shadow:inset -4px 0 8px rgba(0,0,0,.6);}

.tm-cover{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:3px 7px 7px 3px;
  background:linear-gradient(135deg,#241a10 0%,#312413 45%,#1d1509 100%);
  box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(200,169,107,.2);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,28px);}
.tm-leather{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");}
.tm-filigree{position:absolute;inset:14px;z-index:2;pointer-events:none;border:1px solid rgba(200,169,107,.28);border-radius:2px;}
.tm-fc{position:absolute;width:30px;height:30px;}
.tm-fc::before,.tm-fc::after{content:'';position:absolute;background:linear-gradient(90deg,#c8a96b,#f0ddb0);}
.tm-fc::before{width:100%;height:1.5px;}.tm-fc::after{height:100%;width:1.5px;}
.tm-fc-tl{top:-1px;left:-1px;}.tm-fc-tr{top:-1px;right:-1px;}.tm-fc-tr::after{right:0;}
.tm-fc-bl{bottom:-1px;left:-1px;}.tm-fc-bl::before{bottom:0;}
.tm-fc-br{bottom:-1px;right:-1px;}.tm-fc-br::before{bottom:0;}.tm-fc-br::after{right:0;}

.tm-chno{position:relative;z-index:3;font-family:'Jost',sans-serif;font-weight:300;font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:rgba(200,169,107,.85);margin-top:6px;margin-bottom:12px;}
.tm-emblem{position:relative;z-index:3;width:clamp(56px,7vw,76px);height:clamp(56px,7vw,76px);margin-bottom:14px;
  filter:drop-shadow(0 0 8px rgba(200,169,107,.4));}

.tm-window{position:relative;z-index:3;width:100%;flex:1;min-height:0;margin-bottom:14px;overflow:hidden;border-radius:3px;
  background:#000;box-shadow:inset 0 0 0 1px rgba(200,169,107,.4),inset 0 0 30px rgba(0,0,0,.8);}
.tm-winscroll{position:absolute;inset:0;overflow:hidden;}
.tm-wintrack{display:flex;height:100%;width:max-content;animation:tm-windrift 42s linear infinite;will-change:transform;}
.tm-book:nth-child(2) .tm-wintrack{animation-duration:52s;animation-direction:reverse;}
.tm-book:nth-child(3) .tm-wintrack{animation-duration:47s;}
@keyframes tm-windrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tm-wincell{height:100%;flex-shrink:0;}
.tm-wincell img{height:100%;width:auto;display:block;object-fit:cover;filter:grayscale(15%) brightness(.6) contrast(1.06) sepia(.12);transition:filter .8s;}
.tm-book:hover .tm-wincell img{filter:grayscale(0%) brightness(.78) contrast(1.08) sepia(0);}
.tm-book.tm-opening .tm-wintrack{animation-play-state:paused;}
.tm-winglass{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,transparent 22%,transparent 78%,rgba(255,255,255,.06) 100%);}
.tm-winframe{position:absolute;inset:0;z-index:5;pointer-events:none;border:3px solid transparent;
  border-image:linear-gradient(135deg,#b8966a,#f0ddb0,#c8a96b,#e2c99a) 1;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6);}

.tm-title{position:relative;z-index:3;text-align:center;margin-bottom:8px;}
.tm-t1{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(15px,1.8vw,20px);color:rgba(244,240,232,.78);margin-bottom:2px;}
.tm-t2{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(26px,3.4vw,40px);line-height:1;
  background:linear-gradient(118deg,#b8966a,#f0ddb0 40%,#c8a96b 64%,#e2c99a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));}
.tm-meta{position:relative;z-index:3;font-family:'Jost',sans-serif;font-weight:300;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,196,188,.6);margin-bottom:14px;text-align:center;}
.tm-open{position:relative;z-index:3;font-family:'Jost',sans-serif;font-weight:300;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#e2c99a;
  padding:9px 18px;border:.5px solid rgba(200,169,107,.45);transition:gap .4s,background .4s,border-color .4s,box-shadow .4s;display:inline-flex;align-items:center;gap:8px;}
.tm-open::after{content:'\2192';}
.tm-book:hover .tm-open{background:rgba(200,169,107,.12);border-color:rgba(200,169,107,.8);box-shadow:0 0 20px rgba(200,169,107,.3);gap:13px;}

.tm-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,245,220,.1) 47%,rgba(255,245,220,.18) 50%,rgba(255,245,220,.1) 53%,transparent 70%);
  background-size:280% 100%;background-position:140% 0;transition:none;}
.tm-book:hover .tm-sheen{animation:tm-sweep 1.1s ease;}
@keyframes tm-sweep{from{background-position:140% 0}to{background-position:-60% 0}}

.tm-shadow{position:absolute;bottom:-26px;left:8%;right:8%;height:30px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 72%);filter:blur(7px);
  transition:opacity .6s;}
.tm-book:hover .tm-shadow{opacity:.7;}

.tm-book.tm-opening{z-index:50;}
.tm-book.tm-opening::before{content:'';position:absolute;top:0;bottom:0;left:0;width:50%;z-index:60;pointer-events:none;
  background:radial-gradient(ellipse at left center,rgba(255,240,200,.9),rgba(200,169,107,.3) 40%,transparent 70%);
  animation:tm-bloom .7s ease forwards;}
@keyframes tm-bloom{0%{opacity:0}40%{opacity:1}100%{opacity:0}}

@media(max-width:880px){
  .tm-shelf{flex-direction:column;align-items:center;gap:56px;}
  .tm-book{width:min(82vw,360px);}
  .tm-book-3d{transform:rotateY(-12deg);}
}
@media(prefers-reduced-motion:reduce){
  .tm-book,.tm-wintrack,.tm-candle,.tm-ember{animation:none!important;}
}
.tm-defs{position:absolute;width:0;height:0;}

/* ═══ Stage-3 refactor: pause shelf + chapter motion (one class each) ═══ */
.tm.tm-paused .tm-candle,
.tm.tm-paused .tm-ember,
.tm.tm-paused .tm-book,
.tm.tm-paused .tm-wintrack { animation-play-state: paused !important; }
.cb-chapter.cb-paused .cb-track { animation-play-state: paused !important; }
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@200;300;400&display=swap');

.cb{background:#080604;position:relative;overflow:hidden;padding:clamp(72px,12vh,140px) 0;min-height:90vh;}
.cb *,.cb *::before,.cb *::after{box-sizing:border-box;}
.cb-aurora{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(200,169,107,.06) 0%,transparent 55%);
  animation:cb-aur 16s ease-in-out infinite alternate;}
@keyframes cb-aur{from{opacity:.5;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.cb::before{content:'';position:absolute;top:0;left:0;right:0;height:.5px;z-index:5;
  background:linear-gradient(to right,transparent,rgba(200,169,107,.5) 30%,rgba(200,169,107,.5) 70%,transparent);}
.cb::after{content:'';position:absolute;bottom:0;left:0;right:0;height:.5px;z-index:5;
  background:linear-gradient(to right,transparent,rgba(200,169,107,.25) 30%,rgba(200,169,107,.25) 70%,transparent);}

.cb-head{text-align:center;padding:0 clamp(20px,5vw,80px) clamp(44px,7vh,72px);position:relative;z-index:3;max-width:900px;margin:0 auto;}
.cb-ey{display:inline-flex;align-items:center;gap:16px;font-family:'Jost',sans-serif;font-weight:200;font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:#c8a96b;margin-bottom:22px;}
.cb-ey::before,.cb-ey::after{content:'';height:.5px;width:34px;background:rgba(200,169,107,.5);display:block;flex-shrink:0;}
.cb-h{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(36px,6vw,72px);line-height:1.04;color:#faf7f3;margin:0 0 18px;}
.cb-h em{font-style:italic;background:linear-gradient(118deg,#b8966a,#f0ddb0 38%,#c8a96b 62%,#e2c99a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cb-sub{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(13px,1.5vw,15px);line-height:1.85;color:rgba(200,196,188,.7);max-width:580px;margin:0 auto;}

.cb-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,28px);
  padding:0 clamp(20px,5vw,80px);position:relative;z-index:3;max-width:1400px;margin:0 auto;
  perspective:2200px;}
@media(max-width:880px){.cb-shelf{grid-template-columns:1fr;max-width:520px;gap:18px;}}

.cb-cover{position:relative;aspect-ratio:3/4;cursor:pointer;overflow:hidden;background:#0d0b08;
  transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1),box-shadow .6s ease;
  transform-origin:left center;will-change:transform;}
.cb-cover:hover{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(200,169,107,.4);transform:translateY(-6px);}
.cb-cover.cb-opening{transform:rotateY(-118deg);box-shadow:0 40px 120px rgba(0,0,0,.7);}
.cb-cover-img{position:absolute;inset:0;}
.cb-cover-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(20%) brightness(.5) contrast(1.06);transition:filter .9s ease,transform 1.4s cubic-bezier(.16,1,.3,1);}
.cb-cover:hover .cb-cover-img img{filter:grayscale(0%) brightness(.66) contrast(1.08);transform:scale(1.05);}
.cb-cover::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(6,4,2,.92) 0%,rgba(6,4,2,.45) 50%,rgba(6,4,2,.6) 100%);}
.cb-cover::after{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;z-index:4;
  background:linear-gradient(to bottom,transparent,rgba(200,169,107,.7) 20%,rgba(200,169,107,.7) 80%,transparent);}

.cb-cover-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:clamp(22px,3vw,40px);}
.cb-cover-ch{font-family:'Jost',sans-serif;font-weight:300;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:rgba(200,169,107,.85);margin-bottom:18px;}
.cb-cover-rule{width:0;height:.5px;background:rgba(200,169,107,.6);margin-bottom:22px;transition:width .8s cubic-bezier(.16,1,.3,1) .1s;}
.cb-cover:hover .cb-cover-rule{width:54px;}
.cb-cover-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(30px,3.6vw,48px);line-height:1.05;color:#f4f0e8;margin-bottom:14px;}
.cb-cover-title b{display:block;font-style:normal;font-weight:300;
  background:linear-gradient(118deg,#b8966a,#f0ddb0 40%,#c8a96b 64%,#e2c99a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cb-cover-meta{font-family:'Jost',sans-serif;font-weight:300;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(200,196,188,.6);margin-bottom:clamp(20px,3vh,32px);}
.cb-cover-open{display:inline-flex;align-items:center;gap:9px;font-family:'Jost',sans-serif;font-weight:300;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#e2c99a;
  padding:10px 22px;border:.5px solid rgba(200,169,107,.45);transition:gap .4s,background .4s,border-color .4s;}
.cb-cover-open::after{content:'\2192';}
.cb-cover:hover .cb-cover-open{gap:15px;background:rgba(200,169,107,.1);border-color:rgba(200,169,107,.75);}

/* ════ CHAPTER OVERLAY — FIXED: no transform (close button escapes), overflow hidden (forces fit) ════ */
.cb-chapter{position:fixed;inset:0;z-index:2147483600;background:rgba(6,4,2,.99);will-change:opacity;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease;
  display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(16px,3vh,36px) 0;overflow:hidden;}
.cb-chapter.cb-active{opacity:1;visibility:visible;pointer-events:auto;}
.cb-chapter{pointer-events:none;}
.cb-chapter-head{text-align:center;padding:clamp(30px,4vh,52px) clamp(20px,5vw,80px) clamp(18px,2.5vh,30px);flex-shrink:0;
  position:relative;opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1) .25s,transform .7s cubic-bezier(.16,1,.3,1) .25s;}
.cb-chapter.cb-active .cb-chapter-head{opacity:1;transform:translateY(0);}
.cb-chapter-ch{font-family:'Jost',sans-serif;font-weight:300;font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:rgba(200,169,107,.85);margin-bottom:16px;}
.cb-chapter-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;font-size:clamp(30px,4.4vw,54px);line-height:1.2;color:#f4f0e8;margin-bottom:12px;padding-top:6px;}
.cb-chapter-title b{font-style:normal;font-weight:300;background:linear-gradient(118deg,#b8966a,#f0ddb0 40%,#c8a96b 64%,#e2c99a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cb-chapter-sub{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(12px,1.4vw,14px);line-height:1.8;color:rgba(200,196,188,.7);max-width:540px;margin:0 auto;}
.cb-close{position:fixed;top:18px;right:18px;width:54px;height:54px;cursor:pointer;z-index:2147483647;border-radius:50%;background:rgba(6,4,2,.9);
  border:1px solid rgba(200,169,107,.55);display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.cb-close:hover{background:rgba(200,169,107,.2);border-color:rgba(200,169,107,.85);transform:rotate(90deg);box-shadow:0 0 24px rgba(200,169,107,.4);}
.cb-close::before,.cb-close::after{content:'';position:absolute;width:20px;height:1px;background:#e2c99a;}
.cb-close::before{transform:rotate(45deg);}.cb-close::after{transform:rotate(-45deg);}

.cb-chapter-body{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:0 0 6px;
  opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1) .4s;}
.cb-chapter.cb-active .cb-chapter-body{opacity:1;}

.cb-row-outer{overflow:hidden;position:relative;width:100%;height:100%;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);}
@keyframes cb-scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cb-track{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;height:100%;align-items:center;gap:3px;padding:3px 0;will-change:transform;cursor:grab;}
.cb-track:active{cursor:grabbing;}
.cb-card{flex-shrink:0;height:100%;max-height:min(520px,calc(100vh - 300px));width:auto;aspect-ratio:3/4.2;background:#161310;position:relative;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;}
.cb-card:hover{background:#1e1a15;}
.cb-img{position:relative;overflow:hidden;flex:1 1 auto;min-height:0;background:#0d0b08;}
.cb-img img{width:100%;height:100%;object-fit:contain;object-position:center;background:#0d0b08;filter:brightness(.92) contrast(1.03);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s ease;display:block;}
.cb-card:hover .cb-img img{transform:scale(1.02);filter:brightness(1) contrast(1.04);}
.cb-img::before{content:'';position:absolute;inset:9px;border:.5px solid rgba(200,169,107,.3);z-index:4;pointer-events:none;transition:border-color .5s cubic-bezier(.16,1,.3,1),inset .5s cubic-bezier(.16,1,.3,1);}
.cb-card:hover .cb-img::before{inset:6px;border-color:rgba(200,169,107,.68);}
.cb-img::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,transparent 28%,rgba(4,3,2,.2) 60%,rgba(4,3,2,.52) 100%);z-index:3;pointer-events:none;transition:opacity .6s;}
.cb-card:hover .cb-img::after{opacity:.55;}
.cb-c-tl,.cb-c-tr,.cb-c-bl,.cb-c-br{position:absolute;width:18px;height:18px;z-index:5;pointer-events:none;opacity:.38;transition:opacity .5s,width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1);}
.cb-card:hover .cb-c-tl,.cb-card:hover .cb-c-tr,.cb-card:hover .cb-c-bl,.cb-card:hover .cb-c-br{opacity:1;width:24px;height:24px;}
.cb-c-tl{top:9px;left:9px;border-top:1px solid rgba(200,169,107,.85);border-left:1px solid rgba(200,169,107,.85);}
.cb-c-tr{top:9px;right:9px;border-top:1px solid rgba(200,169,107,.85);border-right:1px solid rgba(200,169,107,.85);}
.cb-c-bl{bottom:9px;left:9px;border-bottom:1px solid rgba(200,169,107,.85);border-left:1px solid rgba(200,169,107,.85);}
.cb-c-br{bottom:9px;right:9px;border-bottom:1px solid rgba(200,169,107,.85);border-right:1px solid rgba(200,169,107,.85);}
.cb-label{padding:13px 14px 16px;border-top:.5px solid rgba(200,169,107,.14);background:#161310;transition:background .4s;flex-shrink:0;}
.cb-card:hover .cb-label{background:#1e1a15;}
.cb-label-name{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-style:italic;font-size:16px;color:#e2c99a;line-height:1.2;transition:color .3s;}
.cb-card:hover .cb-label-name{color:#f5f1eb;}

.cb-flip{height:100%;max-height:min(520px,calc(100vh - 300px));width:auto;aspect-ratio:3/4.2;}
.cb-flip .cb-img{perspective:1400px;flex:1 1 auto;min-height:0;background:#0d0b08;transform:translateZ(0);isolation:isolate;contain:layout paint;}
.cb-flip-inner{position:absolute;inset:0;transition:transform .9s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;z-index:2;will-change:transform;}
.cb-flip.show-back .cb-flip-inner{transform:rotateY(180deg);}
.cb-flip-front,.cb-flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#0d0b08;}
.cb-flip-back{transform:rotateY(180deg);z-index:1;}.cb-flip-front{z-index:2;}
.cb-flip-front img,.cb-flip-back img{width:100%;height:100%;object-fit:contain;object-position:center;background:#0d0b08;filter:brightness(.96) contrast(1.03);transition:filter .8s ease;display:block;}
.cb-flip-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;z-index:6;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:17px;letter-spacing:.02em;color:#d8bd8a;text-shadow:0 2px 10px rgba(8,8,10,.85);opacity:.92;transition:opacity .4s;pointer-events:none;}
.cb-flip.show-back .cb-flip-hint{opacity:0;}
.cb-flip-hint::before{content:"\2014  ";}

.cb-chapter-foot{flex-shrink:0;text-align:center;padding:clamp(16px,2.5vh,28px) clamp(20px,5vw,80px) clamp(8px,1.5vh,16px);
  opacity:0;transition:opacity .8s ease .55s;}
.cb-chapter.cb-active .cb-chapter-foot{opacity:1;}
.cb-cta{display:inline-flex;align-items:center;gap:12px;font-family:'Jost',sans-serif;font-weight:300;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(200,169,107,.82);text-decoration:none;padding-bottom:4px;border-bottom:.5px solid rgba(200,169,107,.4);transition:gap .4s cubic-bezier(.16,1,.3,1),color .25s,border-color .25s;}
.cb-cta::after{content:'\2192';}
.cb-cta:hover{color:#e2c99a;border-color:rgba(200,169,107,.7);gap:18px;}

@media(max-width:1024px){
  .cb-flip-inner{transform:none!important;transform-style:flat!important;}
  .cb-flip-front,.cb-flip-back{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .5s ease;}
  .cb-flip-back{transform:none!important;opacity:0;}
  .cb-flip.show-back .cb-flip-front{opacity:0;}
  .cb-flip.show-back .cb-flip-back{opacity:1;}
}
@media(max-width:880px){
  .cb-card,.cb-flip{max-height:440px!important;}
}
@media(prefers-reduced-motion:reduce){.cb-track{animation:none!important;}.cb-aurora{animation:none!important;}.cb-cover,.cb-flip-inner{transition:none!important;}}

/* MAGICAL BOOK COVERS */
.cb-cover{border-radius:3px 6px 6px 3px;}
.cb-bgscroll{position:absolute;inset:0;overflow:hidden;}
.cb-bgtrack{display:flex;width:max-content;height:100%;animation:cb-bgdrift 48s linear infinite;will-change:transform;}
.cb-cover:nth-child(2) .cb-bgtrack{animation-duration:60s;animation-direction:reverse;}
.cb-cover:nth-child(3) .cb-bgtrack{animation-duration:54s;}
@keyframes cb-bgdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cb-bgcell{height:100%;flex-shrink:0;}
.cb-bgcell img{height:100%;width:auto;display:block;object-fit:cover;filter:grayscale(28%) brightness(.42) contrast(1.05);}
.cb-cover:hover .cb-bgcell img{filter:grayscale(8%) brightness(.55) contrast(1.07);}
.cb-cover.cb-opening .cb-bgtrack{animation-play-state:paused;}
.cb-frame-svg{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(200,169,107,.25));}
.cb-lantern{transform-origin:top center;animation:cb-sway 6s ease-in-out infinite;}
.cb-lantern2{animation-duration:7.5s;animation-delay:-2s;}
@keyframes cb-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.cb-cover::after{background:linear-gradient(to bottom,transparent,rgba(200,169,107,.7) 20%,rgba(200,169,107,.7) 80%,transparent);}
.cb-cover-inner{z-index:5;}
@media(prefers-reduced-motion:reduce){.cb-bgtrack{animation:none!important;}.cb-lantern{animation:none!important;}}
</style>


<svg class="tm-defs"><defs><linearGradient id="tmGold" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#b8966a"/><stop offset="0.4" stop-color="#f0ddb0"/>
<stop offset="0.62" stop-color="#c8a96b"/><stop offset="1" stop-color="#e2c99a"/></linearGradient></defs></svg>

<section class="tm" id="tm-sec">
  <div class="tm-candle" aria-hidden="true"></div>
  <div class="tm-embers" id="tm-embers" aria-hidden="true"></div>

  <div class="tm-head">
    <div class="tm-ey">The Hera Grimoire</div>
    <h2 class="tm-h">Three Living Chapters.<br><em>One Atelier of Mastery.</em></h2>
    <p class="tm-sub">Each tome holds a discipline. Watch the work breathe behind gilded glass — then open a chapter to step inside the craft.</p>
  </div>

  <div class="tm-shelf">
    <div class="tm-book" data-chapter="colour" style="--bi:0">
      <div class="tm-book-3d">
        <div class="tm-pages"></div>
        <div class="tm-cover">
          <div class="tm-leather"></div>
          <div class="tm-filigree">
            <span class="tm-fc tm-fc-tl"></span><span class="tm-fc tm-fc-tr"></span>
            <span class="tm-fc tm-fc-bl"></span><span class="tm-fc tm-fc-br"></span>
          </div>
          <div class="tm-chno">Chapter I</div>
          <svg class="tm-emblem" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="50" cy="50" r="34" fill="none" stroke="url(#tmGold)" stroke-width="0.8" opacity="0.7"/>
      <circle cx="50" cy="50" r="29" fill="none" stroke="url(#tmGold)" stroke-width="0.5" opacity="0.45"/>
      <path d="M50,20 C44,26 40,30 30,31 C40,34 45,33 50,29 C55,33 60,34 70,31 C60,30 56,26 50,20 Z" fill="url(#tmGold)" opacity="0.9"/>
      <path d="M38,62 Q50,40 62,62" fill="none" stroke="url(#tmGold)" stroke-width="2.2" stroke-linecap="round"/><path d="M44,54 q6,-9 12,0" fill="none" stroke="url(#tmGold)" stroke-width="1.2" opacity="0.7"/>
      <circle cx="50" cy="14" r="1.6" fill="url(#tmGold)"/>
      <circle cx="50" cy="86" r="1.6" fill="url(#tmGold)"/>
      <circle cx="16" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
      <circle cx="84" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
    </svg>
          <div class="tm-window">
            <div class="tm-winscroll"><div class="tm-wintrack"><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/balayage-singapore-22211122331.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/10/Picture1ccssffee11.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/09/caramel-balayage-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-321234.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/pink-balayage.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/emerald-green-balayage.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-3212345.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-32123.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-25.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-15.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-near-me-1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/balayage-singapore-22211122331.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/10/Picture1ccssffee11.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/09/caramel-balayage-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-321234.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/pink-balayage.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/12/emerald-green-balayage.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-3212345.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-32123.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-25.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-15.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-near-me-1.jpg" alt="" loading="lazy" decoding="async"/></div></div></div>
            <div class="tm-winglass"></div>
            <div class="tm-winframe"></div>
          </div>
          <div class="tm-title"><span class="tm-t1">The Art of</span><span class="tm-t2">Colour</span></div>
          <div class="tm-meta">Balayage · AirTouch · Non-Bleach</div>
          <div class="tm-open"><span>Open the Chapter</span></div>
          <div class="tm-sheen"></div>
        </div>
        <div class="tm-spine"></div>
      </div>
      <div class="tm-shadow"></div>
    </div>
    <div class="tm-book" data-chapter="curls" style="--bi:1">
      <div class="tm-book-3d">
        <div class="tm-pages"></div>
        <div class="tm-cover">
          <div class="tm-leather"></div>
          <div class="tm-filigree">
            <span class="tm-fc tm-fc-tl"></span><span class="tm-fc tm-fc-tr"></span>
            <span class="tm-fc tm-fc-bl"></span><span class="tm-fc tm-fc-br"></span>
          </div>
          <div class="tm-chno">Chapter II</div>
          <svg class="tm-emblem" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="50" cy="50" r="34" fill="none" stroke="url(#tmGold)" stroke-width="0.8" opacity="0.7"/>
      <circle cx="50" cy="50" r="29" fill="none" stroke="url(#tmGold)" stroke-width="0.5" opacity="0.45"/>
      <path d="M50,20 C44,26 40,30 30,31 C40,34 45,33 50,29 C55,33 60,34 70,31 C60,30 56,26 50,20 Z" fill="url(#tmGold)" opacity="0.9"/>
      <path d="M50,42 a8,8 0 1,1 -7,8 a5,5 0 1,1 5,-5 a2.5,2.5 0 1,1 -2,2.5" fill="none" stroke="url(#tmGold)" stroke-width="2" stroke-linecap="round"/>
      <circle cx="50" cy="14" r="1.6" fill="url(#tmGold)"/>
      <circle cx="50" cy="86" r="1.6" fill="url(#tmGold)"/>
      <circle cx="16" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
      <circle cx="84" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
    </svg>
          <div class="tm-window">
            <div class="tm-winscroll"><div class="tm-wintrack"><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-3.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/layered-curly-haircut-4.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-layered-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/butterfly-curly-haircut-.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Rapunzel-curly-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-bob-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-asymmetrical-bobcut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-undercut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-3.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/layered-curly-haircut-4.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-layered-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/butterfly-curly-haircut-.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Rapunzel-curly-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-bob-haircut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-asymmetrical-bobcut.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-2.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-undercut.jpg" alt="" loading="lazy" decoding="async"/></div></div></div>
            <div class="tm-winglass"></div>
            <div class="tm-winframe"></div>
          </div>
          <div class="tm-title"><span class="tm-t1">The Craft of</span><span class="tm-t2">Curls</span></div>
          <div class="tm-meta">Rëzocut · Cadō · 2A–4C</div>
          <div class="tm-open"><span>Open the Chapter</span></div>
          <div class="tm-sheen"></div>
        </div>
        <div class="tm-spine"></div>
      </div>
      <div class="tm-shadow"></div>
    </div>
    <div class="tm-book" data-chapter="extensions" style="--bi:2">
      <div class="tm-book-3d">
        <div class="tm-pages"></div>
        <div class="tm-cover">
          <div class="tm-leather"></div>
          <div class="tm-filigree">
            <span class="tm-fc tm-fc-tl"></span><span class="tm-fc tm-fc-tr"></span>
            <span class="tm-fc tm-fc-bl"></span><span class="tm-fc tm-fc-br"></span>
          </div>
          <div class="tm-chno">Chapter III</div>
          <svg class="tm-emblem" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="50" cy="50" r="34" fill="none" stroke="url(#tmGold)" stroke-width="0.8" opacity="0.7"/>
      <circle cx="50" cy="50" r="29" fill="none" stroke="url(#tmGold)" stroke-width="0.5" opacity="0.45"/>
      <path d="M50,20 C44,26 40,30 30,31 C40,34 45,33 50,29 C55,33 60,34 70,31 C60,30 56,26 50,20 Z" fill="url(#tmGold)" opacity="0.9"/>
      <path d="M44,42 C56,48 44,54 56,60 M56,42 C44,48 56,54 44,60" fill="none" stroke="url(#tmGold)" stroke-width="1.8" stroke-linecap="round"/>
      <circle cx="50" cy="14" r="1.6" fill="url(#tmGold)"/>
      <circle cx="50" cy="86" r="1.6" fill="url(#tmGold)"/>
      <circle cx="16" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
      <circle cx="84" cy="50" r="1.2" fill="url(#tmGold)" opacity="0.6"/>
    </svg>
          <div class="tm-window">
            <div class="tm-winscroll"><div class="tm-wintrack"><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/7A17D5E2-5680-4CFB-A337-7FEF8C7F2EFE.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output-1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/05/Screenshot-2024-05-26-011847.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/05/hair-extensions-singapore-a1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/09/HAIR-EXTENSIONS-SINGAPORE-1213SS1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/09/BEST-HAIR-EXTENSIONS-SINGAPORE-SA112.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output1_1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/IMG_1435.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/Facetune_13-11-2023-15-32-17.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/FABD764C-DFED-442A-857B-7BB86E59ACDF.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-5.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-7.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/7A17D5E2-5680-4CFB-A337-7FEF8C7F2EFE.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output-1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/05/Screenshot-2024-05-26-011847.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/05/hair-extensions-singapore-a1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/09/HAIR-EXTENSIONS-SINGAPORE-1213SS1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/09/BEST-HAIR-EXTENSIONS-SINGAPORE-SA112.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output1_1.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/IMG_1435.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/Facetune_13-11-2023-15-32-17.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2024/02/FABD764C-DFED-442A-857B-7BB86E59ACDF.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-5.jpg" alt="" loading="lazy" decoding="async"/></div><div class="tm-wincell"><img src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-7.jpg" alt="" loading="lazy" decoding="async"/></div></div></div>
            <div class="tm-winglass"></div>
            <div class="tm-winframe"></div>
          </div>
          <div class="tm-title"><span class="tm-t1">The Science of</span><span class="tm-t2">Extensions</span></div>
          <div class="tm-meta">Tape-In · Keratin · Weft · Clip-In</div>
          <div class="tm-open"><span>Open the Chapter</span></div>
          <div class="tm-sheen"></div>
        </div>
        <div class="tm-spine"></div>
      </div>
      <div class="tm-shadow"></div>
    </div>
  </div>
</section>


<!-- CHAPTER OVERLAYS -->
<div class="cb-chapter" data-panel="colour">
  <div class="cb-chapter-head">
    <button class="cb-close" aria-label="Close chapter"></button>
    <div class="cb-chapter-ch">Chapter I · Colour</div>
    <div class="cb-chapter-title">The work speaks <b>for itself</b></div>
    <p class="cb-chapter-sub">Dimensional balayage, AirTouch and non-bleach colour — every result hand-painted by our master colourists.</p>
  </div>
  <div class="cb-chapter-body"><div class="cb-row-outer"><div class="cb-track" data-dir="left"><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/12/balayage-singapore-22211122331.jpg" alt="Luminous Dimension — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Luminous Dimension</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/10/Picture1ccssffee11.jpg" alt="Warm Radiance — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Warm Radiance</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/09/caramel-balayage-2.jpg" alt="Buttery Warmth — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Buttery Warmth</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-321234.jpg" alt="Sun-Kissed Glow — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Sun-Kissed Glow</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/12/pink-balayage.jpg" alt="Pink Dimension — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Pink Dimension</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/12/emerald-green-balayage.jpg" alt="Emerald Artistry — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Emerald Artistry</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-3212345.jpg" alt="Multi-Tonal Depth — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Multi-Tonal Depth</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-singapore-32123.jpg" alt="Seamless Blend — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Seamless Blend</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-25.jpg" alt="Feather-Light Blonde — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Feather-Light Blonde</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-15.jpg" alt="Soft Transition — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Soft Transition</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/08/balayage-near-me-1.jpg" alt="Natural Grow-Out — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Natural Grow-Out</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2019/07/partial-golden-balayage.png" alt="Warm Gold Radiance — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Warm Gold Radiance</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2022/03/balayage-singapore.jpg" alt="Dimensional Light — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Dimensional Light</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2021/09/highlights-to-balayage-transition.jpg" alt="From Highlights to Balayage — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">From Highlights to Balayage</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2021/05/balayage-singapore-2.jpg" alt="Timeless Dimension — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Timeless Dimension</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2021/12/balayage-singapore.jpg" alt="Natural Luminosity — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Natural Luminosity</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2021/08/balayage-singapore222.jpg" alt="Effortless Colour — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Effortless Colour</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-10.jpg" alt="Platinum Perfection — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Platinum Perfection</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2020/06/balayage-singapore-9.jpg" alt="Seamless Lightening — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Seamless Lightening</span></div></div></div></div></div>
  <div class="cb-chapter-foot"><a href="https://www.herabeauty.sg/balayage-singapore/" class="cb-cta" target="_blank" rel="noopener">View full Colour atelier</a></div>
</div>

<div class="cb-chapter" data-panel="curls">
  <div class="cb-chapter-head">
    <button class="cb-close" aria-label="Close chapter"></button>
    <div class="cb-chapter-ch">Chapter II · Curls</div>
    <div class="cb-chapter-title">The archive <b>in motion</b></div>
    <p class="cb-chapter-sub">Precision dry-cutting for every curl pattern from 2A to 4C — Rëzocut and Cadō transformations.</p>
  </div>
  <div class="cb-chapter-body"><div class="cb-row-outer"><div class="cb-track" data-dir="left"><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-3.jpg" alt="Defined curly lob with hydrated, sculpted volume — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Sculptural Definition</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/layered-curly-haircut-4.jpg" alt="Layered curly cut with soft shape and cuticle health — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Cuticle Health</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-layered-haircut.jpg" alt="Curly layered haircut with stronger shape and luminous shine — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Shape & Shine</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/butterfly-curly-haircut-.jpg" alt="Curly butterfly cut with elegant, couture movement — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Couture Movement</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-lob-haircut-2.jpg" alt="Curly lob with dimensional, frizz-controlled finish — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Dimensional · Frizz-Controlled</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Rapunzel-curly-haircut.jpg" alt="Long Rapunzel curls with restored bounce and definition — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Restored Bounce</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-bob-haircut.jpg" alt="Curly bob with sculpted, intentional shape — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Architectural Shape</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-asymmetrical-bobcut.jpg" alt="Curly asymmetrical bob with directional editorial shape — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Editorial Asymmetry</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-1.jpg" alt="Editorial curly cut at Hera atelier — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Editorial Cut</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Curly-hair-salon-singapore-2.jpg" alt="Signature curly cut at Hera atelier — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Hera Signature</span></div></div><div class="cb-card"><div class="cb-img"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/curly-hair-undercut.jpg" alt="Curly undercut at Hera atelier — Hera atelier" loading="lazy" decoding="async"/><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Architectural Undercut</span></div></div></div></div></div>
  <div class="cb-chapter-foot"><a href="https://www.herabeauty.sg/curly-hair-salon-singapore/" class="cb-cta" target="_blank" rel="noopener">View full Curls atelier</a></div>
</div>

<div class="cb-chapter" data-panel="extensions">
  <div class="cb-chapter-head">
    <button class="cb-close" aria-label="Close chapter"></button>
    <div class="cb-chapter-ch">Chapter III · Extensions</div>
    <div class="cb-chapter-title">Touch to <b>reveal</b></div>
    <p class="cb-chapter-sub">Finished looks glide past on their own. Tap any client to flip from front to back — four bespoke methods.</p>
  </div>
  <div class="cb-chapter-body"><div class="cb-row-outer"><div class="cb-track" data-dir="left"><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/7A17D5E2-5680-4CFB-A337-7FEF8C7F2EFE.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output-1.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/Screenshot-2024-05-26-011847.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/hair-extensions-singapore-a1.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/09/HAIR-EXTENSIONS-SINGAPORE-1213SS1.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/09/BEST-HAIR-EXTENSIONS-SINGAPORE-SA112.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/photo-output1_1.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/IMG_1435.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/Facetune_13-11-2023-15-32-17.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/FABD764C-DFED-442A-857B-7BB86E59ACDF.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-5.jpg" alt="Tape-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2023/05/hair-extensions-singapore-7.jpg" alt="Tape-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Tape-In</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/08/hair-extensions-Singapore-11112221111.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/08/hair-extensions-singapore-xxss11.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/09/best-hair-extensions-singapore-1.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/09/best-hair-extensions-singapore-2.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/04/hair-extensions-singapore-43212.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/04/hair-extensions-singapore-432121111.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/03/390A47E4-B5CB-46DB-B6F5-99347A6DE39F_2_43.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/03/86DC3A87-BB76-4228-944A-C307D23F6318_31.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/haie-extensions-Singapore-a1111111111.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/photo-output_8_20.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/haie-extensions-Singapore-a11111111.jpg" alt="Keratin Bond front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/05/haie-extensions-Singapore-a1111111.jpg" alt="Keratin Bond back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Keratin Bond</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/2F876500-D219-40B4-92B6-1C458C3EFD5C.jpg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/BFD26960-7BC8-4B32-B469-FE95E8CB4769-.jpg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/Screenshot-2026-05-30-182555.jpg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output5.jpeg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output4.jpeg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output6.jpeg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output7.jpeg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output2.jpeg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output.jpeg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output8.jpeg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output9.jpeg" alt="Hand-Tied Weft front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2026/05/photo-output10.jpeg" alt="Hand-Tied Weft back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div><div class="cb-flip-hint">— Tap to flip</div></div><div class="cb-label"><span class="cb-label-name">Hand-Tied Weft</span></div></div><div class="cb-card cb-flip front-only" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/BFB9585E-5213-4E48-ABE6-B75FCDB4F02D.jpg" alt="Clip-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/02/BFB9585E-5213-4E48-ABE6-B75FCDB4F02D.jpg" alt="Clip-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Clip-In · Single View</span></div></div><div class="cb-card cb-flip front-only" data-flip><div class="cb-img"><div class="cb-flip-inner"><div class="cb-flip-front"><img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%223%22 height=%224%22%3E%3Crect width=%223%22 height=%224%22 fill=%22%230d0b08%22/%3E%3C/svg%3E" data-src="https://www.herabeauty.sg/wp-content/uploads/2024/03/E1A9EF15-1D13-4036-889B-B48FF5504B6F_37.jpg" alt="Clip-In front — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div><div class="cb-flip-back"><img data-src="https://www.herabeauty.sg/wp-content/uploads/2024/03/E1A9EF15-1D13-4036-889B-B48FF5504B6F_37.jpg" alt="Clip-In back — Hera Hair Beauty Singapore" loading="lazy" decoding="async"/></div></div><div class="cb-c-tl"></div><div class="cb-c-tr"></div><div class="cb-c-bl"></div><div class="cb-c-br"></div></div><div class="cb-label"><span class="cb-label-name">Clip-In · Single View</span></div></div></div></div></div>
  <div class="cb-chapter-foot"><a href="https://www.herabeauty.sg/hair-extensions-singapore/" class="cb-cta" target="_blank" rel="noopener">View full Extensions atelier</a></div>
</div>

<script>
/* ═══ GRIMOIRE Stage-3 refactor — script 1/2: overlay relocation + shared close ═══ */
(function(){
  try{
    document.querySelectorAll('.cb-chapter').forEach(function(ch){
      if(ch.parentNode !== document.body){ document.body.appendChild(ch); }
    });
  }catch(err){}

  /* ONE shared close (close buttons + Escape). Pauses that chapter's track. */
  window.__cbCloseChapter = function(ch){
    if(!ch) return;
    if(Date.now() < (window.__openLock||0)) return;
    ch.classList.remove('cb-active');
    ch.classList.add('cb-paused');
    document.body.style.overflow='';
  };
  try{
    document.querySelectorAll('.cb-close').forEach(function(btn){
      btn.addEventListener('click',function(e){
        e.stopPropagation();
        window.__cbCloseChapter(btn.closest('.cb-chapter'));
      });
    });
    document.addEventListener('keydown',function(e){
      if(e.key==='Escape'){
        document.querySelectorAll('.cb-chapter.cb-active').forEach(function(ch){
          window.__cbCloseChapter(ch);
        });
      }
    });
  }catch(err){}
})();
</script>

<script>
/* ═══ GRIMOIRE Stage-3 refactor — script 2/2: engine + single open path + pause ═══ */
(function(){
  var SPEED=30;
  var inited={};

  /* CHANGE 1: activate ONLY the opened chapter's front images (data-src retained elsewhere) */
  function activateChapterImages(ch){
    if(!ch) return;
    ch.querySelectorAll('.cb-flip-front img[data-src], .cb-img > img[data-src]').forEach(function(img){
      var real = img.getAttribute('data-src');
      if(real){ img.src = real; img.removeAttribute('data-src'); }
    });
  }

  /* CHANGE 5: back-image loader — getAttribute + remove data-src */
  function loadBack(card){
    var bimg=card.querySelector('.cb-flip-back img');
    if(bimg){
      var real=bimg.getAttribute('data-src');
      if(real){ bimg.src=real; bimg.removeAttribute('data-src'); }
    }
  }

  function setupTrack(track){
    var cards=Array.prototype.slice.call(track.querySelectorAll('.cb-card'));
    if(!cards.length)return;
    var cw = cards[0].getBoundingClientRect().width;
    var cardW = cw>40 ? cw : (window.innerWidth<=599?240:340);
    var gapW=3, origSetW=cards.length*(cardW+gapW);
    var needed = cards.length<=12 ? Math.max(1,Math.ceil((window.innerWidth*2.5)/origSetW)) : 1;
    if(needed>1){for(var x=1;x<needed;x++){cards.forEach(function(c){var cl=c.cloneNode(true);cl.setAttribute('aria-hidden','true');track.appendChild(cl);});}}
    var baseCount=cards.length*needed, halfW=baseCount*(cardW+gapW);
    Array.prototype.slice.call(track.querySelectorAll('.cb-card')).forEach(function(c){var cl=c.cloneNode(true);cl.setAttribute('aria-hidden','true');track.appendChild(cl);});
    var dur=Math.max(40,Math.round(halfW/SPEED));
    (function(){
      var allCards = track.querySelectorAll('.cb-card');
      function loadImg(img){
        if(img && img.getAttribute('data-src') && img.src.indexOf('data:image/svg')===0){
          img.src = img.getAttribute('data-src'); img.removeAttribute('data-src');
        }
      }
      if('IntersectionObserver' in window){
        var io = new IntersectionObserver(function(entries){
          entries.forEach(function(en){
            if(en.isIntersecting){
              var card=en.target;
              var front = card.querySelector('.cb-flip-front img') || card.querySelector('.cb-img > img');
              loadImg(front);
            }
          });
        }, { root: track.parentNode, rootMargin: '300px 600px 300px 600px', threshold: 0.01 });
        allCards.forEach(function(card){ io.observe(card); });
      } else {
        allCards.forEach(function(card){
          var f = card.querySelector('.cb-flip-front img') || card.querySelector('.cb-img > img');
          loadImg(f);
        });
      }
    })();
    track.style.animation='cb-scroll-l '+dur+'s linear infinite';
    var dragging=false,startX=0,startTX=0,resumeT=null;
    function liveX(){var t=window.getComputedStyle(track).transform;if(!t||t==='none')return 0;var m=t.match(/matrix\(1,\s*0,\s*0,\s*1,\s*([-\d.]+)/);return m?parseFloat(m[1]):0;}
    function freeze(){clearTimeout(resumeT);var x=liveX();track.style.animation='none';track.style.transform='translateX('+x+'px)';return x;}
    function thaw(x){var norm=x%-halfW;if(norm>0)norm-=halfW;var delay=-(Math.abs(norm)/halfW*dur);track.style.transform='translateX('+norm+'px)';requestAnimationFrame(function(){requestAnimationFrame(function(){track.style.transform='';track.style.animation='cb-scroll-l '+dur+'s linear '+delay+'s infinite';});});}
    track.addEventListener('touchstart',function(e){dragging=true;startX=e.touches[0].clientX;startTX=freeze();},{passive:true});
    track.addEventListener('touchmove',function(e){if(!dragging)return;track.style.transform='translateX('+(startTX+e.touches[0].clientX-startX)+'px)';},{passive:true});
    track.addEventListener('touchend',function(){if(!dragging)return;dragging=false;var x=parseFloat(track.style.transform.replace(/[^-\d.]/g,''))||0;resumeT=setTimeout(function(){thaw(x);},1500);});
    track.addEventListener('mousedown',function(e){dragging=true;startX=e.pageX;startTX=freeze();e.preventDefault();});
    document.addEventListener('mousemove',function(e){if(!dragging)return;track.style.transform='translateX('+(startTX+e.pageX-startX)+'px)';});
    document.addEventListener('mouseup',function(){if(!dragging)return;dragging=false;var x=parseFloat(track.style.transform.replace(/[^-\d.]/g,''))||0;resumeT=setTimeout(function(){thaw(x);},1500);});
  }

  function initChapter(name){
    if(inited[name])return;
    inited[name]=true;
    var ch=document.querySelector('.cb-chapter[data-panel="'+name+'"]');
    if(!ch)return;
    try{
      var track=ch.querySelector('.cb-track');
      if(track)setupTrack(track);
      if(track){
        var fdx=0,fdy=0,fmoved=false;
        track.addEventListener('touchstart',function(e){fdx=e.touches[0].clientX;fdy=e.touches[0].clientY;fmoved=false;},{passive:true});
        track.addEventListener('touchmove',function(e){if(Math.abs(e.touches[0].clientX-fdx)>8||Math.abs(e.touches[0].clientY-fdy)>8)fmoved=true;},{passive:true});
        track.addEventListener('touchend',function(e){
          if(fmoved)return;
          var card=e.target.closest('.cb-flip:not(.front-only)');
          if(card){loadBack(card);card.classList.toggle('show-back');}
        });
        var mdx=0,mmoved=false;
        track.addEventListener('mousedown',function(e){mdx=e.pageX;mmoved=false;});
        track.addEventListener('mousemove',function(e){if(Math.abs(e.pageX-mdx)>8)mmoved=true;});
        track.addEventListener('click',function(e){
          if(mmoved)return;
          var card=e.target.closest('.cb-flip:not(.front-only)');
          if(card){loadBack(card);card.classList.toggle('show-back');}
        });
      }
    }catch(err){}
  }
  window.__cbInitChapter = initChapter;

  /* CHANGE 3: ONE authoritative open path (single tested init call) */
  function openChapter(name, bookEl){
    var ch=document.querySelector('.cb-chapter[data-panel="'+name+'"]');
    if(!ch)return;
    if(bookEl) bookEl.classList.add('tm-opening');
    window.__openLock = Date.now() + 800;
    setTimeout(function(){
      ch.classList.add('cb-active');
      ch.classList.remove('cb-paused');
      document.body.style.overflow='hidden';
      activateChapterImages(ch);
      initChapter(name);
      if(bookEl) bookEl.classList.remove('tm-opening');
    },560);
  }

  document.querySelectorAll('.tm-book').forEach(function(b){
    b.addEventListener('click',function(ev){
      ev.preventDefault(); ev.stopPropagation();
      openChapter(b.getAttribute('data-chapter'), b);
    });
  });

  /* CHANGE 4: pause shelf off-screen + all motion when tab hidden */
  var sec=document.getElementById('tm-sec');
  var inView=false;
  if('IntersectionObserver' in window && sec){
    var io2=new IntersectionObserver(function(entries){ inView=entries[0].isIntersecting; applyPause(); },{rootMargin:'200px 0px'});
    io2.observe(sec);
  } else { inView=true; }
  function applyPause(){
    if(!sec)return;
    var hidden=document.hidden;
    if(!inView || hidden){ sec.classList.add('tm-paused'); } else { sec.classList.remove('tm-paused'); }
    document.querySelectorAll('.cb-chapter').forEach(function(ch){
      var open=ch.classList.contains('cb-active');
      if(open && !hidden){ ch.classList.remove('cb-paused'); }
      else if(open && hidden){ ch.classList.add('cb-paused'); }
    });
  }
  document.addEventListener('visibilitychange', applyPause);

  /* embers (unchanged visual) */
  var box=document.getElementById('tm-embers');
  if(box){
    for(var i=0;i<22;i++){
      var e=document.createElement('div');e.className='tm-ember';
      e.style.left=(Math.random()*100)+'%';
      e.style.setProperty('--ex',(Math.random()*60-30)+'px');
      var dur=7+Math.random()*9;
      e.style.animationDuration=dur+'s';
      e.style.animationDelay=(-Math.random()*dur)+'s';
      var s=2+Math.random()*2.5;e.style.width=s+'px';e.style.height=s+'px';
      box.appendChild(e);
    }
  }
})();
</script>