/* Subtle glass — an optional layer over style.css, active while <html> has the "glass" class.
   The classic layout, shapes and colours stay exactly as they are; controls and panels just gain a light glass
   finish (a little translucency and blur, a thin bright rim, a soft highlight that follows the pointer) plus small
   touch feedback. Switch off with ?ui=classic, back on with ?ui=glass (see GLASS-UI.md). */

/* ---------- Tokens ---------- */
html.glass{
  --g-blur:blur(18px) saturate(170%);
  --g-blur-thick:blur(28px) saturate(180%);
  --g-rim:inset 0 1px 0 rgba(255,255,255,.11),inset 0 0 0 1px rgba(255,255,255,.035);
  --g-rim-strong:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.05);
  /* Soft highlight: rests at the top left, follows the pointer on hover (glass.js sets --mx/--my). */
  --g-spec:radial-gradient(120% 150% at var(--mx,20%) var(--my,0%),rgba(255,255,255,.09),rgba(255,255,255,0) 60%);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%);
  --g-press:scale(.97);
  --g-drop:0 8px 24px rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.18);   /* soft shadow behind components */
  --g-drop-lg:0 14px 36px rgba(0,0,0,.4);
  background:var(--bg);
}
html.glass[data-theme=light]{
  --g-rim:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(0,0,0,.035);
  --g-rim-strong:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(0,0,0,.05);
  --g-spec:radial-gradient(120% 150% at var(--mx,20%) var(--my,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 60%);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%);
  --g-amb2:rgba(118,56,250,.13);
  --g-drop:0 8px 24px rgba(30,30,60,.1),0 2px 6px rgba(30,30,60,.06);
  --g-drop-lg:0 14px 36px rgba(30,30,60,.16);
}

/* ---------- Soft background light: brand colours glowing faintly from the corners ---------- */
html.glass body{background:transparent}
html.glass body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 32% at 12% 8%,rgba(254,84,0,.13),transparent 70%),
    radial-gradient(34% 30% at 88% 18%,var(--g-amb2,rgba(110,190,255,.12)),transparent 70%),
    radial-gradient(40% 34% at 70% 92%,rgba(255,1,105,.09),transparent 70%),
    radial-gradient(36% 30% at 18% 78%,rgba(0,149,246,.08),transparent 70%);
  filter:blur(20px)}
html.glass[data-theme=light] body::before{filter:blur(30px) saturate(1.2)}

/* ---------- Bars and sidebar: same place and shape, now see-through glass ---------- */
html.glass .rail{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-right:0;box-shadow:none}
html.glass .mobile-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
html.glass .bottom-nav{background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html.glass .rail :is(a,button),html.glass .bottom-nav>*{transition:background-color .2s,transform .2s var(--ease)}
html.glass .rail :is(a,button):hover{background-image:var(--g-spec);box-shadow:var(--g-rim)}
html.glass :is(.rail a,.rail button,.bottom-nav>*):active{transform:scale(.92)}

/* ---------- Buttons and pills: classic colours and corners, glass finish ---------- */
html.glass :is(.profile-actions>a,.profile-actions>button,.small-pill){
  background-image:var(--g-spec),var(--g-sheen);box-shadow:var(--g-rim),var(--g-drop);transition:background-color .2s,transform .2s var(--ease),box-shadow .2s}
html.glass :is(.profile-actions>a,.profile-actions>button,.small-pill):hover{box-shadow:var(--g-rim-strong),var(--g-drop-lg)}
html.glass :is(.profile-actions>a,.profile-actions>button,.small-pill,.dm-chips button,.dm-actions>*):active{transform:var(--g-press)}
html.glass .profile-actions>.blue-button{background-image:var(--g-spec),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px color-mix(in srgb,var(--accent) 24%,transparent)}
html.glass[data-theme=light] .profile-actions>.blue-button{background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}

/* Soft shadows behind the profile photo, highlights and client rows */
html.glass .portrait.story-ring{box-shadow:var(--g-drop-lg)}
html.glass .highlight-ring{box-shadow:var(--g-drop)}
html.glass .reel-row{box-shadow:var(--g-drop)}

/* Messages pill: an Apple-style glass button, no glow. Clear frosted body, a light top sheen, and a hairline rim that
   is brightest at the top-left and bottom-right edges where light catches it, over a soft neutral shadow. */
html.glass .dm-pill{background-color:rgba(255,255,255,.07);background-image:var(--g-spec),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 52%,rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-color:transparent;
  box-shadow:inset 0 1px .5px rgba(255,255,255,.22),inset 0 -1px .5px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);animation:none}
