/* Aged paper + charcoal/gold sketch texture backdrop */

.app-shell {
  position: relative;
}

.app-shell > header::after {
  content: none;
}

/* Ambient frosted panels — blur aged paper behind the UI */
.app-shell .bg-frost {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 255px 12px 18px 8px / 10px 6px 14px 255px;
  border: 1px solid color-mix(in oklch, var(--gold) 18%, var(--glass-border) 82%);
  background: var(--glass-bg-ambient);
  -webkit-backdrop-filter: blur(var(--glass-blur-ambient)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-ambient)) saturate(var(--glass-saturate));
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--gold-soft) 55%, transparent) inset,
    0 24px 64px color-mix(in oklch, var(--ink) 6%, transparent);
}
.app-shell .bg-frost--a {
  width: min(42vw, 520px);
  height: min(38vh, 420px);
  top: 12%;
  left: -4%;
  transform: rotate(-4deg);
  opacity: 0.92;
}
.app-shell .bg-frost--b {
  width: min(36vw, 440px);
  height: min(32vh, 360px);
  top: 48%;
  right: -6%;
  transform: rotate(5deg);
  opacity: 0.88;
}
.app-shell .bg-frost--c {
  width: min(28vw, 340px);
  height: min(22vh, 240px);
  bottom: 18%;
  left: 28%;
  transform: rotate(-2deg);
  opacity: 0.75;
}
.session-body .app-shell .bg-frost {
  background: color-mix(in oklch, var(--runway) 35%, transparent);
  border-color: var(--glass-dark-border);
  opacity: 0.55;
}

/* Charcoal + gold pencil scribbles (full canvas) */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1000' viewBox='0 0 1400 1000'%3E%3Cg fill='none' stroke='%232a2520' stroke-width='1.4' stroke-linecap='round' opacity='0.9'%3E%3Cpath d='M60 100 Q120 70 200 115 T360 95'/%3E%3Cpath d='M900 700 Q960 660 1050 710 T1320 680'/%3E%3Cpath d='M620 30 Q680 75 760 45 T900 65'/%3E%3Cpath d='M160 500 Q220 465 290 515'/%3E%3Cpath d='M480 760 Q540 720 630 775'/%3E%3Cpath d='M1100 200 Q1140 240 1180 210'/%3E%3Ccircle cx='1040' cy='160' r='48' stroke-width='1'/%3E%3Cpath d='M30 380 L105 400 L78 465 Z'/%3E%3Cpath d='M200 820 Q260 790 320 830'/%3E%3C/g%3E%3Cg fill='none' stroke='%23383028' stroke-width='0.7' opacity='0.55'%3E%3Cpath d='M280 180 L318 218 M298 160 L338 198'/%3E%3Cpath d='M820 400 L858 438 M840 380 L878 418'/%3E%3Cpath d='M530 330 Q560 352 592 338'/%3E%3Cpath d='M700 600 L730 640 M715 585 L745 625'/%3E%3C/g%3E%3Cg fill='none' stroke='%23a88850' stroke-width='0.9' stroke-linecap='round' opacity='0.35'%3E%3Cpath d='M400 250 Q430 270 460 255'/%3E%3Cpath d='M1000 450 Q1030 470 1060 455'/%3E%3Cpath d='M150 650 Q180 670 210 655'/%3E%3Cpath d='M1200 120 L1230 150 M1215 105 L1245 135'/%3E%3C/g%3E%3Cg fill='%232a2520' opacity='0.05'%3E%3Cellipse cx='180' cy='720' rx='130' ry='85'/%3E%3Cellipse cx='1000' cy='300' rx='100' ry='65'/%3E%3C/g%3E%3Cg fill='%23c9a85a' opacity='0.04'%3E%3Cellipse cx='650' cy='500' rx='80' ry='55'/%3E%3Cellipse cx='300' cy='200' rx='50' ry='35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* Extra graphite smudge + gold dust texture (not a ruled grid) */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'%3E%3Cg fill='%232a2520' opacity='0.06'%3E%3Cellipse cx='120' cy='180' rx='90' ry='60'/%3E%3Cellipse cx='680' cy='420' rx='110' ry='70'/%3E%3Cellipse cx='400' cy='500' rx='70' ry='45'/%3E%3C/g%3E%3Cg fill='none' stroke='%232a2520' stroke-width='0.8' opacity='0.25' stroke-linecap='round'%3E%3Cpath d='M50 300 Q90 280 130 305'/%3E%3Cpath d='M650 150 Q690 130 730 155'/%3E%3Cpath d='M350 80 Q380 100 410 85'/%3E%3C/g%3E%3Cg fill='%23c9a85a' opacity='0.08'%3E%3Ccircle cx='200' cy='400' r='1.5'/%3E%3Ccircle cx='550' cy='250' r='1.2'/%3E%3Ccircle cx='720' cy='180' r='1'/%3E%3Ccircle cx='100' cy='520' r='1.3'/%3E%3Ccircle cx='480' cy='350' r='0.9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

