/* ENGQORA page transitions — shared by the landing page, sign-in/sign-up and the app.
   Uses the browser's View Transitions: Chrome/Edge 126+ and Safari 18.2+ animate; other browsers
   simply change page as normal. Nothing here runs for people who turn off motion. */

@view-transition { navigation: auto; }

/* 1. Whole page: the old page folds away from a top hinge, the new one drops in — a board flap turning */
::view-transition-old(root){ animation: eq-fold-out .30s cubic-bezier(.55,0,.8,.2) both; transform-origin: 50% 0; }
::view-transition-new(root){ animation: eq-fold-in .55s cubic-bezier(.16,.84,.24,1) .10s both; transform-origin: 50% 0; }
@keyframes eq-fold-out{ to{ opacity:0; transform: perspective(1600px) rotateX(10deg) translateY(-18px) scale(.985); } }
@keyframes eq-fold-in { from{ opacity:0; transform: perspective(1600px) rotateX(-14deg) translateY(34px); } }

/* 2. The logo never moves: it stays put while everything around it changes */
/* only the top logo on each page - two elements with the same name would cancel the transition */
.nav .brand, .side .logo, .box .logo{ view-transition-name: eq-brand; }
::view-transition-group(eq-brand){ animation-duration:.5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* 3. The button you clicked grows into the sign-up / sign-in card (the name is set on click) */
::view-transition-group(eq-card){ animation-duration:.6s; animation-timing-function: cubic-bezier(.2,.85,.2,1); }
::view-transition-old(eq-card), ::view-transition-new(eq-card){ height:100%; width:100%; }
::view-transition-old(eq-card){ animation: eq-fade-out .18s ease-out both; }
::view-transition-new(eq-card){ animation: eq-fade-in .35s ease-out .15s both; }
@keyframes eq-fade-out{ to{ opacity:0; } }
@keyframes eq-fade-in { from{ opacity:0; } }

/* 4. Inside the app: switching tabs keeps the frame still; the title flips like a board tile, the content slides in */
html.eq-tab::view-transition-old(root), html.eq-tab::view-transition-new(root){ animation:none; }
::view-transition-old(eq-title){ animation: eq-flap-out .16s cubic-bezier(.6,0,.9,.4) both; transform-origin: 50% 100%; }
::view-transition-new(eq-title){ animation: eq-flap-in .28s cubic-bezier(.2,.9,.3,1.15) .12s both; transform-origin: 50% 0; }
@keyframes eq-flap-out{ to{ transform: perspective(400px) rotateX(85deg); opacity:.2; } }
@keyframes eq-flap-in { from{ transform: perspective(400px) rotateX(-85deg); opacity:.2; } }
::view-transition-old(eq-view){ animation: eq-fade-out .14s ease-out both; }
::view-transition-new(eq-view){ animation: eq-rise .38s cubic-bezier(.16,.84,.24,1) .06s both; }
@keyframes eq-rise{ from{ opacity:0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; }
}