/* REFRM v161 — fluid motion, loading states and the "alive" layer. Graphite + black only.
   Loads after neutral-v161.css. Presentation-only: no ids/behaviour removed. Motion preference (System / On / Off in Settings)
   is honoured through html[data-refrm-motion] and prefers-reduced-motion at the bottom of this file. */

:root{
  --rf-out:cubic-bezier(.16,1,.3,1);
  --rf-spring:cubic-bezier(.34,1.56,.64,1);
  --rf-inout:cubic-bezier(.65,0,.35,1);
  --rf-g1:#f2f2f2; --rf-g2:#bdbdbd; --rf-g3:#7a7a7a; --rf-g4:#2a2a2a; --rf-g5:#161616;
}

/* ───────────── 0. shared keyframes ───────────── */
@keyframes rfFadeUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes rfFadeIn{from{opacity:0}to{opacity:1}}
@keyframes rfSlideL{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes rfSlideR{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes rfDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes rfPageIn{from{opacity:0;transform:translateY(10px) scale(.992);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes rfShimmer{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes rfPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes rfSpin{to{transform:rotate(360deg)}}
@keyframes rfScan{0%{top:-12%}100%{top:104%}}
@keyframes rfDrift1{0%,100%{transform:translate3d(-8%,-4%,0) scale(1)}50%{transform:translate3d(10%,6%,0) scale(1.18)}}
@keyframes rfDrift2{0%,100%{transform:translate3d(8%,6%,0) scale(1.1)}50%{transform:translate3d(-10%,-6%,0) scale(.92)}}
@keyframes rfShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes rfRipple{from{transform:scale(0);opacity:.35}to{transform:scale(1);opacity:0}}
@keyframes rfTick{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes rfBreath{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.035)}}
@keyframes rfBar{0%{transform:translateX(-100%)}60%{transform:translateX(-18%)}100%{transform:translateX(100%)}}

/* ───────────── 1. graphite stage + ambient life ───────────── */
html,body{background:#050505}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 50% -8%,rgba(255,255,255,.07),transparent 70%),#050505}
#landing::before,#landing::after{background:radial-gradient(closest-side,rgba(255,255,255,.075),transparent 72%)!important;filter:blur(30px)}
#landing::before{animation:rfDrift1 16s ease-in-out infinite!important}
#landing::after{animation:rfDrift2 20s ease-in-out infinite!important}
::selection{background:rgba(255,255,255,.88);color:#0a0a0a}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;transition:outline-offset .15s var(--rf-out)}
*{scrollbar-color:#3a3a3a transparent}

/* ───────────── 2. top route bar (navigation / fetch feedback) ───────────── */
#rf-routebar{position:fixed;left:0;right:0;top:0;height:2px;z-index:2000;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .25s ease}
#rf-routebar.is-on{opacity:1}
#rf-routebar i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff 45%,#bdbdbd 60%,transparent);box-shadow:0 0 14px rgba(255,255,255,.55);transform:translateX(-100%);animation:rfBar 1.15s var(--rf-inout) infinite}

/* ───────────── 3. cinematic opener (replaces the upload-page flash) ───────────── */
#rf-opener{position:fixed;inset:0;z-index:1700;display:grid;place-items:center;padding:24px;overflow:hidden;background:#050505;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s var(--rf-out),visibility 0s linear .38s}
#rf-opener.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s}
#rf-opener::before,#rf-opener::after{content:"";position:absolute;width:62vmax;height:62vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.085),transparent 70%);filter:blur(24px)}
#rf-opener::before{left:-18vmax;top:-26vmax;animation:rfDrift1 14s ease-in-out infinite}
#rf-opener::after{right:-22vmax;bottom:-30vmax;animation:rfDrift2 18s ease-in-out infinite}
.rf-op-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.rf-op-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:26px;width:min(380px,100%);
  transform:translateY(8px) scale(.97);transition:transform .6s var(--rf-out)}
#rf-opener.is-on .rf-op-stage{transform:none}
#rf-opener.is-leaving .rf-op-stage{transform:scale(1.06);filter:blur(4px);opacity:0;transition:transform .45s var(--rf-inout),filter .45s ease,opacity .35s ease}
.rf-op-brand{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.3em;color:#9a9a9a}
.rf-op-brand b{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(145deg,#f4f4f4,#7d7d7d);color:#0b0b0b;font-size:13px;letter-spacing:0}
.rf-op-frame{position:relative;width:150px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,#1b1b1b,#0b0b0b);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.06);animation:rfBreath 2.4s ease-in-out infinite}
.rf-op-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:rfShimmer 1.7s ease-in-out infinite}
.rf-op-frame::after{content:"";position:absolute;left:0;right:0;height:26%;top:-12%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.13),transparent);animation:rfScan 2.1s linear infinite}
.rf-op-caps{position:absolute;left:14%;right:14%;bottom:14%;display:grid;gap:6px;justify-items:center}
.rf-op-caps i{display:block;height:7px;border-radius:99px;background:rgba(255,255,255,.2);animation:rfPulse 1.6s ease-in-out infinite}
.rf-op-caps i:nth-child(1){width:86%}.rf-op-caps i:nth-child(2){width:58%;animation-delay:.2s}
.rf-op-dot{position:absolute;top:12px;right:12px;width:7px;height:7px;border-radius:50%;background:#fff;animation:rfPulse 1.2s ease-in-out infinite}
.rf-op-text{text-align:center;min-height:54px}
.rf-op-title{margin:0;font-size:19px;font-weight:700;letter-spacing:-.025em;color:#f6f6f6}
.rf-op-sub{margin:6px 0 0;font-size:12.5px;color:#8f8f8f;max-width:34ch;overflow-wrap:anywhere}
.rf-op-bar{width:100%;height:3px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rf-op-bar i{display:block;height:100%;width:100%;border-radius:inherit;transform:scaleX(var(--p,.06));transform-origin:left;
  background:linear-gradient(90deg,#6d6d6d,#fff);box-shadow:0 0 12px rgba(255,255,255,.6);transition:transform .5s var(--rf-out)}
.rf-op-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;width:100%}
.rf-op-steps li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:#5f5f5f;transition:color .35s ease,transform .45s var(--rf-out)}
.rf-op-steps li::before{content:"";flex:0 0 16px;height:16px;border-radius:50%;border:1.5px solid #3a3a3a;transition:all .35s var(--rf-out)}
.rf-op-steps li[data-s="active"]{color:#f2f2f2;transform:translateX(3px)}
.rf-op-steps li[data-s="active"]::before{border-color:#fff #fff transparent transparent;animation:rfSpin .8s linear infinite}
.rf-op-steps li[data-s="done"]{color:#9c9c9c}
.rf-op-steps li[data-s="done"]::before{border-color:#fff;background:#fff radial-gradient(circle at 50% 50%,#0a0a0a 0 0,transparent 0);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.4 2.4 4.8-5' fill='none' stroke='%230a0a0a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:100% 100%;animation:none}
.rf-op-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:38px}
.rf-op-actions button{min-height:38px;padding:0 20px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#d8d8d8;font:600 13px var(--rf-font,Inter,system-ui,sans-serif);cursor:pointer;transition:transform .2s var(--rf-spring),background .2s ease,border-color .2s ease}
.rf-op-actions button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.rf-op-actions button:active{transform:scale(.95)}
.rf-op-actions button.is-primary{background:#f4f4f4;color:#0a0a0a;border-color:#f4f4f4}
.rf-op-actions button.is-primary:hover{background:#fff}
#rf-opener[data-mode="loading"] .rf-op-actions{opacity:.0;pointer-events:none}
#rf-opener[data-mode="loading"][data-slow="1"] .rf-op-actions{opacity:1;pointer-events:auto;transition:opacity .4s ease}
#rf-opener[data-mode="error"] .rf-op-stage,#rf-opener[data-mode="ask"] .rf-op-stage{gap:22px}
#rf-opener[data-mode="error"] .rf-op-frame{animation:rfShake .5s both;border-color:rgba(255,255,255,.3)}
#rf-opener[data-mode="error"] .rf-op-frame::before,#rf-opener[data-mode="error"] .rf-op-frame::after,#rf-opener[data-mode="ask"] .rf-op-frame::after{display:none}
#rf-opener[data-mode="error"] .rf-op-bar,#rf-opener[data-mode="error"] .rf-op-steps,#rf-opener[data-mode="ask"] .rf-op-steps{display:none}
#rf-opener[data-mode="error"] .rf-op-dot{background:#ff7b86;animation:none}
@media (max-height:640px){.rf-op-frame{width:96px;border-radius:14px}.rf-op-stage{gap:16px}}

/* ───────────── 4. skeletons + shimmer ───────────── */
.rf-skel-card,.rf-skel-thumb,.rf-skel-line{position:relative;overflow:hidden}
.rf-skel-card{display:flex;flex-direction:column;gap:11px;padding:0 0 16px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:#0e0e0e;min-height:230px}
.rf-skel-thumb{display:block;aspect-ratio:16/10;border-radius:19px 19px 0 0;background:#171717}
.rf-skel-line{display:block;height:11px;margin:0 16px;border-radius:99px;background:#1b1b1b}
.rf-skel-line.w70{width:70%}.rf-skel-line.w40{width:40%}
.rf-skel-card::after,.rf-skel-thumb::after,.rf-skel-line::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.07) 50%,transparent 75%);animation:rfShimmer 1.5s ease-in-out infinite}
.rf-skel-thumb::after,.rf-skel-line::after{animation-delay:.1s}
.rf-skel-card:nth-child(2){animation-delay:.08s}.rf-skel-card:nth-child(3){animation-delay:.16s}
.rf-skel-card:nth-child(2)::after{animation-delay:.12s}.rf-skel-card:nth-child(3)::after{animation-delay:.24s}
.project-loading{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;padding:40px 10px;color:#8f8f8f;font-size:12.5px}
.project-loading span{width:7px;height:7px;border-radius:50%;background:#e8e8e8;animation:rfPulse 1s ease-in-out infinite}
.project-loading span:nth-child(2){animation-delay:.15s}.project-loading span:nth-child(3){animation-delay:.3s}
.project-loading p{margin:0 0 0 8px}
.rf-skel-media{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:linear-gradient(160deg,#151515,#080808);opacity:1;transition:opacity .45s ease,visibility 0s linear .45s;overflow:hidden;border-radius:inherit}
.rf-skel-media.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.rf-skel-media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.08) 50%,transparent 72%);animation:rfShimmer 1.4s ease-in-out infinite}
.rf-skel-media b{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:#fff;animation:rfSpin .8s linear infinite;z-index:1}
.clip-watch-player-wrap{position:relative}

/* ───────────── 5. page transitions + staggered entrances ───────────── */
#projects-page:not([hidden]){animation:rfPageIn .5s var(--rf-out) both}
#project-detail:not([hidden]),#clip-watch-page:not([hidden]){animation:rfFadeUp .5s var(--rf-out) both}
.projects-topbar,.projects-heading-row,.projects-toolbar{animation:rfFadeUp .6s var(--rf-out) both}
.projects-heading-row{animation-delay:.05s}.projects-toolbar{animation-delay:.1s}
.projects-grid>*{animation:rfFadeUp .55s var(--rf-out) both}
.projects-grid>*:nth-child(1){animation-delay:.04s}.projects-grid>*:nth-child(2){animation-delay:.09s}.projects-grid>*:nth-child(3){animation-delay:.14s}
.projects-grid>*:nth-child(4){animation-delay:.19s}.projects-grid>*:nth-child(5){animation-delay:.24s}.projects-grid>*:nth-child(6){animation-delay:.29s}
.projects-grid>*:nth-child(n+7){animation-delay:.34s}
.studio-recent-grid>*{animation:rfFadeUp .6s var(--rf-out) both}
.studio-recent-grid>*:nth-child(2){animation-delay:.06s}.studio-recent-grid>*:nth-child(3){animation-delay:.12s}
.studio-recent-grid>*:nth-child(4){animation-delay:.18s}.studio-recent-grid>*:nth-child(5){animation-delay:.24s}.studio-recent-grid>*:nth-child(n+6){animation-delay:.3s}
.land-story>*{animation:rfFadeUp .8s var(--rf-out) both}
.land-story>*:nth-child(2){animation-delay:.08s}.land-story>*:nth-child(3){animation-delay:.16s}.land-story>*:nth-child(4){animation-delay:.24s}.land-story>*:nth-child(5){animation-delay:.32s}
.land-workspace{animation:rfFadeUp .9s .12s var(--rf-out) both}
.land-drop{animation:rfBreath 3.6s ease-in-out infinite}
.land-drop.over{animation:none;transform:scale(1.012)}
.land-drop{transition:transform .35s var(--rf-out),border-color .25s ease,background .25s ease}

/* editor arrival */
#app.rf-editor-enter #top{animation:rfDrop .55s var(--rf-out) both}
#app.rf-editor-enter #rail,#app.rf-editor-enter #left{animation:rfSlideL .6s .06s var(--rf-out) both}
#app.rf-editor-enter #right{animation:rfSlideR .6s .1s var(--rf-out) both}
#app.rf-editor-enter #player{animation:rfFadeUp .7s .12s var(--rf-out) both}
#app.rf-editor-enter #tl{animation:rfFadeUp .7s .2s var(--rf-out) both}

/* ───────────── 6. cards: lift + cursor spotlight ───────────── */
.project-card,.studio-recent-card,.dash-card,.rf-card{position:relative;transition:transform .45s var(--rf-out),border-color .3s ease,box-shadow .45s var(--rf-out),background .3s ease;will-change:transform}
.project-card::after,.studio-recent-card::after,.dash-card::after,.rf-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.085),transparent 62%);z-index:2}
@media (hover:hover){
  .project-card:hover,.studio-recent-card:hover,.dash-card:hover,.rf-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.26);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
  .project-card:hover::after,.studio-recent-card:hover::after,.dash-card:hover::after,.rf-card:hover::after{opacity:1}
  .project-thumb>img,.studio-recent-thumb img{transition:transform .8s var(--rf-out),filter .5s ease}
  .project-card:hover .project-thumb>img,.studio-recent-card:hover .studio-recent-thumb img{transform:scale(1.07)}
  .project-card:hover .project-thumb-play{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}
.project-card:active,.studio-recent-card:active{transform:translateY(-1px) scale(.992);transition-duration:.12s}
.project-thumb-play{transition:transform .45s var(--rf-spring),opacity .3s ease}
.project-card.is-selected{border-color:#fff}

/* ───────────── 7. buttons: press, sheen, ripple ───────────── */
:where(button,.rf-btn,.chipbtn,.button,.ib,.iconbtn,.ghost,.primary){transition:transform .28s var(--rf-spring),background .22s ease,border-color .22s ease,box-shadow .3s var(--rf-out),opacity .2s ease,color .2s ease}
:where(button,.rf-btn,.chipbtn,.button,.ib,.iconbtn,.ghost,.primary):active:not(:disabled){transform:scale(.94)}
@media (hover:hover){:where(.ghost,.chipbtn,.ib,.iconbtn):hover:not(:disabled){transform:translateY(-1px);border-color:rgba(255,255,255,.34)}}
button.primary,.primary,#landpick,.rf-btn.primary{position:relative;overflow:hidden;isolation:isolate}
button.primary::before,.primary::before,#landpick::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-130%);transition:transform .75s var(--rf-out)}
@media (hover:hover){button.primary:hover:not(:disabled)::before,.primary:hover:not(:disabled)::before,#landpick:hover:not(:disabled)::before{transform:translateX(130%)}
  button.primary:hover:not(:disabled),.primary:hover:not(:disabled){box-shadow:0 10px 30px rgba(255,255,255,.18);transform:translateY(-1px)}}
.rf-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.3;transform:scale(0);animation:rfRipple .65s var(--rf-out) forwards}
button[aria-busy="true"],button.is-loading{pointer-events:none;opacity:.85}

/* ───────────── 8. dialogs + toasts ───────────── */
dialog[open]{animation:rfFadeUp .4s var(--rf-out) both!important}
dialog[open]::backdrop{animation:rfFadeIn .35s ease both}
dialog::backdrop,.dlg::backdrop{background:rgba(0,0,0,.72)!important;backdrop-filter:blur(10px) saturate(70%)!important;-webkit-backdrop-filter:blur(10px) saturate(70%)!important}
#toasts{z-index:1800!important}
.toast{animation:rfToastIn .55s var(--rf-spring) both!important;backdrop-filter:blur(14px);background:rgba(20,20,20,.92)!important;border-color:rgba(255,255,255,.14)!important}
.toast.out{animation:rfToastOut .26s var(--rf-inout) forwards!important}
@keyframes rfToastIn{from{opacity:0;transform:translateX(26px) scale(.92)}to{opacity:1;transform:none}}
@keyframes rfToastOut{to{opacity:0;transform:translateX(30px) scale(.94)}}

/* ───────────── 9. native cross-fade between project views (View Transitions API) ───────────── */
::view-transition-old(root){animation:.22s var(--rf-inout) both rfVtOut}
::view-transition-new(root){animation:.42s var(--rf-out) both rfVtIn}
@keyframes rfVtOut{to{opacity:0;transform:scale(.99)}}
@keyframes rfVtIn{from{opacity:0;transform:translateY(8px) scale(1.004)}}

/* ───────────── 10. reduced motion: calm, instant, still readable ───────────── */
html[data-refrm-motion="off"] #rf-opener .rf-op-frame,html[data-refrm-motion="off"] #rf-opener::before,html[data-refrm-motion="off"] #rf-opener::after{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html:not([data-refrm-motion="on"]) *,html:not([data-refrm-motion="on"]) *::before,html:not([data-refrm-motion="on"]) *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html:not([data-refrm-motion="on"]) .rf-op-steps li[data-s="active"]::before{animation:rfSpin 1.6s linear infinite!important;animation-duration:1.6s!important;animation-iteration-count:infinite!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}