/* ============================================================
   RAZ (راز) — token sheet
   The Living Case File · Modern Miniature Noir
   ============================================================ */

:root {
  /* base */
  --ink-night: #070D1F;
  --midnight-lapis: #0A1128;
  --dossier-blue: #13204A;
  --elevated-lapis: #1C2E66;
  --paper-white: #E8ECF8;
  --faded-ink: #8E9BC4;
  --ruled-line: #3D4C7E;
  /* signature */
  --amber: #F2B441;
  --lamp-core: #FFD98A;
  --wax-red: #B33A3A;
  /* tone accent (swapped by [data-tone]) */
  --accent: #F2B441;
  --radius: 12px;
  /* easing */
  --ease-paper: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-stamp: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-lamp: cubic-bezier(0.4, 0, 0.2, 1);
  /* depth: desk → file → held paper */
  --shadow-file: 0 2px 10px rgba(4, 7, 18, 0.55);
  --shadow-held: 0 8px 28px rgba(4, 7, 18, 0.65), 0 4px 14px rgba(242, 180, 65, 0.10);
  --font-fa: 'Vazirmatn', sans-serif;
  --font-en: 'IBM Plex Sans', sans-serif;
  --font-label: 'IBM Plex Mono', monospace;
}

[data-tone="noir"]     { --accent: #F2B441; --radius: 12px; }
[data-tone="cozy"]     { --accent: #9CC49A; --radius: 16px; }
[data-tone="comedy"]   { --accent: #F2705B; --radius: 12px; --ease-paper: cubic-bezier(0.34, 1.56, 0.64, 1); }
[data-tone="thriller"] { --accent: #5BC8F2; --radius: 8px;  }

/* ---------- base canvas ---------- */
.raz-root {
  width: 100%; height: 100%;
  background: var(--ink-night);
  color: var(--paper-white);
  font-size: 16px; line-height: 1.7;
  overflow: hidden; position: relative;
  user-select: none; -webkit-user-select: none;
}
.raz-root[dir="rtl"] { font-family: var(--font-fa); }
.raz-root[dir="ltr"] { font-family: var(--font-en); line-height: 1.55; }

.t-label {
  font-family: var(--font-label);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faded-ink);
}
.t-caption { font-size: 12px; font-weight: 500; color: var(--faded-ink); }
/* Persian must never letterspace — joined script breaks apart */
.raz-root[dir="rtl"] .t-label { letter-spacing: 0; font-family: var(--font-fa); font-size: 11px; }
.t-narr { font-style: italic; color: var(--faded-ink); text-align: center; font-size: 14px; }

/* ---------- paper grain (2.5% noise) ---------- */
.paper { position: relative; }
.paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
/* noir film grain overlay, 4% */
.tone-grain { position: absolute; inset: 0; pointer-events: none; z-index: 60; opacity: 0; }
[data-tone="noir"] .tone-grain {
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 33%{transform:translate(-8px,5px)} 66%{transform:translate(6px,-7px)} 100%{transform:translate(0,0)} }

/* ---------- surfaces ---------- */
.card-file {
  background: var(--dossier-blue);
  border: 1px solid var(--ruled-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-file);
}
.card-held {
  background: var(--midnight-lapis);
  border: 1px solid var(--ruled-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-held);
}

/* halftone shadow under portraits / stamps */
.halftone {
  background-image: radial-gradient(circle, rgba(4,7,18,0.9) 1px, transparent 1.2px);
  background-size: 5px 5px;
}

/* ruled transcript lines */
.ruled {
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 26px,
    rgba(61, 76, 126, 0.35) 26px, rgba(61, 76, 126, 0.35) 27px);
}

/* ---------- stamp component ---------- */
.stamp {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 2px 12px;
  transform: rotate(-3deg);
  position: relative;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0.55'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-size: 90px 40px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0.55'/%3E%3C/filter%3E%3Crect width='90' height='40' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-size: 90px 40px;
}
.raz-root[dir="rtl"] .stamp { font-family: var(--font-fa); letter-spacing: 0; font-weight: 700; }
.stamp.red   { color: var(--wax-red); }
.stamp.amber { color: var(--amber); }
.stamp.grey  { color: var(--faded-ink); }
.stamp-in { }
[data-entering] .stamp-in { animation: stampIn 280ms var(--ease-stamp) both; }
@keyframes stampIn {
  0%   { transform: rotate(-3deg) scale(2.4); opacity: 0; }
  60%  { transform: rotate(-3deg) scale(0.96); opacity: 1; }
  74%  { transform: rotate(-3deg) scale(0.96); }
  100% { transform: rotate(-3deg) scale(1); }
}

/* ---------- redaction bars ---------- */
.redact { position: relative; display: inline; }
.redact::after {
  content: ""; position: absolute; inset: 1px -2px;
  background: #0B0F1E; border-radius: 2px;
  transition: transform 600ms var(--ease-lamp), opacity 600ms var(--ease-lamp);
  transform-origin: left center;
}
.raz-root[dir="rtl"] .redact::after { transform-origin: right center; }
.redact.lifted::after { transform: scaleX(0); opacity: 0; }

/* ---------- paper realism ---------- */
.stitch { position: relative; }
.stitch::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 1;
  border: 1px dashed rgba(201, 181, 142, 0.32);
  border-radius: max(4px, calc(var(--radius) - 5px));
}
.corner-wear {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(60px 40px at 0% 0%, rgba(4,7,18,0.4), transparent 70%),
    radial-gradient(80px 50px at 100% 100%, rgba(4,7,18,0.45), transparent 70%),
    radial-gradient(40px 30px at 100% 0%, rgba(4,7,18,0.25), transparent 70%);
}
.tape {
  position: absolute; width: 54px; height: 16px; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(237,230,212,0.20), rgba(237,230,212,0.11));
  box-shadow: 0 1px 3px rgba(4,7,18,0.35);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 100%, 3% 100%, 0 22%);
}
.torn-bottom {
  position: absolute; left: 6px; right: 6px; bottom: -7px; height: 8px; pointer-events: none;
  background: var(--midnight-lapis); opacity: 0.9;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 96% 100%, 92% 35%, 88% 90%, 84% 30%, 80% 100%, 76% 40%, 72% 95%, 68% 30%, 64% 85%, 60% 35%, 56% 100%, 52% 30%, 48% 90%, 44% 40%, 40% 100%, 36% 30%, 32% 85%, 28% 35%, 24% 95%, 20% 30%, 16% 100%, 12% 40%, 8% 85%, 4% 30%, 0 90%);
}
.typed-head {
  font-family: var(--font-label); font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--faded-ink); text-transform: uppercase;
  border-block: 1px solid var(--ruled-line); padding: 5px 0;
  display: flex; flex-direction: column; gap: 3px;
}
.raz-root[dir="rtl"] .typed-head { letter-spacing: 0; font-family: var(--font-fa); font-size: 10px; }