html.glass .dm-pill::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 38%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
html.glass[data-theme=light] .dm-pill{background-color:rgba(255,255,255,.5);background-image:var(--g-spec),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px .5px rgba(255,255,255,.4),0 8px 24px rgba(30,30,60,.12),0 1px 3px rgba(30,30,60,.08)}
html.glass[data-theme=light] .dm-pill::before{background:linear-gradient(135deg,rgba(255,255,255,1),rgba(0,0,0,.06) 40%,rgba(0,0,0,.08) 62%,rgba(255,255,255,.8))}
html.glass .dm-pill:hover{box-shadow:inset 0 1px .5px rgba(255,255,255,.26),inset 0 -1px .5px rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.34),0 2px 4px rgba(0,0,0,.2)}
html.glass[data-theme=light] .dm-pill:hover{box-shadow:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px .5px rgba(255,255,255,.4),0 12px 30px rgba(30,30,60,.16),0 2px 4px rgba(30,30,60,.08)}
@keyframes pill-pop{0%{scale:.9;opacity:.6}60%{scale:1.03;opacity:1}100%{scale:1}}
@media(prefers-reduced-motion:no-preference){
  html.glass body.ready .dm-pill{animation:bar-in .7s var(--ease) .5s backwards}
  html.glass body.ready .dm-pill.pop{animation:pill-pop .45s cubic-bezier(.32,1.12,.42,1)}
}
html.glass .dm-pill:active{transform:var(--g-press)}

/* Tags on video: a light clear-glass chip */
html.glass .tile-trial{background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12)}

/* ---------- Panels: frosted sheets ---------- */
html.glass dialog::backdrop{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.glass :is(#contact,#share-menu,#notifications){background-color:color-mix(in srgb,var(--modal) 84%,transparent);background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur-thick);backdrop-filter:var(--g-blur-thick);box-shadow:var(--g-rim-strong),0 24px 70px rgba(0,0,0,.4)}
html.glass #toast{-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 30px rgba(0,0,0,.3)}

/* ---------- Inside Messages ---------- */
/* Header stays put while the thread scrolls under it */
html.glass .dm-header{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--modal) 70%,transparent);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
/* Their bubbles: frosted glass; your bubbles: the same gradient with a glassy top light */
html.glass .dm-msg.them{background-color:color-mix(in srgb,var(--button) 82%,transparent);background-image:var(--g-sheen);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-rim)}
html.glass .dm-msg.me{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.08),0 4px 14px rgba(254,84,0,.18)}
html.glass[data-theme=light] .dm-msg.me{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px rgba(110,60,251,.18)}
html.glass .dm-typing{background-image:var(--g-sheen);box-shadow:var(--g-rim)}
/* Quick-reply chips and action buttons */
html.glass .dm-chips button{background-color:color-mix(in srgb,var(--accent) 8%,transparent);background-image:var(--g-sheen);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-rim);transition:background-color .2s,color .2s,transform .2s var(--ease)}
html.glass .dm-chips button:hover{background-color:var(--accent)}
html.glass .dm-actions>*{background-image:var(--g-spec),var(--g-sheen);box-shadow:var(--g-rim);transition:transform .2s var(--ease)}
/* Text box: frosted capsule that brightens its rim while you type */
html.glass .dm-composer{background-color:color-mix(in srgb,var(--button) 55%,transparent);background-image:var(--g-spec),var(--g-sheen);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-rim);transition:box-shadow .25s,border-color .25s}
html.glass .dm-composer:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--g-rim-strong),0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
html.glass .dm-composer button:active{transform:scale(.92)}

