/* fx.css - small shared touches for every page.
   Each page keeps its own colours (including its dark theme).
   This file only holds the bits every page shares. */

/* No white flash between pages: the page colour is painted on the html element too. */
html{background:var(--paper)}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* Calm move from page to page: a soft cross-fade with a small 12px rise. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fx-out .25s ease both}
::view-transition-new(root){animation:fx-in .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-out{to{opacity:0}}
@keyframes fx-in{from{opacity:0;transform:translateY(12px)}}

/* Brand name in the top bar, and the word mark in the dark footer: deep red (lighter red on dark) */
.brand-uc{font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:700;font-size:1.32em;letter-spacing:0;line-height:1;color:#7A1626}
html[data-theme="dark"] .brand-uc{color:#D9707F}
/* the footer is always a deep navy, so its word mark is always the lighter red */
.foot .brand-uc{color:#D9707F}
/* the logo: the stamp with 'Unpolished' above 'Courage'. Red on light pages, cream and mustard on dark */
.brand-logo{display:inline-block;line-height:0}
.brand-logo img{display:block;height:68px;width:auto;max-width:none;margin:6px 0}
.brand-logo .logo-d{display:none}
html[data-theme="dark"] .brand-logo .logo-l,.foot .brand-logo .logo-l{display:none}
html[data-theme="dark"] .brand-logo .logo-d,.foot .brand-logo .logo-d{display:block}
.foot .brand-logo img{height:clamp(72px,9vw,104px)}
@media (max-width:440px){.brand-logo img{height:50px}}

/* Top bar: the right-hand group (page link + theme button) */
.top-r{display:flex;align-items:center;gap:clamp(2px,1.6vw,14px);flex:none}

/* Very small phones (320px): a little smaller so the top bar stays on one line */
@media(max-width:360px){
 .top .wrap{padding-left:16px;padding-right:16px}
 .top .mark{font-size:.72rem}
 .top .tl{font-size:.8rem}
}

/* Light / dark button: 48 x 48, round, line icon of a sun or a moon */
.theme-btn{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--stone);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.theme-btn:hover{background:var(--paper-2);border-color:var(--ink-soft)}
.theme-btn svg{display:block;width:22px;height:22px;overflow:visible}
.theme-btn .ic-sun,.theme-btn .ic-moon{transform-origin:12px 12px;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
/* Light page shows the moon (tap to go dark). Dark page shows the sun. */
.theme-btn .ic-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
html[data-theme="dark"] .theme-btn .ic-sun{opacity:1;transform:none}
html[data-theme="dark"] .theme-btn .ic-moon{opacity:0;transform:rotate(70deg) scale(.5)}
/* Without JavaScript the button can do nothing, so it is not shown. */
html:not(.js) .theme-btn{display:none}

/* Custom cursor: a small mustard dot and a soft ring that follows it.
   Only built by fx.js for a mouse. The real cursor is hidden only after the first mouse move. */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .2s}
.cur-dot.on,.cur-ring.on{opacity:1}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;box-sizing:border-box;background:#D9A52B;border:1px solid #3D4250}
.cur-dot.hide{opacity:0}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px}
.cur-bg{position:absolute;inset:0;box-sizing:border-box;border:1.5px solid var(--ink-soft);border-radius:50%;box-shadow:0 0 0 1px var(--paper);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cur-t{position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 var(--sans,"Afacad",sans-serif);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .15s}
.cur-ring.hot .cur-bg{transform:scale(1.8)}
.cur-ring.lab .cur-bg{transform:scale(2.3);background:var(--paper)}
.cur-ring.lab .cur-t{opacity:1}
.cur-ring.down .cur-bg{transform:scale(.8)}
.cur-ring.hot.down .cur-bg{transform:scale(1.5)}
.cur-ring.lab.down .cur-bg{transform:scale(2)}
html.has-cursor,html.has-cursor *{cursor:none!important}
/* Text fields keep their normal text caret. */
html.has-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
html.has-cursor textarea{cursor:text!important}

/* Tick and line drawings that draw themselves when they come into view (fx.js adds .in). */
.js svg.draw [pathLength="1"]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.5,0,.2,1)}
.js svg.draw.in [pathLength="1"]{stroke-dashoffset:0}

/* Calm version: everything still, everything drawn. */
@media (prefers-reduced-motion:reduce){
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .js svg.draw [pathLength="1"]{stroke-dashoffset:0;transition:none}
 .cur-bg,.cur-t,.cur-dot,.cur-ring{transition:none}
 .theme-btn,.theme-btn .ic-sun,.theme-btn .ic-moon{transition:none}
}