/* ---------- hero motion pack ---------- */
/* file breathing under the lamp */
.file-breath { animation: fileBreath 7s ease-in-out infinite; }
@keyframes fileBreath {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 10px 18px rgba(4,7,18,0.55)); }
  50%      { transform: translateY(-3px); filter: drop-shadow(0 16px 24px rgba(4,7,18,0.65)); }
}
/* wax seal glint sweep every ~6s */
.seal-glint { position: relative; overflow: hidden; }
.seal-glint::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 26%;
  left: -40%; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,235,200,0.55), transparent);
  animation: sealGlint 6s var(--ease-lamp) infinite;
}
@keyframes sealGlint { 0%, 86% { left: -45%; } 97%, 100% { left: 130%; } }
/* lamp slow sway */
.lamp-sway { animation: lampSway 13s ease-in-out infinite; }
@keyframes lampSway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}
/* rain streaks inside the scene window */
.rain-pane {
  background-image: repeating-linear-gradient(168deg,
    transparent 0 7px, rgba(91,200,242,0.20) 7px 8px, transparent 8px 16px);
  background-size: 100% 26px;
  animation: rainFall 0.9s linear infinite;
}
@keyframes rainFall { from { background-position: 0 0; } to { background-position: -4px 26px; } }

/* ---------- lamp-click splash ---------- */
.splash-cone { opacity: 0; animation: splashCone 700ms var(--ease-lamp) 350ms forwards; transform-origin: top; }
@keyframes splashCone { from { opacity: 0; transform: scaleY(0.3); } to { opacity: 1; transform: scaleY(1); } }
.splash-item { opacity: 0; animation: splashItem 500ms var(--ease-lamp) 700ms forwards; }
@keyframes splashItem { from { opacity: 0; filter: brightness(0.2); } to { opacity: 1; filter: brightness(1); } }
.splash-out { animation: splashOut 350ms var(--ease-lamp) forwards; }
@keyframes splashOut { to { opacity: 0; } }

