/* myy.bio themes. Colours come in as --t-* variables from the chosen palette (themes.mjs);
   each theme below only sets its own shapes, fonts and motion. */
.th-stage{min-height:100vh;background:#111}
.th{--th-pad:20px;position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;width:100%;min-height:100%;margin:0;background:radial-gradient(ellipse 80% 55% at 15% 0%,var(--t-glow1),transparent 68%),radial-gradient(ellipse 60% 45% at 90% 100%,var(--t-glow2),transparent 65%),var(--t-bg);color:var(--t-text);font-family:var(--th-body);text-align:center}
.th-stage .th{min-height:100vh}
.th *,.th *::before,.th *::after{box-sizing:border-box}
.th a{color:inherit;text-decoration:none}
.th-page{position:relative;z-index:2;width:100%;max-width:520px;margin:0 auto;padding:44px var(--th-pad) 34px;display:flex;flex-direction:column;align-items:center}
.th-photo-faded{container-type:inline-size;--hero-w:min(100cqw,560px);--hero-h:calc(var(--hero-w)*1.25)}
.th-photo-faded .th-page{padding-top:calc(var(--hero-h)*.78)}

/* Entrance: every block rises in, one after another. */
.th [style*="--i"]{animation:th-in .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*90ms)}
@keyframes th-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Redraws while she edits don't replay the entrance. */
.th-still [style*="--i"],.th-still .th-hero{animation:none}

/* Faded photo at the top, melting into the background. */
/* Faded photo: sized from the page width (face and shoulders at any screen size), fully faded into the page colour before any text starts. */
.th-hero{position:absolute;top:0;left:0;right:0;margin:0 auto;width:var(--hero-w,100%);height:var(--hero-h,460px);z-index:1;animation:th-fade 1.2s ease both;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.6) 70%,transparent 94%);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.6) 70%,transparent 94%)}
.th-hero img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.th-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 48%,color-mix(in srgb,var(--t-bg) 72%,transparent) 74%,var(--t-bg) 92%)}
@keyframes th-fade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* Circle photo with the theme's ring. */
.th-avatar{position:relative;width:118px;height:118px;border-radius:50%;margin-bottom:18px;flex:none}
.th-avatar img,.th-avatar-empty{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;object-fit:cover;object-position:center top;z-index:1}
.th-avatar-empty{display:grid;place-items:center;background:var(--t-card);font:600 40px var(--th-display)}
.th-ring{position:absolute;inset:0;border-radius:50%}
.th-ring-spin .th-ring{background:conic-gradient(var(--t-r1),var(--t-r2),var(--t-r3),var(--t-r4),var(--t-r1));box-shadow:0 0 26px color-mix(in srgb,var(--t-r2) 45%,transparent);animation:th-spin 6s linear infinite}
.th-ring-gradient .th-ring{background:linear-gradient(135deg,var(--t-r1),var(--t-r2));box-shadow:0 0 24px color-mix(in srgb,var(--t-r1) 50%,transparent);animation:th-breathe 4s ease-in-out infinite}
.th-ring-solid .th-ring{border:3px solid var(--t-r1);background:var(--t-bg)}
@keyframes th-spin{to{transform:rotate(360deg)}}
@keyframes th-breathe{50%{box-shadow:0 0 36px color-mix(in srgb,var(--t-r1) 70%,transparent)}}

.th-identity{display:flex;flex-direction:column;align-items:center}
.th-name{margin:0;font:var(--th-display-weight) 40px/1.08 var(--th-display);letter-spacing:.02em}
.th-name em{font-style:italic;color:var(--t-accent)}
.th-handle{margin:6px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--t-muted)}
.th-socials{display:flex;gap:9px;margin-top:12px}
.th-socials a{width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--t-card);border:1px solid var(--t-border);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.th-socials a img,.th-socials a .lm-brand-icon{width:100%;height:100%;object-fit:cover}
.th-socials a:hover{transform:translateY(-3px) rotate(-6deg)}
.th-bio{margin:14px 0 0;max-width:320px;font-size:14px;line-height:1.7;color:var(--t-muted)}

