/* ==========================================================================
   qui — membrana
   ========================================================================== */

:root{
  color-scheme: dark;

  --h: 168;                    /* la tinta: la cambia il pannello */

  --bg:    hsl(var(--h) 16% 3.4%);
  --ink:   hsl(var(--h) 14% 94%);
  --soft:  hsl(var(--h) 12% 94% / .56);
  --dim:   hsl(var(--h) 12% 94% / .30);
  --faint: hsl(var(--h) 12% 94% / .125);
  --hair:  hsl(var(--h) 12% 94% / .07);
  --glow:  hsl(var(--h) 64% 68%);
  --glowA: hsl(var(--h) 64% 68% / .34);

  /* movimento — poche curve, usate ovunque */
  --e-out:  cubic-bezier(.16, 1, .3, 1);
  --e-io:   cubic-bezier(.76, 0, .24, 1);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --spring: linear(0, .006, .026 2.1%, .107 4.5%, .418 9.5%, .582 12%, .72,
                   .834 17.5%, .88, .918, .948 24%, .973 28%, .998 36%,
                   1.007 42%, 1.008 55%, 1);

  --t1: .2s;  --t2: .44s;  --t3: .78s;  --t4: 1.2s;

  --gut:     clamp(20px, 5vw, 44px);
  --measure: min(700px, 86vw);
  --kb:      0px;

  --safe-t: env(safe-area-inset-top,   0px);
  --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,  0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --face: "Space Grotesk", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --micro: var(--face);
}

html[data-face="mono"]{ --face: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace }
html[data-face="syne"]{ --face: "Syne", ui-sans-serif, -apple-system, system-ui, sans-serif }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html,body{ height:100% }
html{ background:#06070a; -webkit-text-size-adjust:100%; text-size-adjust:100% }

body{
  min-height:100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face);
  font-weight:300;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  touch-action:manipulation;
  transition: background-color var(--t4) var(--e-soft);
  animation: wake 1.6s var(--e-out) both;
}
@keyframes wake{ from{ opacity:0 } to{ opacity:1 } }

