/* Laterano motion layer for Gitea: page transitions, landing, dashboard entrance, footer. */

/* ---- page-to-page: native cross-document view transition; navbar stays still ---- */
@view-transition{navigation:auto}
/* view-transition-name creates a stacking context; keep its menus above page content. */
#navbar{position:relative;z-index:10;view-transition-name:cd-nav}
::view-transition-group(cd-nav){animation:none;z-index:2}
::view-transition-image-pair(cd-nav){isolation:auto}
::view-transition-old(cd-nav),::view-transition-new(cd-nav){animation:none;mix-blend-mode:normal}
::view-transition-old(root){animation:cd-vt-out .12s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:cd-vt-in .26s .07s cubic-bezier(.2,.7,.2,1) both}
@keyframes cd-vt-out{to{opacity:0}}
@keyframes cd-vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---- theme switch: circular reveal from the clicked button (same-document transition) ---- */
html.cd-theming #navbar{view-transition-name:none}
html.cd-theming::view-transition-old(root){animation:none}
html.cd-theming::view-transition-new(root){animation:cd-reveal .6s cubic-bezier(.6,.05,.3,1) both}
@keyframes cd-reveal{from{clip-path:circle(0 at var(--cd-x,50%) var(--cd-y,100%))}to{clip-path:circle(var(--cd-r,150vmax) at var(--cd-x,50%) var(--cd-y,100%))}}

/* ---- held behind the shell's gate: everything waits at its first frame ---- */
html.cd-hold *,html.cd-hold *::before,html.cd-hold *::after{animation-play-state:paused!important}