/* ---------- splash: detective's office door ---------- */
/* pebbled frosted glass */
.frosted-glass::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,236,248,0.05) 0 2px, transparent 2.5px),
    radial-gradient(circle at 60% 70%, rgba(232,236,248,0.05) 0 2px, transparent 2.5px),
    radial-gradient(circle at 80% 20%, rgba(232,236,248,0.04) 0 2px, transparent 2.5px);
  background-size: 9px 9px, 11px 11px, 7px 7px;
  filter: blur(0.4px);
}
/* the silhouette crosses behind the glass once, then settles toward the latch */
.door-shadow {
  left: -34%;
  animation: doorShadowCross 1150ms var(--ease-paper) forwards;
}
@keyframes doorShadowCross {
  0%   { left: -34%; opacity: 0; }
  18%  { opacity: 0.85; }
  70%  { left: 70%; opacity: 0.9; }
  100% { left: 40%; opacity: 0.75; }
}
.raz-root[dir="rtl"] .door-shadow { animation-name: doorShadowCrossRTL; }
@keyframes doorShadowCrossRTL {
  0%   { left: 100%; opacity: 0; }
  18%  { opacity: 0.85; }
  70%  { left: -4%; opacity: 0.9; }
  100% { left: 26%; opacity: 0.75; }
}
.raz-root[data-rm="1"] .splash-door { transition: opacity 150ms !important; transform: none !important; }
.raz-root[data-rm="1"] .door-shadow { animation: none !important; opacity: 0 !important; }

/* ---------- archive drawer cabinet ---------- */
.drawer-face {
  width: 100%; box-sizing: border-box; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #1A2750, #101B40 60%, #0D1635);
  border: 1px solid var(--ruled-line);
  border-bottom-color: #07101F;
  border-radius: 8px; padding: 12px 14px; min-height: 56px;
  color: var(--paper-white);
  box-shadow: inset 0 1px 0 rgba(232,236,248,0.06), 0 3px 8px rgba(4,7,18,0.5);
  transition: transform 250ms var(--ease-paper);
}
.drawer-face:active { transform: scale(0.99); }
.drawer-face .handle {
  width: 52px; height: 11px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(180deg, #E0CB9C, #A98C55 55%, #7E6638);
  box-shadow: 0 2px 4px rgba(4,7,18,0.6), inset 0 1px 1px rgba(255,245,220,0.5);
  position: relative;
}
.drawer-face .handle::before {
  content: ""; position: absolute; inset: 3px 7px; border-radius: 4px;
  background: rgba(13, 22, 53, 0.35);
}
.drawer-body { overflow: hidden; transition: max-height 480ms var(--ease-paper), opacity 350ms var(--ease-lamp); }

/* ---------- lamp cone ---------- */
.lamp-cone {
  position: absolute; pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 0%,
    rgba(255, 217, 138, 0.16) 0%,
    rgba(242, 180, 65, 0.07) 40%,
    transparent 72%);
}
.lamp-flicker { animation: lampFlicker 1.1s steps(1) infinite; }
.lamp-anxious { animation: lampFlicker 2.6s steps(1) infinite; }
.lamp-breaking { animation: lampFlicker 0.8s steps(1) infinite; }
@keyframes lampFlicker {
  0%, 100% { opacity: 1; } 12% { opacity: 0.55; } 17% { opacity: 1; }
  46% { opacity: 0.7; } 51% { opacity: 1; } 78% { opacity: 0.85; } 83% { opacity: 1; }
}

