/* ═══════════════════════════════════════════════════════
   FAUX OS V2.1 - Chaos Engine (visual effects & overlays)
   ─────────────────────────────────────────────────────
   NOTE: This file intentionally overrides selectors from
   components.css, kernel.css, shell.css, and textures.css
   to layer "chaos mode" glitch aesthetics on top of the
   base UI. It must load AFTER those files (see index.html
   load order). Overridden selectors include: .card, .pill,
   .desktop-folder, .dock, .statusbar, .navbar-mobile,
   .texture--dither, .texture--vignette, and others.
   ═══════════════════════════════════════════════════════ */

/* ── Crosshair Cursor ── */
body { cursor: crosshair; }
a, button, [data-open], .dock__item, .app-icon, .desktop-folder,
.navbar-mobile__btn, .window__btn-close, select, input, textarea {
  cursor: pointer;
}
.window__titlebar { cursor: grab; }
.window__titlebar:active { cursor: grabbing; }

/* ── Selection: red bloc ── */
::selection {
  background: var(--accent);
  color: var(--c-black);
}

/* ── Scrollbar: thin, industrial ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-slate); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ═══════════════════════════════════════════════════════
   DIAGONAL ACCENT BAND
   Accent diagonal stripe.
   ═══════════════════════════════════════════════════════ */
.diagonal-band {
  position: fixed;
  top: -20%;
  right: -5%;
  width: 1px;
  height: 160%;
  background: var(--accent);
  opacity: 0.06;
  transform: rotate(-35deg);
  transform-origin: top right;
  pointer-events: none;
  z-index: 3;
}

.diagonal-band--2 {
  right: 12%;
  opacity: 0.03;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ═══════════════════════════════════════════════════════
   STAR MOTIF - ★
   Decorative star marks
   ═══════════════════════════════════════════════════════ */
.star-mark {
  color: var(--accent);
  font-size: 8px;
  opacity: 0.4;
  user-select: none;
  display: inline-block;
}

.star-mark--float {
  position: absolute;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   GLITCH TEXT - chromatic split on hover
   ═══════════════════════════════════════════════════════ */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
}

.glitch:hover::before {
  opacity: 0.7;
  color: var(--accent);
  animation: glitch-1 0.25s steps(2) both infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch:hover::after {
  opacity: 0.7;
  color: #00fff9;
  animation: glitch-2 0.25s steps(2) reverse both infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
  0%   { transform: translate(0); }
  25%  { transform: translate(-3px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, 2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { transform: translate(0); }
  25%  { transform: translate(2px, -1px); }
  50%  { transform: translate(-2px, 1px); }
  75%  { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

/* ═══════════════════════════════════════════════════════
   BOOT SEQUENCE SCREEN - the terminal revelation
   ═══════════════════════════════════════════════════════ */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: var(--c-black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-6) var(--sp-8);
  padding-bottom: calc(env(safe-area-inset-bottom, 12px) + 36px);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--c-ash);
  overflow: hidden;
  transition: opacity 0.8s var(--ease-out);
}

.boot-screen.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot-screen__lines {
  max-height: 60vh;
  overflow: hidden;
}

.boot-screen__line {
  white-space: pre;
  opacity: 0;
  animation: boot-line-in 0.05s ease-out forwards;
}

.boot-screen__line--ok { color: var(--accent); }
.boot-screen__line--sys { color: var(--c-silver); }
.boot-screen__line--brand {
  color: var(--c-white);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-top: var(--sp-3);
}

@keyframes boot-line-in {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════
   AMBIENT BACKGROUND - slow breathing gradient mesh
   ═══════════════════════════════════════════════════════ */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-mesh__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.035;
  will-change: transform;
}

.bg-mesh__orb--1 {
  width: 55vmax; height: 55vmax;
  top: -20%; right: -10%;
  background: var(--accent);
  animation: orb-1 28s ease-in-out infinite alternate;
}

.bg-mesh__orb--2 {
  width: 40vmax; height: 40vmax;
  bottom: -15%; left: -8%;
  background: var(--c-white);
  animation: orb-2 34s ease-in-out infinite alternate;
}

.bg-mesh__orb--3 {
  width: 25vmax; height: 25vmax;
  top: 35%; left: 45%;
  background: var(--accent);
  opacity: 0.02;
  animation: orb-3 22s ease-in-out infinite alternate;
}

@keyframes orb-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-6vw, 10vh) scale(1.1); }
  100% { transform: translate(3vw, -5vh) scale(0.95); }
}
@keyframes orb-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, -12vh) scale(1.12); }
}
@keyframes orb-3 {
  0%   { transform: translate(0, 0) rotate(0); }
  100% { transform: translate(-12vw, -8vh) rotate(30deg); }
}

