/* Copyright (c) Pawan Nayar · LLOS.ai · 2026 — Original pedagogy and tool design — all rights reserved. */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE TURN — the micro-moment shown when a new four-hour window arrives mid-session.

   [2026-08-10] Pawan: "i assume the window should turn for a fresh session or we have even for
   active session some microexperience as updating [see designer hub interactive svg ... aphorist
   studio has similar 10-sec experiential micro moments]".

   TWO REFERENCES, AND WHAT WAS TAKEN FROM EACH:

   · design/index.html — the hero shape cycle. Pawan's own timing, written into that file:
     "2 sec to come 3 sec stay 1 sec to fade away". That cadence is used here exactly: the mark
     draws over 2s, the line holds, and nothing is rushed.

   · python-server/aphorist-studio.html — "Creative Rhythm, Phase 1: The Pause". An eyebrow, one
     italic line, a progress bar, a countdown. Its stated goal is to "transform consumption into
     contemplation", and the shape of that moment is the model for the words here.

   WHAT WAS DELIBERATELY NOT TAKEN: the aphorist pause is a full-screen, non-dismissible overlay
   with a backdrop blur. That is right for slowing somebody down in the middle of generating, where
   the interruption IS the point. It is wrong here. Nothing is being interrupted on a hub — the
   reader is reading — so taking the screen because some content refreshed would be rude, and it
   would break the standing rule against pop-ups that force a wait. This is a chip that waits to be
   noticed and can be ignored forever.

   FREQUENCY SETS THE VOLUME (HOW_WE_BUILD 4.2): this fires at most six times a day, so it is
   allowed to be seen. It is not allowed to be loud.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.turnchip{
  position:fixed; left:50%; bottom:1.15rem; transform:translateX(-50%) translateY(8px);
  z-index:70; display:flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem .6rem .7rem;
  background:var(--bg-card,#fff); border:1px solid var(--border,#e7e5e0);
  border-radius:999px; box-shadow:0 10px 30px -12px rgba(120,72,20,.35), 0 2px 8px rgba(120,72,20,.10);
  font-family:inherit; cursor:pointer; opacity:0; pointer-events:none;
  max-width:min(92vw,26rem);
  /* 2s to come — the designer hub's own number, not a new one */
  transition:opacity 2s ease, transform 2s cubic-bezier(.22,1,.36,1);
}
.turnchip.on{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
/* 1s to fade away */
.turnchip.off{opacity:0; transform:translateX(-50%) translateY(6px); transition-duration:1s}
.turnchip:hover{border-color:var(--primary-light,#f5b969)}
.turnchip:active{transform:translateX(-50%) translateY(1px) scale(.99)}
.turnchip:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(234,122,39,.20)}

.turnchip .tc-mark{width:30px;height:30px;flex:0 0 auto;display:block}
.turnchip .tc-txt{min-width:0;text-align:left;line-height:1.3}
.turnchip .tc-k{
  display:block; font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--primary-deep,#92400e);
}
.turnchip .tc-v{display:block; font-size:.88rem; color:var(--text-primary,#171717); font-weight:600}
.turnchip .tc-go{
  flex:0 0 auto; font-size:.78rem; font-weight:800; color:var(--primary-deep,#92400e);
  padding-left:.15rem; white-space:nowrap;
}

/* the mark: a quarter arc that travels once round, and an amber dot that arrives with it.
   Dual-tone, dark body + amber accent, and every element stays inside the inner 86% of its box
   so motion cannot spill out of the frame. */
.turnchip .tc-ring{fill:none;stroke:#1a1c1e;stroke-width:7;opacity:.18}
.turnchip .tc-arc{
  fill:none;stroke:#1a1c1e;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:60 180; transform-origin:50px 50px;
  animation:tcSpin 3.5s linear infinite;   /* integer-ratio motion: 3.5s */
}
.turnchip .tc-dot{fill:#f59f0a; transform-origin:50px 50px; animation:tcSpin 3.5s linear infinite}
@keyframes tcSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* [2026-08-10] The shell's cookie bar is position:fixed, bottom:0, z-index:680 — it would sit on
   top of this chip on a first visit, and the chip would simply never be seen by the people most
   likely to be new here. :has() is used rather than a class set in JS because the bar can appear
   or be dismissed at any moment, and the chip has to move with it either way. Supported in every
   current browser; where it is not, the chip stays where it was and is hidden behind the bar
   until the bar is dismissed, which is the same as today rather than worse. */
body:has(.sh-cookie.sh-show) .turnchip{bottom:5.6rem}

@media(max-width:520px){
  .turnchip{left:.6rem; right:.6rem; transform:translateY(8px); max-width:none}
  .turnchip.on{transform:translateY(0)}
  .turnchip.off{transform:translateY(6px)}
  .turnchip .tc-v{font-size:.84rem}
}

/* Reduced motion: it still appears, it just does not spin or slide. The information is the point;
   the movement is the manners. */
@media(prefers-reduced-motion:reduce){
  .turnchip{transition:opacity .2s ease}
  .turnchip.on,.turnchip.off{transform:translateX(-50%)}
  .turnchip .tc-arc,.turnchip .tc-dot{animation:none}
}