::selection{ background: var(--glowA); color:#fff }

:focus-visible{ outline:1px solid var(--glowA); outline-offset:6px; border-radius:2px }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

.sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ── il campo ────────────────────────────────────────────────────── */
.field{
  position:fixed; inset:0; z-index:0;
  display:block; width:100%; height:100%;
  pointer-events:none;
}

.grain{
  position:fixed; inset:-50%; z-index:1;
  pointer-events:none;
  opacity:.038;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── cursore ─────────────────────────────────────────────────────── */
.cursor{ display:none }

@media (hover:hover) and (pointer:fine){
  body{ cursor:none }
  .cursor{
    display:block;
    position:fixed; top:0; left:0; z-index:120;
    pointer-events:none;
    opacity:0;
    transition: opacity var(--t2) var(--e-out);
  }
  .cursor.is-live{ opacity:1 }

  .cursor__core,
  .cursor__ring{
    position:absolute;
    top:0; left:0;
    border-radius:50%;
    transform-origin:50% 50%;
  }

  .cursor__core{
    width:5px; height:5px;
    margin:-2.5px 0 0 -2.5px;
    background:#fff;
    mix-blend-mode:difference;
    transition: width var(--t2) var(--spring), height var(--t2) var(--spring),
                margin var(--t2) var(--spring), border-radius var(--t2) var(--e-out);
  }

  .cursor__ring{
    width:30px; height:30px;
    margin:-15px 0 0 -15px;
    border:1px solid var(--glowA);
    transition: width var(--t3) var(--spring), height var(--t3) var(--spring),
                margin var(--t3) var(--spring), border-radius var(--t3) var(--e-out),
                border-color var(--t2) var(--e-out), opacity var(--t2) var(--e-out);
  }

  /* sopra qualcosa di toccabile il cerchio si dilata */
  .cursor.is-over .cursor__ring{
    width:52px; height:52px; margin:-26px 0 0 -26px;
    border-color: var(--glow);
  }
  .cursor.is-over .cursor__core{ width:3px; height:3px; margin:-1.5px 0 0 -1.5px }

  /* sopra il testo diventa una lama */
  .cursor.is-text .cursor__ring{
    width:2px; height:38px; margin:-19px 0 0 -1px;
    border-radius:1px;
    border-color:transparent;
    background: var(--glowA);
  }
  .cursor.is-text .cursor__core{ opacity:0 }

  .cursor.is-down .cursor__ring{ width:20px; height:20px; margin:-10px 0 0 -10px }
}

/* ── cornice ─────────────────────────────────────────────────────── */
.chrome{
  position:fixed; z-index:40;
  left:0; right:0;
  display:flex; align-items:center;
  padding-inline: calc(var(--gut) + var(--safe-l)) calc(var(--gut) + var(--safe-r));
  transition: opacity var(--t3) var(--e-out);
  animation: chromeIn 1.4s var(--e-out) .7s both;
}
@keyframes chromeIn{ from{ opacity:0 } to{ opacity:1 } }

.chrome--top{
  top:0;
  height: calc(60px + var(--safe-t));
  padding-top: var(--safe-t);
  justify-content:space-between;
}

.chrome--bottom{
  bottom:0;
  min-height: calc(86px + var(--safe-b));
  padding-bottom: calc(var(--safe-b) + var(--kb));
  justify-content:center;
  transition: opacity var(--t3) var(--e-out),
              padding-bottom var(--t2) var(--e-out);
}

body.is-quiet .chrome{ opacity:.1 }
body.is-quiet .chrome--bottom{ opacity:.5 }
body.is-quiet .chrome:hover{ opacity:1 }

/* il segno: un punto che respira, e la porta delle impostazioni */
.mark{
  width:34px; height:34px; margin-left:-11px;
  display:grid; place-items:center;
  position:relative;
}
.mark i{
  width:7px; height:7px; border-radius:50%;
  background: var(--dim);
  transition: background-color var(--t2) var(--e-out),
              transform var(--t3) var(--spring),
              box-shadow var(--t3) var(--e-out);
}
.mark:hover i{ background: var(--soft) }
.mark.is-opening i{
  background: var(--glow);
  transform: scale(2.1);
  box-shadow:0 0 22px var(--glowA);
}

/* l'archivio: gli strati di quello che hai notato */
.strata{
  min-width:34px; padding:9px 0 9px 14px; margin-right:-2px;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  opacity:0; transform: translateY(-4px);
  pointer-events:none;
  transition: opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out);
}
.strata.is-on{ opacity:1; transform:none; pointer-events:auto }
.strata__stack{ display:flex; flex-direction:column; align-items:flex-end; gap:4px }
.strata__stack b{
  display:block; height:1px;
  background: var(--dim);
  transition: width var(--t3) var(--spring), background-color var(--t2) var(--e-out);
}
.strata:hover .strata__stack b{ background: var(--glow) }
.strata.is-bump .strata__stack b:first-child{ background: var(--glow) }

/* ── viste ───────────────────────────────────────────────────────── */
.stack{ position:relative; z-index:10; height:100dvh }

.view{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform: scale(.97);
  filter: blur(14px);
  pointer-events:none;
  transition:
    opacity var(--t2) var(--e-out),
    transform var(--t3) var(--e-out),
    filter var(--t2) var(--e-out),
    visibility 0s linear var(--t3);
}
.view.is-in{
  opacity:1; visibility:visible;
  transform:none; filter:none;
  pointer-events:auto;
  transition:
    opacity var(--t3) var(--e-out) .07s,
    transform var(--t3) var(--e-out) .07s,
    filter var(--t3) var(--e-out) .07s,
    visibility 0s;
}
.view--archive:not(.is-in),
.view--read:not(.is-in){ transform: scale(.98) translateY(18px) }

.scroll{
  height:100%;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
  display:flex; flex-direction:column;
  padding:
    calc(84px + var(--safe-t)) calc(var(--gut) + var(--safe-r))
    calc(104px + var(--safe-b) + var(--kb)) calc(var(--gut) + var(--safe-l));
  transition: padding-bottom var(--t2) var(--e-out);
}
.scroll::-webkit-scrollbar{ width:0; height:0 }

.view--archive .scroll{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0,
    #000 calc(62px + var(--safe-t)), #000 calc(100% - 86px - var(--safe-b)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0,
    #000 calc(62px + var(--safe-t)), #000 calc(100% - 86px - var(--safe-b)), transparent 100%);
}

/* ── testo ───────────────────────────────────────────────────────── */
.text{
  font-family: var(--face);
  font-weight:300;
  font-size:32px;                /* la ricalcola app.js */
  line-height:1.42;
  letter-spacing:-.012em;
  text-align:center;
  text-wrap:pretty;
  color: var(--ink);
}

.composer{
  position:relative;
  width: var(--measure);
  margin:auto;
  transition: opacity .56s var(--e-out),
              transform .7s var(--e-out),
              filter .56s var(--e-out);
}

/* stato di quiete: un punto che respira */
.ghost{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition: opacity var(--t2) var(--e-out), transform var(--t2) var(--e-out);
}
.ghost::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: var(--glow);
  animation: breathe 5.2s var(--e-io) infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.24; transform: scale(1);   box-shadow:0 0 0 0 transparent }
  50%    { opacity:.85; transform: scale(1.7); box-shadow:0 0 26px var(--glowA) }
}
.composer:focus-within .ghost,
.ghost.is-out{ opacity:0; transform: scale(.6) }