@media (prefers-reduced-motion: no-preference) {
  html::before {
    animation: sketch-drift 90s ease-in-out infinite alternate;
  }
  @keyframes sketch-drift {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(-1.5%, 1%) rotate(0.3deg); }
  }
}

/* ── Light aged paper (atelier steps) ── */
.app-shell::before {
  content: "";
  position: fixed;
  inset: -6%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background:
    /* yellowed antique wash */
    radial-gradient(ellipse 140% 100% at 42% 38%, oklch(95% 0.008 88), oklch(92% 0.012 85) 45%, oklch(88% 0.016 82) 100%),
    /* torn sheets, stains, foxing, grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cfilter id='grain' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='tear' x='-12%25' y='-12%25' width='124%25' height='124%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='4' seed='17'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='22'/%3E%3C/filter%3E%3ClinearGradient id='old' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f4efe0'/%3E%3Cstop offset='55%25' stop-color='%23ebe3d0'/%3E%3Cstop offset='100%25' stop-color='%23dfd4bc'/%3E%3C/linearGradient%3E%3ClinearGradient id='old2' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f0e9d8'/%3E%3Cstop offset='100%25' stop-color='%23e5dcc8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='0.72' filter='url(%23tear)'%3E%3Cpath d='M-40 140 L18 112 L64 128 L118 104 L172 122 L228 98 L284 118 L340 92 L396 114 L450 86 L492 132 L508 192 L500 258 L514 322 L498 388 L510 448 L488 492 L432 478 L376 494 L320 472 L264 488 L208 468 L152 486 L96 466 L40 488 L24 428 L38 364 L28 300 L42 236 L26 172 Z' fill='url(%23old)'/%3E%3Cpath d='M1040 560 L1098 536 L1162 552 L1226 528 L1290 546 L1354 524 L1418 542 L1482 518 L1532 558 L1546 622 L1538 688 L1552 754 L1536 820 L1544 884 L1522 928 L1466 914 L1410 928 L1354 908 L1298 924 L1242 904 L1186 920 L1130 900 L1074 918 L1018 896 L1062 560 Z' fill='url(%23old2)'/%3E%3Cpath d='M660 -60 L718 8 L784 -14 L848 18 L912 -6 L976 24 L1040 -2 L1104 28 L1152 68 L1166 132 L1154 198 L1168 264 L1152 330 L1160 396 L1116 428 L1060 414 L1004 430 L948 410 L892 428 L836 408 L780 430 L724 408 L668 430 L656 370 L670 306 L658 242 L672 178 L658 114 Z' fill='%23f2ead8'/%3E%3C/g%3E%3Cg opacity='0.35' fill='%238b7355'%3E%3Cellipse cx='220' cy='340' rx='3' ry='2.5'/%3E%3Cellipse cx='248' cy='352' rx='2' ry='1.5'/%3E%3Cellipse cx='198' cy='368' rx='2.5' ry='2'/%3E%3Cellipse cx='1180' cy='720' rx='3' ry='2'/%3E%3Cellipse cx='1210' cy='738' rx='2' ry='1.8'/%3E%3Cellipse cx='1155' cy='755' rx='2.2' ry='1.6'/%3E%3Cellipse cx='520' cy='980' rx='2.8' ry='2'/%3E%3Cellipse cx='548' cy='998' rx='1.8' ry='1.4'/%3E%3Cellipse cx='1380' cy='180' rx='2.5' ry='2'/%3E%3Cellipse cx='1405' cy='198' rx='1.6' ry='1.2'/%3E%3C/g%3E%3Cg opacity='0.14' fill='none' stroke='%23a89878' stroke-width='0.6'%3E%3Cpath d='M320 520 Q380 500 440 520'/%3E%3Cpath d='M1120 380 Q1180 360 1240 378'/%3E%3C/g%3E%3Cg opacity='0.1' fill='%23c4a882'%3E%3Cellipse cx='420' cy='220' rx='95' ry='72'/%3E%3Cellipse cx='1080' cy='920' rx='110' ry='85'/%3E%3Cellipse cx='780' cy='640' rx='70' ry='55'/%3E%3C/g%3E%3Cg opacity='0.08' fill='%236b5a42'%3E%3Cpath d='M0 0 L1600 0 L1600 120 L0 180 Z'/%3E%3Cpath d='M0 1080 L1600 1200 L1600 1200 L0 1200 Z'/%3E%3C/g%3E%3Crect width='1600' height='1200' fill='white' filter='url(%23grain)' opacity='0.55' style='mix-blend-mode:multiply'/%3E%3C/svg%3E") center / cover no-repeat,
    /* corner age darkening */
    radial-gradient(ellipse 55% 45% at 0% 100%, color-mix(in oklch, oklch(45% 0.04 70) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 0%, color-mix(in oklch, oklch(50% 0.035 75) 10%, transparent), transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 50%, transparent 40%, color-mix(in oklch, oklch(75% 0.02 80) 8%, transparent) 100%);
}

/* fiber edges on torn scraps + edge vignette (no lines/grid) */
.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  mix-blend-mode: multiply;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.1' numOctaves='2' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23faf6ec' stroke-width='2' opacity='0.35' filter='url(%23w)'%3E%3Cpath d='M-40 140 L18 112 L64 128 L118 104 L172 122 L228 98'/%3E%3Cpath d='M1040 560 L1098 536 L1162 552 L1226 528'/%3E%3Cpath d='M660 -60 L718 8 L784 -14 L848 18'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 35%, color-mix(in oklch, oklch(55% 0.03 75) 6%, transparent) 100%);
}