/* ---- dashboard entrance (only on "/") ---- */
@keyframes cd-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes cd-slide{from{opacity:0;transform:translateX(14px)}}
@keyframes cd-sweep{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
html.cd-enter .dashboard #activity-feed>.item{animation:cd-rise .34s cubic-bezier(.2,.7,.2,1) both}
html.cd-enter .dashboard #activity-feed>.item:nth-child(1){animation-delay:.04s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(2){animation-delay:.07s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(3){animation-delay:.1s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(4){animation-delay:.13s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(5){animation-delay:.16s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(6){animation-delay:.19s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(7){animation-delay:.22s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(8){animation-delay:.25s}
html.cd-enter .dashboard #activity-feed>.item:nth-child(n+9){animation-delay:.28s}
html.cd-enter .dashboard #dashboard-repo-list{animation:cd-slide .42s .08s cubic-bezier(.2,.7,.2,1) both}
html.cd-enter .dashboard .activity-heatmap-container{animation:cd-sweep .7s .05s cubic-bezier(.5,0,.2,1) both}
/* after the gate the same sequence runs a little slower, like the PPT build-in */
html.cd-full .dashboard #activity-feed>.item{animation-duration:.5s}
html.cd-full .dashboard .activity-heatmap-container{animation-duration:1.1s}
html.cd-full .dashboard #dashboard-repo-list{animation-duration:.6s;animation-delay:.2s}

/* ---- landing (signed-out "/") ---- */
.cd-landing{display:grid;place-items:center;min-height:calc(100vh - 160px);overflow:hidden;padding:24px 16px}
.cd-stage{position:relative;display:grid;justify-items:center;gap:14px;text-align:center}
.cd-orbit{position:absolute;left:50%;top:110px;width:800px;height:800px;margin:-400px 0 0 -400px;overflow:visible;pointer-events:none}
.cd-orbit circle{fill:none;stroke:var(--color-primary);vector-effect:non-scaling-stroke}
.cd-orbit .sat{fill:var(--color-teal);stroke:none}
.cd-orbit .shards path{fill:var(--color-primary)}
/* intro uses `scale`, spin uses `rotate`: independent properties, so they compose */
.cd-orbit .o{opacity:var(--o);animation:cd-o-in .9s var(--t,0s) cubic-bezier(.2,.7,.2,1) backwards,cd-rot var(--s) linear infinite}
.cd-orbit .o1{--o:.6;--t:.05s;--s:48s;stroke-width:1.6}.cd-orbit .o1 circle{stroke-width:1.6}
.cd-orbit .o2{--o:.4;--t:.15s;--s:-90s}
.cd-orbit .o3{--o:.28;--t:.25s;--s:72s}.cd-orbit .o3 circle{animation:cd-crawl 9s linear infinite}
.cd-orbit .o4{--o:.42;--t:.35s;--s:26s}
.cd-orbit .o5{--o:.22;--t:.45s;--s:-64s}
.cd-orbit .o6{--o:.55;--t:.6s;--s:140s}
.cd-orbit .shards path{animation:cd-flicker 3.2s steps(1,end) infinite}
.cd-orbit .shards path:nth-child(3n){animation-delay:-1.1s}.cd-orbit .shards path:nth-child(3n+1){animation-delay:-2.3s;animation-duration:4.4s}
@keyframes cd-o-in{from{opacity:0;scale:.72}}
@keyframes cd-rot{to{rotate:360deg}}
@keyframes cd-crawl{to{stroke-dashoffset:-1192}}
@keyframes cd-flicker{0%,100%{opacity:1}46%{opacity:.25}52%{opacity:.9}78%{opacity:.5}}
.cd-mark{position:relative;width:220px;height:220px;overflow:visible}
.cd-mark .w,.cd-mark .core{fill:var(--color-primary);stroke:none}
.cd-mark .w2{fill-opacity:.55}
.cd-mark .core{fill:var(--color-teal);transform-box:fill-box;transform-origin:center}
.cd-mark .halo{fill:none;stroke:var(--color-primary);stroke-width:7;stroke-dasharray:1;stroke-dashoffset:1;animation:cd-draw .9s .1s cubic-bezier(.6,.1,.2,1) forwards}
.cd-mark .halo.back{stroke-width:2.5;stroke-opacity:.55;animation-delay:.35s}
.cd-mark .wl{animation:cd-wing-l .8s .3s cubic-bezier(.2,.8,.2,1) backwards}
.cd-mark .wr{animation:cd-wing-r .8s .3s cubic-bezier(.2,.8,.2,1) backwards}
.cd-mark .w2{animation-delay:.5s}
.cd-mark .core{animation:cd-core .5s .95s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes cd-draw{to{stroke-dashoffset:0}}
@keyframes cd-wing-l{from{opacity:0;transform:translate(-26px,-10px)}}
@keyframes cd-wing-r{from{opacity:0;transform:translate(26px,-10px)}}
@keyframes cd-core{from{opacity:0;transform:scale(.2) rotate(90deg)}}
.cd-kicker{position:relative;margin:4px 0 0;font:600 11px/1 var(--fonts-monospace);letter-spacing:.24em;color:var(--color-primary);animation:cd-rise .5s .9s both}
.cd-kicker b{display:inline-block;margin-right:.7em;padding:3px 6px;background:var(--cd-rule,var(--color-primary));color:#fff;letter-spacing:.06em}
@font-face{font-family:"LateranoScript";src:url("fonts/pinyon-script.woff2") format("woff2");font-display:block}
/* script title: the f drops like an integral sign; revealed left-to-right like a pen stroke */
.page-content.cd-landing .cd-title{position:relative;margin:-.05em 0 .05em;padding:0 .25em .28em;font:400 clamp(56px,9vw,100px)/1.15 "LateranoScript","Pinyon Script",cursive;letter-spacing:0;color:var(--color-text);animation:cd-write 1.3s .85s cubic-bezier(.45,.05,.3,1) both}
@keyframes cd-write{from{clip-path:inset(-10% 100% -30% 0)}to{clip-path:inset(-10% -5% -30% 0)}}
.cd-login{position:relative;margin-top:10px!important;padding:12px 28px!important;font-family:var(--fonts-laterano-serif)!important;letter-spacing:.14em;animation:cd-rise .5s 1.25s both}

/* the gate already drew the mark and title: the landing underneath is shown composed (rings keep turning) */
html.cd-was-held .cd-landing .cd-mark *,html.cd-was-held .cd-kicker,html.cd-was-held .cd-landing .cd-title,html.cd-was-held .cd-login{animation:none!important}
html.cd-was-held .cd-mark .halo{stroke-dashoffset:0}
html.cd-was-held .cd-orbit .o{animation-name:none,cd-rot}

/* ---- layout follows the window (Gitea caps containers at 1280px) ---- */
.ui.container:not(.medium-width):not(.fluid){width:1880px}

/* ---- dashboard hero ---- */
.cd-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px 32px;margin-top:18px;margin-bottom:18px;padding:26px 28px;
 border:1px solid var(--color-secondary);border-top:2px solid var(--color-primary);background:var(--color-box-body);overflow:hidden}
.cd-hero::after{content:"";position:absolute;right:0;top:0;width:180px;height:6px;background:var(--color-primary);clip-path:polygon(14px 0,100% 0,100% 100%,0 100%)}
.cd-hero-rings{position:absolute;right:-60px;top:50%;width:440px;height:440px;margin-top:-220px;pointer-events:none;opacity:.9}
.cd-hero-rings circle{fill:none;stroke:var(--color-primary);vector-effect:non-scaling-stroke}
.cd-hero-rings .sat{fill:var(--color-teal);stroke:none}
.cd-hero-rings .o{opacity:var(--o);animation:cd-rot var(--s) linear infinite}
.cd-hero-rings .o1{--o:.35;--s:60s}.cd-hero-rings .o2{--o:.3;--s:-90s}.cd-hero-rings .o3{--o:.18;--s:80s}.cd-hero-rings .o4{--o:.4;--s:24s}
.cd-hero-text,.cd-stats{position:relative}
.cd-hero .cd-kicker{margin:0 0 10px;animation:none;text-align:left}
.cd-hero-title{margin:0 0 16px!important;font:600 clamp(24px,2.6vw,34px)/1.2 var(--fonts-laterano-serif)!important;letter-spacing:.06em;color:var(--color-text)}
.cd-hero-title span{color:var(--color-primary)}
.cd-hero-actions{display:flex;flex-wrap:wrap;gap:8px}
.cd-hero-actions .ui.button{margin:0;display:inline-flex;align-items:center;gap:6px;font-family:var(--fonts-laterano-serif);letter-spacing:.08em}
.cd-stats{display:grid;grid-template-columns:repeat(4,minmax(104px,1fr));border:1px solid var(--color-primary-alpha-30);background:color-mix(in srgb,var(--color-box-body) 82%,transparent);backdrop-filter:blur(3px)}
.cd-stat{display:grid;gap:4px;padding:12px 16px 14px;color:var(--color-text)!important;text-decoration:none!important}
.cd-stat+.cd-stat{border-left:1px solid var(--color-primary-alpha-20)}
.cd-stat:hover{background:var(--color-primary-alpha-10)}
.cd-stat i{font:600 10px/1 var(--fonts-monospace);font-style:normal;letter-spacing:.1em;color:var(--color-primary)}
.cd-stat b{font:600 28px/1.1 var(--fonts-laterano-serif);font-variant-numeric:tabular-nums}
.cd-stat span{font-size:12px;color:var(--color-text-light-2);letter-spacing:.08em}
html.cd-enter .cd-hero{animation:cd-rise .45s cubic-bezier(.2,.7,.2,1) both}
html.cd-enter .cd-stat{animation:cd-rise .4s cubic-bezier(.2,.7,.2,1) both}
html.cd-enter .cd-stat:nth-child(2){animation-delay:.05s}html.cd-enter .cd-stat:nth-child(3){animation-delay:.1s}html.cd-enter .cd-stat:nth-child(4){animation-delay:.15s}
@media (max-width:1100px){.cd-hero{grid-template-columns:1fr}.cd-stats{grid-template-columns:repeat(2,1fr)}.cd-stat:nth-child(3){border-left:0}.cd-stat:nth-child(n+3){border-top:1px solid var(--color-primary-alpha-20)}}
@media (max-width:767.98px){.cd-hero{padding:18px 16px}.cd-hero-rings{width:300px;height:300px;margin-top:-150px;right:-120px;opacity:.5}}

/* ---- department (team) badges, drawn in laterano-motion.js ---- */
.cd-badge{display:inline-block;flex:none;width:28px;height:28px;margin-right:8px;vertical-align:middle;overflow:visible}
.cd-badge text{font-family:var(--fonts-laterano-serif);font-weight:600}
.ui.top.attached.header>.cd-badge,.ui.top.attached.header .cd-badge{margin-top:-3px}
.cd-badge.large{width:44px;height:44px}

/* ---- footer ---- */
.cd-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cd-footer .left-links{display:flex;align-items:center;gap:1em}
.cd-sign{font-family:var(--fonts-laterano-serif);font-weight:600;letter-spacing:.06em;color:var(--color-text-light-1)}
.cd-coord{font:10px var(--fonts-monospace);letter-spacing:.2em;color:var(--color-primary);opacity:.6}
.cd-theme-switch{display:inline-flex;border:1px solid var(--color-primary-alpha-40)}
.cd-theme-switch button{min-width:42px;height:26px;padding:0 10px;border:0;background:transparent;color:var(--color-text-light-2);font:600 12px/1 var(--fonts-laterano-serif);letter-spacing:.1em;cursor:pointer}
.cd-theme-switch button+button{border-left:1px solid var(--color-primary-alpha-30)}
.cd-theme-switch button:hover{color:var(--color-primary);background:var(--color-primary-alpha-10)}
.cd-theme-switch button[aria-checked=true]{background:var(--color-primary);color:var(--color-primary-contrast)}
.cd-theme-switch button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
html.cd-in-shell .cd-footer{padding-right:96px}  /* room for the shell's BGM button */

@media (max-width:767.98px){
 .cd-mark{width:170px;height:170px}.cd-orbit{top:85px;scale:.62}
}
@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 html.cd-theming::view-transition-new(root){animation:none}
 .cd-landing *,html.cd-enter .dashboard *,.cd-hero-rings *{animation:none!important}
 .cd-mark .halo{stroke-dashoffset:0}
}