/* Leyvu Signature — design system polish / motion choreography.
   All decorative motion is optional and respects reduced-motion preferences. */
:root{
  --nova-ease: cubic-bezier(.22,1,.36,1);
  --nova-ease-soft: cubic-bezier(.2,.75,.2,1);
  --nova-fast: 180ms;
  --nova-mid: 380ms;
  --nova-slow: 680ms;
}
@keyframes nova-enter-page{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes nova-enter-scale{
  from{opacity:0;transform:translate3d(0,15px,0) scale(.982)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes nova-slide-message{
  from{opacity:0;transform:translate3d(0,8px,0) scale(.995)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes nova-soft-focus{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 5%,transparent)}
}
/* Stable page transitions — only on navigation, not on user typing or saved settings. */
.main-body[data-enter="true"] .welcome{animation:nova-enter-scale .78s var(--nova-ease) both}
.main-body[data-enter="true"] .page-inner>.section-head{animation:nova-enter-page .66s var(--nova-ease) both}
.main-body[data-enter="true"] .page-inner>.feature-spotlight,
.main-body[data-enter="true"] .page-inner>.model-hero,
.main-body[data-enter="true"] .page-inner>.projects-feature,
.main-body[data-enter="true"] .page-inner>.library-stats,
.main-body[data-enter="true"] .page-inner>.settings-layout{
  animation:nova-enter-scale .72s var(--nova-ease) .08s both;
}
.main-body[data-enter="true"] .page-inner>.list-head,
.main-body[data-enter="true"] .page-inner>.filter-chips,
.main-body[data-enter="true"] .page-inner>.model-stat-row,
.main-body[data-enter="true"] .page-inner>.model-section-head{
  animation:nova-enter-page .64s var(--nova-ease) .16s both;
}
/* A staggered arrival brings structure without making the interface sluggish. */
.main-body[data-enter="true"] :is(.prompt-card,.project-card,.upcoming-card,.saved-card,.model-stat,.theme-card,.library-item){
  animation:nova-enter-page .62s var(--nova-ease) both;
  animation-delay:calc(min(var(--motion-index, 0), 8) * 46ms + 160ms);
}
.prompt-card:nth-child(2),.project-card:nth-child(2),.upcoming-card:nth-child(2),.saved-card:nth-child(2),.model-stat:nth-child(2),.theme-card:nth-child(2),.library-item:nth-child(2){--motion-index:1}
.prompt-card:nth-child(3),.project-card:nth-child(3),.upcoming-card:nth-child(3),.saved-card:nth-child(3),.model-stat:nth-child(3),.theme-card:nth-child(3),.library-item:nth-child(3){--motion-index:2}
.prompt-card:nth-child(4),.project-card:nth-child(4),.upcoming-card:nth-child(4),.saved-card:nth-child(4),.theme-card:nth-child(4),.library-item:nth-child(4){--motion-index:3}
.prompt-card:nth-child(5),.project-card:nth-child(5),.upcoming-card:nth-child(5),.saved-card:nth-child(5),.theme-card:nth-child(5),.library-item:nth-child(5){--motion-index:4}
.prompt-card:nth-child(6),.project-card:nth-child(6),.upcoming-card:nth-child(6),.saved-card:nth-child(6),.theme-card:nth-child(6),.library-item:nth-child(6){--motion-index:5}
.prompt-card:nth-child(7),.project-card:nth-child(7),.saved-card:nth-child(7),.theme-card:nth-child(7),.library-item:nth-child(7){--motion-index:6}
.prompt-card:nth-child(8),.project-card:nth-child(8),.saved-card:nth-child(8),.theme-card:nth-child(8),.library-item:nth-child(8){--motion-index:7}
/* Brand mark: use the approved flat six-part symbol, with no orbit, 3D shine or logo gradient. */
.brand-mark{
  width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--surface2) 92%,var(--bg));
  border:1px solid color-mix(in srgb,var(--edge-strong) 70%,transparent);
  box-shadow:none;filter:none;overflow:hidden;transition:background-color .28s,border-color .28s,transform .45s var(--nova-ease);
}
.brand-mark .nova-logo-img{width:23px;height:23px;filter:none}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.045)}
:root[data-theme="matte"] .brand-mark{background:#141416;border:1px solid #25252b}
:root[data-theme="matte"] .brand-mark .nova-logo-img{filter:grayscale(1) brightness(1.5)}
.welcome-icon,.welcome-icon .inner-star,.welcome-icon .inner-star .nova-logo-img{animation:none!important}
.welcome-icon .orbit,.spotlight-art .art-ring,.model-hero-art .core-rings,.model-hero-art .core-orbit,.model-hero-art .core-halo{display:none!important}
.welcome-icon{width:84px;height:84px;transform:none}
.welcome-icon .inner-star{
  width:76px;height:76px;border-radius:24px;background:var(--surface2);
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--edge));
  box-shadow:0 15px 38px color-mix(in srgb,var(--bg) 50%,transparent);
}
.welcome-icon .inner-star .nova-logo-img{width:48px;height:48px;filter:none;animation:none}
.art-star,.model-hero-art>span{
  background:var(--surface2)!important;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--edge))!important;
  transform:rotate(-6deg);box-shadow:0 26px 70px color-mix(in srgb,var(--accent) 10%,transparent)!important;
  animation:none!important;border-radius:30px;transition:transform .65s var(--nova-ease),box-shadow .65s var(--nova-ease);
}
.feature-spotlight:hover .art-star,.model-hero:hover .model-hero-art>span{transform:rotate(0) translate3d(0,-6px,0)}
.art-star .nova-logo-img,.model-hero-art .nova-logo-img{width:75%;height:75%;filter:none}
.model-hero-art{pointer-events:none}
/* Navigation, floating composer and popovers */
.sidebar-link,.history-row,.topbar-model,.topbar-share,.new-chat-btn,.account-link,.icon-btn,.chip,.choice{
  transition-duration:var(--nova-fast);transition-timing-function:var(--nova-ease-soft);
}
.sidebar-link:hover{transform:translateX(3px)}
.sidebar-link.selected{box-shadow:inset 2px 0 0 var(--accent)}
.topbar{border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s}
.composer{transition:border-color .25s,box-shadow .32s var(--nova-ease),background-color .32s}
.composer:focus-within{box-shadow:0 8px 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.send{transition:transform .22s var(--nova-ease),background-color .22s,box-shadow .3s}
.send:not(:disabled):hover{transform:translateY(-2px) scale(1.04)}
.send:not(:disabled):active{transform:scale(.94)}
.composer-round,.composer-tools{transition:background-color .22s,color .22s,transform .22s}
.composer-round:hover{transform:scale(1.08)}
.surface-popover,.context-menu{animation:nova-enter-scale .24s var(--nova-ease) both;transform-origin:top left}
.overlay{animation:fade-in .24s ease both}
.overlay .dialog,.overlay .search-dialog{animation:nova-enter-scale .34s var(--nova-ease) both}
.message:last-child{animation:nova-slide-message .4s var(--nova-ease) both}
.theme-card,.prompt-card,.project-card,.upcoming-card,.saved-card{transition:transform .34s var(--nova-ease),border-color .26s,box-shadow .34s var(--nova-ease)}
@media(hover:hover){
  .theme-card:hover{transform:translateY(-4px)}
  .prompt-card:hover,.project-card:hover,.upcoming-card:hover{transform:translateY(-6px)}
  .save-prompt:hover,.icon-btn:hover{transform:translateY(-1px)}
}
/* Cinematic About — layered light, typographic handoffs, and a floating interface reveal.
   No orbit or ornamental shapes are attached to the brand logo. */
.about-logo-mask{
  -webkit-mask-image:url('../assets/nova-mark-ui.png')!important;
  mask-image:url('../assets/nova-mark-ui.png')!important;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.cinema-stage{--device-opacity:0;--device-lift:60px;--device-scale:.91;--logo-travel:0}
.cinema-stage::after{background:linear-gradient(180deg,color-mix(in srgb,var(--about-bg-deep) 55%,transparent),transparent 27%,transparent 66%,color-mix(in srgb,var(--about-bg-deep) 65%,transparent))}
.cinema-noise{opacity:.055;mix-blend-mode:soft-light}
.cinema-grid{opacity:calc(.018 + var(--cinema-p) * .025);transform:perspective(850px) rotateX(67deg) translateY(calc(var(--cinema-p) * -190px));}
.cinema-ring,.cinema-stars{display:none!important}
.cinema-atmosphere{position:absolute;z-index:1;left:-18%;top:-25%;width:135%;height:155%;pointer-events:none;
  background:radial-gradient(ellipse 30% 42% at calc(28% + var(--cinema-p)*40%) calc(42% + var(--cinema-p)*12%),color-mix(in srgb,var(--about-accent) 15%,transparent),transparent 80%),
    radial-gradient(ellipse 38% 35% at calc(76% - var(--cinema-p)*36%) calc(70% - var(--cinema-p)*25%),color-mix(in srgb,var(--about-accent) 9%,transparent),transparent 74%);
  transform:translate3d(0,calc(var(--cinema-p) * -3.5%),0);opacity:.9;
}
.cinema-logo.about-logo-mask{
  left:48%;top:47%;width:clamp(220px,34vmin,450px);
  transform:translate3d(calc(-50% + var(--logo-travel)*-25vw),calc(-50% + var(--logo-travel)*-5vh),0)
    rotate(calc(var(--logo-travel)*-30deg)) scale(calc(.92 + var(--logo-travel)*.22));
  opacity:calc(.29 - var(--logo-travel)*.11);filter:none;
}
.cinema-chapters{z-index:5}
.cinema-chapter{transition:none!important;text-shadow:none;max-width:980px}
.cinema-chapter h1{letter-spacing:-.084em;line-height:.99;font-size:clamp(3.4rem,7.3vw,8.6rem);font-weight:780}
.cinema-chapter p{max-width:550px;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.7;letter-spacing:-.005em}
.cinema-kicker{font-size:.66rem;letter-spacing:.23em}
.cinema-device{
  position:absolute;z-index:2;right:clamp(16px,7.5vw,130px);top:50%;
  width:min(40vw,515px);height:clamp(250px,43vh,445px);border-radius:22px;
  background:color-mix(in srgb,var(--about-bg-card) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--about-accent) 20%,var(--about-border));
  box-shadow:0 36px 110px color-mix(in srgb,var(--about-bg-deep) 70%,transparent),0 8px 35px color-mix(in srgb,var(--about-accent) 9%,transparent);
  opacity:var(--device-opacity);
  transform:translate3d(0,calc(-50% + var(--device-lift)),0) perspective(1200px) rotateY(-11deg) rotateX(3deg) scale(var(--device-scale));
  pointer-events:none;overflow:hidden;
}
.cinema-device-chrome{height:45px;border-bottom:1px solid var(--about-border);display:flex;align-items:center;gap:6px;padding:0 16px;background:color-mix(in srgb,var(--about-bg-soft) 88%,transparent)}
.cinema-device-chrome span{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--about-muted) 35%,transparent)}
.cinema-device-chrome b{font:700 11px/1 system-ui,sans-serif;letter-spacing:.04em;color:var(--about-muted);margin:0 auto 0 34%}
.cinema-device-body{display:flex;height:calc(100% - 45px)}
.cinema-device-sidebar{width:28%;background:color-mix(in srgb,var(--about-bg-deep) 58%,transparent);border-right:1px solid var(--about-border);padding:28px 12px;display:flex;flex-direction:column;gap:14px}
.cinema-device-sidebar i{height:7px;border-radius:10px;width:82%;background:color-mix(in srgb,var(--about-muted) 16%,transparent)}
.cinema-device-sidebar i:first-child{height:22px;background:color-mix(in srgb,var(--about-accent) 20%,transparent);width:90%;border-radius:7px}
.cinema-device-sidebar i:nth-child(3){width:57%}.cinema-device-sidebar i:nth-child(4){width:74%}
.cinema-device-main{display:flex;align-items:center;flex-direction:column;flex:1;padding:20px 20px 19px}
.cinema-device-symbol{width:72px;height:72px;margin:auto 0 14px}
.cinema-device-headline{height:10px;border-radius:20px;width:63%;background:color-mix(in srgb,var(--about-ink) 42%,transparent)}
.cinema-device-caption{height:5px;border-radius:20px;width:45%;background:color-mix(in srgb,var(--about-muted) 25%,transparent);margin:14px 0 auto}
.cinema-device-composer{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--about-border);border-radius:16px;width:100%;height:53px;padding:12px;background:color-mix(in srgb,var(--about-bg-card-alt) 92%,transparent)}
.cinema-device-composer span{width:48%;height:6px;border-radius:12px;background:color-mix(in srgb,var(--about-muted) 22%,transparent)}
.cinema-device-composer b{width:23px;height:23px;border-radius:8px;background:var(--about-accent)}
.cinema-rail{position:absolute;z-index:9;right:clamp(16px,2.6vw,42px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;align-items:center}
.cinema-rail-dot{width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--about-muted);padding:0;border-radius:99px;transition:background .22s,transform .3s var(--nova-ease)}
.cinema-rail-dot span{width:4px;height:4px;border-radius:20px;background:var(--about-muted);opacity:.5;transition:height .38s var(--nova-ease),width .38s var(--nova-ease),opacity .25s,background .25s}
.cinema-rail-dot[aria-current="step"] span{width:4px;height:25px;opacity:1;background:var(--about-accent-strong)}
.cinema-rail-dot:hover{background:var(--about-accent-muted);transform:scale(1.1)}
.cinema-rail-dot:focus-visible{outline:2px solid var(--about-accent);outline-offset:1px}
.cinema-rail-dot:focus-visible span{opacity:1}
.cinema-skip{transition:transform .32s var(--nova-ease),background-color .22s,border-color .22s}
.about-feature-card{transition:transform .5s var(--nova-ease),box-shadow .45s var(--nova-ease),border-color .35s}
.reveal-on-scroll.will-reveal{transition:opacity 1s var(--nova-ease),transform 1s var(--nova-ease),filter .7s ease;transform:translateY(34px);filter:blur(3px)}
.about-feature-grid .about-feature-card:nth-child(2){transition-delay:95ms}
.about-feature-grid .about-feature-card:nth-child(3){transition-delay:180ms}
.about-model-logo,.about-end-logo{animation:none!important;filter:none}
/* No high-contrast ornaments around the mark. Flat brand color always. */
:root[data-theme="matte"] .cinema-logo{opacity:.22}
@media(max-width:980px){.cinema-device{right:-8vw;width:55vw;opacity:calc(var(--device-opacity)*.55)}.cinema-rail{right:8px}.cinema-chapter{width:min(92%,810px)}}
@media(max-width:670px){
  .cinema-device{width:80vw;right:-32vw;top:48%;opacity:calc(var(--device-opacity)*.32)}
  .cinema-logo.about-logo-mask{width:68vmin;left:50%;top:43%;opacity:calc(.25 - var(--logo-travel)*.08)}
  .cinema-chapter h1{font-size:clamp(2.8rem,11.2vw,5.4rem)}
  .cinema-chapter p{max-width:340px;font-size:.85rem}
  .cinema-rail{right:2px;gap:4px}.cinema-rail-dot{width:28px;height:32px}
  .cinema-skip{right:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .main-body[data-enter="true"] :is(.welcome,.section-head,.feature-spotlight,.model-hero,.projects-feature,.library-stats,.settings-layout,.prompt-card,.project-card,.upcoming-card,.saved-card,.model-stat,.theme-card,.library-item){animation:none!important}
  .cinema-rail,.cinema-device{display:none!important}
}
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
:root[data-motion="reduced"] .cinema-rail,:root[data-motion="reduced"] .cinema-device{display:none!important}
:root[data-motion="reduced"] .main-body[data-enter="true"] :is(.welcome,.section-head,.feature-spotlight,.model-hero,.projects-feature,.library-stats,.settings-layout,.prompt-card,.project-card,.upcoming-card,.saved-card,.model-stat,.theme-card,.library-item){animation:none!important}
/* The interface preview and copy occupy separate visual planes on larger screens. */
@media(min-width:981px){
  .cinema-device{right:3%;width:min(40%,500px)}
  .cinema-chapter:nth-child(3),.cinema-chapter:nth-child(4){
    left:7%;width:min(53%,600px);align-items:flex-start;text-align:left;
  }
  .cinema-chapter:nth-child(3) h1,.cinema-chapter:nth-child(4) h1{font-size:clamp(3.2rem,5.25vw,6.7rem)}
  .cinema-chapter:nth-child(3) p,.cinema-chapter:nth-child(4) p{max-width:490px}
}
@media(max-width:980px){
  .cinema-device{right:-12%;width:60%;opacity:calc(var(--device-opacity) * .35)}
  .cinema-chapter{left:initial;align-items:center;text-align:center}
}