/* The flip: the site has two front pages, the Creator Network (/) and the Creator Toolbox (/toolbox).
   One switch in the header slab of both turns one into the other. It is a labelled pill in the slab's right
   cluster (founder, 2026-10-04: never in the cutout between the dock and the slab, and not beside the mark, where it
   read as part of the logo). Loaded by both pages, after shell.css. Behaviour: js/flip.js and js/flip-reveal.js. */

  /* the page change itself: both pages opt in, so the browser carries one picture into the next */
  @view-transition { navigation: auto; }
  :root { --flip-x: 50vw; --flip-y: 28px; --flip-ring: #ff8a33; }
  /* a flip opens the new page as a growing circle from the coin; any other page change keeps the plain cross-fade */
  html[data-flip]::view-transition-old(root) { animation: none; }
  html[data-flip]::view-transition-new(root) { animation: c0-portal .9s cubic-bezier(.62,.04,.2,1) both; }
  @keyframes c0-portal { from { clip-path: circle(0 at var(--flip-x) var(--flip-y)); } to { clip-path: circle(150vmax at var(--flip-x) var(--flip-y)); } }
  /* during a flip three things travel on their own, above the opening circle: the two title words trade places
     ("connected and equipped" becomes "equipped and connected"), and the switch changes its words in place */
  .hero h1 [data-w="connected"] { view-transition-name: c0-w-connected; }
  .hero h1 [data-w="equipped"] { view-transition-name: c0-w-equipped; }
  .hero h1 .fw { display: inline-block; }
  .flipsw { view-transition-name: c0-switch; }
  html[data-flip]::view-transition-group(c0-w-connected), html[data-flip]::view-transition-group(c0-w-equipped) { animation-duration: .9s; animation-timing-function: cubic-bezier(.62,.04,.2,1); }
  /* browsers that cannot carry a picture across pages get the same opening on the new page alone */
  html.flip-in body { animation: c0-portal .8s cubic-bezier(.62,.04,.2,1) both; }
  /* the ring that rides just inside the circle's edge: orange when the Toolbox comes through, blue for the Network */
  .portal-ring { position: fixed; left: var(--flip-x); top: var(--flip-y); z-index: 2147483000; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; pointer-events: none; overflow: visible; animation: c0-ring .9s cubic-bezier(.62,.04,.2,1) both; }
  .portal-ring circle { fill: none; stroke: var(--flip-ring); stroke-width: 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 10px var(--flip-ring)); }
  @keyframes c0-ring { from { transform: scale(0); opacity: 1; } 80% { opacity: 1; } to { transform: scale(1); opacity: 0; } }

  /* the switch: the two words of the title, the one you are on first. Pressing it swaps them. */
  .flipsw { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--dust); font: 600 .88rem var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
  .flipsw .fs-now { color: var(--bone); }
  .flipsw .fs-ic { width: 16px; height: 16px; fill: none; stroke: var(--flip-accent, #08dff7); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .55s var(--ease); }
  .flipsw[data-to="network"] { --flip-accent: #ff8a33; }
  .flipsw:hover, .flipsw:focus-visible { border-color: var(--flip-accent, #08dff7); color: var(--bone); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flip-accent, #08dff7) 18%, transparent); }
  .flipsw:hover .fs-ic, .flipsw:focus-visible .fs-ic, .flipsw.hint .fs-ic { transform: rotate(180deg); }
  .flipsw.hint { border-color: var(--flip-accent, #08dff7); box-shadow: 0 0 0 3px color-mix(in srgb, var(--flip-accent, #08dff7) 18%, transparent); }
  .flipsw:active { transform: scale(.97); }
  /* the section links repeat the rail; they give their room to the switch until the header is wide enough for both */
  @media (max-width: 1859px) { .navwrap { display: none !important; } }
  @media (max-width: 1400px) { .flipsw .fs-now { display: none; } }
  /* phones: the slab is the mark alone, so the switch floats in the thumb corner */
  @media (max-width: 760px) { .flipsw { position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: rgba(12,18,30,.94); box-shadow: 0 10px 28px -10px rgba(0,0,0,.8); } .flipsw .fs-now { display: inline; } }
  @media (max-width: 340px) { .flipsw .fs-now { display: none; } }

  /* the title is the page's biggest thing, on both sides (founder, 2026-10-04: "way too small and unimpressive").
     The noun wears its side's colour: blue for the Network, orange for the Toolbox, the same two colours as the
     switch and the portal's ring. */
  @media (min-width: 1100px) { :root { --h1: clamp(2.8rem, 6.1vw, 6rem); } .hero h1 .row2 { font-size: .44em; margin-top: .2em; } }
  @media (min-width: 761px) and (max-width: 1099px) { body.sb-open { --h1: clamp(2.3rem, 6.4vw, 4rem); } }
  @media (max-width: 979px) { :root { --h1: clamp(2.5rem, 13.2vw, 5rem); } .hero h1 .row2 { font-size: .46em; } }
  @media (max-width: 760px) { body.sb-open { --h1: clamp(1.7rem, 9.7vw, 3.2rem); } body.sb-open .hero > h1 .row2 { font-size: max(.47em, 15px); margin-top: .35em; } }
  .hero h1 [data-noun] { background: linear-gradient(92deg, var(--noun-a), var(--noun-b)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
  .hero h1 [data-noun="network"] { --noun-a: #5fe8fb; --noun-b: #0a9fd0; }
  .hero h1 [data-noun="toolbox"] { --noun-a: #ea7b2b; --noun-b: #f6c538; }

  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    html.flip-in body, .portal-ring { animation: none; } .portal-ring { display: none; }
    .flipsw, .flipsw .fs-ic { transition: none; }
  }