/* Calls and messages (always shown). */
.th-calls{width:100%;margin-top:20px}
.th-ic{display:grid;place-items:center;color:var(--t-accent)}
.th-ic svg{width:20px;height:20px}
.th-calls-tiles{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:9px}
.th-calls-tiles a,.th-calls-orbs a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:14px}
.th-calls-tiles a{padding:12px 0;border-radius:22px;background:var(--t-card);border:1px solid var(--t-border);box-shadow:0 4px 16px color-mix(in srgb,var(--t-accent) 12%,transparent);transition:transform .28s,box-shadow .28s}
.th-calls small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted)}
.th-calls b{font-weight:600}
.th-calls-orbs{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.th-calls-orbs .th-ic{width:56px;height:56px;border-radius:50%;background:var(--t-card);border:1px solid var(--t-border);box-shadow:0 6px 18px color-mix(in srgb,var(--t-accent) 18%,transparent);margin-bottom:4px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.th-calls-list{padding:6px 16px;border-radius:22px;background:var(--t-card);border:1px solid var(--t-border);text-align:left}
.th-calls-list h3{margin:10px 0 4px;font:var(--th-display-weight) 20px var(--th-display)}
.th-calls-list a{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--t-border)}
.th-calls-list .th-ic{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--t-accent) 12%,transparent)}
.th-calls-list .th-ic svg{width:17px;height:17px}
.th-call-name{flex:1}
.th-calls-list b{color:var(--t-accent)}
.th-calls a:hover{transform:translateY(-3px)}
.th-calls-orbs a:hover .th-ic{transform:scale(1.08)}
.th-calls a:active{transform:scale(.97)}

/* Links */
.th-links{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:18px}
.th-link{position:relative;display:flex;align-items:center;gap:13px;min-height:58px;padding:0 18px;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}
.th-link-ic{width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
.th-link-ic img,.th-link-ic .lm-brand-icon{width:100%;height:100%;object-fit:cover}
.th-link-title{flex:1;text-align:left}
.th-arrow{opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;color:var(--t-accent)}
.th-link:hover{transform:translateY(-3px) scale(1.015)}
.th-link:hover .th-link-ic{transform:rotate(8deg) scale(1.12)}
.th-link:hover .th-arrow{opacity:1;transform:none}
.th-link:active{transform:scale(.98)}
.th-link::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.th-link:hover::after{transition:transform .8s ease;transform:translateX(120%)}
.th-links-pill .th-link{border-radius:50px;background:var(--t-card);border:1px solid var(--t-border);box-shadow:0 4px 18px color-mix(in srgb,var(--t-accent) 11%,transparent)}
.th-links-solid .th-link{border-radius:50px;background:var(--t-accent);color:var(--t-ink);justify-content:center;box-shadow:0 6px 18px color-mix(in srgb,var(--t-accent) 30%,transparent)}
.th-links-solid .th-link-title{flex:0 1 auto;text-align:center}
.th-links-solid .th-arrow{color:inherit;position:absolute;right:18px}
.th-links-tile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.th-links-tile .th-link{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-height:96px;padding:16px;border-radius:20px;background:var(--t-card);border:1px solid var(--t-border)}
.th-links-tile .th-link.is-first{background:var(--t-accent);color:var(--t-ink)}
.th-links-tile .th-arrow{position:absolute;top:14px;right:14px}
.th-photo-link{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:16/10;grid-column:1/-1;transition:transform .3s}
.th-photo-link.is-big{aspect-ratio:4/5}
.th-photo-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s}
.th-photo-link span{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-weight:600;text-align:left}
.th-photo-link:hover img{transform:scale(1.05)}

/* Video block, gallery, extra buttons and footer follow the palette. */
.th .lm-videos{width:100%;text-align:left}
.th .lm-video{background:var(--t-card);border-color:var(--t-border)}
.th .lm-video-buy{background:var(--t-accent)!important;color:var(--t-ink)!important}
.th .lm-videos-head a{color:inherit}
.th .lm-videos-empty p{border-color:var(--t-border)}
.th-gallery{width:100%;margin-top:22px}
.th-services{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.th-footer{margin-top:40px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted);display:grid;gap:8px}
.th-footer a:hover{color:var(--t-accent)}