/* ═══════════════════════════════════════════════════════
   WINDOW ANIMATIONS - moved to upgrades.css
   (spring-bounce open, minimize, restore, snap)
   ═══════════════════════════════════════════════════════ */
.window.is-closing {
  animation: win-close 0.2s var(--ease-smooth) forwards;
}

@keyframes win-close {
  to {
    opacity: 0;
    scale: 0.95;
  }
}

/* ═══════════════════════════════════════════════════════
   DOCK PROXIMITY SCALING (managed by JS)
   ═══════════════════════════════════════════════════════ */
.dock__item {
  transform-origin: bottom center;
  transition: transform 0.18s var(--ease-spring),
              background var(--dur-fast),
              filter var(--dur-fast);
}

.dock__item:hover {
  transform: translateY(-6px) scale(1.15);
  background: var(--bg-raised);
}

.dock__item:hover .dock__glyph {
  filter: drop-shadow(0 0 6px rgba(232, 93, 48, 0.4));
}

.dock__item.dock-near {
  transform: translateY(-4px) scale(1.1);
}

/* ═══════════════════════════════════════════════════════
   STAMP - decorative rubber stamp effect
   ═══════════════════════════════════════════════════════ */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
  opacity: 0.55;
  user-select: none;
}

.stamp::before {
  content: '★';
  font-size: 7px;
}

/* ═══════════════════════════════════════════════════════
   BRUTALIST CARD VARIANT
   Hard edges. No mercy. No border-radius.
   ═══════════════════════════════════════════════════════ */
.card--brutal {
  background: transparent;
  border: 2px solid var(--c-white);
  border-radius: 0;
  position: relative;
}

.card--brutal::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  right: -3px; bottom: -3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: -1;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   GLITCH EFFECTS
   ═══════════════════════════════════════════════════════ */
.chaos-rotate--cw  { transform: rotate(1.5deg); }
.chaos-rotate--ccw { transform: rotate(-1.2deg); }

.tape-strip {
  position: relative;
}

.tape-strip::before {
  content: '';
  position: absolute;
  top: -5px; left: 14px;
  width: 44px; height: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transform: rotate(-2deg);
  border-radius: 1px;
  pointer-events: none;
}

/* Marker underline - hand-drawn accent */
.marker-line {
  position: relative;
  display: inline;
}

.marker-line::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -3px; right: -3px;
  height: 6px;
  background: var(--accent);
  opacity: 0.12;
  border-radius: 1px;
  transform: rotate(-0.5deg) scaleY(0.6);
  z-index: -1;
}

/* ═══════════════════════════════════════════════════════
   WELCOME OVERLAY
   ═══════════════════════════════════════════════════════ */
.welcome-overlay {
  background: var(--bg);
  overflow: hidden;
}

/* Constructivist diagonal accent line */
.welcome-overlay::before {
  content: '';
  position: absolute;
  width: 200vmax;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  top: 40%;
  left: -50%;
  opacity: 0.25;
  animation: streak-h 5s ease-in-out infinite;
  pointer-events: none;
  transform: rotate(-8deg);
}

.welcome-overlay::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 150vh;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  left: 35%;
  top: -25%;
  pointer-events: none;
}

@keyframes streak-h {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.25; }
}

/* Enter button - rotating conic glow on hover */
.welcome__enter {
  position: relative;
  overflow: hidden;
}

.welcome__enter::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg, transparent, var(--accent), transparent, transparent);
  opacity: 0;
  border-radius: inherit;
  z-index: -1;
  transition: opacity 0.3s;
  animation: rotate-glow 4s linear infinite;
}

.welcome__enter:hover::before {
  opacity: 0.35;
}

@keyframes rotate-glow {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   FLOATING PARTICLES CANVAS
   ═══════════════════════════════════════════════════════ */
#fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
}

/* ═══════════════════════════════════════════════════════
   DESKTOP FOLDER - jitter on hover
   ═══════════════════════════════════════════════════════ */