/* ---------- ambient dust ---------- */
.dust { position: absolute; border-radius: 50%; background: var(--lamp-core); pointer-events: none; }
@keyframes dustDrift {
  0%   { transform: translate(0, -10px); opacity: 0; }
  20%  { opacity: 0.5; }
  80%  { opacity: 0.25; }
  100% { transform: translate(14px, 120px); opacity: 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700;
  border-radius: var(--radius);
  min-height: 52px; padding: 0 20px;
  transition: transform 140ms var(--ease-paper), box-shadow 140ms var(--ease-paper), opacity 200ms;
}
.btn:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(4,7,18,0.6); }
.btn-amber { background: var(--accent); color: #0A1128; box-shadow: 0 4px 16px rgba(4,7,18,0.5), 0 2px 10px color-mix(in oklab, var(--accent) 30%, transparent); }
.btn-quiet { background: transparent; color: var(--faded-ink); border: 1px solid var(--ruled-line); }
.btn:focus-visible, .focusable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- paper enter motion (gated: base style is the visible end-state) ---------- */
[data-entering] .paper-in { animation: paperIn 360ms var(--ease-paper) both; }
@keyframes paperIn {
  from { transform: translateY(18px) rotate(0.4deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}
[data-entering] .sheet-up { animation: sheetUp 320ms var(--ease-paper) both; }
/* membership card sliding into the file (base = settled in place) */
[data-entering] .card-slide-in { animation: cardSlideIn 700ms var(--ease-paper) 250ms both; }
@keyframes cardSlideIn { from { transform: translateY(140px) rotate(4deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* light sweep reveal */
[data-entering] .light-in { animation: lightIn 600ms var(--ease-lamp) both; }
@keyframes lightIn {
  from { opacity: 0; filter: brightness(0.3) saturate(0.4); }
  to   { opacity: 1; filter: brightness(1) saturate(1); }
}

/* photo develop (chemical bath) */
[data-entering] .develop { animation: develop 900ms var(--ease-lamp) both; }
@keyframes develop {
  0%   { filter: saturate(0) brightness(0.45) contrast(1.3); clip-path: inset(100% 0 0 0); }
  40%  { clip-path: inset(0 0 0 0); }
  100% { filter: saturate(1) brightness(1) contrast(1); clip-path: inset(0 0 0 0); }
}

/* ---------- matchsticks ---------- */
.match { position: relative; width: 14px; height: 44px; display: flex; flex-direction: column; align-items: center; }
.match .head {
  width: 9px; height: 12px; border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 30%, var(--lamp-core), var(--accent) 65%, #B07820);
  transition: background 400ms, transform 400ms var(--ease-paper), filter 400ms;
}
.match .stick { width: 3.5px; flex: 1; background: #C9B58E; border-radius: 2px; margin-top: 1px; transition: background 400ms; }
.match.warn .head { background: radial-gradient(circle at 50% 30%, #FFD98A, var(--wax-red) 70%, #6E2424); filter: drop-shadow(0 0 4px rgba(179,58,58,0.6)); }
.match.burnt .head { background: #1A2138; transform: translateY(2px) scaleY(0.7) rotate(8deg); filter: none; }
.match.burnt .stick { background: #2A3252; }
.match.burning .head { animation: matchFlare 260ms var(--ease-stamp) both; }
@keyframes matchFlare {
  0%  { transform: scale(1); filter: drop-shadow(0 0 2px var(--lamp-core)); }
  35% { transform: scale(1.9); filter: drop-shadow(0 0 10px var(--lamp-core)) brightness(1.5); }
  100%{ transform: translateY(2px) scaleY(0.7) rotate(8deg); filter: none; }
}
.smoke {
  position: absolute; top: -6px; left: 50%; width: 3px; height: 16px;
  background: linear-gradient(to top, rgba(142,155,196,0.5), transparent);
  border-radius: 3px; filter: blur(1.5px);
  animation: smokeRise 500ms ease-out both;
}
@keyframes smokeRise {
  from { transform: translate(-50%, 0) scaleY(0.3); opacity: 0.8; }
  to   { transform: translate(-40%, -18px) scaleY(1.2); opacity: 0; }
}
.ember { animation: emberPulse 1.6s ease-in-out infinite; }
@keyframes emberPulse { 0%,100% { box-shadow: 0 0 3px 1px rgba(242,112,91,0.4);} 50% { box-shadow: 0 0 8px 3px rgba(242,112,91,0.8);} }

/* ---------- streak flame ---------- */
.flame { position: relative; width: 16px; height: 20px; }
.flame i { position: absolute; bottom: 0; left: 50%; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform: translateX(-50%); }
.flame .f1 { width: 14px; height: 18px; background: var(--amber); opacity: 0.85; animation: flameIdle 2.6s ease-in-out infinite; }
.flame .f2 { width: 9px; height: 12px; background: var(--lamp-core); animation: flameIdle 2.6s ease-in-out -0.6s infinite; }
.flame .f3 { width: 4px; height: 6px; background: #FFF3D6; animation: flameIdle 2.6s ease-in-out -1.2s infinite; }
@keyframes flameIdle {
  0%, 100% { transform: translateX(-50%) scaleY(1); }
  50%      { transform: translateX(-52%) scaleY(1.12) rotate(-2deg); }
}
.flame.flare { animation: flameFlare 700ms var(--ease-paper); }
@keyframes flameFlare { 0%{transform:scale(1)} 35%{transform:scale(1.6)} 100%{transform:scale(1)} }

/* ---------- chat bubbles ---------- */
.bub { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: 15px; position: relative; }
.bub-player { background: var(--dossier-blue); border: 1px solid var(--ruled-line); border-bottom-inline-end-radius: 4px; align-self: flex-end; }
.bub-suspect { background: #101A3C; border: 1px solid var(--ruled-line); border-bottom-inline-start-radius: 4px; align-self: flex-start; }

/* gaze line: portrait → transcript */
.gaze-line {
  width: 1.5px; background: linear-gradient(to bottom, var(--accent), transparent);
  transform-origin: top;
}
[data-entering] .gaze-line { animation: gazeDraw 350ms var(--ease-lamp) both; }
@keyframes gazeDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* suspect portrait idles */
@keyframes idleCalm   { 0%,100% { transform: translateY(0);} 50% { transform: translateY(1px);} }
@keyframes idleNervous{ 0%,86%,100% { transform: translateX(0);} 88% { transform: translateX(-1.5px);} 92% { transform: translateX(1.5px);} 96% { transform: translateX(-1px);} }
.idle-calm    { animation: idleCalm 4s ease-in-out infinite; }
.idle-nervous { animation: idleNervous 3.2s linear infinite; }
.flinch { animation: flinch 420ms var(--ease-stamp); }
@keyframes flinch { 0%{transform:rotate(0)} 30%{transform:rotate(2deg) translateX(2px)} 100%{transform:rotate(0)} }

/* eye blink */
@keyframes blink { 0%, 96.5%, 100% { transform: scaleY(1); } 97.5%, 98.5% { transform: scaleY(0.08); } }

/* ---------- thread & pin (confront) ---------- */
.thread-draw { stroke-dasharray: 400; }
[data-entering] .thread-draw { animation: threadDraw 450ms var(--ease-lamp) both; }
@keyframes threadDraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.scrap {
  background: #EDE6D4; color: #1A2138;
  padding: 8px 12px; font-size: 13px; line-height: 1.5;
  clip-path: polygon(0 6%, 4% 0, 12% 5%, 22% 0, 33% 6%, 45% 1%, 56% 6%, 68% 0, 79% 5%, 90% 1%, 100% 7%, 99% 90%, 93% 100%, 80% 94%, 66% 100%, 52% 95%, 38% 100%, 24% 95%, 12% 100%, 2% 94%);
  transform: rotate(-2deg);
  box-shadow: 0 6px 18px rgba(4,7,18,0.7);
}

/* ---------- wax seal ---------- */
.seal {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #D05555, var(--wax-red) 55%, #7E2626);
  box-shadow: inset 0 -3px 8px rgba(0,0,0,0.4), 0 6px 18px rgba(179,58,58,0.35);
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer; border: none;
}
.seal::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.seal:active { transform: scale(0.96); }

/* ---------- toast / telegram slip ---------- */
.telegram {
  background: #EDE6D4; color: #1A2138;
  font-size: 13px; padding: 10px 14px;
  border-inline-start: 4px solid var(--wax-red);
  transform: rotate(-1deg);
  box-shadow: 0 8px 22px rgba(4,7,18,0.7);
  animation: slipIn 320ms var(--ease-paper) both;
}
@keyframes slipIn { from { transform: translateY(-30px) rotate(-3deg); opacity: 0; } to { transform: translateY(0) rotate(-1deg); opacity: 1; } }

/* locked shake */
.lock-shake { animation: lockShake 360ms ease-in-out; }
@keyframes lockShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 50%{transform:translateX(2px)} 75%{transform:translateX(-2px)} }

/* fingerprint loader */
.fingerprint { animation: fpSpin 1.2s linear infinite; }
@keyframes fpSpin { to { transform: rotate(360deg); } }

/* tab underline ink-draw */
.ink-under { transform-origin: inline-start; animation: inkDraw 220ms var(--ease-lamp) both; }
@keyframes inkDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* confetti scrap */
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(260deg); opacity: 0; }
}

/* RTL/LTR mirror flip on language switch */
.mirror-flip { animation: mirrorFlip 300ms var(--ease-lamp); }
@keyframes mirrorFlip { 0% { transform: perspective(900px) rotateY(0); } 50% { transform: perspective(900px) rotateY(90deg); } 100% { transform: perspective(900px) rotateY(0); } }

/* typewriter caret */
.tw-caret::after { content: "▍"; color: var(--amber); animation: caretBlink 0.8s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* scrollbars hidden inside phone */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }

/* ---------- reduced motion ---------- */
.raz-root[data-rm="1"] *,
.raz-root[data-rm="1"] *::before,
.raz-root[data-rm="1"] *::after {
  animation-duration: 0.12s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.12s !important;
}
.raz-root[data-rm="1"] .dust,
.raz-root[data-rm="1"] .tone-grain,
.raz-root[data-rm="1"] .idle-calm,
.raz-root[data-rm="1"] .idle-nervous { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dust, .tone-grain, .idle-calm, .idle-nervous { animation: none !important; }
}