/* ============================================================
   per la mia cricetina — foglio di stile
   Tutto è pensato come un foglio di carta: niente ombre, niente
   gradienti "digitali", solo inchiostro e pigmento su carta.
   ============================================================ */

:root {
  --paper:        #F5EFE2;
  --paper-deep:   #EFE7D6;
  --ink:          #8A3B3F;   /* rosso mattone della penna */
  --ink-soft:     #A9636A;
  --ink-faint:    #B98D8C;

  --t-write:      1400ms;
  --ease-hand:    cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

body {
  position: fixed;
  inset: 0;
  font-family: "Caveat", "Segoe Script", cursive;
  color: var(--ink);
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* ── strati canvas ──────────────────────────────────────── */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.layer--bloom {
  z-index: 1;
  opacity: 1;
}

/* nell'atto 3 la ghirlanda resta, ma assorbita dalla carta */
/* solo dissolvenza: ridimensionare una tela a schermo intero per
   3,6s costava un frame su dieci proprio mentre compare la dedica,
   ed è il momento che deve essere il più liscio di tutti          */
body.act-love .layer--bloom {
  opacity: .16;
  transition: opacity 2400ms var(--ease-hand);
}

/* niente mix-blend qui: i petali cadono su una ghirlanda al 16%,
   cioè su carta quasi bianca. Sopra uno sfondo a 0.97 il multiply
   e la fusione normale differiscono di meno del 3%, e questo
   strato in meno vale metà dei frame nell'atto 3.               */
.layer--petals {
  z-index: 2;
  opacity: 0;
  transition: opacity 1200ms linear;
  pointer-events: none;
}

/* solo per la durata del cambio d'atto */
body.pre-love .layer--bloom,
body.pre-love .layer--petals { will-change: opacity, transform; }
body.act-love .layer--petals { opacity: 1; }

/* ── atti ───────────────────────────────────────────────── */
.act {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(6vh, env(safe-area-inset-top)) 7vw max(7vh, env(safe-area-inset-bottom));
  text-align: center;
}

/* ── atto 1 : il regalo ─────────────────────────────────── */
.act--gift {
  cursor: pointer;
  transition: opacity 700ms linear;
  /* la tela ha aria interna sopra: compenso spingendo la colonna in alto */
  padding-bottom: max(14vh, env(safe-area-inset-bottom));
}
.act--gift:focus-visible { outline: 2px dashed var(--ink-faint); outline-offset: -14px; }

body.act-opening .act--gift,
body.act-bloom   .act--gift,
body.act-love    .act--gift { opacity: 0; pointer-events: none; }

body.act-opening .act--gift .hand,
body.act-bloom   .act--gift .hand { opacity: 0; transition: opacity 420ms linear; }

.gift {
  width: min(80vw, 58vh, 520px);
  aspect-ratio: 1 / 1;
  margin-bottom: -4vh;   /* la tela ha margine interno per il coperchio che vola */
  animation: breathe 5200ms ease-in-out 2600ms infinite;
  transform-origin: 50% 78%;
}
.gift__canvas {
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: multiply;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0)      rotate(0deg);     }
  35%      { transform: translateY(-1.4%)  rotate(-.5deg);   }
  70%      { transform: translateY(.5%)    rotate(.35deg);   }
}

/* ── scrittura a mano ───────────────────────────────────── */
.hand {
  margin: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .005em;
  transform: skewX(-5deg);
  color: var(--ink);
  will-change: opacity;
}

.hand .w {
  position: relative;
  display: inline-block;
  --w: 0;
}
.hand .t {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg,
      #000 calc(var(--w) * 1% - 2.5%), rgba(0,0,0,0) calc(var(--w) * 1% + 4.5%));
          mask-image: linear-gradient(90deg,
      #000 calc(var(--w) * 1% - 2.5%), rgba(0,0,0,0) calc(var(--w) * 1% + 4.5%));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hand .nib {
  position: absolute;
  top: 62%;
  left: calc(var(--w) * 1%);
  width: .16em;
  height: .16em;
  margin-left: -.08em;
  border-radius: 50%;
  background: var(--ink);
  opacity: var(--nib, 0);
  pointer-events: none;
}

.hand--title {
  font-size: clamp(30px, 8.4vw, 62px);
  font-weight: 600;
}
.hand--whisper {
  margin-top: clamp(8px, 1.8vh, 18px);
  font-family: "Nothing You Could Do", "Caveat", cursive;
  font-size: clamp(14px, 3.6vw, 21px);
  color: var(--ink-faint);
  transform: skewX(-3deg);
  animation: pulse 3400ms ease-in-out 3200ms infinite;
}
@keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* ── atto 3 : la dedica ─────────────────────────────────── */
.act--love {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  gap: clamp(2px, .8vh, 12px);
}
body.act-love .act--love { opacity: 1; }

.hand--line {
  font-size: clamp(34px, 10vw, 78px);
  font-weight: 500;
  color: var(--ink);
  text-shadow: 0 0 26px rgba(245,239,226,.95), 0 0 60px rgba(245,239,226,.85);
}
.hand--big {
  font-size: clamp(52px, 17vw, 132px);
  font-weight: 700;
  margin-top: clamp(-2px, .4vh, 10px);
}
body.act-love .hand--big { animation: heart 2600ms ease-in-out 3800ms infinite; }
@keyframes heart {
  0%, 100% { transform: skewX(-5deg) scale(1);    }
  12%      { transform: skewX(-5deg) scale(1.035);}
  24%      { transform: skewX(-5deg) scale(1);    }
  36%      { transform: skewX(-5deg) scale(1.02); }
  48%      { transform: skewX(-5deg) scale(1);    }
}

/* ── trattamento carta ──────────────────────────────────── */
/* UN SOLO strato di trattamento, non tre.
   Carta, grana e vignetta erano tre superfici a schermo intero in
   `multiply`: a ogni ridisegno dei petali il compositore doveva
   rifondere tutta la pila, e su desktop se ne andava metà dei
   frame. Il multiply è associativo, quindi fonderle fra loro con
   `background-blend-mode` e applicare un solo `mix-blend-mode`
   dà esattamente lo stesso pixel a un quarto del costo.
   L'opacità di ciascuna è cotta dentro l'asset.                 */
.paper-tex {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-color: transparent;
  background-image:
    radial-gradient(120% 92% at 50% 46%, rgba(255,255,255,0) 52%, rgba(190,176,150,.30) 100%),
    linear-gradient(180deg, rgba(196,182,155,.10) 0%, rgba(255,255,255,0) 16%),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.094'/%3E%3C/svg%3E"),
    url("assets/paper.jpg");
  background-blend-mode: multiply, multiply, multiply, normal;
  background-size: cover, cover, 220px 220px, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: center, center, top left, center;
}

/* ── varie ──────────────────────────────────────────────── */
.noscript {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 9vw, 70px);
  background: var(--paper);
}

body.is-loading .act { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .gift { animation: none; }
  .hand--whisper { animation: none; opacity: .8; }
  body.act-love .hand--big { animation: none; }
}