/* PaskaTok v0.3.2 — VISUAL POLISH + MOTION PASS */

/* ---- calmer cinematic feed ---- */
#view-feed{isolation:isolate;}
.feed-video{background-color:#2c1d12!important;}
.feed-video.scene-0{
  background:
    radial-gradient(circle at 50% 46%,rgba(170,180,93,.14),transparent 31%),
    linear-gradient(180deg,rgba(35,22,13,.22),rgba(35,22,13,.48)),
    repeating-radial-gradient(circle at 50% 50%,#4b321f 0 16px,#3b281a 17px 34px)!important;
}
.feed-video.scene-1{
  background:
    radial-gradient(circle at 50% 40%,rgba(120,164,160,.13),transparent 34%),
    linear-gradient(155deg,#2e382f 0%,#403021 52%,#291b11 100%)!important;
}
.feed-video.scene-2{
  background:
    radial-gradient(circle at 50% 45%,rgba(222,149,96,.12),transparent 35%),
    linear-gradient(180deg,rgba(38,24,14,.18),rgba(38,24,14,.46)),
    repeating-radial-gradient(circle at 50% 48%,#49321f 0 15px,#372519 16px 34px)!important;
}
.feed-video.scene-3{
  background:
    radial-gradient(circle at 52% 42%,rgba(220,105,80,.10),transparent 34%),
    linear-gradient(145deg,#392719,#49301e 50%,#2c1c12 100%)!important;
}
.demo-scene{filter:saturate(.88) contrast(.96);}
.feed-video .swirl{opacity:.22!important;filter:blur(.4px);}
.feed-video .swirl.s2{opacity:.16!important;}
.feed-video::after{background:linear-gradient(180deg,rgba(21,12,7,.12),transparent 31%,rgba(20,11,6,.46))!important;}
.demo-stamp{opacity:.74;}
.demo-stamp img{width:82px;height:82px;}

/* ---- typography hierarchy ---- */
#screen-name{font-size:10px!important;letter-spacing:.14em!important;font-weight:500;}
.feed-top{font-family:var(--font-body)!important;font-weight:700!important;font-size:11.5px!important;letter-spacing:-.01em!important;}
.feed-bottom .uname{font-family:var(--font-display)!important;font-size:15.5px!important;}
.feed-bottom .cap{font-family:var(--font-body)!important;font-size:12.5px!important;line-height:1.52!important;letter-spacing:-.006em;}
.sound-row,.tags{font-family:var(--font-mono)!important;font-size:9.4px!important;}
.sec-label{font-size:9.5px!important;font-weight:600;}
.dm-name{font-weight:600;font-size:12.6px!important;}
.dm-msg{font-size:9.6px!important;line-height:1.45;}

/* ---- feed side controls become one quiet instrument rail ---- */
.feed-side{right:8px!important;gap:12px!important;}
.feed-side .icon-circle{width:40px!important;height:40px!important;font-size:17px!important;background:rgba(61,39,24,.48)!important;border-color:rgba(255,247,234,.18)!important;box-shadow:0 7px 18px rgba(0,0,0,.13)!important;}
.icon-btn .lbl{font-size:7.8px!important;}
.feed-count{font-size:7.6px!important;}
.feed-more{width:28px!important;height:28px!important;background:rgba(61,39,24,.44)!important;}

/* ---- live signal, one deliberate ambient motion ---- */
.live-pill{overflow:hidden;position:absolute;}
.live-pill::after{content:"";position:absolute;inset:-30% auto -30% -38%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-18deg);animation:liveSweep 5.2s ease-in-out infinite;pointer-events:none;}
@keyframes liveSweep{0%,62%{left:-42%;opacity:0}72%{opacity:.8}88%{left:120%;opacity:0}100%{left:120%;opacity:0}}

/* ---- premium navigation motion ---- */
.nav-btn .ni.ni-image{will-change:transform;}
.nav-btn.active .ni.ni-image{animation:navSettle .34s cubic-bezier(.2,.8,.2,1);}
.nav-btn.active .ni.ni-image img{animation:iconBreath 4.8s ease-in-out infinite;}
.nav-btn.create.active .ni.ni-image{animation:createSettle .38s cubic-bezier(.2,.9,.2,1);}
@keyframes navSettle{0%{transform:translateY(3px) scale(.92)}65%{transform:translateY(-2px) scale(1.03)}100%{transform:translateY(0) scale(1)}}
@keyframes createSettle{0%{transform:translateY(-5px) scale(.90)}70%{transform:translateY(-12px) scale(1.03)}100%{transform:translateY(-10px) scale(1)}}
@keyframes iconBreath{0%,100%{filter:drop-shadow(0 5px 8px rgba(0,0,0,.22))}50%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.22)) drop-shadow(0 0 8px rgba(244,198,91,.18))}}

/* ---- one clean route transition: porcelain flush ---- */
.screen::after{content:"";position:absolute;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 58%,rgba(255,247,234,.26),rgba(244,198,91,.08) 30%,transparent 66%);mix-blend-mode:screen;}
.screen.route-flush::after{animation:routeFlush .36s ease-out;}
@keyframes routeFlush{0%{opacity:0;transform:scale(.92)}38%{opacity:.36}100%{opacity:0;transform:scale(1.05)}}
.view.active{animation:viewArrive .26s ease-out;}
@keyframes viewArrive{from{opacity:.88;transform:translateY(4px)}to{opacity:1;transform:none}}
.feed-video.post-arrive .demo-scene,.feed-video.post-arrive .feed-player{animation:postArrive .24s ease-out;}
@keyframes postArrive{from{opacity:.72;transform:scale(1.015)}to{opacity:1;transform:scale(1)}}

