/* GLAM BY MARA / Silk Edition 31 · stability-first micro-interactions */
:root{--gm31-gold:#e8c993;--gm31-pale:#f7e7c7;--gm31-ease:cubic-bezier(.22,1,.36,1)}
html,body{overflow-x:clip}
#home,#experience,#courses,#benefits,#reviews,#contact{scroll-margin-top:110px}
/* Section illumination: never hides text or replaces original theme styles */
main > section,main > .bento-wrap,main > .hero{position:relative;isolation:isolate}
main > section.gm31-section::after, main > .bento-wrap.gm31-section::after, main > .hero.gm31-section::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 60% at 50% 35%,rgba(244,214,203,.11),transparent 68%);
  opacity:0;transition:opacity 1.2s ease;
}
main > section.gm31-section.gm31-active::after,main > .bento-wrap.gm31-section.gm31-active::after,main > .hero.gm31-section.gm31-active::after{opacity:1}
html.gbm-night main > section.gm31-section::after,html.gbm-night main > .bento-wrap.gm31-section::after,html.gbm-night main > .hero.gm31-section::after{background:radial-gradient(ellipse 78% 65% at 55% 40%,rgba(218,160,184,.065),transparent 72%)}
/* Typography: animated mask on the original text, NO DOM text replacement */
.gm31-heading{position:relative;overflow:visible}
.gm31-heading.gm31-shown{animation:gm31-title-reveal .95s var(--gm31-ease) both}
@keyframes gm31-title-reveal{from{clip-path:inset(0 100% 0 0);filter:blur(2px);transform:translateY(10px)}to{clip-path:inset(0 0 0 0);filter:blur(0);transform:translateY(0)}}
.gm31-heading::after{content:"";position:absolute;inset:-7% -2%;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(252,229,180,.0) 43%,rgba(250,229,182,.6) 50%,rgba(255,250,234,.10) 53%,transparent 62%);transform:translateX(-80%);mix-blend-mode:soft-light}
.gm31-heading.gm31-shown::after{animation:gm31-type-shine 1.9s ease .55s 1 both}
@keyframes gm31-type-shine{0%{opacity:0;transform:translateX(-68%)}25%{opacity:.75}90%{opacity:.65}100%{opacity:0;transform:translateX(65%)}}
/* Silk Reveal on image cards; injected only after JS initializes, no CSS pseudo collisions */
.gm31-image-silk{position:relative;isolation:isolate}
.gm31-image-silk .gm31-silk-l,.gm31-image-silk .gm31-silk-r{
  display:block;position:absolute;top:0;bottom:0;width:52%;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(103deg,rgba(255,255,255,0) 0 13px,rgba(255,241,215,.032) 16px 22px,transparent 27px 43px),linear-gradient(113deg,#4c303e,#835267 38%,#603b4e 65%,#39232f);
  box-shadow:inset 0 0 0 1px rgba(247,218,170,.22);
  transition:transform 1.18s var(--gm31-ease),opacity .7s ease;will-change:transform;
}
.gm31-image-silk .gm31-silk-l{left:0;clip-path:polygon(0 0,100% 0,95% 100%,0 100%)}
.gm31-image-silk .gm31-silk-r{right:0;clip-path:polygon(5% 0,100% 0,100% 100%,0 100%)}
.gm31-image-silk .gm31-silk-l::after,.gm31-image-silk .gm31-silk-r::before{
  content:"";position:absolute;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,rgba(239,214,168,.1),#f5dfb5 30%,#bf9767 78%,rgba(239,214,168,.1));
}
.gm31-image-silk .gm31-silk-l::after{right:0}.gm31-image-silk .gm31-silk-r::before{left:0}
.gm31-image-silk.gm31-opened .gm31-silk-l{transform:translate3d(-104%,0,0);opacity:.85}
.gm31-image-silk.gm31-opened .gm31-silk-r{transform:translate3d(104%,0,0);opacity:.85}
.gm31-image-silk:not(.gm31-opened) .tag{z-index:6}
.gm31-image-silk.gm31-opened img{animation:gm31-photo-arrive 1.25s var(--gm31-ease)}
@keyframes gm31-photo-arrive{from{filter:saturate(.86) brightness(.94);transform:scale(1.045)}to{filter:none;transform:scale(1)}}
/* Hero image subtle staged unveil and optical depth */
.hero-art.gm31-hero-arrived img{animation:gm31-hero-unveil 1.15s var(--gm31-ease)}
@keyframes gm31-hero-unveil{from{clip-path:inset(0 12% 0 12% round 200px 200px 6px 6px);filter:brightness(.91) saturate(.85)}to{clip-path:inset(0 0 0 0 round 200px 200px 6px 6px);filter:brightness(1) saturate(.94)}}
.hero-art img{transform:translate3d(var(--gm31px,0px),var(--gm31py,0px),0) scale(1.008);transition:transform .45s var(--gm31-ease),filter .7s ease!important;will-change:transform}
/* card interaction: respect v29's reveal transforms */
html.gbm-motion-on [data-gbm-reveal].gbm-visible:is(.course,.benefit,.bento-card):hover,
html.gbm-motion-on .course.gbm-visible:hover{
 transform:translate3d(0,-6px,0) scale(1.008)!important;
 box-shadow:0 24px 55px rgba(55,33,45,.17)!important;
}
.course,.benefit,.bento-card,.review{position:relative}
.course::after,.benefit::after,.bento-card::after,.review::after{
 content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:radial-gradient(240px circle at var(--gm31mx,50%) var(--gm31my,50%),rgba(255,237,197,.26),transparent 68%);
 opacity:0;transition:opacity .35s ease;
}
.course:hover::after,.benefit:hover::after,.bento-card:hover::after,.review:hover::after{opacity:.78}
html.gbm-night .course:hover,html.gbm-night .benefit:hover,html.gbm-night .bento-card:hover{box-shadow:0 26px 55px rgba(4,3,5,.38)!important}
/* Golden dust: 8 lightweight CSS particles near hero tagline */
.gm31-dust{position:absolute;top:4%;left:6%;width:164px;height:145px;pointer-events:none;z-index:2;opacity:.75}
.gm31-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gm31-gold);box-shadow:0 0 7px rgba(248,219,167,.75);animation:gm31-dust 5.5s ease-in-out infinite;opacity:0}
.gm31-dust i:nth-child(1){left:6%;top:28%;animation-delay:.4s}.gm31-dust i:nth-child(2){left:24%;top:75%;animation-delay:1.1s}.gm31-dust i:nth-child(3){left:39%;top:15%;animation-delay:2s}.gm31-dust i:nth-child(4){left:51%;top:62%;animation-delay:2.6s}.gm31-dust i:nth-child(5){left:68%;top:40%;animation-delay:3.2s}.gm31-dust i:nth-child(6){left:81%;top:80%;animation-delay:4s}.gm31-dust i:nth-child(7){left:95%;top:14%;animation-delay:4.7s}.gm31-dust i:nth-child(8){left:15%;top:52%;animation-delay:5s}
@keyframes gm31-dust{0%,100%{opacity:0;transform:translate3d(0,6px,0) scale(.3)}18%{opacity:.75}55%{opacity:.55}82%{opacity:0;transform:translate3d(0,-16px,0) scale(1)}}
/* phone / motion safety */
@media(max-width:900px){.hero-art img{transform:none!important}.gm31-dust{opacity:.44;top:2%;left:5%}}
/* 320-360 px: keep logo, language, account and mobile navigation inside viewport */
@media(max-width:380px){
  header .nav{gap:4px!important;min-width:0!important}
  header .brand{gap:3px!important;min-width:0!important;flex:0 1 auto!important}
  header .brandmark{font-size:28px!important;flex:0 0 30px!important}
  header .brand b{font-size:clamp(11px,3.8vw,14px)!important;white-space:nowrap!important}
  header .brand small{font-size:5px!important;letter-spacing:.09em!important}
  header .navright{margin-left:auto!important;gap:2px!important;flex:0 0 auto!important}
  header select.lang{width:49px!important;min-width:49px!important;max-width:49px!important;padding:7px 4px!important}
  header .iconbtn{font-size:17px!important;padding:5px!important;min-width:26px!important}
  header #menu{width:27px!important;min-width:27px!important}
}

@media(hover:none),(pointer:coarse){.course:hover::after,.benefit:hover::after,.bento-card:hover::after,.review:hover::after{opacity:0}.gm31-dust{opacity:.3}}
@media(prefers-reduced-motion:reduce){
 .gm31-heading.gm31-shown,.gm31-heading.gm31-shown::after,.gm31-image-silk.gm31-opened img,.hero-art.gm31-hero-arrived img,.gm31-dust i{animation:none!important}
 .gm31-image-silk .gm31-silk-l,.gm31-image-silk .gm31-silk-r{display:none!important}
 .hero-art img{transform:none!important;clip-path:none!important}
}