.desktop-folder:hover .desktop-folder__icon {
  animation: icon-jitter 0.25s ease-in-out;
  filter: grayscale(0) brightness(1.4);
}

@keyframes icon-jitter {
  0%, 100% { transform: translate(0) rotate(0); }
  33%      { transform: translate(-1px, 1px) rotate(-2deg); }
  66%      { transform: translate(1px, -1px) rotate(2deg); }
}

/* ═══════════════════════════════════════════════════════
   PILL TAGS - wobble on hover
   ═══════════════════════════════════════════════════════ */
.pill {
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast),
              color var(--dur-fast);
}

.pill:hover {
  border-color: var(--accent);
  border-style: solid;
  transform: rotate(-1.5deg) scale(1.04);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   MENUBAR BRAND - glitch on hover
   ═══════════════════════════════════════════════════════ */
.menubar__brand {
  transition: color var(--dur-fast), text-shadow var(--dur-fast), letter-spacing 0.3s;
}

.menubar__brand:hover {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(232, 93, 48, 0.25);
  letter-spacing: 0.2em;
}

/* ═══════════════════════════════════════════════════════
   MOBILE APP ICON - accent flash on press
   ═══════════════════════════════════════════════════════ */
.app-icon__glyph {
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast),
              box-shadow var(--dur-fast);
}

.app-icon:active .app-icon__glyph {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(232, 93, 48, 0.12);
}

/* ═══════════════════════════════════════════════════════
   LOCKSCREEN
   ═══════════════════════════════════════════════════════ */
.lockscreen__time {
  background: linear-gradient(180deg, var(--c-white) 30%, var(--c-ash));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.04));
}

/* ═══════════════════════════════════════════════════════
   ACCENT STREAKS (desktop)
   ═══════════════════════════════════════════════════════ */
.accent-streak {
  position: absolute;
  height: 1px;
  background: var(--accent);
  opacity: 0.06;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   BODY LOAD - boot-active suppresses fade-in
   ═══════════════════════════════════════════════════════ */
body {
  opacity: 1;
}

body.boot-active .kernel,
body.boot-active .shell,
body.boot-active .bg-mesh,
body.boot-active .texture,
body.boot-active .diagonal-band,
body.boot-active #fx-canvas {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

body.boot-active .boot-screen {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   CHAOS MODE EASTER EGG (Konami etc.)
   ═══════════════════════════════════════════════════════ */
body.chaos-mode {
  --grain-opacity: 0.22;
  --scanline-opacity: 0.14;
}

body.chaos-mode .texture--grain { animation-duration: 0.4s; }

/* ═══════════════════════════════════════════════════════
   BORDER ACCENTS
   Mixed sharp + rounded corners
   ═══════════════════════════════════════════════════════ */
.border-construct {
  border-left: 2px solid var(--accent);
  padding-left: var(--sp-3);
}

/* Red corner accent */
.corner-accent {
  position: relative;
}

.corner-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 16px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: 0.35;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   3. CONSTRUCTIVIST DESIGN LANGUAGE
   Corner brackets on windows, dock, cards — Soviet poster DNA
   ═══════════════════════════════════════════════════════ */

/* Window: top-left + bottom-right bracket marks */
.window::before,
.window::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
  transition: opacity 0.3s;
}
.window::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-lg) 0 0 0;
}
.window::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 0 0 var(--r-lg) 0;
}
.window.is-focused::before,
.window.is-focused::after {
  opacity: 0.6;
}

/* Dock: bracket accents top-left / bottom-right */
.dock::before,
.dock::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.25;
}
.dock::before {
  top: -1px; left: var(--sp-2);
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-xl) 0 0 0;
}
.dock::after {
  bottom: -1px; right: var(--sp-2);
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  border-radius: 0 0 var(--r-xl) 0;
}

/* Card: subtle corner mark (top-left only) */
.card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 12px; height: 12px;
  border-top: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
  border-radius: var(--r-lg) 0 0 0;
  opacity: 0.2;
  pointer-events: none;
}
.card { position: relative; }