/* Background effects */
.th-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.th-fx i{position:absolute;display:block}
.th-fx-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--t-accent) 35%,transparent);animation:th-float 9s ease-in-out infinite;animation-delay:calc(var(--d)*-1.3s)}
@keyframes th-float{50%{transform:translate(8px,-22px);opacity:.4}}
.th-fx-sparkles i,.th-fx-stars i{width:14px;height:14px;background:var(--t-accent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.55;animation:th-twinkle 3.2s ease-in-out infinite;animation-delay:calc(var(--d)*-.6s)}
.th-fx-stars i{width:4px;height:4px;border-radius:50%;clip-path:none;background:#fff;box-shadow:0 0 8px #fff}
@keyframes th-twinkle{50%{opacity:.1;transform:scale(.5) rotate(30deg)}}
.th-fx-glow i{left:-20%;right:-20%;bottom:-140px;height:340px;border-radius:50%;background:radial-gradient(ellipse at center,var(--t-glow1),transparent 70%);animation:th-pulse 6s ease-in-out infinite}
@keyframes th-pulse{50%{opacity:.55}}
.th-fx-aura i{width:340px;height:340px;border-radius:50%;filter:blur(30px);opacity:.9;animation:th-drift 18s ease-in-out infinite}
.th-fx-aura i:nth-child(1){left:-110px;top:-80px;background:var(--t-glow1)}
.th-fx-aura i:nth-child(2){right:-120px;top:160px;background:var(--t-glow2);animation-delay:-5s}
.th-fx-aura i:nth-child(3){left:-90px;bottom:120px;background:var(--t-glow3,var(--t-glow1));animation-delay:-9s}
.th-fx-aura i:nth-child(4){right:-100px;bottom:-110px;background:var(--t-glow4,var(--t-glow2));animation-delay:-13s}
@keyframes th-drift{33%{transform:translate(30px,40px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.95)}}

/* ---- Theme details ---- */
.th-sage .th-link-title{text-transform:uppercase;letter-spacing:.09em;font-size:13px}
.th-sage .th-name{font-size:44px;letter-spacing:.06em}

.th-softglam .th-name{font-size:42px}
.th-softglam .th-handle{text-transform:none;letter-spacing:0;font:italic 500 17px var(--th-display);color:var(--t-accent)}
.th-softglam .th-links-solid .th-link{letter-spacing:.03em}

.th-velvet .th-name{font-size:48px;letter-spacing:.04em;text-shadow:0 0 18px color-mix(in srgb,var(--t-accent) 40%,transparent)}
.th-velvet .th-handle{color:var(--t-accent)}
.th-velvet .th-link-title{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.th-velvet .th-calls-tiles a{box-shadow:0 0 14px color-mix(in srgb,var(--t-accent) 22%,transparent)}
.th-velvet.th-photo-faded .th-page{padding-top:calc(var(--hero-h)*.8)}

.th-lavender .th-name{font-size:56px;font-weight:400;letter-spacing:0;line-height:1.1}
.th-lavender .th-handle{text-transform:none;letter-spacing:.04em;font-weight:700;color:var(--t-accent)}
.th-lavender .th-links-pill .th-link.is-first,.th-lavender .th-links-solid .th-link{background:linear-gradient(90deg,var(--t-accent),var(--t-accent2));color:var(--t-ink);border:0}
.th-lavender .th-links-pill .th-link.is-first .th-arrow{color:inherit}

.th-mocha{text-align:left}
.th-mocha .th-page{align-items:stretch;padding-top:36px}
.th-mocha.th-photo-faded .th-page{padding-top:calc(var(--hero-h)*.7)}
.th-head-card{display:flex;align-items:center;gap:16px;padding:18px;border-radius:26px;background:var(--t-card);box-shadow:0 10px 30px color-mix(in srgb,var(--t-accent) 14%,transparent)}
.th-head-card .th-avatar{width:92px;height:92px;margin:0}
.th-head-card .th-identity{align-items:flex-start}
.th-mocha .th-name{font-size:30px}
.th-mocha .th-handle{text-transform:none;letter-spacing:0}
.th-mocha .th-bio{max-width:none}
.th-mocha .th-calls-list .th-ic{border-radius:12px;background:var(--t-accent);color:var(--t-ink)}
.th-mocha .th-calls-orbs{justify-content:flex-start}
.th-mocha .th-footer{text-align:center}

.th-aura .th-page{padding:110px 16px 34px}
.th-aura.th-photo-faded .th-page{padding-top:calc(var(--hero-h)*.7)}
.th-glass{position:relative;width:100%;padding:72px 18px 22px;border-radius:30px;background:var(--t-card);border:1px solid var(--t-border);box-shadow:0 20px 50px color-mix(in srgb,var(--t-accent) 18%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:center}
.th-photo-faded .th-glass{padding-top:26px}
.th-aura .th-avatar{position:absolute;top:-58px;left:50%;margin-left:-58px;width:116px;height:116px}
.th-aura .th-name{font-size:32px;letter-spacing:-.01em}
.th-aura .th-handle{text-transform:none;letter-spacing:0}
.th-aura .th-links-solid .th-link.is-first{background:linear-gradient(90deg,var(--t-accent),var(--t-accent2))}
.th-aura .th-links-solid .th-link:not(.is-first){background:rgba(255,255,255,.8);color:var(--t-text)}

/* Dark themes: the light shimmer is softer. */
.th-dark .th-link::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%)}

/* The editor's small previews and people who ask for less motion get no movement. */
.th-compact *,.th-compact *::before,.th-compact *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.th *,.th *::before,.th *::after{animation:none!important;transition:none!important}}
.th-head{display:flex;flex-direction:column;align-items:center;width:100%}
.th-head.th-head-card{flex-direction:row;align-items:center}
.th-services .btn{background:var(--t-card);color:var(--t-text);border:1px solid var(--t-border);border-radius:999px}
/* Long names shrink to fit (27 Oct 2026) */
.th .th-name{overflow-wrap:anywhere}
.th .th-name.th-name-long{font-size:30px}
.th .th-name.th-name-xlong{font-size:23px}

/* Faded photo fixes (28 Oct 2026).
   Mocha and Aura put a card over the photo: the photo now melts away completely before the card starts,
   so it never looks like a square picture cut off by the card. */
.th-mocha.th-photo-faded .th-page,.th-aura.th-photo-faded .th-page{padding-top:calc(var(--hero-h)*.76)}
.th-mocha .th-hero,.th-aura .th-hero{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.15) 70%,transparent 78%);mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.15) 70%,transparent 78%)}
.th-mocha .th-hero::after,.th-aura .th-hero::after{background:linear-gradient(to bottom,transparent 38%,color-mix(in srgb,var(--t-bg) 60%,transparent) 62%,var(--t-bg) 78%)}
/* On wide screens the photo is narrower than the page: soften its left and right edges too, so there's no box. */
@container (min-width:600px){
 .th-hero{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.6) 70%,transparent 94%),linear-gradient(to right,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(to bottom,#000 0%,#000 50%,rgba(0,0,0,.6) 70%,transparent 94%),linear-gradient(to right,transparent,#000 32%,#000 68%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
 .th-mocha .th-hero,.th-aura .th-hero{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.15) 70%,transparent 78%),linear-gradient(to right,transparent,#000 32%,#000 68%,transparent);mask-image:linear-gradient(to bottom,#000 0%,#000 40%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.15) 70%,transparent 78%),linear-gradient(to right,transparent,#000 32%,#000 68%,transparent)}
}

/* Next free call times under the calls (30 Oct 2026). */
.myy-slots{margin:-4px 0 14px;font-size:13px;color:var(--t-muted,#888);text-align:center;width:100%}.myy-slots span{opacity:.85}.myy-slots b{color:var(--t-text,inherit);font-weight:600;white-space:nowrap}