/* ---- camera: compact unified filter dock ---- */
#view-camera .cam-filters{
  top:128px!important;right:10px!important;margin:0!important;
  gap:7px!important;padding:7px 6px!important;
  border:1px solid rgba(244,198,91,.12);
  border-radius:22px;
  background:rgba(43,29,18,.46);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
#view-camera .filter-chip{width:58px!important;gap:3px!important;padding:5px 2px!important;border-radius:15px;transition:background .18s ease,transform .18s ease;}
#view-camera .filter-chip .sw{width:40px!important;height:40px!important;border-radius:12px!important;}
#view-camera .filter-chip span{width:58px!important;font-size:6.8px!important;line-height:1.16!important;color:#dcc9ad!important;}
#view-camera .filter-chip.active{background:rgba(244,198,91,.10);}
#view-camera .filter-chip.active span{color:#f4c65b!important;}
#view-camera .filter-chip:active{transform:scale(.96);}
#view-camera .flip-btn,#view-camera .timer-chip{width:42px!important;height:42px!important;border-radius:15px!important;}
#view-camera .cam-bottom{left:14px!important;right:14px!important;bottom:18px!important;gap:11px!important;}
#view-camera .duration-row{width:min(100%,330px);justify-content:space-between;gap:8px!important;padding:8px 10px;border-radius:16px;background:rgba(43,29,18,.46);backdrop-filter:blur(12px);}
#view-camera .duration-row span{font-size:8.5px!important;white-space:nowrap;}
#view-camera .go-label{font-size:8.6px!important;letter-spacing:.09em;}
#view-camera .record-btn{width:66px!important;height:66px!important;}
#view-camera .record-btn .inner{width:50px!important;height:50px!important;}

/* ---- inbox gets one useful hero signal, not more decoration ---- */
.inbox-signal{margin:0 10px 10px;width:calc(100% - 20px);border:1px solid rgba(244,198,91,.13);border-radius:16px;background:linear-gradient(90deg,rgba(244,198,91,.07),rgba(255,247,234,.02));color:var(--porcelain);padding:10px 11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.02);}
.inbox-signal-dot{width:8px;height:8px;border-radius:50%;background:var(--hazard);box-shadow:0 0 0 5px rgba(244,198,91,.09);}
.inbox-signal b{display:block;font:600 9.5px var(--font-body);}
.inbox-signal small{display:block;margin-top:2px;font:7.7px var(--font-mono);color:var(--porcelain-dim);}
.inbox-signal-arrow{font-size:20px;color:var(--hazard);}
.dm-item:first-child{border-color:rgba(244,198,91,.15)!important;background:rgba(244,198,91,.035)!important;}
.dm-item:first-child .dm-avatar{box-shadow:0 0 0 2px rgba(244,198,91,.15),0 7px 18px rgba(24,13,7,.15);}

/* ---- profile grid: stronger rhythm and graceful filler tiles ---- */
#view-profile .p-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:start;}
#view-profile .p-cell{min-height:0;aspect-ratio:9/13;overflow:hidden;}
#view-profile .p-cell::after{z-index:4;}
#view-profile .profile-filler{position:relative;aspect-ratio:9/13;border:1px dashed rgba(244,198,91,.12);border-radius:14px;background:linear-gradient(160deg,rgba(244,198,91,.035),rgba(255,247,234,.012));display:grid;place-items:center;overflow:hidden;}
#view-profile .profile-filler::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(170,180,93,.10),transparent 42%);}
#view-profile .profile-filler span{position:relative;font:600 7.5px var(--font-mono);letter-spacing:.06em;color:rgba(220,201,173,.55);text-align:center;padding:10px;}