/* Menubar: right-side constructivist crosshair mark */
.menubar::before {
  content: '+';
  position: absolute;
  right: var(--sp-16);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
  opacity: 0.12;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   5. TAPE-STRIPS & STICKER ÄSTHETIK
   Rotated labels, washi-tape decorations
   ═══════════════════════════════════════════════════════ */

/* Tape strip - enhanced with translucent fill */
.tape-strip::before {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  width: 55px; height: 12px;
  transform: rotate(-3deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Sticker label - rotated pixel tag */
.sticker {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent);
  color: var(--c-black);
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  user-select: none;
  position: relative;
}

.sticker--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: none;
  opacity: 0.5;
}

/* Washi tape decoration for desktop folders */
.desktop-folder::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 28px; height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.desktop-folder { position: relative; }
.desktop-folder:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   6. MUTIGERE TYPOGRAFIE-KONTRASTE
   Dramatic size mixing, pixel headlines
   ═══════════════════════════════════════════════════════ */

.type-hero {
  font-family: var(--font-pixel);
  font-size: var(--fs-hero);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.type-mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
}

.type-micro {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.4;
}

/* Welcome title: dramatic scale */
.welcome__title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 10vw, var(--fs-hero)) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

/* Welcome pixel tag: bigger, more presence */
.welcome__pixel-tag {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  border: 1px solid var(--accent);
  padding: 4px 14px;
  margin-bottom: var(--sp-6) !important;
}

/* ═══════════════════════════════════════════════════════
   7. MICRO-INTERACTIONS
   Dock tilt, breathing focus ring, spring physics
   ═══════════════════════════════════════════════════════ */

/* Dock items: tilt + scale with spring on hover */
.dock__item {
  transition: transform 0.25s var(--ease-spring),
              background var(--dur-fast),
              filter var(--dur-fast),
              box-shadow 0.3s;
}

.dock__item:hover {
  transform: translateY(-6px) scale(1.15) rotate(-1.5deg) !important;
  border-color: var(--accent);
}

.dock__item:nth-child(even):hover {
  transform: translateY(-6px) scale(1.15) rotate(1.5deg) !important;
}

/* Breathing glow on focused window — :not(.is-closing) so close anim works.
   Uses transition instead of animation so de-focus doesn't cause a visual
   "pop" when the animation stops mid-cycle. */
.window.is-active {
  transition: box-shadow 0.4s var(--ease-smooth);
}

.window.is-focused:not(.is-closing) {
  box-shadow: var(--shadow-win), 0 0 0 1.5px rgba(232, 93, 48, 0.15);
}

/* App icon: spring bounce on press */
.app-icon:active {
  animation: icon-bounce 0.3s var(--ease-spring);
}

@keyframes icon-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.82); }
  70%  { transform: scale(1.05); }
  100% { transform: scale(0.88); }
}

/* Desktop folder icons: slow float on idle */
.desktop-folder__icon {
  animation: icon-float 6s ease-in-out infinite;
}

.desktop-folder:nth-child(2) .desktop-folder__icon { animation-delay: -1.5s; }
.desktop-folder:nth-child(3) .desktop-folder__icon { animation-delay: -3s; }
.desktop-folder:nth-child(4) .desktop-folder__icon { animation-delay: -4.5s; }

@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ═══════════════════════════════════════════════════════
   8. "LIVING" UI-ELEMENTE
   Blinking REC, pulsing dots, rotating star in menubar
   ═══════════════════════════════════════════════════════ */

/* REC indicator in statusbar */
.rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.6;
}

.rec-indicator::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: rec-blink 1.2s ease-in-out infinite;
}

@keyframes rec-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

/* Pulsing dot — used as decoration */
.pulse-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot-anim 2s ease-in-out infinite;
  display: inline-block;
}

.pulse-dot--slow { animation-duration: 3.5s; }
.pulse-dot--fast { animation-duration: 1s; }

@keyframes pulse-dot-anim {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.5); }
}

/* Rotating star in menubar brand */
.menubar__brand .star-mark {
  animation: star-rotate 12s linear infinite;
  display: inline-block;
}

@keyframes star-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Dock separator line — pulsing accent */
.dock__sep {
  width: 1px;
  height: 28px;
  background: var(--accent);
  opacity: 0.15;
  animation: sep-pulse 3s ease-in-out infinite;
  align-self: center;
}

@keyframes sep-pulse {
  0%, 100% { opacity: 0.08; height: 28px; }
  50%      { opacity: 0.3; height: 34px; }
}

/* Menubar clock: subtle blink on colon */
.menubar__clock {
  animation: clock-tick 2s steps(1) infinite;
}