/* ---------- Accessibility and fallbacks ---------- */
@media(prefers-reduced-transparency:reduce){
  html.glass :is(.rail,.mobile-header,.bottom-nav,.dm-pill,.dm-header,.dm-composer,.dm-msg.them,.dm-chips button,#contact,#share-menu,#notifications){-webkit-backdrop-filter:none;backdrop-filter:none}
  html.glass :is(.rail,.mobile-header,.bottom-nav){background:var(--bg)}
  html.glass :is(.dm-pill,.dm-header,#contact,#share-menu,#notifications){background-color:var(--modal)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.glass :is(.rail,.mobile-header,.bottom-nav){background:var(--bg)}
  html.glass :is(.dm-pill,.dm-header,#contact,#share-menu,#notifications){background-color:var(--modal)}
}

/* ---------- Tabs and sidebar groups: a subtle glass rectangle (same 8px corners as the profile buttons) ---------- */
html.glass :is(#work>.tabs,.rail nav,.rail-bottom){
  border:1px solid var(--line);border-radius:8px;
  background-color:color-mix(in srgb,var(--button) 35%,transparent);background-image:var(--g-sheen);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  box-shadow:var(--g-rim),0 6px 20px rgba(0,0,0,.18)}
html.glass[data-theme=light] :is(#work>.tabs,.rail nav,.rail-bottom){background-color:rgba(255,255,255,.6);border-color:rgba(0,0,0,.06);box-shadow:var(--g-rim),0 6px 22px rgba(20,20,40,.08)}
html.glass .rail nav,html.glass .rail-bottom{padding:4px;gap:4px}
html.glass .rail :is(nav,.rail-bottom) :is(a,button){border-radius:6px}

/* The classic full-width divider stays; the tab box hangs from it with square top corners and rounded bottom ones */
html.glass #work{border-top:1px solid var(--line)}
html.glass #work>.tabs{width:max-content;max-width:calc(100% - 24px);height:auto;margin:-1px auto 18px;padding:0 4px 4px;gap:2px;border-top:0;border-radius:0 0 8px 8px}
html.glass #work>.tabs button{position:relative;z-index:1;height:44px;padding:0 20px!important;border-radius:0 0 6px 6px;transition:color .25s}
html.glass #work>.tabs button:hover,html.glass #work>.tabs .active{color:var(--fg)}
html.glass #work>.tabs button svg{transition:transform .35s cubic-bezier(.32,1.12,.42,1)}
html.glass #work>.tabs button:active svg{transform:scale(.92)}
/* The selected tab: a raised tile flush with the divider, topped by the classic dark line, sliding with a little overshoot */
html.glass #work>.tabs .tab-indicator{top:0;bottom:4px;height:auto;border-radius:0 0 6px 6px;transform-origin:50% 0;
  background:color-mix(in srgb,var(--fg) 11%,transparent);box-shadow:inset 0 2px 0 var(--fg),var(--g-rim-strong),0 4px 12px rgba(0,0,0,.22);
  transition:transform .5s cubic-bezier(.32,1.12,.42,1),width .5s cubic-bezier(.32,1.12,.42,1)}
html.glass[data-theme=light] #work>.tabs .tab-indicator{background:#fff;box-shadow:inset 0 2px 0 var(--fg),0 4px 12px rgba(20,20,40,.12),0 0 0 1px rgba(0,0,0,.04)}
/* Bounce on switch: the tile squashes and springs back, the new icon pops (glass.js adds .bounce / .pop) */
@keyframes tab-jelly{0%{scale:1 1}40%{scale:1.035 .96}100%{scale:1 1}}
@keyframes tab-pop{0%{scale:1}40%{scale:.9}75%{scale:1.05}100%{scale:1}}
html.glass #work>.tabs .tab-indicator.bounce{animation:tab-jelly .45s cubic-bezier(.3,.7,.4,1)}
html.glass #work>.tabs button.pop svg{animation:tab-pop .42s cubic-bezier(.3,.7,.4,1)}
/* Phone: the rectangle spans the width, the four icons share it equally */
@media(max-width:650px){
  html.glass #work>.tabs{width:auto;max-width:none;margin:-1px 12px 12px}
  html.glass #work>.tabs button{flex:1;width:auto!important;padding:0!important;justify-content:center}
}
@media(prefers-reduced-motion:reduce){html.glass #work>.tabs .tab-indicator{transition:none}html.glass #work>.tabs .tab-indicator.bounce,html.glass #work>.tabs button.pop svg{animation:none}}

/* ---------- Opening and closing sheets ---------- */
@keyframes g-sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes g-sheet-down{to{transform:translateY(100%)}}
@keyframes g-dm-out{to{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes g-pop-out{to{opacity:0;transform:scale(.96)}}
@keyframes g-panel-out{to{opacity:0;transform:translateX(-28px)}}
@keyframes g-fade-out{to{opacity:0}}
/* Desktop: Messages shrinks back towards its button, Share fades, Testimonials slides back out to the left */
html.glass #contact.closing{transform-origin:100% 100%;animation:g-dm-out .26s cubic-bezier(.4,0,.6,1) forwards}
html.glass :is(#share-menu,#client-sheet).closing{animation:g-pop-out .22s ease-in forwards}
html.glass #notifications.closing{animation:g-panel-out .26s ease-in forwards}
html.glass dialog.closing::backdrop{animation:g-fade-out .26s ease-in forwards}
/* Phone: sheets rise from the bottom, slide back down when closed, and can be dragged down (glass.js) */
@media(max-width:650px){
  html.glass :is(#contact,#notifications,#client-sheet)[open]:not(.closing){animation:g-sheet-up .42s cubic-bezier(.2,.9,.25,1)}
  html.glass :is(#contact,#share-menu,#notifications,#client-sheet).closing{animation:g-sheet-down .3s cubic-bezier(.4,0,.8,.4) forwards}
  /* Grabber bar: tells you the sheet can be swiped down */
  html.glass :is(#contact,#share-menu,#notifications,#client-sheet)::before{content:"";position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:color-mix(in srgb,var(--fg) 28%,transparent);z-index:5;pointer-events:none}
}

/* Reel viewer side actions: no backing shape, the icons and labels themselves read as glass: slightly translucent white,
   a soft inner glow and a lifted shadow so they stay crisp over any video. */
html.glass .feed-actions :is(button,a){color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 10px rgba(255,255,255,.18)}
html.glass .feed-actions :is(button,a)>svg,html.glass .feed-actions .fa-speed b{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(255,255,255,.22))}
html.glass .feed-actions :is(button,a):hover{color:#fff}