.text--input{
  position:relative; display:block; width:100%;
  min-height:1.42em;
  border:0; outline:0; resize:none; overflow:hidden;
  background:transparent;
  caret-color: var(--glow);
  user-select:text; -webkit-user-select:text;
  animation: riseIn 1.3s var(--e-out) .3s both;
  transition: font-size var(--t2) var(--e-out);
}
@keyframes riseIn{
  from{ opacity:0; transform: translateY(16px); filter: blur(10px) }
  to  { opacity:1; transform:none;              filter:none }
}

.mirror{
  position:absolute; top:0; left:0;
  visibility:hidden; pointer-events:none;
  white-space:pre-wrap; word-break:break-word;
  height:auto; z-index:-1;
}

/* il testo si dissolve nella membrana */
.composer.is-saving{
  opacity:0;
  transform: translateY(-34px) scale(.96);
  filter: blur(16px);
}
.composer.is-nudge{ animation: nudge .5s var(--e-io) }
@keyframes nudge{
  0%,100%{ transform:none }
  20%{ transform: translateX(-7px) }
  52%{ transform: translateX(6px) }
  78%{ transform: translateX(-2px) }
}

/* ── il sigillo: salva, e misura quanto hai scritto ──────────────── */
.seal{
  position:relative;
  width:48px; height:48px;
  display:grid; place-items:center;
  opacity:0; transform: translateY(14px) scale(.9);
  filter: blur(6px);
  pointer-events:none;
  transition: opacity var(--t2) var(--e-out),
              transform var(--t3) var(--spring),
              filter var(--t2) var(--e-out);
}
.seal.is-on{ opacity:1; transform:none; filter:none; pointer-events:auto }
.seal svg{ position:absolute; inset:0; width:48px; height:48px; overflow:visible }
.seal circle{ fill:none; stroke-width:1 }
.seal__track{ stroke: var(--hair) }
.seal__fill{
  stroke: var(--glow);
  stroke-linecap:round;
  stroke-dasharray:131.95;
  stroke-dashoffset:131.95;
  transform: rotate(-90deg);
  transform-origin:50% 50%;
  transition: stroke-dashoffset var(--t3) var(--e-out);
}
.seal__core{
  width:5px; height:5px; border-radius:50%;
  background: var(--dim);
  transition: transform var(--t2) var(--spring), background-color var(--t2) var(--e-out);
}
.seal:hover .seal__core{ background: var(--glow); transform: scale(1.5) }
.seal:active .seal__core{ transform: scale(.7) }
.seal.is-done .seal__core{ transform: scale(3.4); background: var(--glow) }

html[data-view="archive"] .seal,
html[data-view="read"] .seal{ opacity:0; pointer-events:none; transform: translateY(10px) }