@keyframes clock-tick {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* Mobile statusbar: living dot after AS brand */
.statusbar__left::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: rec-blink 1.8s ease-in-out infinite;
  margin-left: 6px;
}

/* Games callout arrow: bobbing */
.desktop-games-callout__arrow {
  animation: arrow-bob 2s ease-in-out infinite;
}

@keyframes arrow-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

/* ═══════════════════════════════════════════════════════
   PRINT-PROOF CROP MARKS
   Like a pre-press proof sheet — "this design wasn't
   meant to leave the studio"
   ═══════════════════════════════════════════════════════ */
.crop-marks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.crop-mark {
  position: absolute;
  width: 24px;
  height: 24px;
}

.crop-mark::before,
.crop-mark::after {
  content: '';
  position: absolute;
  background: var(--c-white);
  opacity: 0.12;
}

/* Horizontal + vertical hairlines */
.crop-mark::before {
  width: 24px; height: 1px;
  top: 50%; left: 0;
}
.crop-mark::after {
  width: 1px; height: 24px;
  left: 50%; top: 0;
}

.crop-mark--tl { top: 12px; left: 12px; }
.crop-mark--tr { top: 12px; right: 12px; }
.crop-mark--bl { bottom: 12px; left: 12px; }
.crop-mark--br { bottom: 12px; right: 12px; }

/* Tiny coordinate labels next to crop marks */
.crop-mark--tl::after { content: ''; }
.crop-mark--br::after { content: ''; }

/* ═══════════════════════════════════════════════════════
   MARGINALIA — Vertical running text at screen edges
   Like a film strip or the margin notes on a proof
   ═══════════════════════════════════════════════════════ */
.marginalia {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-white);
  opacity: 0.06;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  writing-mode: vertical-rl;
  user-select: none;
}