/* paper fiber grain */
body::before {
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px, 140px 140px;
}

.session-body html::after {
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23c9a85a' opacity='0.15'%3E%3Ccircle cx='40' cy='30' r='1.2'/%3E%3Ccircle cx='120' cy='80' r='0.9'/%3E%3Ccircle cx='160' cy='140' r='1'/%3E%3Ccircle cx='70' cy='170' r='0.8'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 80% 60% at 50% 30%, oklch(25% 0.02 80), transparent 65%);
  background-size: 120px 120px, cover;
}

/* ── Dark aged paper (runway) ── */
.session-body .app-shell::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 100% 75% at 50% 35%, oklch(18% 0.012 85), oklch(10% 0.014 80) 60%, oklch(6% 0.01 75) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cfilter id='dg' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.38'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='dt' x='-12%25' y='-12%25' width='124%25' height='124%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.048' numOctaves='4' seed='21'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='18'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.45' filter='url(%23dt)'%3E%3Cpath d='M20 160 L78 136 L142 152 L206 128 L270 148 L334 124 L398 144 L462 120 L518 148 L534 212 L526 278 L540 344 L524 410 L532 474 L510 518 L454 504 L398 520 L342 498 L286 516 L230 494 L174 514 L118 492 L62 514 L46 454 L60 390 L48 326 L62 262 L48 198 Z' fill='%23181814'/%3E%3Cpath d='M990 500 L1048 476 L1112 492 L1176 468 L1240 488 L1304 464 L1368 484 L1432 460 L1480 500 L1494 564 L1486 630 L1500 696 L1484 762 L1492 826 L1472 870 L1416 856 L1360 872 L1304 850 L1248 868 L1192 846 L1136 866 L1080 844 L1024 866 L1008 806 L1022 742 L1010 678 L1024 614 L1010 550 Z' fill='%231c1a16'/%3E%3C/g%3E%3Cg opacity='0.12' fill='%234a4540'%3E%3Cellipse cx='400' cy='300' rx='80' ry='60'/%3E%3Cellipse cx='1200' cy='850' rx='100' ry='75'/%3E%3C/g%3E%3Cg fill='none' stroke='%235a5550' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M200 400 Q260 380 320 410'/%3E%3Cpath d='M1100 600 Q1160 580 1220 610'/%3E%3C/g%3E%3Crect width='1600' height='1200' fill='white' filter='url(%23dg)' opacity='0.45' style='mix-blend-mode:soft-light'/%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(ellipse 55% 40% at 50% 0%, color-mix(in oklch, var(--pencil) 4%, transparent), transparent 55%);
}

.session-body .app-shell::after {
  mix-blend-mode: soft-light;
  opacity: 0.85;
  background:
    radial-gradient(ellipse 88% 72% at 50% 48%, transparent 28%, color-mix(in oklch, var(--ink) 45%, transparent) 100%);
}

.session-body::before {
  opacity: 0.1;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: no-preference) {
  .app-shell::before {
    animation: paper-drift 70s ease-in-out infinite alternate;
  }
}

@keyframes paper-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-0.4%, 0.3%) scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell::before {
    animation: none;
  }
}

/* When images are on screen, stop animated textures and hide blur panels —
   scrolling + large images forces the GPU to re-composite fixed layers. */
html.has-images::before,
html.has-images::after,
html.has-images body::before,
html.has-images .app-shell::before,
html.has-images .app-shell::after {
  animation: none !important;
}
html.has-images .app-shell .bg-frost {
  display: none;
}

/* Mobile: remove decorative fixed layers entirely. Chrome/Android can lose
   track of fixed-layer paint order (content half-renders or vanishes on
   scroll) even when blend modes and animations are disabled. */
@media (max-width: 768px) {
  html::before,
  html::after,
  body::before,
  .app-shell::before,
  .app-shell::after,
  .session-body html::after,
  .session-body .app-shell::before,
  .session-body .app-shell::after,
  .session-body::before,
  .app-shell .bg-frost {
    display: none !important;
  }
}