/* ── il sussurro: appare una volta sola, poi mai più ─────────────── */
.whisper{
  position:fixed; z-index:35;
  left:50%; translate:-50% 0;
  bottom: calc(28px + var(--safe-b) + var(--kb));
  font-family: var(--micro);
  font-size:9px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color: var(--faint);
  pointer-events:none;
  opacity:0;
  transition: opacity 1.1s var(--e-out), bottom var(--t2) var(--e-out);
  white-space:nowrap;
}
.whisper.is-on{ opacity:1 }

/* ── archivio ────────────────────────────────────────────────────── */
.list{
  width: var(--measure);
  margin:auto;
  display:flex; flex-direction:column; gap:2px;
}

.entry{
  position:relative;
  display:block; width:100%;
  padding:24px 8px;
  text-align:center;
  color: var(--soft);
  transition: color var(--t2) var(--e-out), transform var(--t2) var(--e-out);
}
.entry::before{
  content:""; position:absolute; left:50%; top:12px;
  width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%;
  background: var(--faint);
  transition: background-color var(--t2) var(--e-out), transform var(--t3) var(--spring);
}
.entry:hover{ color: var(--ink) }
.entry:hover::before{ background: var(--glow); transform: scale(1.8) }
.entry:active{ transform: scale(.99) }

.entry__meta{
  display:block;
  font-family: var(--micro);
  font-size:8.5px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color: var(--faint);
  margin:10px 0 12px;
  transition: color var(--t2) var(--e-out);
}
.entry:hover .entry__meta{ color: var(--glow) }

.entry__text{
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
  font-size: clamp(16px, 2vw, 21px);
  line-height:1.5;
  letter-spacing:-.006em;
  text-wrap:pretty;
}

.view--archive.is-in .entry{
  animation: entryIn .9s var(--e-out) both;
  animation-delay: calc(var(--i) * 46ms + 110ms);
}
@keyframes entryIn{
  from{ opacity:0; transform: translateY(24px); filter: blur(9px) }
  to  { opacity:1; transform:none;              filter:none }
}

.empty{
  margin:auto; width:7px; height:7px; border-radius:50%;
  background: var(--faint);
  animation: breathe 5.2s var(--e-io) infinite;
}

/* ── lettura ─────────────────────────────────────────────────────── */
.note{ width: var(--measure); margin:auto; text-align:center }
.note__meta{
  font-family: var(--micro);
  font-size:8.5px; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color: var(--dim);
  margin-bottom:38px;
}
.note__body{
  font-size: clamp(20px, 2.5vw, 29px);
  line-height:1.52;
  white-space:pre-wrap; word-break:break-word;
  user-select:text; -webkit-user-select:text;
}
.note__tools{ margin-top:64px; display:flex; justify-content:center }
.view--read.is-in .note__meta { animation: riseIn .9s var(--e-out) .10s both }
.view--read.is-in .note__body { animation: riseIn 1s   var(--e-out) .18s both }
.view--read.is-in .note__tools{ animation: riseIn 1s   var(--e-out) .34s both }

.hold{
  position:relative; width:40px; height:40px;
  display:grid; place-items:center;
  opacity:.34;
  transition: opacity var(--t2) var(--e-out);
}
.hold:hover{ opacity:1 }
.hold__ring{ width:40px; height:40px; overflow:visible }
.hold__track,.hold__fill{ fill:none; stroke-width:1 }
.hold__track{ stroke: var(--faint) }
.hold__fill{
  stroke:#f09a92;
  stroke-linecap:round;
  stroke-dasharray:116.24;
  stroke-dashoffset:116.24;
  transform: rotate(-90deg);
  transform-origin:50% 50%;
  transition: stroke-dashoffset var(--t2) var(--e-out);
}
.hold.is-holding{ opacity:1 }
.hold.is-holding .hold__fill{
  stroke-dashoffset:0;
  transition: stroke-dashoffset 1s linear;
}

