/* site-2027.css
   The 3D layer of the 2027 home page, for every public page of ibtuition.sg.
   Everything is prefixed hx- and changes nothing unless a page uses these classes.
   Plain CSS transforms on real HTML: no images of text, no libraries. All motion stops under reduced motion. */

:root{--hx-ink:#0D1F3C;--hx-navy:#1B3A6B;--hx-gold:#F0A500;--hx-goldtext:#8A5A00;--hx-chalk:#F1F4F8;--hx-line:#DCE2EA;--hx-soft:#46526B;--hx-ease:cubic-bezier(.2,.8,.2,1)}

/* ---------- 1. Stage: a navy (or chalk) floor that holds one tilted object ---------- */
.hx-stage{position:relative;box-sizing:border-box;border-radius:4px;background:radial-gradient(540px 440px at 58% 44%,#1B3A6B 0%,#0D1F3C 72%);color:#fff;perspective:1400px;perspective-origin:50% 42%}
.hx-stage--chalk{background:var(--hx-chalk);color:var(--hx-ink)}
.hx-stage--pad{padding:36px}
.hx-obj{transform-style:preserve-3d;transform:rotateX(calc(5deg + var(--hx-rx,0deg))) rotateY(calc(-11deg + var(--hx-ry,0deg)));transition:transform .6s var(--hx-ease);box-shadow:0 34px 60px -26px rgba(2,8,22,.72)}
.hx-obj--left{transform:rotateX(calc(5deg + var(--hx-rx,0deg))) rotateY(calc(11deg + var(--hx-ry,0deg)))}
.hx-obj--soft{transform:rotateX(calc(3deg + var(--hx-rx,0deg))) rotateY(calc(-6deg + var(--hx-ry,0deg)))}
.hx-obj--noshadow{box-shadow:none}
/* a form or a finder inside must be easy to use: it straightens while the visitor is on it */
.hx-stage:hover .hx-obj,.hx-stage:focus-within .hx-obj{transform:rotateX(var(--hx-rx,0deg)) rotateY(var(--hx-ry,0deg))}
.hx-stage:focus-within .hx-obj{transform:none}
.hx-float{animation:hxFloat 10s ease-in-out infinite}
.hx-float--slow{animation-duration:13s}
.hx-float--late{animation-delay:-4s}
@keyframes hxFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ---------- 2. Stack: two to four sheets or pictures with real depth (last child is the front) ---------- */
.hx-stack{position:relative;width:300px;aspect-ratio:3/4;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--hx-rx,0deg))) rotateY(calc(-22deg + var(--hx-ry,0deg)));transition:transform .6s var(--hx-ease)}
.hx-stack>*{position:absolute;inset:0;box-sizing:border-box;margin:0;border-radius:4px;overflow:hidden;background:#fff;color:var(--hx-ink);box-shadow:0 26px 50px -18px rgba(2,8,22,.62),0 1px 0 rgba(255,255,255,.5) inset;transition:transform .8s var(--hx-ease)}
.hx-stack>*>img{display:block;width:100%;height:100%;object-fit:cover}
.hx-stack>*:nth-last-child(1){transform:translate3d(0,0,0)}
.hx-stack>*:nth-last-child(2){transform:translate3d(42px,-56px,-110px);filter:brightness(.95)}
.hx-stack>*:nth-last-child(3){transform:translate3d(84px,-112px,-220px);filter:brightness(.9)}
.hx-stack>*:nth-last-child(4){transform:translate3d(126px,-168px,-330px);filter:brightness(.85)}
.hx-stack--wide{aspect-ratio:4/3;width:360px}
.hx-stack--sm{width:220px}
.hx-stack--sm>*:nth-last-child(2){transform:translate3d(30px,-40px,-80px)}
.hx-stack--sm>*:nth-last-child(3){transform:translate3d(60px,-80px,-160px)}
.hx-stack--sm>*:nth-last-child(4){transform:translate3d(90px,-120px,-240px)}

/* ---------- 3. Phones in 3D (app pictures) ---------- */
.hx-phones{display:flex;align-items:flex-end;justify-content:center;gap:18px;transform-style:preserve-3d;transform:rotateX(calc(6deg + var(--hx-rx,0deg))) rotateY(calc(-20deg + var(--hx-ry,0deg)));transition:transform .6s var(--hx-ease)}
.hx-phones>*{flex:0 0 auto;border-radius:28px;overflow:hidden;box-shadow:0 30px 50px -22px rgba(2,8,22,.75);background:#0D1F3C}
.hx-phones>*:nth-child(2){transform:translateZ(60px) translateY(-26px)}
.hx-phones>*:nth-child(3){transform:translateZ(-40px) translateY(18px)}
.hx-phones img{display:block;width:100%;height:auto}

/* ---------- 4. Lift: cards that rise a little under the pointer ---------- */
.hx-lift{transition:transform .35s var(--hx-ease),box-shadow .35s ease}
@media (hover:hover){.hx-lift:hover{transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(13,31,60,.5)}}

/* ---------- 5. Reviews band: 5.0 from Google, the founder, and the rolling 3D reviews ---------- */
.hx-reviews{--hx-bg:#F1F4F8;background:var(--hx-bg);color:var(--hx-ink);padding:76px 0 72px;overflow:hidden}
.hx-clip{overflow-x:clip}
.hx-reviews--white{--hx-bg:#ffffff}
.hx-reviews__grid{display:grid;grid-template-columns:minmax(0,1fr) 620px;gap:48px;align-items:center}
.hx-reviews__eb{margin:0;display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-soft)}
.hx-reviews__eb::before{content:"";width:28px;height:2px;background:var(--hx-gold)}
.hx-reviews__score{margin:14px 0 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hx-reviews__num{font-family:Fraunces,Georgia,'Times New Roman',serif;font-size:104px;line-height:.9;font-weight:480;letter-spacing:-.03em}
.hx-reviews__stars{display:block;width:132px;height:24px}
.hx-reviews__g{margin:8px 0 0;font-size:17px;font-weight:600}
.hx-reviews__g a{color:var(--hx-ink);text-underline-offset:5px}
.hx-reviews__g a:hover{color:var(--hx-goldtext)}
.hx-reviews__cred{margin:20px 0 0;max-width:30em;font-size:16px;line-height:1.55;color:var(--hx-soft)}
.hx-social{position:relative;width:620px;height:420px}
.hx-founder{position:absolute;left:20px;top:26px;width:236px;margin:0;perspective:1100px}
.hx-founder__card{margin:0;background:#fff;border:1px solid var(--hx-line);border-radius:4px;overflow:hidden;box-shadow:0 30px 50px -26px rgba(13,31,60,.55);transform:rotateY(calc(9deg + var(--hx-ry,0deg))) rotateX(var(--hx-rx,0deg));transition:transform .3s ease-out}
.hx-founder__card img{display:block;width:100%;height:268px;object-fit:cover;object-position:50% 12%}
.hx-founder__cap{display:block;padding:14px 16px 16px}
.hx-founder__cap b{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--hx-soft);white-space:nowrap}
.hx-founder__cap strong{display:block;margin-top:4px;font-family:Fraunces,Georgia,serif;font-size:23px;line-height:1.12;font-weight:520;white-space:nowrap}
.hx-founder__cap span{display:block;margin-top:3px;font-size:13.5px;color:var(--hx-soft);white-space:nowrap}
.hx-drum{--w:318px;--h:148px;--r:190px;--dh:400px;position:absolute;left:286px;top:10px;width:var(--w);height:var(--dh);perspective:1000px;perspective-origin:50% 50%}
.hx-drum__push{position:absolute;left:0;top:calc((var(--dh) - var(--h)) / 2);width:var(--w);height:var(--h);transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1))}
.hx-drum__spin{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d;animation:hxSpin 32s ease-in-out infinite}
.hx-drum__face{position:absolute;inset:0;box-sizing:border-box;margin:0;padding:15px 18px 13px;background:#fff;border:1px solid var(--hx-line);border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 14px 26px -18px rgba(13,31,60,.5)}
.hx-drum__face:nth-child(1){transform:rotateX(0deg) translateZ(var(--r))}
.hx-drum__face:nth-child(2){transform:rotateX(45deg) translateZ(var(--r))}
.hx-drum__face:nth-child(3){transform:rotateX(90deg) translateZ(var(--r))}
.hx-drum__face:nth-child(4){transform:rotateX(135deg) translateZ(var(--r))}
.hx-drum__face:nth-child(5){transform:rotateX(180deg) translateZ(var(--r))}
.hx-drum__face:nth-child(6){transform:rotateX(225deg) translateZ(var(--r))}
.hx-drum__face:nth-child(7){transform:rotateX(270deg) translateZ(var(--r))}
.hx-drum__face:nth-child(8){transform:rotateX(315deg) translateZ(var(--r))}
.hx-drum__stars{display:block;width:66px;height:12px}
.hx-drum__face blockquote{margin:8px 0 0;padding:0;border:0;font-family:Fraunces,Georgia,serif;font-style:italic;font-size:15.5px;line-height:1.34;font-weight:420;color:var(--hx-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hx-drum__face p{margin:8px 0 0;font-size:12px;line-height:1.3;color:var(--hx-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-drum__face p strong{color:var(--hx-ink);font-weight:600}
.hx-drum__fade{position:absolute;left:-8px;right:-8px;height:84px;pointer-events:none}
.hx-drum__fade--t{top:0;background:linear-gradient(to bottom,var(--hx-bg,#F1F4F8) 12%,transparent)}
.hx-drum__fade--b{bottom:0;background:linear-gradient(to top,var(--hx-bg,#F1F4F8) 12%,transparent)}
@keyframes hxSpin{0%,9.5%{transform:rotateX(0deg)}12.5%,22%{transform:rotateX(-45deg)}25%,34.5%{transform:rotateX(-90deg)}37.5%,47%{transform:rotateX(-135deg)}50%,59.5%{transform:rotateX(-180deg)}62.5%,72%{transform:rotateX(-225deg)}75%,84.5%{transform:rotateX(-270deg)}87.5%,97%{transform:rotateX(-315deg)}100%{transform:rotateX(-360deg)}}
/* compact form of the band: the drum next to a short line, for the end of long pages */
.hx-reviews--slim{padding:44px 0}
.hx-reviews--slim .hx-reviews__num{font-size:72px}

@media (max-width:1180px){
  .hx-reviews__grid{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:center;text-align:center}
  .hx-reviews__eb,.hx-reviews__score{justify-content:center}
  .hx-reviews__cred{margin-left:auto;margin-right:auto}
}
@media (max-width:680px){
  .hx-reviews{padding:52px 0 48px}
  .hx-reviews__num{font-size:78px}
  .hx-social{width:358px;height:318px}
  .hx-founder{left:0;top:40px;width:136px}
  .hx-founder__card img{height:156px}
  .hx-founder__cap{padding:9px 10px 11px}
  .hx-founder__cap b{font-size:10px}
  .hx-founder__cap strong{font-size:15.5px}
  .hx-founder__cap span{font-size:12px}
  .hx-drum{--w:210px;--h:124px;--r:156px;--dh:306px;left:148px;top:6px}
  .hx-drum__face{padding:11px 13px 10px}
  .hx-drum__face blockquote{font-size:13.5px}
  .hx-drum__fade{height:58px}
  .hx-stage--pad{padding:20px}
  .hx-stack{width:230px}
  .hx-stack>*:nth-last-child(2){transform:translate3d(30px,-40px,-80px)}
  .hx-stack>*:nth-last-child(3){transform:translate3d(60px,-80px,-160px)}
  .hx-stack>*:nth-last-child(4){transform:translate3d(90px,-120px,-240px)}
}
@media (max-width:420px){
  .hx-social{width:330px;height:306px}
  .hx-founder{width:122px;top:44px}
  .hx-founder__card img{height:140px}
  .hx-founder__cap strong{font-size:14px}
  .hx-founder__cap b{font-size:9px;letter-spacing:.08em}
  .hx-drum{--w:198px;--h:128px;left:132px}
  .hx-drum__face blockquote{font-size:13px}
}
@media (max-width:350px){.hx-social{transform:scale(.88);transform-origin:50% 0;margin-bottom:-36px}}

/* on touch screens nothing is tilted that a finger has to use */
@media (hover:none){.hx-stage .hx-obj:not(.hx-obj--always){transform:none}}

@media (prefers-reduced-motion:reduce){
  .hx-float,.hx-drum__spin{animation:none}
  .hx-obj,.hx-stack,.hx-stack>*,.hx-phones,.hx-lift,.hx-founder__card{transition:none}
}