.marginalia--left {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.marginalia--right {
  right: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

/* Mobile: hide right marginalia, left stays */
@media (max-width: 768px) {
  .marginalia--right { display: none; }
  .marginalia--left { opacity: 0.04; font-size: 7px; left: 3px; }
}

/* ═══════════════════════════════════════════════════════
   OVERSIZED DEKO-GLYPHEN
   Massive typographic elements bleeding off screen
   — the "editorial design" move
   ═══════════════════════════════════════════════════════ */
.deko-glyph {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  opacity: 0.025;
  color: var(--c-white);
  line-height: 1;
}

.deko-glyph--star {
  font-family: var(--font-display);
  font-size: clamp(15rem, 30vw, 28rem);
  font-weight: 700;
  bottom: -8%;
  right: -4%;
  color: var(--accent);
  opacity: 0.018;
}

.deko-glyph--num {
  font-family: var(--font-pixel);
  font-size: clamp(8rem, 20vw, 18rem);
  top: 8%;
  left: -2%;
  letter-spacing: -0.08em;
  opacity: 0.022;
}

.deko-glyph--slash {
  font-family: var(--font-mono);
  font-size: clamp(12rem, 25vw, 22rem);
  font-weight: 700;
  top: 35%;
  right: 3%;
  transform: rotate(12deg);
  opacity: 0.015;
}

@media (max-width: 768px) {
  .deko-glyph--num { display: none; }
  .deko-glyph--slash { display: none; }
  .deko-glyph--star { font-size: 40vw; bottom: -5%; right: -8%; }
}

/* ═══════════════════════════════════════════════════════
   VISIBLE COORDINATE SYSTEM
   Tiny position labels on workspace — drafting table feel
   ═══════════════════════════════════════════════════════ */
.workspace::before {
  content: 'x:0 y:0';
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--accent);
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  letter-spacing: 0.08em;
}

.workspace::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 120px 120px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   COLLAGE / CUT-OUT ÄSTHETIK
   Elements that look physically placed, not digitally rendered
   ═══════════════════════════════════════════════════════ */

/* Window titlebar: visible "cut line" — double border */
.window__titlebar {
  border-bottom: 2px solid var(--border-strong) !important;
  border-left: 3px solid var(--accent) !important;
}

/* Window close button: raw, confrontational */
.window__btn-close {
  border-radius: 0 !important;
  border: 2px solid var(--c-white) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.window__btn-close:hover {
  background: var(--c-white) !important;
  color: var(--c-black) !important;
  border-color: var(--c-white) !important;
}

/* Dock: cut-out paper strip look */
.dock {
  border-radius: 0 !important;
  border: 2px solid var(--border-strong) !important;
  border-top: 3px solid var(--accent) !important;
}

/* Menubar: red accent stripe across full width */
.menubar::after {
  width: 100% !important;
  height: 2px !important;
  background: var(--accent) !important;
  opacity: 0.25 !important;
  bottom: -2px !important;
}

/* Dock items: some deliberately rotated (collage effect) */
.dock__item:nth-child(2) { transform: rotate(-0.8deg); }
.dock__item:nth-child(4) { transform: rotate(0.6deg); }
.dock__item:nth-child(6) { transform: rotate(-0.5deg); }

/* Desktop folders: staggered, not perfectly aligned */
.desktop-folders {
  gap: var(--sp-1) !important;
}
.desktop-folder:nth-child(2) { transform: translateX(6px); }
.desktop-folder:nth-child(3) { transform: translateX(-4px); }

/* ═══════════════════════════════════════════════════════
   WELCOME SCREEN — EDITORIAL POSTER LAYOUT
   Not centered. Not balanced. Not apologetic.
   ═══════════════════════════════════════════════════════ */

/* Override the centered layout to left-aligned editorial */
.welcome-overlay {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: var(--sp-10) var(--sp-8) var(--sp-16) !important;
  text-align: left !important;
}

/* Title: absurdly large, runs off-screen */
.welcome__title {
  font-size: clamp(3.5rem, 14vw, 8rem) !important;
  letter-spacing: -0.06em !important;
  line-height: 0.85 !important;
  max-width: none !important;
  margin-left: -4px !important;
}

/* Subtitle: pushed away from title, monospace, small */
.welcome__subtitle {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  max-width: 320px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.7 !important;
  opacity: 0.5 !important;
  margin-top: var(--sp-6) !important;
}

/* Tag: absolute positioned, rotated */
.welcome__pixel-tag {
  position: relative !important;
  transform: rotate(-2deg) !important;
  align-self: flex-start !important;
  border: 2px solid var(--accent) !important;
}

/* Enter button: brutalist, not rounded */
.welcome__enter {
  align-self: flex-start !important;
  border-radius: 0 !important;
  padding: var(--sp-3) var(--sp-10) !important;
  border: 2px solid var(--ink) !important;
  margin-top: var(--sp-4) !important;
}

/* Hints: left-aligned, mono */
.welcome__hints {
  align-self: flex-start !important;
}

/* Large version number in background of welcome */
.welcome-overlay::after {
  content: 'V2.1' !important;
  position: absolute !important;
  top: 5% !important;
  right: -5% !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--font-pixel) !important;
  font-size: clamp(10rem, 35vw, 22rem) !important;
  font-weight: 700 !important;
  color: var(--c-white) !important;
  opacity: 0.02 !important;
  line-height: 1 !important;
  pointer-events: none !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE SHELL — ZINE CHARACTER
   ═══════════════════════════════════════════════════════ */

/* App grid: slightly off-grid, handmade feel */
.app-icon:nth-child(3n+1) .app-icon__glyph {
  transform: rotate(-1deg);
}
.app-icon:nth-child(3n+2) .app-icon__glyph {
  transform: rotate(0.8deg);
}

/* Statusbar: red accent line underneath */
.statusbar {
  border-bottom: 2px solid var(--accent);
  border-bottom-style: dashed;
  opacity: 1;
}

/* Mobile navbar: hard top edge, accent mark */
.navbar-mobile {
  border-top: 3px solid var(--accent) !important;
  border-top-style: solid !important;
}

/* ═══════════════════════════════════════════════════════
   LOCKSCREEN — TYPOGRAPHIC STATEMENT
   ═══════════════════════════════════════════════════════ */
.lockscreen__time {
  font-weight: 100 !important;
  letter-spacing: -0.08em !important;
  opacity: 0.85 !important;
}

.lockscreen__brand {
  border: 1px dashed var(--accent);
  padding: 3px 10px;
  border-radius: 0;
  opacity: 0.4;
}

/* Lockscreen: registration mark feel */
.lockscreen::before {
  content: '+';
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-white);
  opacity: 0.08;
  pointer-events: none;
}

.lockscreen::after {
  content: '★ FAUX OS';
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: clamp(3rem, 20vw, 6rem);
  color: var(--c-white);
  opacity: 0.015;
  pointer-events: none;
  white-space: nowrap;
}