/* ---- studio cards breathe a little more ---- */
#view-studio .s-card{transition:transform .18s ease,border-color .18s ease,background .18s ease;}
#view-studio .s-card:active{transform:scale(.985);background:rgba(255,247,234,.055)!important;}
#view-studio .metric{font-variant-numeric:tabular-nums;}

@media(max-width:520px){
  .feed-bottom{left:20px!important;right:82px!important;}
  .feed-side{bottom:calc(110px + env(safe-area-inset-bottom))!important;}
  #view-camera .cam-filters{top:122px!important;right:8px!important;}
  #view-camera .cam-bottom{bottom:16px!important;}
  #view-camera .duration-row{width:calc(100% - 20px);max-width:340px;}
  .bottom-nav{min-height:78px!important;}
  .nav-btn .nav-label{font-size:7px!important;}
}

@media(max-width:390px){
  #view-camera .cam-filters{top:118px!important;transform:scale(.94);transform-origin:top right;}
  #view-camera .duration-row span{font-size:7.8px!important;}
  .feed-side .icon-circle{width:38px!important;height:38px!important;}
}



/* ---- v0.3.3 mobile elegance pass ---- */
@media(max-width:520px){
  .status-strip{
    grid-template-columns:34px 1fr auto!important;
    gap:10px!important;
    min-height:54px!important;
    padding:max(12px,env(safe-area-inset-top)) 14px 8px!important;
    backdrop-filter:blur(16px);
    box-shadow:0 10px 28px rgba(21,12,7,.14);
  }
  .status-brand-icon{width:27px!important;height:27px!important;}
  #screen-name{font-size:10.2px!important;letter-spacing:.16em!important;color:#efe0c5!important;}
  .status-utils{display:flex;align-items:center;gap:8px!important;}
  .header-search-btn{
    width:34px!important;height:34px!important;padding:2px!important;
    border:1px solid rgba(244,198,91,.16)!important;
    border-radius:13px!important;background:rgba(255,247,234,.05)!important;
    display:grid!important;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.03),0 6px 14px rgba(0,0,0,.08);
  }
  .header-search-btn img{width:27px!important;height:27px!important;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(0,0,0,.18));}
  .status-utils #clock{font-size:8.8px!important;color:#dbc7ab!important;}

  .feed-top{
    width:max-content!important;
    margin:10px auto 0!important;
    padding:5px!important;
    gap:0!important;
    border:1px solid rgba(244,198,91,.10)!important;
    border-radius:28px!important;
    background:rgba(49,31,18,.46)!important;
    backdrop-filter:blur(14px);
    box-shadow:0 12px 26px rgba(22,12,7,.12);
  }
  .feed-top span{
    min-width:134px;
    padding:10px 16px!important;
    border-radius:22px!important;
    text-align:center;
    border-bottom:none!important;
  }
  .feed-top span.active{
    background:linear-gradient(180deg,rgba(244,198,91,.16),rgba(255,247,234,.05))!important;
    box-shadow:inset 0 0 0 1px rgba(244,198,91,.20);
    transform:none!important;
  }
  .live-pill{
    top:84px!important;left:14px!important;
    padding:4px 10px 4px 4px!important;
    border-radius:18px!important;
    font-size:8.2px!important;
    box-shadow:0 10px 24px rgba(133,46,28,.20);
  }
  .feed-more{
    top:86px!important;right:12px!important;
    width:32px!important;height:32px!important;
  }
  .feed-side{right:8px!important;bottom:calc(124px + env(safe-area-inset-bottom))!important;gap:10px!important;}
  .feed-dots{right:2px!important;}
  .feed-bottom{
    left:14px!important;right:74px!important;bottom:calc(18px + env(safe-area-inset-bottom))!important;
    padding:14px 14px 13px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,247,234,.08)!important;
    background:linear-gradient(180deg,rgba(45,29,18,.72),rgba(36,23,14,.84))!important;
    backdrop-filter:blur(16px);
    box-shadow:0 16px 32px rgba(15,9,5,.18), inset 0 1px rgba(255,255,255,.03);
  }
  .feed-bottom .uname{font-size:15.4px!important;margin-bottom:3px;}
  .feed-bottom .cap{max-width:none!important;font-size:12.6px!important;line-height:1.48!important;margin:0 0 9px!important;}
  .sound-row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .tags{margin-top:5px;line-height:1.45;}

  .bottom-nav{
    min-height:80px!important;
    padding:8px 10px max(10px,env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(95,61,36,.96),rgba(66,42,25,.98))!important;
    box-shadow:0 -12px 28px rgba(21,12,7,.16);
  }
  .nav-btn{gap:4px!important;}
  .nav-btn .ni.ni-image{
    width:44px;height:42px;border-radius:15px;
    display:grid;place-items:center;
    background:rgba(255,247,234,.03);
    border:1px solid rgba(255,247,234,.04);
  }
  .nav-btn .ni.ni-image img{max-width:36px;max-height:36px;object-fit:contain;}
  .nav-btn .nav-label{font-size:7.1px!important;max-width:66px;}
  .nav-btn.create .ni.ni-image{width:58px!important;height:58px!important;transform:translateY(-10px);}
  .nav-btn.create .ni.ni-image img{max-width:55px!important;max-height:55px!important;}

  #view-camera .camera-sourcebar{left:12px!important;right:12px!important;top:10px!important;gap:8px!important;}
  #view-camera .camera-sourcebar button{
    padding:9px 11px!important;
    border-radius:16px!important;
    background:rgba(43,29,18,.66)!important;
    border:1px solid rgba(255,247,234,.12)!important;
    backdrop-filter:blur(12px);
    box-shadow:0 8px 18px rgba(19,11,6,.12);
  }
  #view-camera .camera-status{
    left:16px!important;top:62px!important;
    padding:8px 12px!important;border-radius:14px!important;
    background:rgba(43,29,18,.62)!important;
    border:1px solid rgba(244,198,91,.12)!important;
    letter-spacing:.11em!important;
  }
  #view-camera .cam-filters{top:108px!important;right:8px!important;gap:6px!important;}
  #view-camera .cam-bottom{bottom:16px!important;gap:10px!important;}
  #view-camera .duration-row{
    width:calc(100% - 54px)!important;max-width:300px!important;
    justify-content:space-between!important;gap:6px!important;
    padding:8px 12px!important;border-radius:18px!important;
  }
  #view-camera .duration-row span{font-size:8.1px!important;}
  #view-camera .go-label{font-size:8.4px!important;letter-spacing:.11em!important;}

  #view-search .search-bar{margin:14px 14px 6px!important;padding:11px 13px!important;border-radius:17px!important;}
  .chip-row{padding:0 14px!important;gap:8px!important;}
  .sound-list{padding:4px 14px!important;}
  .challenge-row{padding:0 14px 18px!important;}
  .challenge-card{width:118px!important;height:88px!important;border-radius:16px!important;}

  .story-rail{padding:12px 14px 10px!important;gap:10px!important;}
  .dm-list{padding:0 8px 16px!important;gap:8px!important;}
  .dm-item{
    padding:12px!important;border-radius:16px!important;
    background:linear-gradient(180deg,rgba(255,247,234,.032),rgba(255,247,234,.018));
    border:1px solid rgba(255,247,234,.045);
  }

  .profile-top{padding:20px 16px 12px!important;}
  .profile-logo{width:100px!important;height:100px!important;}
  .stat-row{gap:14px!important;margin-top:14px!important;}
  .studio-link{
    width:min(100%,310px);justify-content:center;
    padding:11px 14px!important;border-radius:24px!important;
  }
  .ptabs{padding:0 6px!important;overflow-x:auto!important;scrollbar-width:none;}
  .ptabs::-webkit-scrollbar{display:none;}
  .ptabs span{min-width:88px;line-height:1.2;padding:12px 8px!important;}
  #view-profile .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;}

  #view-studio .header-row{padding:16px 14px 12px!important;flex-wrap:wrap;gap:10px!important;}
  #view-studio .header-row h1{font-size:16px!important;}
  #view-studio .gauge-wrap{padding:4px 14px 2px!important;gap:12px!important;align-items:flex-start!important;flex-direction:column;}
  .studio-hero-icon{width:88px!important;height:88px!important;}
  .studio-realnote{
    margin:12px 14px!important;padding:12px 12px 12px 14px!important;
    border-radius:16px!important;border-left:3px solid var(--moss)!important;
    background:rgba(170,180,93,.07)!important;
    font:9.3px var(--font-mono)!important;line-height:1.5!important;color:var(--porcelain-dim)!important;
  }
  #view-studio .studio-grid{padding:0 14px 18px!important;gap:12px!important;}
  #view-studio .s-card{padding:14px!important;border-radius:18px!important;}
}

@media(max-width:390px){
  .feed-top span{min-width:122px;padding:9px 12px!important;}
  .feed-bottom{right:72px!important;}
  #view-camera .cam-filters{top:104px!important;transform:scale(.94);transform-origin:top right;}
  #view-camera .duration-row{width:calc(100% - 36px)!important;}
  #view-profile .p-grid{grid-template-columns:1fr!important;}
}

@media(prefers-reduced-motion:reduce){
  .live-pill::after,.nav-btn.active .ni.ni-image,.nav-btn.active .ni.ni-image img,.nav-btn.create.active .ni.ni-image,.screen.route-flush::after,.view.active,.feed-video.post-arrive .demo-scene,.feed-video.post-arrive .feed-player{animation:none!important;}
}