/* ── impostazioni ────────────────────────────────────────────────── */
.panel{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding: calc(var(--gut) + var(--safe-t)) var(--gut) calc(var(--gut) + var(--safe-b));
  opacity:0; visibility:hidden;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background: hsl(var(--h) 18% 3% / 0);
  transition:
    opacity var(--t2) var(--e-out),
    background-color var(--t3) var(--e-out),
    backdrop-filter var(--t3) var(--e-out),
    -webkit-backdrop-filter var(--t3) var(--e-out),
    visibility 0s linear var(--t3);
}
html[data-panel="open"] .panel{
  opacity:1; visibility:visible;
  background: hsl(var(--h) 18% 3% / .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  transition-delay:0s;
}

.panel__inner{
  display:flex; flex-direction:column; gap:26px;
  width:min(340px, 100%);
}

.row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  opacity:0; transform: translateY(16px);
  filter: blur(6px);
}
html[data-panel="open"] .row{
  opacity:1; transform:none; filter:none;
  transition: opacity .7s var(--e-out), transform .8s var(--e-out), filter .7s var(--e-out);
  transition-delay: calc(var(--i) * 55ms + 120ms);
}

.row__key{
  font-family: var(--micro);
  font-size:9px; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color: var(--dim);
}
.row__val{ display:flex; align-items:center; gap:9px }

/* cromia */
.hues button{
  width:15px; height:15px; border-radius:50%;
  position:relative;
  transition: transform var(--t2) var(--spring);
}
.hues button::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: currentColor;
  transform: scale(.52);
  transition: transform var(--t2) var(--spring);
}
.hues button:hover::after{ transform: scale(.72) }
.hues button[aria-checked="true"]{ box-shadow:0 0 0 1px currentColor }
.hues button[aria-checked="true"]::after{ transform: scale(.5) }

/* gradini */
.steps button{
  width:16px; height:16px;
  position:relative;
}
.steps button::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; margin-top:-.5px;
  background: var(--faint);
  transform: scaleX(.55);
  transition: transform var(--t2) var(--spring), background-color var(--t2) var(--e-out);
}
.steps button:hover::after{ transform: scaleX(.85); background: var(--soft) }
.steps button[aria-checked="true"]::after{ transform: scaleX(1); background: var(--glow) }

/* interruttori */
.tog{
  width:34px; height:15px; border-radius:8px;
  border:1px solid var(--hair);
  position:relative;
  transition: border-color var(--t2) var(--e-out), background-color var(--t2) var(--e-out);
}
.tog i{
  position:absolute; top:50%; left:3px;
  width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%;
  background: var(--dim);
  transition: transform var(--t3) var(--spring), background-color var(--t2) var(--e-out);
}
.tog[aria-checked="true"]{ border-color: var(--glowA) }
.tog[aria-checked="true"] i{ transform: translateX(17px); background: var(--glow) }
.tog[data-busy="1"] i{ animation: pending 1s var(--e-io) infinite }
@keyframes pending{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

.act{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; line-height:1;
  color: var(--dim);
  border:1px solid var(--hair);
  transition: color var(--t2) var(--e-out), border-color var(--t2) var(--e-out),
              transform var(--t2) var(--spring);
}
.act:hover{ color: var(--glow); border-color: var(--glowA); transform: translateY(2px) }

.panel__note{
  margin-top:6px;
  font-family: var(--micro);
  font-size:8.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color: var(--faint);
  text-align:center;
  min-height:1.4em;
  transition: color var(--t2) var(--e-out);
}

/* ── schermi stretti ─────────────────────────────────────────────── */
@media (max-width: 640px){
  :root{ --measure: 88vw }
  .chrome--top{ height: calc(54px + var(--safe-t)) }
  .entry{ padding:20px 4px }
  .note__tools{ margin-top:50px }
  .panel__inner{ gap:24px }
}

@media (max-height: 540px){
  .scroll{ padding-block: calc(68px + var(--safe-t)) calc(88px + var(--safe-b) + var(--kb)) }
  .panel__inner{ gap:16px }
}

/* ── movimento ridotto ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.14s !important;
  }
  .ghost::before, .empty{ animation:none; opacity:.5 }
  .composer.is-saving{ transform:none; filter:none }
}