/* Everyday motion: quiet, consistent and always optional. The big moments live in
   realm-*.css/js (Worlds ↔ Grove) and marks-welcome.*; everything here stays under 420ms. */
:root{
  --dur-1:120ms;--dur-2:180ms;--dur-3:260ms;--dur-4:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-soft:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Page to page ----------
   Chrome (header, dock, footer) crossfades in place; the page body drifts in like a turned leaf.
   Going back drifts the other way. A collection card grows into its world's hero. */
@media(prefers-reduced-motion:no-preference){
  html:not(.low-effects) main#page-main{view-transition-name:hh-main}
  html:not(.low-effects) .collection-world .collection-scenery,
  html:not(.low-effects) .mint-page .mint-artwork{view-transition-name:hh-world-art}
  html:not(.low-effects) :is(.collection-page,.mint-page) h1{view-transition-name:hh-world-title}
  ::view-transition-group(hh-main){animation-duration:var(--dur-4);animation-timing-function:var(--ease-out)}
  ::view-transition-old(hh-main){animation:hh-main-out 150ms var(--ease-in) both}
  ::view-transition-new(hh-main){animation:hh-main-in 380ms var(--ease-out) 50ms both}
  html:active-view-transition-type(back)::view-transition-old(hh-main){animation-name:hh-main-out-back}
  html:active-view-transition-type(back)::view-transition-new(hh-main){animation-name:hh-main-in-back}
  ::view-transition-group(hh-world-art),::view-transition-group(hh-world-title){animation-duration:480ms;animation-timing-function:var(--ease-out)}
  ::view-transition-old(hh-world-art),::view-transition-new(hh-world-art){height:100%;object-fit:cover;overflow:clip}
  ::view-transition-new(hh-world-art){animation-duration:320ms}
  @keyframes hh-main-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes hh-main-in{from{opacity:0;transform:translateY(14px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  @keyframes hh-main-out-back{to{opacity:0;transform:translateY(8px)}}
  @keyframes hh-main-in-back{from{opacity:0;transform:translateY(-12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
}
/* WebKit keeps native document switches (its cross-document snapshots are unstable);
   realm-init.js marks same-site arrivals so the body still settles in. */
@keyframes hh-page-settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.hh-page-enter main#page-main{animation:hh-page-settle var(--dur-4) var(--ease-out) both}

/* ---------- Dialogs and sheets: every one now leaves as gracefully as it arrives ---------- */
@media(prefers-reduced-motion:no-preference){
  html:not(.low-effects) :is(.dialog-shell,.hh-dialog,.profile-dialog,.alpha-dialog,.hh-action-dialog,.hh-grove-composer-dialog,.hh-marks-dialog){
    transition:opacity var(--dur-2) var(--ease-in),translate var(--dur-2) var(--ease-in),scale var(--dur-2) var(--ease-in),overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete;
  }
  html:not(.low-effects) :is(.dialog-shell,.hh-dialog,.profile-dialog,.alpha-dialog,.hh-action-dialog,.hh-grove-composer-dialog,.hh-marks-dialog):not([open]){opacity:0;translate:0 8px;scale:.985}
  html:not(.low-effects) :is(.dialog-shell,.hh-dialog,.profile-dialog,.alpha-dialog,.hh-action-dialog,.hh-grove-composer-dialog,.hh-marks-dialog)[open]{transition-duration:var(--dur-3);transition-timing-function:var(--ease-out)}
  @starting-style{
    html:not(.low-effects) :is(.hh-dialog,.profile-dialog,.alpha-dialog,.hh-grove-composer-dialog)[open]{opacity:0;translate:0 14px;scale:.975}
  }
  html:not(.low-effects) :is(.dialog-shell,.hh-dialog,.profile-dialog,.alpha-dialog,.hh-action-dialog,.hh-grove-composer-dialog,.hh-marks-dialog)::backdrop{transition:opacity var(--dur-2) ease,overlay var(--dur-2) allow-discrete,display var(--dur-2) allow-discrete}
  html:not(.low-effects) :is(.dialog-shell,.hh-dialog,.profile-dialog,.alpha-dialog,.hh-action-dialog,.hh-grove-composer-dialog,.hh-marks-dialog):not([open])::backdrop{opacity:0}
  @starting-style{
    html:not(.low-effects) :is(.hh-dialog,.profile-dialog,.alpha-dialog,.hh-grove-composer-dialog)[open]::backdrop{opacity:0}
  }
}
/* Phones: sheets rise from the bottom edge instead of floating in. */
@media(max-width:767px) and (prefers-reduced-motion:no-preference){
  html:not(.low-effects) :is(.hh-dialog,.hh-action-dialog,.hh-grove-composer-dialog):not([open]){translate:0 40px;scale:1}
  @starting-style{html:not(.low-effects) :is(.hh-dialog,.hh-grove-composer-dialog)[open]{translate:0 64px;scale:1}}
}

/* ---------- Menus, toasts, tabs, feed ---------- */
@keyframes hh-drop-in{from{opacity:0;translate:0 -8px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes hh-drop-out{to{opacity:0;translate:0 -6px;scale:.99}}
@keyframes hh-toast-in{from{opacity:0;translate:0 14px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes hh-toast-out{to{opacity:0;translate:0 8px;scale:.98}}
@keyframes hh-panel-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes hh-post-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes hh-skeleton{from{background-position:120% 0}to{background-position:-20% 0}}
.mobile-nav:not([hidden]){animation:hh-drop-in var(--dur-3) var(--ease-out) both;transform-origin:50% 0}
.mobile-nav.is-closing{animation:hh-drop-out var(--dur-2) var(--ease-in) both;pointer-events:none}
:is(#toast,.hh-toast,.hh-account-toast):not([hidden]){animation:hh-toast-in var(--dur-3) var(--ease-out) both}
:is(#toast,.hh-toast).is-leaving{animation:hh-toast-out var(--dur-2) var(--ease-in) both}
[role=tabpanel]:not([hidden]){animation:hh-panel-in var(--dur-3) var(--ease-out) both}
:is([data-post-id],[data-call-id]).is-entering{animation:hh-post-in var(--dur-4) var(--ease-out) both;animation-delay:calc(var(--enter-i,0) * 45ms)}
.hh-grove-tabs>button::after{transform:scaleX(.4);transition:opacity var(--dur-2) ease,transform var(--dur-3) var(--ease-out)}
.hh-grove-tabs>button:is([aria-pressed="true"],[aria-selected="true"])::after{transform:none}
/* The feed's first moments: two quiet ghost notes instead of an empty column. */
#hh-feed[aria-busy=true]:empty{min-height:0}
#hh-feed[aria-busy=true]:empty::before{content:'';display:block;height:356px;border-radius:22px;
  background:
    radial-gradient(circle at 42px 42px,#6a8a6526 0 20px,transparent 21px),
    linear-gradient(#6a8a651f,#6a8a651f) 76px 30px/140px 11px no-repeat,
    linear-gradient(#6a8a6517,#6a8a6517) 76px 50px/88px 9px no-repeat,
    linear-gradient(#6a8a6517,#6a8a6517) 22px 90px/min(62%,420px) 11px no-repeat,
    linear-gradient(#6a8a6512,#6a8a6512) 22px 112px/min(44%,300px) 11px no-repeat,
    linear-gradient(#6a8a6517,#6a8a6517) 22px 196px/calc(100% - 44px) 1px no-repeat,
    radial-gradient(circle at 42px 42px,#6a8a6526 0 20px,transparent 21px) 0 180px/100% 180px no-repeat,
    linear-gradient(#6a8a651f,#6a8a651f) 76px 210px/120px 11px no-repeat,
    linear-gradient(#6a8a6517,#6a8a6517) 22px 270px/min(54%,360px) 11px no-repeat;
  background-color:#fbfdf8e6;border:1px solid #6a8a6522;box-shadow:0 8px 26px #183c2c0d}
html[data-theme=dark] #hh-feed[aria-busy=true]:empty::before{background-color:#0d1b19e0;border-color:#b8d4aa24}
@media(prefers-reduced-motion:no-preference){
  html:not(.low-effects) #hh-feed[aria-busy=true]:empty::after{content:'';display:block;height:356px;margin-top:-356px;border-radius:22px;background:linear-gradient(100deg,transparent 30%,#ffffff55 50%,transparent 70%) 120% 0/250% 100% no-repeat;animation:hh-skeleton 1.6s ease-in-out infinite}
  html[data-theme=dark]:not(.low-effects) #hh-feed[aria-busy=true]:empty::after{background-image:linear-gradient(100deg,transparent 30%,#d7f5c50f 50%,transparent 70%)}
}

/* ---------- Surfaces that responded instantly now respond calmly ---------- */
.hh-nft-image>img{transition:opacity var(--dur-3) ease}
.hh-nft-image[data-art-state=loading]>img{opacity:0}
:is(.post-actions button,.hh-post-menu button,.hh-inline-buttons>button,.circle-chip,.hh-grove-tabs>button,.stream-tabs button,[data-profile-tab],[data-community-tab]){transition:color var(--dur-2) ease,background-color var(--dur-2) ease,border-color var(--dur-2) ease,box-shadow var(--dur-2) ease,scale var(--dur-1) var(--ease-out)}
.post-actions button svg{transition:transform var(--dur-3) var(--ease-out),color var(--dur-2) ease}
.post-actions button[aria-pressed="true"] svg{transform:scale(1.08)}
/* Touch: a small press instead of a sticky hover. */
@media(hover:none){
  .collection-card:hover,.nft-card:hover,.collection-card:hover .collection-art{transform:none}
  :is(.button,.round-button,.hh-mobile-dock a,.circle-chip,.collection-card,.nft-card,.post-actions button,.hh-grove-tabs>button,.stream-tabs button,[data-profile-tab],[data-community-tab],.hh-featured-circle,.wallet-trigger,.menu-trigger){transition:scale var(--dur-1) var(--ease-out),background-color var(--dur-2) ease,color var(--dur-2) ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  :is(.button,.round-button,.hh-mobile-dock a,.circle-chip,.post-actions button,.hh-grove-tabs>button,.stream-tabs button,[data-profile-tab],[data-community-tab],.wallet-trigger,.menu-trigger):active{scale:.95}
  :is(.collection-card,.nft-card,.hh-featured-circle):active{scale:.985}
}

/* ---------- Design polish ---------- */
/* The Grove rail's side lines fade out at both ends instead of stopping short. */
@media(min-width:768px){
  .hh-live[data-live-page="social"] .grove-layout>.grove-left{border-image:linear-gradient(180deg,transparent,var(--hh-rail-line) 9%,var(--hh-rail-line) 84%,transparent) 1}
}
/* Short Grove pages (communities, activity) keep the footer below the fold, where the art has faded. */
.social-hub main#page-main{min-height:calc(100dvh - 150px)}
@media(max-width:767px){.social-hub main#page-main{min-height:calc(100dvh - 190px)}}

/* ---------- Safety nets ---------- */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  :is(.button,.round-button,.hh-mobile-dock a,.circle-chip,.collection-card,.nft-card,.post-actions button):active{scale:none}
}
html.low-effects *::before{animation:none!important;transition:none!important}
html.low-effects :is(.button,.round-button,.hh-mobile-dock a,.circle-chip,.collection-card,.nft-card,.post-actions button):active{scale:none}