/* Small, intentional discoveries. No changes outside Beauty. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:beauty-page-out .35s ease both}
::view-transition-new(root){animation:beauty-page-in .65s cubic-bezier(.2,.65,.2,1) both}
@keyframes beauty-page-out{to{opacity:0;transform:scale(1.025)}}
@keyframes beauty-page-in{from{opacity:0;transform:translateY(24px);clip-path:inset(8% 0 0 0 round 6%)}to{opacity:1;transform:none;clip-path:inset(0)}}
.pearl-stage{--light-x:50%;--light-y:50%;--rose-light:.12;--light-angle:115deg}
.pearl-stage .pearl-light{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fffef3ee,transparent 37%),conic-gradient(from var(--light-angle) at 50% 110%,transparent 0deg,#ffeadb70 35deg,transparent 65deg,#fffef9aa 110deg,transparent 155deg);mix-blend-mode:soft-light;opacity:.8}
.pearl-stage:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--light-x) var(--light-y),#d67d9695,transparent 70%);opacity:var(--rose-light);mix-blend-mode:multiply;transition:opacity .3s}
.light-play{position:relative;z-index:5;font:11px/1.6 Arial,sans-serif}
.light-play summary{list-style:none;text-decoration:underline;text-underline-offset:5px;min-height:44px;display:flex;align-items:center;cursor:pointer}
.light-play summary::-webkit-details-marker{display:none}
.light-play-panel{position:absolute;bottom:55px;left:50%;transform:translateX(-50%);width:260px;padding:24px;border:1px solid #ffffffdc;border-radius:18px;background:#fff8f1f2;box-shadow:0 18px 50px #70475520;backdrop-filter:blur(18px)}
.light-play-panel label{display:block;font-size:12px;margin-bottom:15px}.light-play-panel p{font-size:10px;color:#705e64;margin:10px 0 0}
.light-play input{width:100%;height:44px;accent-color:#835665;cursor:ew-resize}
.beauty-home .opening-photo,.beauty-home .guidance-photo,.beauty-detail .kinetic-media{--shine-x:50%;--shine-y:50%;--tilt-x:0deg;--tilt-y:0deg;--shine-opacity:0;position:relative;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.opening-photo:after,.guidance-photo:after,.kinetic-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--shine-x) var(--shine-y),#fffefb85,transparent 52%),linear-gradient(120deg,transparent 20%,#fff7e433 45%,transparent 70%);opacity:var(--shine-opacity);mix-blend-mode:soft-light;transition:opacity .4s}
.moment-atelier{padding-top:105px;padding-bottom:105px}
.moment-heading{text-align:center;margin-bottom:50px}.moment-heading h2{font-size:clamp(48px,5.7vw,80px);line-height:1}.moment-heading>p:last-child{font-size:14px}
.moment-book{display:grid;grid-template-columns:1fr 1.1fr;min-height:540px;border:1px solid #f3dede;background:linear-gradient(115deg,#f4dddf,#fff8f1 62%);box-shadow:0 35px 80px -65px #704755;border-radius:3px 55px 3px 3px;overflow:hidden;isolation:isolate}
.moment-photo{position:relative;overflow:hidden;min-height:540px}.moment-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.moment-photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#503b4355);pointer-events:none}.moment-photo span{position:absolute;bottom:30px;left:30px;z-index:1;color:#fff;font:italic 32px/1.2 var(--serif);text-shadow:0 2px 15px #503b4390}
.moment-page{position:relative;padding:40px 45px;display:flex;flex-direction:column;justify-content:center;min-width:0}.moment-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}.moment-choices button{font:12px/1.4 Arial,sans-serif;border:1px solid #b69aa3;color:#503b43;background:#fffaf590;padding:12px 16px;min-height:44px;border-radius:30px;transition:background .25s,color .25s}
.moment-choices button[aria-pressed=true]{background:#704755;color:#fffaf5;border-color:#704755}.moment-choices button:hover{border-color:#704755}
.moment-result{min-height:250px}.moment-result h3{font:clamp(39px,4vw,57px)/1.05 var(--serif);letter-spacing:-.035em;margin:0 0 22px}.moment-description{font-size:14px;line-height:1.85;max-width:380px}.moment-caption{font-size:10px}.moment-note{font-size:10px;line-height:1.7;color:#705e64;margin:25px 0 0;max-width:310px}.moment-destination{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
.moment-changing .moment-photo img{animation:moment-image .75s cubic-bezier(.2,.7,.2,1) both}.moment-changing .moment-result{animation:moment-copy .55s ease both}
@keyframes moment-image{from{transform:scale(1.09);opacity:.35;clip-path:inset(0 24% 0 0)}to{transform:scale(1);opacity:1;clip-path:inset(0)}}
@keyframes moment-copy{from{transform:translateY(12px);opacity:.2}to{transform:none;opacity:1}}
@media(hover:hover) and (pointer:fine){.beauty-home .button,.beauty-detail .button{position:relative;overflow:hidden;isolation:isolate}.beauty-home .button:before,.beauty-detail .button:before{content:'';position:absolute;inset:-100%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff35 48%,transparent 58%);transform:translateX(-40%);transition:transform .7s;z-index:-1}.beauty-home .button:hover:before,.beauty-detail .button:hover:before{transform:translateX(40%)}}
@media(max-width:760px){.pearl-bottom{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.pearl-bottom>.pearl-motion{justify-self:end;grid-column:2;grid-row:1}.pearl-bottom>.light-play{grid-column:1/-1;justify-self:center}.light-play-panel{bottom:48px}.moment-atelier{padding-top:70px;padding-bottom:70px}.moment-heading{margin-bottom:30px}.moment-heading h2{font-size:48px}.moment-book{grid-template-columns:1fr;border-radius:3px 35px 3px 3px}.moment-photo{min-height:290px;height:290px}.moment-photo img{object-position:center 55%}.moment-photo span{font-size:27px;bottom:24px;left:24px}.moment-page{padding:28px 24px}.moment-choices{gap:8px;margin-bottom:28px}.moment-choices button{font-size:11px;padding:12px 14px}.moment-result{min-height:245px}.moment-result h3{font-size:43px}.moment-note{margin-top:15px}}
.pearl-paused .opening-photo,.pearl-paused .guidance-photo,.pearl-paused .kinetic-media{transform:none!important}.pearl-paused .opening-photo:after,.pearl-paused .guidance-photo:after,.pearl-paused .kinetic-media:after{opacity:0}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none!important}.opening-photo,.guidance-photo,.kinetic-media{transform:none!important}.moment-changing *{animation:none!important}}
@media(forced-colors:active){.pearl-stage:before,.opening-photo:after,.guidance-photo:after,.kinetic-media:after{display:none}.moment-book,.moment-page,.light-play-panel{background:Canvas;color:CanvasText}.moment-choices button[aria-pressed=true]{background:Highlight;color:HighlightText}.moment-note{color:CanvasText}}

/* Mobile is its own composition: immersive photos and motion without a mouse. */
@media(max-width:760px){
 .beauty-home .opening-worlds{display:flex;flex-direction:column;gap:65px}
 .beauty-home .opening-world{width:100%;padding:0}
 .beauty-home .opening-photo,.beauty-home .opening-laser .opening-photo{height:clamp(390px,116vw,630px);width:calc(100% + 48px);margin-left:-24px;border-radius:0;box-shadow:none}
 .beauty-home .opening-caption{padding:26px 0 0;display:flex;align-items:end;gap:18px;justify-content:space-between}
 .beauty-home .opening-caption h2{font-size:clamp(29px,7.7vw,44px);line-height:1.05}
 .beauty-home .opening-caption>span{font-size:11px;max-width:110px;flex-shrink:0;margin:0;white-space:normal}
 .beauty-home .opening-heading{padding-bottom:42px}
 .beauty-home .guidance-photo,.beauty-home .guidance-laser .guidance-photo{aspect-ratio:4/5;width:calc(100% + 48px);max-width:none;margin-left:-24px;margin-right:-24px;border-radius:0}
 .beauty-detail .detail-hero>.kinetic-media{width:calc(100% + 48px);height:clamp(410px,120vw,640px);margin-left:-24px;margin-right:-24px;border-radius:0;box-shadow:none}
 .beauty-detail .page-intro:before{background-image:url('/assets/beauty-pearl-mobile.webp');background-position:center;opacity:.7}
 .beauty-detail .page-intro:after{background:linear-gradient(90deg,#fff8f1c9,#fff8f165),linear-gradient(transparent 65%,#fff8f1)}
}
@media(max-width:760px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
 .pearl-journey{height:calc(max(600px,100svh) + 85svh)}
 .pearl-stage{position:sticky;top:0;height:100svh;min-height:600px}
 .pearl-heading{padding:60px 22px 150px;transform:translateY(calc(var(--pearl-progress)*-95px)) scale(calc(1 - var(--pearl-progress)*.09))}
 .pearl-running .pearl-wing-left{animation:mobile-wing-open-left 4.6s cubic-bezier(.16,.65,.15,1) both}
 .pearl-running .pearl-wing-right{animation:mobile-wing-open-right 4.6s cubic-bezier(.16,.65,.15,1) both}
 .pearl-running .pearl-signature,.pearl-running .pearl-heading{animation-duration:4.6s}
 .pearl-ready .pearl-stage:not(.pearl-running) .pearl-wing-left{animation:mobile-wing-breathe-left 8s ease-in-out infinite alternate}
 .pearl-ready .pearl-stage:not(.pearl-running) .pearl-wing-right{animation:mobile-wing-breathe-right 8s ease-in-out infinite alternate}
 .pearl-ready .pearl-light{animation-duration:7s}
 .beauty-home .opening-photo,.beauty-home .opening-laser .opening-photo,.beauty-home .guidance-photo,.beauty-home .guidance-laser .guidance-photo,.beauty-detail .detail-hero>.kinetic-media{clip-path:inset(0 calc((1 - var(--mobile-scene,.5))*7%) round calc((1 - var(--mobile-scene,.5))*95px) calc((1 - var(--mobile-scene,.5))*95px) 0 0)}
 .beauty-home .opening-photo img,.beauty-home .guidance-photo img,.beauty-detail .kinetic-media>img{transform:translateY(var(--pearl-photo-y,0px)) scale(calc(1.38 - var(--mobile-scene,.5)*.18));animation:mobile-photo-breathe 9s ease-in-out infinite alternate}
 .beauty-home .opening-photo:after,.beauty-home .guidance-photo:after,.beauty-detail .kinetic-media:after{opacity:.55;background:linear-gradient(115deg,transparent 20%,#fff8ee65 46%,transparent 65%);animation:mobile-photo-light 8s ease-in-out infinite alternate}
 .beauty-detail.pearl-ready .page-intro:before{animation:mobile-chapter-glass 10s ease-in-out infinite alternate}
}
@keyframes mobile-wing-open-left{0%,15%{transform:translateX(31%) scale(1.6) rotate(7deg)}100%{transform:translateX(0) scale(1) rotate(0deg)}}
@keyframes mobile-wing-open-right{0%,15%{transform:translateX(-31%) scale(1.6) rotate(-7deg)}100%{transform:translateX(0) scale(1) rotate(0deg)}}
@keyframes mobile-wing-breathe-left{from{transform:translateX(calc(var(--pearl-progress)*-20%)) scale(calc(1 + var(--pearl-progress)*.65)) rotate(0deg)}to{transform:translateX(calc(-3% + var(--pearl-progress)*-20%)) scale(calc(1.08 + var(--pearl-progress)*.65)) rotate(-3deg)}}
@keyframes mobile-wing-breathe-right{from{transform:translateX(calc(var(--pearl-progress)*20%)) scale(calc(1 + var(--pearl-progress)*.65)) rotate(0deg)}to{transform:translateX(calc(3% + var(--pearl-progress)*20%)) scale(calc(1.08 + var(--pearl-progress)*.65)) rotate(3deg)}}
@keyframes mobile-photo-breathe{from{scale:1}to{scale:1.045}}
@keyframes mobile-photo-light{from{transform:translateX(-45%);opacity:.2}to{transform:translateX(45%);opacity:.65}}
@keyframes mobile-chapter-glass{from{transform:scale(1.06) translateX(-2%);opacity:.6}to{transform:scale(1.2) translateX(3%);opacity:.75}}
.pearl-paused .opening-photo,.pearl-paused .guidance-photo,.pearl-paused .kinetic-media{clip-path:none!important}
@media(prefers-reduced-motion:reduce){.beauty-home .opening-photo,.beauty-home .guidance-photo,.beauty-detail .kinetic-media{clip-path:none!important}}
@media(max-width:360px){.beauty-home .opening-caption{display:block}.beauty-home .opening-caption>span{max-width:none;margin-top:12px}}